Merge pull request #1460 from flanksource/1446-topology-add-statusrea…

…son-subtitle-header

1446-topology-add-statusreason-subtitle-header

src/components/Agents/AgentName.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { getAgentByID } from "../../api/services/topology";
+import { Badge } from "../Badge";
 
 type TopologyCardAgentProps = {
   agentId?: string;
@@ -18,5 +19,5 @@ export default function AgentName({ agentId }: TopologyCardAgentProps) {
     return null;
   }
 
-  return <div className="text-gray-400 text-sm">{agent.name}</div>;
+  return <Badge title={agent.description} text={agent.name} />;
 }

src/components/CustomScroll/index.tsx

@@ -1,9 +1,9 @@
 import clsx from "clsx";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 export type CustomScrollProps = {
   maxHeight: string;
-  children: JSX.Element | JSX.Element[];
+  children: React.ReactNode;
   showMoreClass?: string;
   minChildCount: number;
 } & React.HTMLProps<HTMLDivElement>;

src/components/HealthChecksSummary/index.tsx

@@ -3,7 +3,7 @@ import { AiFillHeart } from "react-icons/ai";
 import { StatusLine, StatusLineProps } from "../StatusLine/StatusLine";
 
 type HealthChecksSummaryProps = React.HTMLProps<HTMLDivElement> & {
-  checks: {
+  checks?: {
     health: number;
     warning: number;
     unhealthy: number;

src/components/HealthSummary/summary.tsx

@@ -4,22 +4,15 @@ import {
   StatusLine,
   StatusLineProps
 } from "../StatusLine/StatusLine";
-
-type TopologyComponentProp = {
-  id: string;
-  name: string;
-  icon: string;
-  summary: { [key: string]: number };
-  components?: TopologyComponentProp[];
-} & { [key: string]: any };
+import { Topology } from "../../context/TopologyPageContext";
 
 type HealthSummaryProps = {
-  component: TopologyComponentProp;
+  component: Topology;
   iconSize?: "2xs" | "2xsi" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
   viewType?: "individual_level" | "children_level";
 } & React.HTMLProps<HTMLDivElement>;
 
-function getStatuses(summary: { [key: string]: number }, url?: string) {
+function getStatuses(summary?: { [key: string]: number }, url?: string) {
   if (!summary) {
     return [];
   }
@@ -88,7 +81,7 @@ export const HealthSummary = ({
       data.label = component.name;
       data.url = `/topology/${component.id}`;
       data.statuses = getStatuses(
-        component.summary,
+        component?.summary,
         `/topology/${component.id}`
       );
     } else {

src/components/TopologyCard/Property.tsx

@@ -41,12 +41,12 @@ export function FormatProperty({
 
 type PropertyProps = {
   property: TopologyProperty;
-} & React.HTMLAttributes<HTMLDivElement>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "property">;
 
 export const Property = ({
   property,
   className = "",
-  ...rest
+  ...props
 }: PropertyProps) => {
   const { name, icon, color } = property;
   const label =
@@ -65,7 +65,7 @@ export const Property = ({
         { [className]: className },
         icon ? "flex-row" : "flex-col"
       )}
-      {...rest}
+      {...props}
     >
       <Icon name={icon} className="mr-1 w-4" />
       {!isEmpty(label) && (

src/components/TopologyCard/TopologyCard.stories.tsx

@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MemoryRouter } from "react-router-dom";
 import { Size } from "../../types";
 import { TopologyCard } from "./index";
+import { Topology } from "../../context/TopologyPageContext";
 
 const defaultQueryClient = new QueryClient();
 
@@ -21,11 +22,11 @@ export default {
   ]
 } as ComponentMeta<typeof TopologyCard>;
 
-const topology = {
+const topology: Topology = {
   name: "abp",
   id: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
   text: "ABP Microservices",
-  topology_type: "component",
+  type: "component",
   namespace: "dev",
   labels: {
     environment: "dev",
@@ -34,17 +35,18 @@ const topology = {
   },
   icon: "dotnet",
   status: "unknown",
-  type: "DotnetApplication",
   summary: {},
   properties: [
     {
       icon: "world",
       type: "url",
-      text: "https://docs.abp.io/en/abp/latest/Samples/Microservice-Demo"
+      text: "https://docs.abp.io/en/abp/latest/Samples/Microservice-Demo",
+      name: "Documentation"
     },
     {
       icon: "aws",
-      text: "eu-west-2"
+      text: "eu-west-2",
+      name: "Region"
     },
     {
       name: "Products",
@@ -67,167 +69,142 @@ const topology = {
     {
       name: "Auth Server",
       id: "01821200-3e6c-7cf0-ad2a-7ed31a924c25",
-      topology_type: "component",
+      type: "component",
       labels: {
         environment: "dev",
         "kustomize.toolkit.fluxcd.io/name": "aws-sandbox",
         "kustomize.toolkit.fluxcd.io/namespace": "flux-system"
       },
       icon: "dotnet",
       path: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      type: "Application",
       summary: {},
       parent_id: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      system_template_id: "01818abb-1d07-e0c6-cbe0-6b3b702039a5",
       created_at: "2022-07-18T15:49:42.124908Z",
       updated_at: "2022-07-18T15:49:42.124908Z",
-      deleted_at: null,
       external_id: "Auth Server"
     },
     {
       name: "Website",
       id: "01821200-3e8d-a787-89cc-49c9bc6841ec",
-      topology_type: "component",
+      type: "component",
       labels: {
         environment: "dev",
         "kustomize.toolkit.fluxcd.io/name": "aws-sandbox",
         "kustomize.toolkit.fluxcd.io/namespace": "flux-system"
       },
       icon: "dotnet",
       path: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      type: "Application",
       summary: {},
       parent_id: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      system_template_id: "01818abb-1d07-e0c6-cbe0-6b3b702039a5",
       created_at: "2022-07-18T15:49:42.157617Z",
       updated_at: "2022-07-18T15:49:42.157617Z",
-      deleted_at: null,
       external_id: "Website"
     },
     {
       name: "Redis",
       id: "01821200-3e93-0df7-f6ce-703a52423827",
-      topology_type: "component",
+      type: "component",
       labels: {
         environment: "dev",
         "kustomize.toolkit.fluxcd.io/name": "aws-sandbox",
         "kustomize.toolkit.fluxcd.io/namespace": "flux-system"
       },
       icon: "redis",
       path: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      type: "Application",
       summary: {},
       parent_id: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      system_template_id: "01818abb-1d07-e0c6-cbe0-6b3b702039a5",
       created_at: "2022-07-18T15:49:42.163406Z",
       updated_at: "2022-07-18T15:49:42.163406Z",
-      deleted_at: null,
       external_id: "Redis"
     },
     {
       name: "RabbitMQ",
       id: "01821200-3e98-cdd5-f081-bc3f93476705",
-      topology_type: "component",
+      type: "component",
       labels: {
         environment: "dev",
         "kustomize.toolkit.fluxcd.io/name": "aws-sandbox",
         "kustomize.toolkit.fluxcd.io/namespace": "flux-system"
       },
       icon: "rabbitmq",
       path: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      type: "Application",
       summary: {},
       parent_id: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      system_template_id: "01818abb-1d07-e0c6-cbe0-6b3b702039a5",
       created_at: "2022-07-18T15:49:42.169415Z",
       updated_at: "2022-07-18T15:49:42.169415Z",
-      deleted_at: null,
       external_id: "RabbitMQ"
     },
     {
       name: "Mongo",
       id: "01821200-3e9f-d054-115a-c818bf42168a",
-      topology_type: "component",
+      type: "component",
       labels: {
         environment: "dev",
         "kustomize.toolkit.fluxcd.io/name": "aws-sandbox",
         "kustomize.toolkit.fluxcd.io/namespace": "flux-system"
       },
       icon: "mongo",
       path: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      type: "Application",
       summary: {},
       parent_id: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      system_template_id: "01818abb-1d07-e0c6-cbe0-6b3b702039a5",
       created_at: "2022-07-18T15:49:42.175625Z",
       updated_at: "2022-07-18T15:49:42.175625Z",
-      deleted_at: null,
       external_id: "Mongo"
     },
     {
       name: "Backend Admin",
       id: "01821200-3e73-2612-7bed-623aba12935c",
-      topology_type: "component",
+      type: "component",
       labels: {
         environment: "dev",
         "kustomize.toolkit.fluxcd.io/name": "aws-sandbox",
         "kustomize.toolkit.fluxcd.io/namespace": "flux-system"
       },
       icon: "dotnet",
       path: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      type: "Application",
       summary: {},
       parent_id: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      system_template_id: "01818abb-1d07-e0c6-cbe0-6b3b702039a5",
       created_at: "2022-07-18T15:49:42.131378Z",
       updated_at: "2022-07-18T15:49:42.131378Z",
-      deleted_at: null,
       external_id: "Backend Admin"
     },
     {
       name: "Blogging Service",
       id: "01821200-3e7a-91aa-bd3e-b95147d33c9f",
-      topology_type: "component",
+      type: "component",
       labels: {
         environment: "dev",
         "kustomize.toolkit.fluxcd.io/name": "aws-sandbox",
         "kustomize.toolkit.fluxcd.io/namespace": "flux-system"
       },
       icon: "dotnet",
       path: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      type: "Application",
       summary: {},
       parent_id: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      system_template_id: "01818abb-1d07-e0c6-cbe0-6b3b702039a5",
       created_at: "2022-07-18T15:49:42.138489Z",
       updated_at: "2022-07-18T15:49:42.138489Z",
-      deleted_at: null,
       external_id: "Blogging Service"
     },
     {
       name: "Identity Service",
       id: "01821200-3e80-1713-425c-2cecf97a8f1f",
-      topology_type: "component",
+      type: "component",
       labels: {
         environment: "dev",
         "kustomize.toolkit.fluxcd.io/name": "aws-sandbox",
         "kustomize.toolkit.fluxcd.io/namespace": "flux-system"
       },
       icon: "dotnet",
       path: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      type: "Application",
       summary: {},
       parent_id: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      system_template_id: "01818abb-1d07-e0c6-cbe0-6b3b702039a5",
       created_at: "2022-07-18T15:49:42.14447Z",
       updated_at: "2022-07-18T15:49:42.14447Z",
-      deleted_at: null,
       external_id: "Identity Service"
     },
     {
       name: "Product Service",
       id: "01821200-3e87-9569-3b9a-4e501ba092e9",
-      topology_type: "component",
       labels: {
         environment: "dev",
         "kustomize.toolkit.fluxcd.io/name": "aws-sandbox",
@@ -238,16 +215,13 @@ const topology = {
       type: "Application",
       summary: {},
       parent_id: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      system_template_id: "01818abb-1d07-e0c6-cbe0-6b3b702039a5",
       created_at: "2022-07-18T15:49:42.151638Z",
       updated_at: "2022-07-18T15:49:42.151638Z",
-      deleted_at: null,
       external_id: "Product Service"
     },
     {
       name: "SQL Server",
       id: "01821200-3ea6-5708-843b-d84222a4d42d",
-      topology_type: "component",
       labels: {
         environment: "dev",
         "kustomize.toolkit.fluxcd.io/name": "aws-sandbox",
@@ -258,17 +232,13 @@ const topology = {
       type: "Application",
       summary: {},
       parent_id: "01821200-3e60-0dbb-7ef3-58e1635bc8a6",
-      system_template_id: "01818abb-1d07-e0c6-cbe0-6b3b702039a5",
       created_at: "2022-07-18T15:49:42.183071Z",
       updated_at: "2022-07-18T15:49:42.183071Z",
-      deleted_at: null,
       external_id: "SQL Server"
     }
   ],
-  system_template_id: "01818abb-1d07-e0c6-cbe0-6b3b702039a5",
   created_at: "2022-07-18T15:49:42.112918Z",
-  updated_at: "2022-07-18T15:49:42.112918Z",
-  deleted_at: null
+  updated_at: "2022-07-18T15:49:42.112918Z"
 };
 
 const Template: ComponentStory<typeof TopologyCard> = (arg: any) => {