Finish service card
This commit is contained in:
Eden Kirin
@ -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 (
|
||||
<Box className="tenants-status-tooltip">
|
||||
@ -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 (
|
||||
<Tooltip title={statusMessage}>
|
||||
<Avatar variant="square" className="node-name">
|
||||
{node.name}
|
||||
</Avatar>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
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(
|
||||
<Typography component="div" className={`tenant-status ${statusOk ? "status-ok" : "status-error"}`}>
|
||||
{tenantId}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack direction="row" spacing={1} className="tenants-status-container">
|
||||
<Typography component="div" className="tenants-status-title">
|
||||
Tenants
|
||||
</Typography>
|
||||
{statuses}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
interface ServiceNodePropps {
|
||||
node: Node;
|
||||
}
|
||||
|
||||
function ServiceNode({ node }: ServiceNodePropps) {
|
||||
const nodeName = node.health_check_status?.status_ok ? (
|
||||
<Tooltip title={`Node ${node.name} is healthy`}>
|
||||
<Avatar sx={{ bgcolor: green["700"] }} variant="square" className="node-name">
|
||||
{node.name}
|
||||
</Avatar>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip title={node.health_check_status?.message}>
|
||||
<Avatar sx={{ bgcolor: red[900] }} variant="square" className="node-name">
|
||||
{node.name}
|
||||
</Avatar>
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
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 = <Chip label="tenants" color="error" className="node-name" />;
|
||||
break;
|
||||
case tenantsHealth.length:
|
||||
tenantsStatusContent = <Chip label="tenants" color="success" className="node-name" />;
|
||||
break;
|
||||
default:
|
||||
tenantsStatusContent = <Chip label="tenants" color="warning" className="node-name" />;
|
||||
}
|
||||
|
||||
if (node.health_check_status?.status_per_tenant) {
|
||||
tenantsStatusContent = (
|
||||
<Tooltip title={<TenantsStatusTooltip tenantsStatus={node.health_check_status.status_per_tenant} />}>
|
||||
{tenantsStatusContent}
|
||||
</Tooltip>
|
||||
);
|
||||
} else {
|
||||
}
|
||||
}
|
||||
|
||||
const nodeUrl = node.url.replace("http://", "").replace("https://", "");
|
||||
const statusOk = node.health_check_status?.status_ok;
|
||||
|
||||
return (
|
||||
<Stack direction="row" className="service-node">
|
||||
<Box>{nodeName}</Box>
|
||||
<Box>
|
||||
<Stack direction="row" className={`service-node ${statusOk ? "status-ok" : "status-error"}`}>
|
||||
<Box>{getNodeNameElement(node)}</Box>
|
||||
<Box className="node-details">
|
||||
<Typography className="version">{node.app_details?.app_version || "no version"}</Typography>
|
||||
<Link href={node.url} target="_blank">
|
||||
{nodeUrl}
|
||||
</Link>
|
||||
<TenantsStatus statusPerTenant={node.health_check_status?.status_per_tenant} />
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@ -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 {
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user