From 58b67da193fbfae1c21c2b38fefec1d8d3777995 Mon Sep 17 00:00:00 2001 From: Eden Kirin Date: Fri, 26 Jan 2024 23:39:26 +0100 Subject: [PATCH 1/2] Better layout --- src/components/dashboard/ServiceCard.tsx | 34 +++++++++++++----------- src/scss/_service-card.scss | 12 ++++++++- 2 files changed, 30 insertions(+), 16 deletions(-) diff --git a/src/components/dashboard/ServiceCard.tsx b/src/components/dashboard/ServiceCard.tsx index 8cc94c0..59ca61f 100644 --- a/src/components/dashboard/ServiceCard.tsx +++ b/src/components/dashboard/ServiceCard.tsx @@ -10,6 +10,9 @@ import Tooltip from "@mui/material/Tooltip"; import Chip from "@mui/material/Chip"; import Grid from "@mui/material/Unstable_Grid2"; import Box from "@mui/material/Box"; +import Link from "@mui/material/Link"; +import Avatar from "@mui/material/Avatar"; +import { green, red } from "@mui/material/colors"; interface ServiceCardProps { service: Service; @@ -50,11 +53,15 @@ interface ServiceNodePropps { function ServiceNode({ node }: ServiceNodePropps) { const nodeName = node.health_check_status?.status_ok ? ( - + + {node.name} + ) : ( - + + {node.name} + ); @@ -88,21 +95,18 @@ function ServiceNode({ node }: ServiceNodePropps) { } } + const nodeUrl = node.url.replace("http://", "").replace("https://", ""); + return ( - - {nodeName} - + + {nodeName} + {node.app_details?.app_version || "no version"} - - - - - - - - {tenantsStatusContent} - - + + {nodeUrl} + + + ); } diff --git a/src/scss/_service-card.scss b/src/scss/_service-card.scss index 2dbc5da..27902bf 100644 --- a/src/scss/_service-card.scss +++ b/src/scss/_service-card.scss @@ -3,7 +3,7 @@ $color-warning: #ed6c02; $color-danger: #d32f2f; .service-card { - width: 400px; + width: 450px; .service-title-container { color: white; background-color: #15232d; @@ -29,8 +29,15 @@ $color-danger: #d32f2f; } .service-node { + align-items: center; + gap: 1rem; + .node-name { font-weight: bold; + border-radius: 10px; + } + .version { + font-weight: bold; } .status { display: flex; @@ -42,6 +49,9 @@ $color-danger: #d32f2f; margin-left: 0.5rem; } } + a { + font-family: Verdana, Geneva, Tahoma, sans-serif; + } } .MuiCardContent-root { From fadeead8583a83cd5ce7203bec1466558b4abcb6 Mon Sep 17 00:00:00 2001 From: Eden Kirin Date: Sat, 27 Jan 2024 22:41:15 +0100 Subject: [PATCH 2/2] Finish service card --- src/components/dashboard/ServiceCard.tsx | 105 +++++++++++------------ src/scss/_service-card.scss | 64 ++++++++++---- src/types.tsx | 2 +- 3 files changed, 101 insertions(+), 70 deletions(-) diff --git a/src/components/dashboard/ServiceCard.tsx b/src/components/dashboard/ServiceCard.tsx index 59ca61f..9f02bb2 100644 --- a/src/components/dashboard/ServiceCard.tsx +++ b/src/components/dashboard/ServiceCard.tsx @@ -1,18 +1,14 @@ -import React from "react"; +import React, { ReactElement } from "react"; import { Service, Node, StatusPerTenant } from "../../types"; import Typography from "@mui/material/Typography"; import Card from "@mui/material/Card"; import CardContent from "@mui/material/CardContent"; import Stack from "@mui/material/Stack"; -import IconButton from "@mui/material/IconButton"; -import LaunchIcon from "@mui/icons-material/Launch"; import Tooltip from "@mui/material/Tooltip"; import Chip from "@mui/material/Chip"; -import Grid from "@mui/material/Unstable_Grid2"; import Box from "@mui/material/Box"; import Link from "@mui/material/Link"; import Avatar from "@mui/material/Avatar"; -import { green, red } from "@mui/material/colors"; interface ServiceCardProps { service: Service; @@ -35,8 +31,6 @@ function TenantsStatusTooltip({ tenantsStatus }: TenantsStatusTooltipProps) { console.log(`key: ${key}, value: ${value}`); return null; }); - // console.log(tenantsStatus); - // console.log(statusItems); return ( @@ -46,65 +40,68 @@ function TenantsStatusTooltip({ tenantsStatus }: TenantsStatusTooltipProps) { ); } +function getNodeNameElement(node: Node): React.ReactElement { + let statusMessage; + const statusOk = node.health_check_status?.status_ok; + + if (statusOk) { + statusMessage = `Node ${node.name} is healthy`; + } else { + statusMessage = node.health_check_status?.message; + } + return ( + + + {node.name} + + + ); +} + +interface TenantsStatusProps { + statusPerTenant: StatusPerTenant | null; +} + +function TenantsStatus({ statusPerTenant }: TenantsStatusProps) { + if (!statusPerTenant) return <>; + + let statuses: ReactElement[] = []; + + for (const [tenantId, statusOk] of Object.entries(statusPerTenant)) { + statuses.push( + + {tenantId} + + ); + } + + return ( + + + Tenants + + {statuses} + + ); +} + interface ServiceNodePropps { node: Node; } function ServiceNode({ node }: ServiceNodePropps) { - const nodeName = node.health_check_status?.status_ok ? ( - - - {node.name} - - - ) : ( - - - {node.name} - - - ); - - let tenantsHealth: boolean[] = []; - if (node.health_check_status?.status_per_tenant) { - tenantsHealth = Object.values(node.health_check_status?.status_per_tenant); - } - - let tenantsStatusContent = null; - if (tenantsHealth.length > 0) { - const okValues = tenantsHealth.filter((t) => t === true); - - switch (okValues.length) { - case 0: - tenantsStatusContent = ; - break; - case tenantsHealth.length: - tenantsStatusContent = ; - break; - default: - tenantsStatusContent = ; - } - - if (node.health_check_status?.status_per_tenant) { - tenantsStatusContent = ( - }> - {tenantsStatusContent} - - ); - } else { - } - } - const nodeUrl = node.url.replace("http://", "").replace("https://", ""); + const statusOk = node.health_check_status?.status_ok; return ( - - {nodeName} - + + {getNodeNameElement(node)} + {node.app_details?.app_version || "no version"} {nodeUrl} + ); diff --git a/src/scss/_service-card.scss b/src/scss/_service-card.scss index 27902bf..1f2c1c6 100644 --- a/src/scss/_service-card.scss +++ b/src/scss/_service-card.scss @@ -1,4 +1,6 @@ -$color-ok: #27cb30; +@use "sass:color"; + +$color-ok: #1dad24; $color-warning: #ed6c02; $color-danger: #d32f2f; @@ -30,25 +32,60 @@ $color-danger: #d32f2f; .service-node { align-items: center; - gap: 1rem; + gap: 0.5rem; .node-name { font-weight: bold; border-radius: 10px; } - .version { - font-weight: bold; - } - .status { - display: flex; - align-items: center; - .docs-url { - margin-left: auto; + + .node-details { + border-left: 4px solid #c1c1c1; + padding-left: 0.5rem; + + .version { + font-weight: bold; } - .status-icon { - margin-left: 0.5rem; + .tenants-status-container { + align-items: center; + margin-top: 0.5rem; + flex-flow: wrap; + + .tenants-status-title { + font-weight: bold; + } + + .tenant-status { + color: white; + padding: 0.2rem 0.5rem; + border-radius: 10px; + &.status-ok { + background-color: color.change($color-ok, $alpha: 0.6); + } + &.status-error { + background-color: color.change($color-danger, $alpha: 0.6); + } + } } } + + &.status-ok { + .node-name { + background-color: $color-ok; + } + .node-details { + border-left-color: color.change($color-ok, $alpha: 0.6); + } + } + &.status-error { + .node-name { + background-color: $color-danger; + } + .node-details { + border-left-color: color.change($color-danger, $alpha: 0.6); + } + } + a { font-family: Verdana, Geneva, Tahoma, sans-serif; } @@ -58,6 +95,3 @@ $color-danger: #d32f2f; padding-bottom: 16px !important; } } - -.MuiTooltip-tooltip .tenants-status-tooltip { -} diff --git a/src/types.tsx b/src/types.tsx index 5ce4be5..0f65b5d 100644 --- a/src/types.tsx +++ b/src/types.tsx @@ -6,7 +6,7 @@ export type EnvTab = { export type StatusPerTenant = { [tenantId: string]: boolean }; -type HealthCheckStatus = { +export type HealthCheckStatus = { status_ok: boolean; message: string; status_per_tenant: StatusPerTenant | null;