diff --git a/dashboard/client/config-compiler.js b/dashboard/client/config-compiler.js index a1e39b57b..52ee823a5 100644 --- a/dashboard/client/config-compiler.js +++ b/dashboard/client/config-compiler.js @@ -1,28 +1,28 @@ (function (config, env) { const whiteList = [ - 'DATABOX_API_URL', - 'DATABOX_CLIENT_URL', - 'DEV_MODE', - 'DISPLAY_SERVICES_MENU', - 'DOCKER_TAG', - 'ELASTICHQ_URL', - 'EXPOSE_API_URL', - 'EXPOSE_CLIENT_URL', - 'KEYCLOAK_URL', - 'MAILHOG_URL', - 'MATOMO_URL', - 'NOTIFY_API_URL', - 'PGADMIN_URL', - 'PHPMYADMIN_URL', - 'RABBITMQ_CONSOLE_URL', - 'REPORT_API_URL', - 'SAML_URL', - 'SAML2_URL', - 'STACK_NAME', - 'TRAEFIK_CONSOLE_URL', - 'UPLOADER_API_URL', - 'UPLOADER_CLIENT_URL', - 'ZIPPY_URL', + 'DATABOX_API_URL', + 'DATABOX_CLIENT_URL', + 'DEV_MODE', + 'DISPLAY_SERVICES_MENU', + 'ELASTICHQ_URL', + 'EXPOSE_API_URL', + 'EXPOSE_CLIENT_URL', + 'KEYCLOAK_URL', + 'MAILHOG_URL', + 'MATOMO_URL', + 'NOTIFY_API_URL', + 'PGADMIN_URL', + 'PHPMYADMIN_URL', + 'RABBITMQ_CONSOLE_URL', + 'REPORT_API_URL', + 'SAML2_URL', + 'SAML_URL', + 'STACK_NAME', + 'STACK_VERSION', + 'TRAEFIK_CONSOLE_URL', + 'UPLOADER_API_URL', + 'UPLOADER_CLIENT_URL', + 'ZIPPY_URL', ]; const e = {}; @@ -31,8 +31,7 @@ if (whiteList.includes(key)) { e[key] = value; } - }) - + }); return { locales: config.available_locales, diff --git a/dashboard/client/src/ClientApp.tsx b/dashboard/client/src/ClientApp.tsx index 0ce2f71ad..fdf88e0c5 100644 --- a/dashboard/client/src/ClientApp.tsx +++ b/dashboard/client/src/ClientApp.tsx @@ -1,4 +1,4 @@ -import Service, {ServiceBaseProps} from "./Service.tsx"; +import Service, {ServiceBaseProps} from './Service.tsx'; import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings'; import ApiIcon from '@mui/icons-material/Api'; @@ -7,26 +7,23 @@ type Props = { clientUrl: string; } & ServiceBaseProps; -export default function ClientApp({ - apiUrl, - clientUrl, - ...props -}: Props) { - - return , - href: `${apiUrl}/admin`, - title: `Admin of ${props.title}` - }, - { - icon: , - href: apiUrl, - title: `API documentation of ${props.title}` - }, - ]} - {...props} - /> +export default function ClientApp({apiUrl, clientUrl, ...props}: Props) { + return ( + , + href: `${apiUrl}/admin`, + title: `Admin of ${props.title}`, + }, + { + icon: , + href: apiUrl, + title: `API documentation of ${props.title}`, + }, + ]} + {...props} + /> + ); } diff --git a/dashboard/client/src/Root.tsx b/dashboard/client/src/Root.tsx index 9a510be7f..a99c6c41b 100644 --- a/dashboard/client/src/Root.tsx +++ b/dashboard/client/src/Root.tsx @@ -1,7 +1,9 @@ -import {Container, Grid} from "@mui/material"; -import Service from "./Service"; -import ClientApp from "./ClientApp.tsx"; -import config from "./config.ts"; +import {Alert, Chip, Container, Grid, Typography} from '@mui/material'; +import Service from './Service'; +import ClientApp from './ClientApp.tsx'; +import config from './config.ts'; +import ApiIcon from "@mui/icons-material/Api"; +import SellIcon from '@mui/icons-material/Sell'; type Props = {}; @@ -15,51 +17,94 @@ export default function Root({}: Props) { DATABOX_CLIENT_URL, EXPOSE_CLIENT_URL, UPLOADER_CLIENT_URL, + STACK_NAME, + DEV_MODE, + STACK_VERSION, } = config.env; console.log('config.env', config.env); - return - - - {DATABOX_API_URL && } - {EXPOSE_API_URL && } - {UPLOADER_API_URL && } - {NOTIFY_API_URL && } - - + return ( + + + {STACK_NAME} + } + label={STACK_VERSION} + /> + + + {DEV_MODE && Developer Mode is enabled} + + + + {DATABOX_API_URL && ( + + )} + {EXPOSE_API_URL && ( + + )} + {UPLOADER_API_URL && ( + + )} + {NOTIFY_API_URL && ( + , + href: NOTIFY_API_URL, + title: `API documentation of Notify`, + }, + ]} + /> + )} + + + ); } diff --git a/dashboard/client/src/Service.tsx b/dashboard/client/src/Service.tsx index 8721df822..c926b3abc 100644 --- a/dashboard/client/src/Service.tsx +++ b/dashboard/client/src/Service.tsx @@ -1,5 +1,14 @@ -import {Button, Card, CardActions, CardContent, CardMedia, Grid, IconButton, Typography,} from '@mui/material'; -import {JSX, PropsWithChildren, ReactNode} from "react"; +import { + Card, + CardActions, + CardContent, + CardMedia, + Grid, + IconButton, + Typography, + Link, +} from '@mui/material'; +import {JSX, PropsWithChildren, ReactNode} from 'react'; type BaseProps = { title: string; @@ -12,7 +21,7 @@ type AppLink = { icon: ReactNode; title: string; href: string; -} +}; type Props = { links?: AppLink[]; @@ -27,64 +36,74 @@ export default function Service({ mainUrl, links = [], }: Props) { - return - - + - ({ - height: 140, - backgroundSize: 'contain', - backgroundColor: theme.palette.background.default, - })} - image={logo} - title="green iguana" - /> - - - - - {title} - - - {description && - {description} - } - - - {links.map(({href, icon, title}, i) => - {icon} - )} - - - + + ({ + height: 140, + backgroundSize: 'contain', + backgroundColor: theme.palette.background.default, + })} + image={logo} + title="green iguana" + /> + + + + + {title} + + + {description && ( + + {description} + + )} + + + {links.map(({href, icon, title}, i) => ( + + {icon} + + ))} + + + + ); } -function Link({href, children}: PropsWithChildren<{ +function AnchorLink({ + href, + children, +}: PropsWithChildren<{ href: string | undefined; }>) { if (href) { - return - {children} - + return ( + + {children} + + ); } return children as JSX.Element; diff --git a/dashboard/client/src/config.ts b/dashboard/client/src/config.ts index 8be4f8b82..5812f2328 100644 --- a/dashboard/client/src/config.ts +++ b/dashboard/client/src/config.ts @@ -1,4 +1,3 @@ - declare global { interface Window { config: { @@ -8,7 +7,6 @@ declare global { DATABOX_CLIENT_URL: string; DEV_MODE: string; DISPLAY_SERVICES_MENU: string; - DOCKER_TAG: string; ELASTICHQ_URL: string; EXPOSE_API_URL: string; EXPOSE_CLIENT_URL: string; @@ -20,9 +18,10 @@ declare global { PHPMYADMIN_URL: string; RABBITMQ_CONSOLE_URL: string; REPORT_API_URL: string; - SAML_URL: string; SAML2_URL: string; + SAML_URL: string; STACK_NAME: string; + STACK_VERSION: string; TRAEFIK_CONSOLE_URL: string; UPLOADER_API_URL: string; UPLOADER_CLIENT_URL: string; diff --git a/dashboard/client/src/index.tsx b/dashboard/client/src/index.tsx index 512bd8058..6c061a225 100644 --- a/dashboard/client/src/index.tsx +++ b/dashboard/client/src/index.tsx @@ -1,14 +1,14 @@ import ReactDOM from 'react-dom/client'; import Root from './Root.tsx'; import React from 'react'; -import {CssBaseline, GlobalStyles, ThemeOptions} from "@mui/material"; +import {CssBaseline, GlobalStyles, ThemeOptions} from '@mui/material'; import {ThemeEditorProvider} from '@alchemy/theme-editor'; const theme: ThemeOptions = { typography: { - fontFamily: '\'Montserrat\', sans-serif', + fontFamily: "'Montserrat', sans-serif", h1: { - fontSize: 24, + fontSize: 42, fontWeight: 600, }, h2: { @@ -32,17 +32,15 @@ const theme: ThemeOptions = { }, background: { default: '#85dbff', - } + }, }, -} +}; const scrollbarWidth = 3; ReactDOM.createRoot(document.getElementById('root')!).render( - + ({ diff --git a/docker-compose.yml b/docker-compose.yml index 0b98a0cb3..3ce55b0ce 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -611,53 +611,29 @@ services: networks: - internal environment: - - STACK_NAME=${COMPOSE_PROJECT_NAME} - - DOCKER_TAG - - EXPOSE_API_PORT - - EXPOSE_CLIENT_PORT - - EXPOSE_STORAGE_BUCKET_NAME - - MAILER_DSN - - MAILHOG_PORT - - MATOMO_DATABASE_DBNAME - - MATOMO_HOST - - MATOMO_MYSQL_ROOT_PASSWORD - - MATOMO_PORT - - MINIO_PORT - - NOTIFY_PORT - - PGADMIN_PORT - - PHPMYADMIN_PORT - - PS_DEBUG_SERVER_NAME_PREFIX - - PS_GATEWAY_IP - - PS_SUBNET - - RABBITMQ_HOST - - RABBITMQ_PORT - - RABBITMQ_USER - - RABBITMQ_PASSWORD - - RABBITMQ_SSL - - REGISTRY_NAMESPACE - - REPORT_DB_NAME - - XDEBUG_ENABLED - - UPLOADER_API_URL - - KEYCLOAK_URL + - DATABOX_API_URL + - DATABOX_CLIENT_URL + - DEV_MODE + - DISPLAY_SERVICES_MENU + - ELASTICHQ_URL - EXPOSE_API_URL - EXPOSE_CLIENT_URL - - UPLOADER_CLIENT_URL - - DATABOX_CLIENT_URL + - KEYCLOAK_URL + - MAILHOG_URL + - MATOMO_URL - NOTIFY_API_URL - - DATABOX_API_URL - - REPORT_API_URL - - DASHBOARD_URL - - ZIPPY_URL - - S3_ENDPOINT - - S3_PATH_PREFIX - PGADMIN_URL - PHPMYADMIN_URL - RABBITMQ_CONSOLE_URL - - TRAEFIK_CONSOLE_URL - - ELASTICHQ_URL - - MAILHOG_URL - - SAML_URL + - REPORT_API_URL - SAML2_URL + - SAML_URL + - STACK_NAME=${COMPOSE_PROJECT_NAME} + - STACK_VERSION=${DOCKER_TAG} + - TRAEFIK_CONSOLE_URL + - UPLOADER_API_URL + - UPLOADER_CLIENT_URL + - ZIPPY_URL labels: - "traefik.http.routers.dashboard.rule=Host(`dashboard.${PHRASEA_DOMAIN}`)"