Update release with newest features

.dockerignore

@@ -9,7 +9,6 @@ LICENSE
 .vscode
 Makefile
 helm-charts
-.env
 .editorconfig
 .idea
 coverage*

.env

@@ -1,3 +1,11 @@
 VITE_DEPLOY_API_URL="https://api.cloud.cbh.kth.se/deploy/v2"
 VITE_ALERT_API_URL="https://alert.app.cloud.cbh.kth.se/"
+VITE_KEYCLOAK_URL="https://iam.cloud.cbh.kth.se"
+VITE_KEYCLOAK_REALM="cloud"
+VITE_KEYCLOAK_CLIENT_ID="landing"
+VITE_RANCHER_URL="https://mgmt.cloud.cbh.kth.se"
+VITE_DNS_URL="https://dns.cloud.cbh.kth.se"
+VITE_MAIA_URL="https://maia.app.cloud.cbh.kth.se/maia"
+# can be comma separated to add more
+VITE_SERVER_PLATFORM="linux/amd64"
 GENERATE_SOURCEMAP=false 

.prettierignore

@@ -11,4 +11,5 @@ public/_redirects
 package.json
 package-lock.json
 bun.lockb
-*.xcf
+*.xcf
+*.glb

Dockerfile

@@ -1,28 +1,54 @@
 # Build with Bun
-FROM docker.io/oven/bun:latest as build
+FROM --platform=$BUILDPLATFORM docker.io/oven/bun:latest AS build
 
 ARG RELEASE_BRANCH
 ARG RELEASE_DATE
 ARG RELEASE_COMMIT
 
+ENV NODE_ENV="production"
+
+WORKDIR /app
+
+COPY package*.json bun.lockb ./
+
+RUN bun install
+
+COPY .env .
+COPY --chmod=777 scripts/ ./
+
+RUN ./docker-envs.ts .env.production && \
+    ./nginx-entrypoint.ts && \
+    rm .env
+
 ENV VITE_RELEASE_BRANCH=${RELEASE_BRANCH}
 ENV VITE_RELEASE_DATE=${RELEASE_DATE}
 ENV VITE_RELEASE_COMMIT=${RELEASE_COMMIT}
 
-ENV VITE_API_URL="https://api.cloud.cbh.kth.se"
-ENV VITE_DEPLOY_API_URL="https://api.cloud.cbh.kth.se/deploy/v2"
-ENV NODE_ENV="production"
+COPY .eslintrc.json jsconfig.json index.html tsconfig*.json vite.config.ts ./
 
-WORKDIR /app
-COPY . /app
+COPY . .
 
-RUN bun install
 RUN bun run build
 
 # Serve with NGINX
-FROM nginx
+FROM nginx:latest
 COPY --from=build /app/dist /usr/share/nginx/html
 RUN rm /etc/nginx/conf.d/default.conf
 COPY nginx/nginx.conf /etc/nginx/conf.d
+
+COPY --from=build --chmod=777 --link /app/entrypoint.sh .
+
+# Set default values, can be overriden 
+ENV DEPLOY_API_URL="https://api.cloud.cbh.kth.se/deploy/v2"
+ENV ALERT_API_URL="https://alert.app.cloud.cbh.kth.se/"
+ENV KEYCLOAK_URL="https://iam.cloud.cbh.kth.se"
+ENV KEYCLOAK_REALM="cloud"
+ENV KEYCLOAK_CLIENT_ID="landing"
+ENV RANCHER_URL="https://mgmt.cloud.cbh.kth.se"
+ENV DNS_URL="https://dns.cloud.cbh.kth.se"
+ENV MAIA_URL="https://maia.app.cloud.cbh.kth.se/maia"
+# can be comma separated to add more
+ENV SERVER_PLATFORM="linux/amd64"
+
 EXPOSE 3000
-CMD ["nginx", "-g", "daemon off;"]  
+ENTRYPOINT ["/entrypoint.sh"]

README.md

@@ -4,30 +4,30 @@ Welcome to the kthcloud/console repository! This project is the web console for
 
 ## Table of Contents
 
--   [☁️ kthcloud/console](#️-kthcloudconsole)
-    -   [Table of Contents](#table-of-contents)
-    -   [External dependencies](#external-dependencies)
-    -   [Setup](#setup)
-    -   [Contributing](#contributing)
-    -   [Locales and translations](#locales-and-translations)
-        -   [Other languages](#other-languages)
-    -   [Formatting](#formatting)
-    -   [License](#license)
+- [☁️ kthcloud/console](#️-kthcloudconsole)
+    - [Table of Contents](#table-of-contents)
+    - [External dependencies](#external-dependencies)
+    - [Setup](#setup)
+    - [Contributing](#contributing)
+    - [Locales and translations](#locales-and-translations)
+        - [Other languages](#other-languages)
+    - [Formatting](#formatting)
+    - [License](#license)
 
 ## External dependencies
 
 console uses these services for its functionality.
 
 kthcloud maintained:
 
--   [go-deploy](https://github.com/kthcloud/go-deploy): Backend for creation, and management of resources
--   [alert](https://alert.app.cloud.cbh.kth.se/): Provides alerts
--   [kthcloud iam](https://iam.cloud.cbh.kth.se): Provides user auth
+- [go-deploy](https://github.com/kthcloud/go-deploy): Backend for creation, and management of resources
+- [alert](https://alert.app.cloud.cbh.kth.se/): Provides alerts
+- [kthcloud iam](https://iam.cloud.cbh.kth.se): Provides user auth
 
 External:
 
--   [Gravatar](https://gravatar.com): Provides user avatars
--   [Google Fonts](https://fonts.google.com): Provides fonts
+- [Gravatar](https://gravatar.com): Provides user avatars
+- [Google Fonts](https://fonts.google.com): Provides fonts
 
 ## Setup
 

package.json

@@ -15,7 +15,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@iconify/react": "^4.1.1",
-    "@kthcloud/go-deploy-types": "^1.0.20",
+    "@kthcloud/go-deploy-types": "^1.0.24",
     "@mui/icons-material": "^5.15.20",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.20",
@@ -29,6 +29,7 @@
     "@types/punycode": "^2.1.4",
     "@types/three": "^0.164.1",
     "apexcharts": "^3.49.1",
+    "bun": "^1.2.22",
     "change-case": "^5.4.4",
     "crypto-js": "^4.2.0",
     "http-status-codes": "^2.3.0",
@@ -57,20 +58,21 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
+    "@types/bun": "^1.1.17",
     "@types/react": "^18.3.3",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.13.0",
     "@typescript-eslint/parser": "^7.13.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitejs/plugin-react-swc": "^3.7.0",
-    "eslint": "^9.4.0",
+    "eslint": "^9.35.0",
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
-    "prettier": "^3.3.2",
+    "prettier": "^3.6.2",
     "prettier-plugin-nginx": "^1.0.3",
     "typescript": "^5.4.5",
-    "vite": "^5.3.0"
+    "vite": "^7.1.6"
   }
-}
+}

scripts/docker-envs.ts

@@ -0,0 +1,28 @@
+#!/usr/bin/env bun
+
+import fs from "fs";
+import path from "path";
+
+// @ts-ignore
+const viteEnv = import.meta.env;
+
+// Get the filename from command-line arguments
+const args = process.argv.slice(2);
+const outputFilename = args[0] || ".env.docker"; // Default to `.env.docker` if no argument is provided
+
+let envProductionContent = "";
+
+// Process environment variables
+for (const [key, _] of Object.entries(viteEnv)) {
+  if (key.startsWith("VITE_")) {
+    envProductionContent += `${key}={{__${key.slice("VITE_".length)}__}}\n`;
+  }
+}
+
+// Resolve the output file path
+const outputFilePath = path.resolve(outputFilename);
+
+// Write the content to the specified file
+fs.writeFileSync(outputFilePath, envProductionContent, "utf-8");
+
+console.log(`${outputFilename} file created successfully!`);

scripts/nginx-entrypoint.ts

@@ -0,0 +1,57 @@
+#!/usr/bin/env bun
+
+import fs from "fs";
+import path from "path";
+
+const viteEnv = import.meta.env;
+
+let entrypointScript = `#!/bin/bash
+
+# Entrypoint script, replaces env variables in the dist files
+set -eu
+
+exec "$@"
+
+# Function to update environment variables in files recursively
+update_env_vars_placeholders() {
+  local directory="$1"
+  local old_var="$2"
+  local new_value="\${!3:-}"
+
+  if [[ -z "$new_value" && -n "$3" ]]; then
+    echo "[WARN]: The value for $3 is not set." >&2
+  fi
+
+  # Find files in the given directory recursively
+  find "$directory" -type f -exec sed -i "s|{{$old_var}}|$new_value|g" {} +
+}\n\n`;
+
+// Add the updates for all VITE_* env variables
+for (const [key, _] of Object.entries(viteEnv)) {
+  if (key.startsWith("VITE_")) {
+    const env = key.slice("VITE_".length);
+    entrypointScript += `update_env_vars_placeholders "/usr/share/nginx/html" "__${env}__" "${env}"\n`;
+  }
+}
+
+// Start Nginx
+entrypointScript += `\n# Start Nginx\nnginx -g 'daemon off;'`;
+
+console.log(entrypointScript);
+
+// Get the filename from command-line arguments
+const args = process.argv.slice(2);
+const outputFilename = args[0] || "entrypoint.sh"; // Default to entrypoint.sh if no argument is provided
+
+// Define the output file path
+const outputFilePath = path.resolve(outputFilename);
+
+// Write the entrypoint script to the specified file
+fs.writeFileSync(outputFilePath, entrypointScript, "utf-8");
+
+// Set the file permissions to 777 (executable for all users)
+fs.chmodSync(outputFilePath, 0o777);
+
+console.log(
+  `${outputFilename} file created with executable permissions (777)!`
+);

src/App.tsx

@@ -14,35 +14,38 @@ import { IconButton } from "@mui/material";
 import Iconify from "./components/Iconify";
 import { ThemeModeContextProvider } from "./contexts/ThemeModeContext";
 import { AlertContextProvider } from "./contexts/AlertContext";
+import { AdminResourceContextProvider } from "./contexts/AdminResourceContext";
 
 export default function App() {
   return (
     <AuthContextWrapperProvider authClient={keycloak}>
       <AlertContextProvider>
         <ResourceContextProvider>
-          <ThemeModeContextProvider>
-            <SnackbarProvider
-              maxSnack={5}
-              anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-              autoHideDuration={3000}
-              action={(snack) => (
-                <IconButton
-                  onClick={() => closeSnackbar(snack)}
-                  color="inherit"
-                >
-                  <Iconify icon="material-symbols:close" />
-                </IconButton>
-              )}
-              dense
-              preventDuplicate
-            >
-              <ThemeProvider>
-                <ScrollToTop />
-                <BaseOptionChartStyle />
-                <Router />
-              </ThemeProvider>
-            </SnackbarProvider>
-          </ThemeModeContextProvider>
+          <AdminResourceContextProvider>
+            <ThemeModeContextProvider>
+              <SnackbarProvider
+                maxSnack={5}
+                anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+                autoHideDuration={3000}
+                action={(snack) => (
+                  <IconButton
+                    onClick={() => closeSnackbar(snack)}
+                    color="inherit"
+                  >
+                    <Iconify icon="material-symbols:close" />
+                  </IconButton>
+                )}
+                dense
+                preventDuplicate
+              >
+                <ThemeProvider>
+                  <ScrollToTop />
+                  <BaseOptionChartStyle />
+                  <Router />
+                </ThemeProvider>
+              </SnackbarProvider>
+            </ThemeModeContextProvider>
+          </AdminResourceContextProvider>
         </ResourceContextProvider>
       </AlertContextProvider>
     </AuthContextWrapperProvider>

src/Router.tsx

@@ -93,7 +93,7 @@ export default function Router() {
           ),
         },
         {
-          path: "admin",
+          path: "admin/:tab?",
           element: (
             <ProtectedRoute>
               <Admin />

src/api/deploy/deployments.ts

@@ -9,7 +9,11 @@ export const getDeployment = async (token: string, id: string) => {
     },
   });
   const response = [await res.json()];
-  const result = response.map((obj) => ({ ...obj, type: "deployment" }));
+  const result = response.map((obj) => ({
+    ...obj,
+    deploymentType: obj.type,
+    type: "deployment",
+  }));
   if (Array.isArray(result)) return result;
   else throw new Error("Error getting deployments, response was not an array");
 };

src/api/deploy/hosts.ts

@@ -0,0 +1,25 @@
+import { HostVerboseRead } from "@kthcloud/go-deploy-types/types/v2/body";
+import { Uuid } from "../../types";
+
+export const getHostsVerbose = async (
+  token: Uuid
+): Promise<HostVerboseRead[]> => {
+  const res = await fetch(
+    import.meta.env.VITE_DEPLOY_API_URL + "/hosts/verbose",
+    {
+      method: "GET",
+      headers: {
+        Authorization: "Bearer " + token,
+      },
+    }
+  );
+
+  if (!res.ok) {
+    const body = await res.json();
+    if (body) {
+      throw body;
+    }
+    throw res;
+  }
+  return await res.json();
+};