Множество

Чтобы приступить к созданию расширения, вам сначала понадобится каталог с файлами, которые варьируются от исходного кода расширения до необходимых файлов, специфичных для расширения. На этой странице представлена информация о том, как настроить простое расширение Docker, содержащее только часть пользовательского интерфейса.

Примечание

Прежде чем начать, убедиться, что у вас установлена последняя версия Docker Desktop.

Структура папки расширения

Самый быстрый способ создать новое расширение — выполнить docker extension init my-extension, как в версии Быстрый старт. Это создаст новый каталог my-extension, содержащий полнофункциональное расширение.

Примечание

docker extension init генерирует расширение на основе React. Но вы все равно можете использовать его в качестве отправной точки для своего собственного расширения и использовать любой другой интерфейсный фреймворк, такой как Vue, Angular, Svelte и т. д., или остаться с ванильным Javascript.

Хотя вы можете начать с пустого каталога или с папка образца расширения реакции, настоятельно рекомендуется начать с команды docker extension init и изменяет её в соответствии с вашими потребностями.

.
├── Dockerfile # (1)
├── ui # (2)   ├── public # (3)      └── index.html
│   ├── src # (4)      ├── App.tsx
│      ├── index.tsx
│   ├── package.json
│   └── package-lock.lock
│   ├── tsconfig.json
├── docker.svg # (5)
└── metadata.json # (6)
  1. Содержит все необходимое для создания расширения и его запуска в Docker Desktop.

  2. Папка высокого уровня, содержащая исходный код внешнего интерфейса.

  3. Активы, которые не скомпилированы или не сгенерированы динамически, хранятся здесь. Это могут быть статические ресурсы, такие как логотипы или файл robots.txt.

  4. Папка src, или исходная папка, содержит все компоненты React, внешние файлы CSS и динамические ресурсы, которые перенесены в файлы компонентов.

  5. Значок, который отображается в левом меню панели инструментов Docker Desktop.

  6. Файл, содержащий информацию о расширении, такую как имя, описание и версия.

Адаптация Dockerfile

Примечание

При использовании docker extension init создаётся Dockerfile, который уже содержит то, что необходимо для расширения React.

После создания расширения необходимо настроить Dockerfile для создания расширения и настроить метки, которые используются для заполнения карты расширения в Marketplace. Вот пример Dockerfile для расширения React:

Для реакции

FROM --platform=$BUILDPLATFORM node:18.9-alpine3.15 AS client-builder
WORKDIR /ui
# cache packages in layer
COPY ui/package.json /ui/package.json
COPY ui/package-lock.json /ui/package-lock.json
RUN --mount=type=cache,target=/usr/src/app/.npm \
    npm set cache /usr/src/app/.npm && \
    npm ci
# install
COPY ui /ui
RUN npm run build

FROM alpine
LABEL org.opencontainers.image.title="My extension" \
    org.opencontainers.image.description="Your Desktop Extension Description" \
    org.opencontainers.image.vendor="Awesome Inc." \
    com.docker.desktop.extension.api.version="0.3.0" \
    com.docker.desktop.extension.icon="https://www.docker.com/wp-content/uploads/2022/03/Moby-logo.png"
    com.docker.extension.screenshots="" \
    com.docker.extension.detailed-description="" \
    com.docker.extension.publisher-url="" \
    com.docker.extension.additional-urls="" \
    com.docker.extension.changelog=""

COPY metadata.json .
COPY docker.svg .
COPY --from=client-builder /ui/build ui

Для Вью

Важно

У нас пока нет рабочего Dockerfile для Vue. Заполнить форму и сообщить нам, что вам нужен файл Dockerfile для Vue.

Для углового

Важно

У нас пока нет рабочего Dockerfile для Angular. Заполнить форму и сообщить нам, что вам нужен Dockerfile для Angular.

Для стройного

Важно

У нас пока нет рабочего Dockerfile для Svelte. Заполнить форму и сообщить нам, что вам нужен Dockerfile для Svelte.

Настраивает файл метаданных

Файл metadata.json требуется в корне каталога вашего расширения.

{
  "icon": "docker.svg",
  "ui": {
    "dashboard-tab": {
      "title": "UI Extension",
      "root": "/ui",
      "src": "index.html"
    }
  }
}

Используйте клиент API расширений

Чтобы использовать API расширений и выполнять действия с Docker Desktop, расширение должно сначала импортирует библиотеку @docker/extension-api-client. Чтобы установить его, выполняет команду далее:

npm install @docker/extension-api-client

Затем вызвать функцию createDockerDesktopClient, чтобы создать клиентский объект для вызова API расширений.

import { createDockerDesktopClient } from '@docker/extension-api-client';

const ddClient = createDockerDesktopClient();

При использовании Typescript вы также можете установить @docker/extension-api-client-types в качестве зависимости от разработчиков. Это предоставит вам определения типов для API-интерфейсов расширений и автодополнения в вашей среде IDE.

npm install @docker/extension-api-client-types --save-dev
types auto complete

Например, вы можете использовать функцию docker.cli.exec, чтобы получает список всех контейнеров с помощью команды docker ps --all и отобразить результат в таблице.

Реагировать

Заменяет файл ui/src/App.tsx следующим кодом:

// ui/src/App.tsx
import React, { useEffect } from 'react';
import {
  Paper,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography
} from "@mui/material";
import { createDockerDesktopClient } from "@docker/extension-api-client";

//obtain docker destkop extension client
const ddClient = createDockerDesktopClient();

export function App() {
  const [containers, setContainers] = React.useState([]);

  useEffect(() => {
    // List all containers
    ddClient.docker.cli.exec('ps', ['--all', '--format', '"{{json .}}"']).then((result) => {
      // result.parseJsonLines() parses the output of the command into an array of objects
      setContainers(result.parseJsonLines());
    });
  }, []);

  return (
    <Stack>
      <Typography data-testid="heading" variant="h3" role="title">
        Container list
      </Typography>
      <Typography
      data-testid="subheading"
      variant="body1"
      color="text.secondary"
      sx={{ mt: 2 }}
    >
      Simple list of containers using Docker Extensions SDK.
      </Typography>
      <TableContainer sx={{mt:2}}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Container id</TableCell>
              <TableCell>Image</TableCell>
              <TableCell>Command</TableCell>
              <TableCell>Created</TableCell>
              <TableCell>Status</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {containers.map((container) => (
              <TableRow
                key={container.ID}
                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
              >
                <TableCell>{container.ID}</TableCell>
                <TableCell>{container.Image}</TableCell>
                <TableCell>{container.Command}</TableCell>
                <TableCell>{container.CreatedAt}</TableCell>
                <TableCell>{container.Status}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Stack>
  );
}

Вью

Важно

У нас пока нет примера для Vue. Заполнить форму и сообщить нам, что вам нужен образец с Vue.

Угловой

Важно

У нас пока нет примера для Angular. Заполнить форму и сообщить нам, что вам нужен образец с Angular.

Стройный

Важно

У нас пока нет примера для Svelte. Заполнить форму и сообщить нам, что вам нужен образец со Svelte.

Screenshot of the container list.

Что дальше?