diff --git a/.github/images/demo1.png b/.github/images/demo1.png new file mode 100644 index 0000000..c5a59ad Binary files /dev/null and b/.github/images/demo1.png differ diff --git a/.github/images/demo2.png b/.github/images/demo2.png new file mode 100644 index 0000000..00fb301 Binary files /dev/null and b/.github/images/demo2.png differ diff --git a/.github/images/demo3.png b/.github/images/demo3.png new file mode 100644 index 0000000..730be7c Binary files /dev/null and b/.github/images/demo3.png differ diff --git a/.github/images/demo4.png b/.github/images/demo4.png new file mode 100644 index 0000000..b0f24be Binary files /dev/null and b/.github/images/demo4.png differ diff --git a/.github/images/demo5.png b/.github/images/demo5.png new file mode 100644 index 0000000..b2697a9 Binary files /dev/null and b/.github/images/demo5.png differ diff --git a/.github/images/demo6.png b/.github/images/demo6.png new file mode 100644 index 0000000..5855456 Binary files /dev/null and b/.github/images/demo6.png differ diff --git a/.github/images/demo7.png b/.github/images/demo7.png new file mode 100644 index 0000000..3d2df73 Binary files /dev/null and b/.github/images/demo7.png differ diff --git a/.github/images/demo8.png b/.github/images/demo8.png new file mode 100644 index 0000000..a81d67b Binary files /dev/null and b/.github/images/demo8.png differ diff --git a/Dockerfile b/Dockerfile index e8d73f1..e0d45b0 100644 --- a/Dockerfile +++ b/Dockerfile @@ -26,16 +26,33 @@ RUN npm run build FROM alpine LABEL org.opencontainers.image.title="Copacetic" \ - org.opencontainers.image.description="Copacetic Extension for Docker Desktop" \ - org.opencontainers.image.vendor="Microsoft" \ + org.opencontainers.image.description="Directly patch container images given the vulnerability scanning results from popular tools like Trivy." \ + org.opencontainers.image.vendor="Project Copacetic" \ com.docker.desktop.extension.api.version="0.3.4" \ - com.docker.extension.screenshots="" \ + com.docker.extension.screenshots="\ + [ \ + {\"alt\": \"Copa Light Screenshot\", \"url\": \"https://raw.githubusercontent.com/jgrer/copa-extension/dockerfile-label-documentation/.github/images/demo1.png\"}, \ + {\"alt\": \"Copa Dark Screenshot\", \"url\": \"https://raw.githubusercontent.com/jgrer/copa-extension/dockerfile-label-documentation/.github/images/demo2.png\"}, \ + {\"alt\": \"Copa Scan For Vulnerability\", \"url\": \"https://raw.githubusercontent.com/jgrer/copa-extension/dockerfile-label-documentation/.github/images/demo3.png\"}, \ + {\"alt\": \"Copa Vulnerability Display\", \"url\": \"https://raw.githubusercontent.com/jgrer/copa-extension/dockerfile-label-documentation/.github/images/demo4.png\"}, \ + {\"alt\": \"Copa Patching Image Show Console\", \"url\": \"https://raw.githubusercontent.com/jgrer/copa-extension/dockerfile-label-documentation/.github/images/demo5.png\"}, \ + {\"alt\": \"Copa Success Screen\", \"url\": \"https://raw.githubusercontent.com/jgrer/copa-extension/dockerfile-label-documentation/.github/images/demo6.png\"}, \ + {\"alt\": \"Copa Success Screen And Vuln Loading\", \"url\": \"https://raw.githubusercontent.com/jgrer/copa-extension/dockerfile-label-documentation/.github/images/demo7.png\"}, \ + {\"alt\": \"Copa Success Screen And Patched Image Vuln Display\", \"url\": \"https://raw.githubusercontent.com/jgrer/copa-extension/dockerfile-label-documentation/.github/images/demo8.png\"} \ + ]" \ com.docker.desktop.extension.icon="https://raw.githubusercontent.com/project-copacetic/copacetic/main/images/copa-color.png" \ - com.docker.extension.detailed-description="" \ - com.docker.extension.publisher-url="" \ - com.docker.extension.additional-urls="" \ - com.docker.extension.categories="" \ - com.docker.extension.changelog="" + com.docker.extension.detailed-description="

Copacetic Extension For Docker Desktop

\ + The copa tool is a versatile engine designed to parse container image vulnerability reports from scanners like Trivy, \ + process update packages through various package managers, and apply updates to container images using buildkit, with \ + the flexibility to extend support for additional report formats and package managers." \ + com.docker.extension.publisher-url="https://project-copacetic.github.io/copacetic/website/" \ + com.docker.extension.additional-urls='\ + [ \ + {"title":"Documentation","url":"https://project-copacetic.github.io/copacetic/website/"}, \ + {"title":"Extension Repository","url":"https://github.com/project-copacetic/copa-extension"} \ + ]' \ + com.docker.extension.categories="security" \ + com.docker.extension.changelog="Initial version." COPY --from=builder /backend/bin/service / COPY docker-compose.yaml . diff --git a/Makefile b/Makefile index beb7e67..58c787c 100644 --- a/Makefile +++ b/Makefile @@ -1,5 +1,5 @@ IMAGE?=copacetic/copacetic-docker-desktop-extension -TAG?=latest +TAG?=0.1.0 COPA_VERSION?=latest BUILDER=buildx-multi-arch diff --git a/README copy.md b/README copy.md deleted file mode 100644 index 80583c1..0000000 --- a/README copy.md +++ /dev/null @@ -1,107 +0,0 @@ -# My extension - -This repository defines an example of a Docker extension. The files in this repository have been automatically generated as a result of running `docker extension init`. - -This extension is composed of: - -- A [frontend](./ui) app in React that makes a request to the `/hello` endpoint and displays the payload in Docker Desktop. -- A [backend](./backend) container that runs an API in Go. It exposes the `/hello` endpoint which returns a JSON payload. - -> You can build your Docker Extension using your fav tech stack: -> -> - Frontend: React, Angular, Vue, Svelte, etc. -> Basically, any frontend framework you can bundle in an `index.html` file with CSS, and JS assets. -> - Backend (optional): anything that can run in a container. - -
- Looking for more templates? - -1. [React + NodeJS](https://github.com/benja-M-1/node-backend-extension). -2. [React + .NET 6 WebAPI](https://github.com/felipecruz91/dotnet-api-docker-extension). - -Request one or submit yours [here](https://github.com/docker/extensions-sdk/issues). - -
- -## Local development - -You can use `docker` to build, install and push your extension. Also, we provide an opinionated [Makefile](Makefile) that could be convenient for you. There isn't a strong preference of using one over the other, so just use the one you're most comfortable with. - -To build the extension, use `make build-extension` **or**: - -```shell - docker buildx build -t my/awesome-extension:latest . --load -``` - -To install the extension, use `make install-extension` **or**: - -```shell - docker extension install my/awesome-extension:latest -``` - -> If you want to automate this command, use the `-f` or `--force` flag to accept the warning message. - -To preview the extension in Docker Desktop, open Docker Dashboard once the installation is complete. The left-hand menu displays a new tab with the name of your extension. You can also use `docker extension ls` to see that the extension has been installed successfully. - -### Frontend development - -During the development of the frontend part, it's helpful to use hot reloading to test your changes without rebuilding your entire extension. To do this, you can configure Docker Desktop to load your UI from a development server. -Assuming your app runs on the default port, start your UI app and then run: - -```shell - cd ui - npm install - npm run dev -``` - -This starts a development server that listens on port `3000`. - -You can now tell Docker Desktop to use this as the frontend source. In another terminal run: - -```shell - docker extension dev ui-source my/awesome-extension:latest http://localhost:3000 -``` - -In order to open the Chrome Dev Tools for your extension when you click on the extension tab, run: - -```shell - docker extension dev debug my/awesome-extension:latest -``` - -Each subsequent click on the extension tab will also open Chrome Dev Tools. To stop this behaviour, run: - -```shell - docker extension dev reset my/awesome-extension:latest -``` - -### Backend development (optional) - -This example defines an API in Go that is deployed as a backend container when the extension is installed. This backend could be implemented in any language, as it runs inside a container. The extension frameworks provides connectivity from the extension UI to a socket that the backend has to connect to on the server side. - -Note that an extension doesn't necessarily need a backend container, but in this example we include one for teaching purposes. - -Whenever you make changes in the [backend](./backend) source code, you will need to compile them and re-deploy a new version of your backend container. -Use the `docker extension update` command to remove and re-install the extension automatically: - -```shell -docker extension update my/awesome-extension:latest -``` - -> If you want to automate this command, use the `-f` or `--force` flag to accept the warning message. - -> Extension containers are hidden from the Docker Dashboard by default. You can change this in Settings > Extensions > Show Docker Extensions system containers. - -### Clean up - -To remove the extension: - -```shell -docker extension rm my/awesome-extension:latest -``` - -## What's next? - -- To learn more about how to build your extension refer to the Extension SDK docs at https://docs.docker.com/desktop/extensions-sdk/. -- To publish your extension in the Marketplace visit https://www.docker.com/products/extensions/submissions/. -- To report issues and feedback visit https://github.com/docker/extensions-sdk/issues. -- To look for other ideas of new extensions, or propose new ideas of extensions you would like to see, visit https://github.com/docker/extension-ideas/discussions. diff --git a/README.md b/README.md index 3f1d8c0..85330b6 100644 --- a/README.md +++ b/README.md @@ -1 +1,44 @@ -# copa-extension \ No newline at end of file +# Copa Docker Desktop Extension + +![starting page for the extension](https://raw.githubusercontent.com/jgrer/copa-extension/dockerfile-label-documentation/.github/images/demo1.png) + +## What is this extension for? + +[`copa`](https://github.com/project-copacetic/copacetic) is a CLI tool written in Go and based on buildkit that can be used to directly patch container images given the vulnerability scanning results from popular tools like Trivy. + +This extension allows the user to leverage the abilities of the CLI tool without having to install a scanner or the CLI tool itself. The only requirement to use this extension is [Docker Desktop](https://docs.docker.com/desktop/)! + +## How does it work? + +This extension is a web application displayed in a tab of the dashboard in Docker Desktop. It is written in JavaScript using the React JavaScript library and Material UI React component library. It creates three containers to scan an image, send vulnerability information to the frontend, and patch an image. It uses the `copa-extension-volume` to share the scan result between the three containers. + +### Images/Containers + +|Image | Container | Description | +| -----|------------- | ---------------------------------------------------------------------------------------------------------------------| +|`aquasec/trivy`| `trivy-copa-extension-container` | Runs a scan of the selected image and outputs the json file result `scan.json` to the volume `copa-extension-volume` | +| `busybox`| `busybox-copa-extension-container` | Runs the `cat` command to dump the json output file `scan.json` to `stdout`| +|`copa-extension` | `copa-extension-container` | Runs a copa patch on the selected image using the vulnerability results from `scan.json` | + + +### Components + +| Component | Description | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------| +| `main.tsx` | Main entry point of the frontend, meant to set up React | +| `app.tsx` | Contains the other main components and the left side of the UI, which includes the Copa logo and learn more link. Also includes the frontend code for the loading screen, success screen, and failure screen +| `copainput.tsx` | Has TextFields, Autocompletes, and Buttons to gather input. Displayed on the right side when first loading the page. | +| `commandline.tsx` | Stylized display to look like the command line for the stdout and stderr from the container running Copacetic | +| `vulnerabilitydisplay.tsx`| Displays the vulnerability results from a trivy scan, similar to the docker scout vulnerability display| + +## How do install it? + +The extension be installed using this link! It can also be installed with the following command: + +``` +docker extension install copacetic/copacetic-docker-desktop-extension:0.1.0 +``` + +## Contributing + +We welcome contributions from the community! Read more about contributing [here](contributing.md). \ No newline at end of file diff --git a/contribute.md b/contributing.md similarity index 100% rename from contribute.md rename to contributing.md