Many nice things

2024-01-24 21:58:39 +01:00
parent 76b1a2d4e9
commit 490f2bdde6
20 changed files with 298 additions and 72 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -19,6 +19,7 @@
        "@types/node": "^16.18.75",
        "@types/react": "^18.2.48",
        "@types/react-dom": "^18.2.18",
+        "axios": "^1.6.5",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^6.21.3",
@ -5646,6 +5647,29 @@
        "node": ">=4"
      }
    },
+    "node_modules/axios": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz",
+      "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==",
+      "dependencies": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/axobject-query": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@ -14900,6 +14924,11 @@
        "node": ">= 0.10"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
    "node_modules/psl": {
      "version": "1.9.0",
      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
    "@types/node": "^16.18.75",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
+    "axios": "^1.6.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.3",
--- a/public/index.html
+++ b/public/index.html
@ -1,43 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+    <meta name="description" content="Web site created using create-react-app" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
    <title>React App</title>
-  </head>
-  <body>
+</head>
+
+<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+</body>

-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
+</html>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@ -1,25 +1,15 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+    "short_name": "React App",
+    "name": "Create React App Sample",
+    "icons": [
+        {
+            "src": "favicon.ico",
+            "sizes": "64x64 32x32 24x24 16x16",
+            "type": "image/x-icon"
+        }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
 }
--- a/src/api/common.ts
+++ b/src/api/common.ts
@ -0,0 +1,17 @@
+import axios from "axios";
+
+export class ApiBase {}
+
+const commonHeaders = {
+    "Content-Type": "application/json",
+    Accept: "application/json",
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Max-Age": 60,
+};
+
+export const axiosInstance = axios.create({
+    timeout: 5000,
+    headers: {
+        ...commonHeaders,
+    },
+});
--- a/src/api/dashboard.ts
+++ b/src/api/dashboard.ts
@ -0,0 +1,12 @@
+import { axiosInstance, ApiBase } from "./common";
+
+class DashboardApi extends ApiBase {
+    get = async (endpoint: string) => {
+        return axiosInstance.get(endpoint, {});
+    };
+    getFake = async (endpoint: string) => {
+        return axiosInstance.get("http://localhost:8002", {});
+    };
+}
+
+export const dashboardApi = new DashboardApi();
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -0,0 +1 @@
+export { dashboardApi } from "./dashboard";
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@ -1,11 +1,60 @@
 import React from "react";
 import EnvTabsContainer from "./EnvTabsContainer";
-import { EnvTab } from "../types";
+import LoadingIndicator from "./LoadingIndicator";
+import { DashboardLoadError, DashboardResponseContent, EnvTab, Environment } from "../types";
+import { ENVIRONMENT_TABS } from "../const";
+import { dashboardApi } from "../api";
+import { AxiosError } from "axios";
+import LoadingError from "./LoadingError";
+import EnvironmentList from "./dashboard/EnvironmentList";

 export default function Dashboard() {
-    const onSelectEnvTab = (tab: EnvTab): void => {
-        console.log("tab changed:", tab);
+    const defaultEnv = ENVIRONMENT_TABS[0];
+
+    const [selectedEnv, setSelectedEnv] = React.useState(defaultEnv);
+    const [loadingEnv, setLoadingEnv] = React.useState(false);
+    const [loadingErr, setLoadingErr] = React.useState<DashboardLoadError | null>(null);
+    const [activeEnvironments, setActiveEnvironments] = React.useState<Environment[] | null>(null);
+
+    React.useEffect(() => {
+        loadEnv(defaultEnv);
+    }, []);
+
+    const onSelectEnvTab = (envTab: EnvTab): void => {
+        loadEnv(envTab);
    };

-    return <EnvTabsContainer onSelect={onSelectEnvTab} />;
+    const loadEnv = (envTab: EnvTab) => {
+        console.log("loading env:", envTab);
+        setLoadingErr(null);
+        setLoadingEnv(true);
+
+        dashboardApi
+            .getFake(envTab.dashboardEndpoint)
+            .then((response) => {
+                return response.data.content;
+            })
+            .then((data: DashboardResponseContent) => {
+                setActiveEnvironments(data.environments);
+            })
+            .catch((error: AxiosError) => {
+                console.error(error);
+                setLoadingErr({
+                    message: error.message,
+                    url: envTab.dashboardEndpoint,
+                });
+            })
+            .finally(() => {
+                setLoadingEnv(false);
+            });
+    };
+
+    return (
+        <>
+            <LoadingIndicator active={loadingEnv} />
+            <EnvTabsContainer selectedEnv={selectedEnv} onSelect={onSelectEnvTab} />
+            {loadingErr && <LoadingError error={loadingErr} />}
+            {activeEnvironments && <EnvironmentList environments={activeEnvironments} />}
+        </>
+    );
 }
--- a/src/components/EnvTabsContainer.tsx
+++ b/src/components/EnvTabsContainer.tsx
@ -10,13 +10,12 @@ interface OnSelectTab {
 }

 interface EnvTabsContainerProps {
+    selectedEnv: EnvTab;
    onSelect: OnSelectTab;
 }

-export default function EnvTabsContainer({ onSelect }: EnvTabsContainerProps) {
-    const defaultTab = ENVIRONMENT_TABS[0];
-
-    const [selected, setSelected] = React.useState(defaultTab);
+export default function EnvTabsContainer({ selectedEnv, onSelect }: EnvTabsContainerProps) {
+    const [selected, setSelected] = React.useState(selectedEnv);

    const handleChange = (event: React.SyntheticEvent, newValue: EnvTab) => {
        setSelected(newValue);
@ -28,7 +27,7 @@ export default function EnvTabsContainer({ onSelect }: EnvTabsContainerProps) {
    });

    return (
-        <Box sx={{ width: "100%" }}>
+        <Box sx={{ width: "100%", marginBottom: "2rem" }}>
            <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
                <Tabs value={selected} onChange={handleChange}>
                    {tabs}
--- a/src/components/LoadingError.tsx
+++ b/src/components/LoadingError.tsx
@ -0,0 +1,17 @@
+import React from "react";
+import { DashboardLoadError } from "../types";
+import Alert from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
+
+interface LoadingErrorProps {
+    error: DashboardLoadError;
+}
+
+export default function LoadingError({ error }: LoadingErrorProps) {
+    return (
+        <Alert severity="error">
+            <AlertTitle>{error.message}</AlertTitle>
+            <p>URL: {error.url}</p>
+        </Alert>
+    );
+}
--- a/src/components/LoadingIndicator.tsx
+++ b/src/components/LoadingIndicator.tsx
@ -0,0 +1,15 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import LinearProgress from "@mui/material/LinearProgress";
+
+interface LoadingIndicatorProps {
+    active: boolean;
+}
+
+export default function LoadingIndicator({ active }: LoadingIndicatorProps) {
+    return (
+        <Box sx={{ width: "100%" }}>
+            {active ? <LinearProgress /> : <Box className="linear-progress-placeholder" />}
+        </Box>
+    );
+}
--- a/src/components/dashboard/EnvironmentList.tsx
+++ b/src/components/dashboard/EnvironmentList.tsx
@ -0,0 +1,24 @@
+import React from "react";
+import { Environment } from "../../types";
+import TenantList from "./TenantList";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+
+interface EnvironmentListProps {
+    environments: Environment[];
+}
+
+export default function EnvironmentList({ environments }: EnvironmentListProps) {
+    const envItems = environments.map((env) => {
+        return (
+            <Box className="environment">
+                <Typography component={"h1"} key={env.name} className="title">
+                    {env.name}
+                </Typography>
+                <TenantList tenants={env.tenants} />
+            </Box>
+        );
+    });
+
+    return <Box className="environment-list">{envItems}</Box>;
+}
--- a/src/components/dashboard/ServiceList.tsx
+++ b/src/components/dashboard/ServiceList.tsx
@ -0,0 +1,22 @@
+import React from "react";
+import { Service } from "../../types";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+interface ServiceListProps {
+    services: Service[];
+}
+
+export default function ServiceList({ services }: ServiceListProps) {
+    const serviceItems = services.map((service) => {
+        return (
+            <Box className="service-card">
+                <Typography component={"h1"} key={service.name} className="service-name">
+                    {service.name}
+                </Typography>
+            </Box>
+        );
+    });
+
+    return <Box className="service-list">{serviceItems}</Box>;
+}
--- a/src/components/dashboard/TenantList.tsx
+++ b/src/components/dashboard/TenantList.tsx
@ -0,0 +1,25 @@
+import React from "react";
+import { Tenant } from "../../types";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import ServiceList from "./ServiceList";
+
+interface TenantListProps {
+    tenants: Tenant[];
+}
+
+export default function TenantList({ tenants: tenants }: TenantListProps) {
+    const tenantItems = tenants.map((tenant) => {
+        const tenantName = tenant.name !== "default" ? `Tenant: ${tenant.name}` : "Multitenant";
+        return (
+            <Box className="tenant">
+                <Typography component={"h1"} key={tenant.name} className="tenant-name">
+                    {tenantName}
+                </Typography>
+                <ServiceList services={tenant.services} />
+            </Box>
+        );
+    });
+
+    return <Box className="tenant-list">{tenantItems}</Box>;
+}
--- a/src/scss/_app-header.scss
+++ b/src/scss/_app-header.scss
@ -3,7 +3,6 @@
    color: whitesmoke;
    padding: 1rem 0 1rem 0;
    box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.31);
-    margin-bottom: 1rem;
    h1 {
        font-size: 2rem;
        letter-spacing: 5px;
@ -12,13 +11,13 @@
        color: #08ab08;
        animation: rotation 3s infinite linear;
        @keyframes rotation {
-                from {
-                    transform: rotate(0deg);
-                }
-
-                to {
-                    transform: rotate(359deg);
-                }
+            from {
+                transform: rotate(0deg);
            }
+
+            to {
+                transform: rotate(359deg);
+            }
+        }
    }
 }
--- a/src/scss/_linear-progress.scss
+++ b/src/scss/_linear-progress.scss
@ -0,0 +1,3 @@
+.linear-progress-placeholder {
+    height: 4px;
+}
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@ -1,2 +1,3 @@
@import "common";
@import "app-header";
+@import "linear-progress";
--- a/src/types.tsx
+++ b/src/types.tsx
@ -3,3 +3,49 @@ export type EnvTab = {
    id: string;
    dashboardEndpoint: string;
 };
+
+type StatusPerTenant = { [tenantId: string]: boolean };
+
+type HealthCheckStatus = {
+    status_ok: boolean;
+    message: string;
+    status_per_tenant: StatusPerTenant | null;
+};
+
+type AppDetails = {
+    app_name: string;
+    app_version: string;
+    template_name: string | null;
+    template_version: string | null;
+};
+
+type Node = {
+    name: string;
+    url: string;
+    app_details: AppDetails | null;
+    health_check_status: HealthCheckStatus;
+};
+
+export type Service = {
+    name: string;
+    nodes: Node[];
+};
+
+export type Tenant = {
+    name: string;
+    services: Service[];
+};
+
+export type Environment = {
+    name: string;
+    tenants: Tenant[];
+};
+
+export type DashboardResponseContent = {
+    environments: Environment[];
+};
+
+export type DashboardLoadError = {
+    url: string;
+    message: string;
+};