chore: update icons

package.json

@@ -70,6 +70,7 @@
     "react-image": "^4.1.0",
     "react-loading-icons": "^1.0.8",
     "react-mentions": "^4.4.0",
+    "react-responsive": "^9.0.2",
     "react-router-dom": "^6.2.1",
     "react-select": "^5.7.4",
     "react-table": "^7.7.0",
@@ -118,7 +119,9 @@
     "check:browserslist": "npx browserslist",
     "prepare": "husky install",
     "launch:dev:canary-checker": "NODE_ENV=development APP_DEPLOYMENT=CANARY_CHECKER node scripts/serve-build.js",
-    "launch:dev:incident-manager": "NODE_ENV=development APP_DEPLOYMENT=INCIDENT_MANAGER node scripts/serve-build.js"
+    "launch:dev:incident-manager": "NODE_ENV=development APP_DEPLOYMENT=INCIDENT_MANAGER node scripts/serve-build.js",
+    "svgo": "rm -rf src/icons/output; svgo -i src/icons/*.svg -o src/icons/output --config svgo.config.mjs",
+    "svg-resize": "cd src/icons && bash resize.sh"
   },
   "husky": {
     "hooks": {
@@ -173,6 +176,7 @@
     "msw": "^1.2.3",
     "msw-storybook-addon": "^1.10.0",
     "next": "13.4.16",
+    "node-html-parser": "^6.1.12",
     "node-static": "^0.7.11",
     "npm": "^9.6.1",
     "postcss": "^8",
@@ -181,6 +185,7 @@
     "source-map-explorer": "^2.5.2",
     "storybook": "^7.6.1",
     "storybook-addon-react-router-v6": "^2.0.10",
+    "svgo": "^3.1.0",
     "ts-jest": "^29.0.3",
     "ts-node-dev": "^2.0.0",
     "webpack": "^5.73.0"

pages/global.css

@@ -74,6 +74,22 @@
     @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none;
   }
 
+  .btn-icon {
+    @apply text-gray-600 hover:text-gray-900 inline-flex items-center justify-center px-0 pl-0 border-none text-sm font-medium bg-white focus:outline-none ;
+  }
+
+  .btn-icon > svg * {
+    @apply fill-gray-600
+  }
+
+  .btn-icon:hover > svg * {
+    @apply fill-gray-800
+  }
+
+  .link {
+    @apply text-blue-500 hover:text-blue-800 visited:text-blue-500 cursor-pointer
+  }
+
   .btn-white {
     @apply inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-100 focus:outline-none;
   }

src/App.tsx

@@ -225,7 +225,6 @@ export function HealthRoutes({ sidebar }: { sidebar: ReactNode }) {
 export function IncidentManagerRoutes({ sidebar }: { sidebar: ReactNode }) {
   const { featureFlagsLoaded } = useFeatureFlagsContext();
 
-  console.log(window.location.pathname);
   if (
     !featureFlagsLoaded &&
     !window.location.pathname.startsWith("/view/topology")

src/api/query-hooks/index.ts

@@ -21,7 +21,8 @@ import { LogsResponse, searchLogs, SearchLogsPayload } from "../services/logs";
 import {
   getComponentTeams,
   getHealthCheckItem,
-  getTopology,
+  getTopologyNameByID,
+  getTopologyByID,
   getTopologyComponentLabels,
   getTopologyComponents,
   getTopologyComponentsWithLogs
@@ -114,17 +115,29 @@ export const useComponentLabelsQuery = ({
   });
 };
 
+export const useTopologyQuery = (topologyId = "", { ...rest } = {}) => {
+  return useQuery(
+    ["topology", topologyId],
+    () => {
+      return getTopologyByID(topologyId).then((data) => {
+        return data.data.length > 0 ? data.data[0] : null;
+      });
+    },
+    {
+      ...rest
+    }
+  );
+};
+
 export const useComponentNameQuery = (
   topologyId = "",
-  { enabled = true, staleTime = defaultStaleTime, ...rest }
+  { enabled = true, staleTime = defaultStaleTime, ...rest } = {}
 ) => {
   return useQuery(
     ["topology", topologyId],
     () => {
-      return getTopology({
-        id: topologyId
-      }).then((data) => {
-        return data.components?.[0];
+      return getTopologyNameByID(topologyId).then((data) => {
+        return data.data.length > 0 ? data.data[0] : null;
       });
     },
     {

src/api/query-hooks/useIncidentRespondersQuery.tsx

@@ -38,7 +38,7 @@ export function useIncidentRespondersQuery(incidentId: string) {
                   return null;
                 }
                 return (
-                  <Icon className="inline-block h-5" name={item.team.icon} />
+                  <Icon className={"inline-block h-5"} name={item.team.icon!} />
                 );
               }
             : () => <Avatar user={item.person} />;

src/api/services/agents.ts

@@ -4,6 +4,8 @@ import { AgentAPI, IncidentCommander } from "../axios";
 import { resolve } from "../resolve";
 import { AgentItem } from "../types/common";
 
+export const Local = "00000000-0000-0000-0000-000000000000";
+
 export const getAgentsList = async (
   params: {
     sortBy?: string;
@@ -71,6 +73,9 @@ export async function deleteAgent(id: string, cleanup: boolean = false) {
   return res.data;
 }
 export const getAgentByID = async (id: string) => {
+  if (id === Local) {
+    return null;
+  }
   const res = await IncidentCommander.get<AgentItem[] | null>(
     `/agents?select=id,name,description&id=eq.${id}`
   );

src/api/services/configs.ts

@@ -463,7 +463,7 @@ export const getConfigComponentRelationships = async <T>(configID: string) => {
 
 export const getComponentConfigChanges = async (topologyID: string) => {
   const res = await ConfigDB.get<ConfigChange[]>(
-    `/changes_by_component?component_id=eq.${topologyID}&select=id,type,config_id,name,change_type,config_class,created_at,config:configs(id, name, type, config_class)`
+    `/changes_by_component?component_id=eq.${topologyID}&select=id,type,config_id,name,change_type,config_class,created_at:configs(id, name, type, config_class)`
   );
   return res.data;
 };

src/api/services/topology.ts

@@ -1,5 +1,4 @@
 import { stringify } from "qs";
-import { TopologyComponentItem } from "../../components/FilterIncidents/FilterIncidentsByComponents";
 import { AVATAR_INFO, TimeRangeToMinutes } from "../../constants";
 import {
   CanaryChecker,
@@ -16,6 +15,7 @@ import {
   HealthCheckSummary
 } from "../types/health";
 import {
+  Component,
   ComponentHealthCheckView,
   ComponentTeamItem,
   ComponentTemplateItem,
@@ -167,9 +167,8 @@ export const getCheckStatuses = (
   if (duration) {
     queryString = `${queryString}&duration=gte.${duration}`;
   }
-  queryString = `${queryString}&limit=${pageSize}&offset=${
-    pageIndex * pageSize
-  }`;
+  queryString = `${queryString}&limit=${pageSize}&offset=${pageIndex * pageSize
+    }`;
   return resolve(
     CanaryCheckerDB.get<HealthCheckStatus[] | null>(
       `/check_statuses?${queryString}`,
@@ -183,32 +182,31 @@ export const getCheckStatuses = (
 };
 
 export const getTopologyComponents = () => {
-  return IncidentCommander.get<TopologyComponentItem[]>(
-    `/component_names?order=name.asc`
-  );
+  return IncidentCommander.get<Component[]>(`/component_names?order=name.asc`);
 };
 
 export const getTopologyComponentsWithLogs = () => {
-  return IncidentCommander.get<TopologyComponentItem[]>(
+  return IncidentCommander.get<Component[]>(
     `/components_with_logs?order=name.asc`
   );
 };
 
-export const getTopologyComponentByID = async (topologyID: string) => {
-  const res = await IncidentCommander.get<TopologyComponentItem[]>(
+export const getTopologyNameByID = (topologyID: string) => {
+  return IncidentCommander.get<Component[]>(
     `/component_names?id=eq.${topologyID}`
   );
-  return res.data[0];
+};
+
+export const getTopologyByID = async (topologyID: string) => {
+  return IncidentCommander.get<Topology[]>(`/components?id=eq.${topologyID}`);
 };
 
 export const getTopologyComponentLabels = () => {
   return IncidentCommander.get(`/component_labels`);
 };
 
 export const getTopologyComponent = (id: string) => {
-  return IncidentCommander.get<TopologyComponentItem[]>(
-    `/component_names?id=eq.${id}`
-  );
+  return IncidentCommander.get<Component[]>(`/component_names?id=eq.${id}`);
 };
 
 export const getComponentTemplate = async (id: string) => {

src/api/types/health.ts

@@ -17,13 +17,14 @@ export interface HealthCheck extends Timestamped, Avatar, Agent {
   type: string;
   name: string;
   canary_name: string;
+  canary_namesspace?: string;
   namespace: string;
   labels: HealthCheckLabels;
   Status: string;
   uptime: HealthCheckUptime;
   latency: HealthCheckLatency;
   checkStatuses: HealthCheckStatus[];
-  lastRuntime: string;
+  last_runtime: string;
   description?: string;
   spec?: any;
   icon?: string;
@@ -36,19 +37,29 @@ export interface HealthCheck extends Timestamped, Avatar, Agent {
   loading?: boolean;
   severity?: string;
   next_runtime?: string;
+  last_transition_time?: string;
   agents?: AgentItem;
   canaries?: SchemaResourceI;
   configs: {
     configs: Pick<ConfigItem, "id" | "name" | "type">;
   }[];
-  components?: {
+  components: {
     components: Pick<Topology, "id" | "name" | "icon">;
   }[];
 }
 
 export type HealthCheckSummary = Pick<
   HealthCheck,
-  "id" | "name" | "icon" | "type" | "status" | "severity" | "next_runtime"
+  | "id"
+  | "name"
+  | "icon"
+  | "type"
+  | "status"
+  | "severity"
+  | "next_runtime"
+  | "created_at"
+  | "last_runtime"
+  | "last_transition_time"
 >;
 
 export interface HealthCheckStatus {

src/api/types/topology.ts

@@ -20,16 +20,23 @@ export type TopologyProperty = {
   namespace?: string;
 };
 
-export interface Topology extends Timestamped, CostsData, Agent, Namespaced {
+export interface Component extends Timestamped, Namespaced {
+  created_at?: string;
+  external_id?: string;
+  icon?: string;
   id: string;
   parent_id?: string;
+  path?: string;
   type?: string;
+  updated_at?: string;
+}
+
+export interface Topology extends Component, CostsData, Agent {
   title?: string;
   properties?: TopologyProperty[];
   components?: Topology[];
   labels?: Record<string, string>;
   path?: string;
-  icon?: string;
   text?: string;
   status?: string;
   status_reason?: string;

src/components/Agents/AgentName.tsx

@@ -1,8 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
-import { getAgentByID } from "../../api/services/agents";
-import { Badge } from "../Badge";
-import { ComponentProps } from "react";
+import React, { ComponentProps } from "react";
+import { getAgentByID, Local } from "../../api/services/agents";
 import { AgentItem } from "../../api/types/common";
+import { Badge } from "../Badge";
 
 type TopologyCardAgentProps = {
   agent?: AgentItem;
@@ -27,7 +27,7 @@ export default function AgentName({
 
   const agent = propAgent ?? dbAgent;
 
-  if (!agent) {
+  if (!agent || agent.id === Local) {
     return null;
   }
 

src/components/AnalysisTypesDropdown/index.tsx

@@ -29,7 +29,7 @@ export function AnalysisTypesDropdown({
           value: d.analysis_type,
           description: d.analysis_type,
           name: d.analysis_type,
-          icon: <Icon name={d.analysis_type} secondary={d.analysis_type} />
+          icon: <Icon name={d.analysis_type!} />
         }));
       }, [])
     }

src/components/AttachEvidenceDialog/index.tsx

@@ -330,10 +330,7 @@ export function AttachEvidenceDialog({
       toastSuccess(
         <div>
           Linked to{" "}
-          <Link
-            className="underline text-blue-600 hover:text-blue-800 visited:text-blue-600"
-            to={`/incidents/${incidentId}`}
-          >
+          <Link className="link" to={`/incidents/${incidentId}`}>
             {" "}
             incident
           </Link>{" "}

src/components/Authentication/Kratos/KratosLogin.tsx

@@ -46,7 +46,7 @@
         .getLoginFlow({ id })
         .then(({ data }) => setFlow(data))
         .catch(handleError),
     []
   );
 
   const handleError = useCallback(
@@ -131,9 +131,7 @@
         </div>
         <div className="mt-2">
           <Link href="/recovery" passHref>
-            <div className="cursor-pointer font-medium text-blue-600 hover:text-blue-500">
-              Reset password
-            </div>
+            <div className="font-medium link">Reset password</div>
           </Link>
         </div>
       </div>

src/components/Authentication/Kratos/KratosProfileSettings.tsx

@@ -119,11 +119,7 @@ function KratosProfileSettings() {
           className="p-2 h-auto m-auto rounded-8px w-48"
         />
         <div className="pb-2">
-          <Link
-            as="a"
-            href="/"
-            className="cursor-pointer font-medium text-blue-600 hover:text-blue-500"
-          >
+          <Link as="a" href="/" className="font-medium link">
             Go back
           </Link>
           <Messages messages={messages} />

src/components/Badge/index.tsx

@@ -4,6 +4,7 @@ type BadgeProps = {
   text: React.ReactNode;
   value?: string;
   size?: "xs" | "sm" | "md";
+  color?: "blue" | "gray";
   dot?: string;
   title?: string;
   className?: string;
@@ -17,12 +18,19 @@ export const Badge = React.memo(function ({
   size = "sm",
   dot,
   title,
+  color = "blue",
   className,
-  colorClass = "bg-blue-100 text-blue-800",
   roundedClass = "rounded"
 }: BadgeProps) {
+  if (text == null || text === "") {
+    return null;
+  }
+  const colorClass =
+    color === "blue"
+      ? "bg-blue-100 text-blue-800"
+      : "bg-gray-100 text-gray-700";
   const spanClassName =
-    size === "sm" ? "text-sm px-1 py-0.5" : "text-xs px-0.5";
+    size === "sm" ? "text-sm px-1 py-0.5" : "text-xs px-1 py-0.5";
   const svgClassName =
     size === "sm" ? "mr-1.5 h-2 w-2" : "-ml-0.5 mr-1.5 h-2 w-2";