Added push_docker script

Reviewed-on: #67

.gitignore

@@ -23,3 +23,5 @@ htmlcov
 # georgs
 pkgs/.vs/
 pkgs/clan-cli/.hypothesis/
+ui-assets.tar.gz
+ui-release

pkgs/clan-cli/README.md

@@ -24,9 +24,9 @@ For Entity object go to
 - [tests/openapi_client/docs/ResolutionApi.md](tests/openapi_client/docs/ResolutionApi.md)
 - [tests/openapi_client/docs/RepositoriesApi.md](tests/openapi_client/docs/RepositoriesApi.md)
 
-# Building a Docker Image
+# Building a Docker Image if the Backend Changed
 
-To build a docker image of the frontend and backend be inside the `pkgs/clan-cli` folder and execute:
+To build a new docker image when the backend code changed be inside the `pkgs/clan-cli` folder and execute:
 
 ```bash
 nix build .#clan-docker
@@ -48,7 +48,22 @@ docker run -p 127.0.0.1:2979:2979 clan-docker:latest
   [flake-module.nix at line 22](flake-module.nix)
 - Documentation on `dockerTools.buildImage` you can find here: https://nix.dev/tutorials/nixos/building-and-running-docker-images.html
 
-## Docker build with UI changes
+## Building a Docker Image if the Frontend Changed
+
+To build a new docker image when the frontend code changed you first need
+to get the `GITLAB_TOKEN` go to [repo access tokens](https://git.tu-berlin.de/internet-of-services-lab/service-aware-network-front-end/-/settings/access_tokens) and generate one. Then execute
+
+```bash
+export GITLAB_TOKEN="<your-access-token>"
+```
+
+Afterwards you can execute:
+
+```bash
+./build_docker.sh
+```
+
+### The Script Explained
 
 If changes to the UI have been made, and you want them to propagate to the docker container edit the file: [../ui/nix/ui-assets.nix](../ui/nix/ui-assets.nix).
 This is where a release version of the frontend is downloaded and integrated into the cli and the docker build. To do this first execute
@@ -63,11 +78,7 @@ Make a tarball out of it called `ui-assets.tar.gz`
 tar -czvf ui-assets.tar.gz ui-release/lib/node_modules/clan-ui/out/
 ```
 
-Upload ui-assets.tar.gz to gitlab. To get the `GITLAB_TOKEN` go to [repo access tokens](https://git.tu-berlin.de/internet-of-services-lab/service-aware-network-front-end/-/settings/access_tokens) and generate one. Then execute
-
-```bash
-export GITLAB_TOKEN="<your-access-token>"
-```
+Upload ui-assets.tar.gz to gitlab.
 
 ```bash
 curl --header "PRIVATE-TOKEN: $GITLAB_TOKEN" \
@@ -103,6 +114,12 @@ nix build .#clan-docker
 
 # Uploading a Docker Image
 
+You can use the script:
+
+```bash
+./push_docker.sh
+```
+
 Login to the tu docker image server
 
 ```bash
@@ -121,6 +138,8 @@ Push the image to the git registry
 docker image push git.tu-berlin.de:5000/internet-of-services-lab/service-aware-network-front-end:latest
 ```
 
+# Using the Uploaded Docker Image
+
 Pull the image
 
 ```bash

pkgs/clan-cli/build_docker.sh

@@ -0,0 +1,42 @@
+#!/usr/bin/env bash
+
+# shellcheck shell=bash
+set -euo pipefail
+
+# GITLAB_TOKEN
+if [[ -z "${GITLAB_TOKEN:-}" ]]; then
+cat <<EOF
+GITLAB_TOKEN environment var is not set. Please generate a new token under
+https://git.tu-berlin.de/internet-of-services-lab/service-aware-network-front-end/-/settings/access_tokens
+EOF
+  exit 1
+fi
+
+# Create a new ui build
+nix build .#ui --out-link ui-release
+tar -czvf ui-assets.tar.gz ui-release/lib/node_modules/clan-ui/out/
+
+# upload ui assets to gitlab
+gitlab_base="https://git.tu-berlin.de/api/v4/projects/internet-of-services-lab%2Fservice-aware-network-front-end"
+curl --header "PRIVATE-TOKEN: $GITLAB_TOKEN" \
+     --upload-file ./ui-assets.tar.gz \
+     "$gitlab_base/packages/generic/ui-assets/1.0.0/ui-assets.tar.gz"
+
+
+# write url and hash to ui-assets.nix
+url="$gitlab_base/packages/generic/ui-assets/1.0.0/ui-assets.tar.gz"
+PROJECT_DIR=$(git rev-parse --show-toplevel)
+cat > "$PROJECT_DIR/pkgs/ui/nix/ui-assets.nix" <<EOF
+{ fetchzip }:
+fetchzip {
+  url = "$url";
+  sha256 = "$(nix-prefetch-url --unpack $url)";
+}
+EOF
+
+cat <<EOF
+Please commit the changes to ui-assets.nix and push them to the repository.
+If you want clan webui to use the new ui assets.
+$ git commit -m "Update ui-assets.nix" "$PROJECT_DIR/pkgs/ui/nix/ui-assets.nix"
+$ git push
+EOF

pkgs/clan-cli/push_docker.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+# shellcheck shell=bash
+set -euo pipefail
+
+docker login git.tu-berlin.de:5000
+docker load < result
+docker image tag clan-docker:latest git.tu-berlin.de:5000/internet-of-services-lab/service-aware-network-front-end:latest
+docker image push git.tu-berlin.de:5000/internet-of-services-lab/service-aware-network-front-end:latest

pkgs/ui/nix/ui-assets.nix

@@ -1,5 +1,5 @@
 { fetchzip }:
 fetchzip {
-  url = "https://gitea.gchq.icu/api/packages/IoSL/generic/IoSL-service-aware-frontend/12ndzp04vy7xmqk90gakb4igy2qjf1pcfmr94r2cmpjrkkljdgbi/assets.tar.gz";
-  sha256 = "12ndzp04vy7xmqk90gakb4igy2qjf1pcfmr94r2cmpjrkkljdgbi";
+  url = "https://gitea.gchq.icu/api/packages/IoSL/generic/IoSL-service-aware-frontend/0p1dw924f4sdkq26fd3rrb9qmryl84hdn5plz9ds105xv6al4ikf/assets.tar.gz";
+  sha256 = "0p1dw924f4sdkq26fd3rrb9qmryl84hdn5plz9ds105xv6al4ikf";
 }

pkgs/ui/src/components/sidebar/index.tsx

@@ -9,6 +9,7 @@ import {
   Tooltip,
   useMediaQuery,
 } from "@mui/material";
+import { useGetAllEntities } from "@/api/entities/entities";
 import Image from "next/image";
 import React, { ReactNode } from "react";
 
@@ -33,32 +34,7 @@ type MenuEntry = {
   subMenuEntries?: MenuEntry[];
 };
 
-export const menuEntityEntries: MenuEntry[] = [
-  {
-    icon: <PersonIcon />,
-    label: "C1",
-    to: "/client/C1",
-    disabled: false,
-  },
-  {
-    icon: <PersonIcon />,
-    label: "C2",
-    to: "/client/C2",
-    disabled: false,
-  },
-  {
-    icon: <PersonIcon />,
-    label: "C3",
-    to: "/client/C3",
-    disabled: false,
-  },
-  {
-    icon: <PersonIcon />,
-    label: "C4",
-    to: "/client/C4",
-    disabled: false,
-  },
-];
+export let menuEntityEntries: MenuEntry[] = [];
 
 export const menuEntries: MenuEntry[] = [
   {
@@ -96,6 +72,7 @@ interface SidebarProps {
 }
 
 export function Sidebar(props: SidebarProps) {
+  const { data: entityData } = useGetAllEntities();
   const { show, onClose } = props;
   const [activeMenuItem, setActiveMenuItem] = React.useState(
     typeof window !== "undefined" ? window.location.pathname : "",
@@ -113,12 +90,22 @@ export function Sidebar(props: SidebarProps) {
   };
 
   React.useEffect(() => {
+    if (entityData) {
+      menuEntityEntries = Array.isArray(entityData.data)
+        ? entityData.data.map((entity) => ({
+            icon: <PersonIcon />,
+            label: entity.name,
+            to: `/client/${entity.name}`,
+            disabled: false,
+          }))
+        : [];
+    }
     if (isSmallerScreen) {
       setCollapseMenuOpen(false);
     } else {
       setCollapseMenuOpen(true);
     }
-  }, [isSmallerScreen]);
+  }, [isSmallerScreen, entityData]);
 
   return (
     <aside
@@ -213,7 +200,7 @@ export function Sidebar(props: SidebarProps) {
                       unmountOnExit
                     >
                       <List component="div" disablePadding>
-                        {menuEntityEntries.map((menuEntry, idx) => (
+                        {menuEntityEntries?.map((menuEntry, idx) => (
                           <ListItemButton
                             key={idx}
                             sx={{ pl: 4 }}