Skip to content

Commit

Permalink
Merge pull request #124 from thin-edge/refactor-migrate-ui-to-ext-repo
Browse files Browse the repository at this point in the history
refactor: remove ui plugin code which was relocated to a new repository
  • Loading branch information
reubenmiller authored Feb 1, 2025
2 parents 20c42ad + 6228b7c commit 533e607
Show file tree
Hide file tree
Showing 43 changed files with 7 additions and 18,552 deletions.
31 changes: 0 additions & 31 deletions .github/workflows/release.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -45,34 +45,3 @@ jobs:
PUBLISH_OWNER: ${{ secrets.PUBLISH_OWNER }}
run: |
./ci/publish.sh ./dist --repo "$PUBLISH_REPO" --owner "$PUBLISH_OWNER"
ui:
needs: [goreleaser]
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0

- uses: actions/setup-node@v4
with:
node-version: 18
- name: Install node.js dependencies
run: |
cd ./ui
npm install npm -g
npm ci
- name: Build and zip UI-Plugin
run : |
cd ./ui
UI_VERSION=$(jq -r .version package.json)
npm run build
mv dist/tedge-container-plugin-ui.zip "dist/tedge-container-plugin-ui_${UI_VERSION}.zip"
- name: Upload
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
gh release upload "${{ github.ref_name }}" ui/dist/tedge-container-plugin-ui_*.zip
4 changes: 0 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,3 @@ tests/data/apps/app4.tar.gz

# MacOS
.DS_Store
.angular

# test files
attic
62 changes: 7 additions & 55 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,34 +122,27 @@ Below are some examples showing the mapping between the configuration values and
|`container.alwayspull= true`| `CONTAINER_CONTAINER_ALWAYSPULL=true` |
|`container.network= true`| `CONTAINER_CONTAINER_NETWORK=tedge` |

### UI Plugin
### Cumulocity UI Plugin

With the UI plugin, container monitoring can be added to the Cumulocity UI. The Ui plugin contains 3 components that add the following tabs to the UI:
A Cumulocity UI plugin is available to compliment the functionality provided by the tedge-container-plugin. The plugin can be downloaded from the [thin-edge/tedge-container-plugin-ui](https://github.com/thin-edge/tedge-container-plugin-ui) repository.

| Plug-In | Function |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| Container Info Tab | Adds a tab to a container service to display all relevant container information. |
| Container Management Tab | Adds a tab to the device to monitor containers. The tab can include/exclude the containers hosted within container groups. |
| Container Group Management Tab | Adds a tab to the device to monitor container groups (aka. docker compose). |

The UI Plugin was developed for the Device Management application, but can also be added to the Cockpit if needed.

To use the UI-Plugin, download the tedge-container-plugin-ui.zip version that matches your Cumulocity UI version form the releases and upload it in the Cumulocity administration. Detailed instructions on how to install UI plugins can also be found [here](https://cumulocity.com/guides/users-guide/administration/#custom-applications).
Below shows some example screenshots of the plugin in action:

#### Container Info Tab

The tab will be enabled for all services of type container. Displays the container properties that are stored in the managed Object.
![Container Info Screenshot](./docs/img/container-info.png)

![Container Info Screenshot](https://github.com/thin-edge/tedge-container-plugin/raw/refs/heads/main/docs/img/container-info.png)

#### Container Management Tab

The tab will be enabled for all devices with a childAddition with serviceType=container. Lists all containers in a grid or list.The search can be used for the image name and the project id. The list can include/exclude the containers that are part of a container group.
![Container Container Management Screenshot](./docs/img/container-management.png)
![Container Container Management Screenshot](https://github.com/thin-edge/tedge-container-plugin/raw/refs/heads/main/docs/img/container-management.png)

#### Container Group Management Tab

The tab will be enabled for all devices with a childAddition with serviceType=container. Lists all containers that are part of a project. The filter/search can be used to search for project names or container images.
![Container Container Management Screenshot](./docs/img/container-group-management.png)
![Container Container Management Screenshot](https://github.com/thin-edge/tedge-container-plugin/raw/refs/heads/main/docs/img/container-group-management.png)

## Developers

Expand Down Expand Up @@ -216,44 +209,3 @@ To run the tests you will need to have python3 >> 3.9 installed on your syste
just test --include podman
just test --include docker
```

### Building UI

To build the ui use the following steps:

1. Checkout the project

2. Install dependencies:

```sh
npm install
```

3. (Optional) Run the UI locally.

Add your tenant in the package.json file:

```json
"scripts": {
"start": "c8ycli server -u https://{{add the url of your tenant here}} --shell devicemanagement",
...
}
```

Start the UI locally via:

```sh
npm start
```

4. Build the Plugin

```sh
npm run build
```

5. Deploy the Plugin

```sh
npm run deploy
```
Binary file removed docs/img/container-group-management.png
Binary file not shown.
Binary file removed docs/img/container-info.png
Binary file not shown.
Binary file removed docs/img/container-management.png
Binary file not shown.
6 changes: 0 additions & 6 deletions package-lock.json

This file was deleted.

16 changes: 0 additions & 16 deletions ui/.browserslistrc

This file was deleted.

2 changes: 0 additions & 2 deletions ui/.gitignore

This file was deleted.

11 changes: 0 additions & 11 deletions ui/.prettierrc

This file was deleted.

27 changes: 0 additions & 27 deletions ui/README.md

This file was deleted.

111 changes: 0 additions & 111 deletions ui/angular.json

This file was deleted.

14 changes: 0 additions & 14 deletions ui/app.module.spec.ts

This file was deleted.

17 changes: 0 additions & 17 deletions ui/app.module.ts

This file was deleted.

18 changes: 0 additions & 18 deletions ui/bootstrap.ts

This file was deleted.

Loading

0 comments on commit 533e607

Please sign in to comment.