chore: misc fixes

flanksource · Oct 29, 2023 · a0cd92f · a0cd92f
1 parent 2916426
commit a0cd92f
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 27 deletions.
diff --git a/src/components/ConfigLink/ConfigLink.tsx b/src/components/ConfigLink/ConfigLink.tsx
@@ -1,12 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
 import { HTMLAttributeAnchorTarget } from "react";
 import { Link } from "react-router-dom";
+import { getConfigsByID } from "../../api/services/configs";
 import { ConfigItem } from "../../api/types/configs";
 import ConfigsTypeIcon from "../Configs/ConfigsTypeIcon";
 import { ConfigIcon } from "../Icon/ConfigIcon";
 
 type ConfigLinkProps = {
   config?: ConfigItem;
+  configId?: string;
   className?: string;
   configTypeSecondary?: string;
   variant?: "label" | "link";
@@ -15,32 +18,42 @@ type ConfigLinkProps = {
 
 export default function ConfigLink({
   config,
+  configId,
   variant = "link",
   className = "text-zinc-600 text-sm whitespace-nowrap overflow-hidden overflow-ellipsis"
 }: ConfigLinkProps) {
-  if (config == null) {
+  const { data } = useQuery(["config", configId, config], () => {
+    if (config) {
+      return config;
+    }
+    if (configId != null) {
+      return getConfigsByID(configId);
+    }
+    return null;
+  });
+
+  if (data == null) {
     return null;
   }
+
   if (variant === "link") {
     return (
       <Link
         to={{
-          pathname: `/catalog/${config.id}`
+          pathname: `/catalog/${data.id}`
         }}
         className={clsx("flex flex-row gap-2", className)}
       >
-        <ConfigsTypeIcon config={config} />
+        <ConfigsTypeIcon config={data} />
 
-        <div className="overflow-hidden text-ellipsis flex-1">
-          {config.name}
-        </div>
+        <div className="overflow-hidden text-ellipsis flex-1">{data.name}</div>
       </Link>
     );
   }
   return (
     <div className={clsx("flex flex-row gap-1", className)}>
-      <ConfigIcon config={config} />
-      <div className="overflow-hidden text-ellipsis text-sm">{config.name}</div>
+      <ConfigIcon config={data} />
+      <div className="overflow-hidden text-ellipsis text-sm">{data.name}</div>
     </div>
   );
 }
diff --git a/src/components/ConfigList/index.tsx b/src/components/ConfigList/index.tsx
@@ -134,7 +134,7 @@ export default function ConfigList({ data, handleRowClick, isLoading }: Props) {
           : [groupByField]
       }
       hiddenColumns={setHiddenColumns()}
-      className="max-w-full overflow-x-auto"
+      className="max-w-full table-auto table-fixed"
       tableSortByState={sortBy}
       onTableSortByChanged={updateSortBy}
       determineRowClassNamesCallback={determineRowClassNames}

diff --git a/src/components/HealthChecks/CheckLink.tsx b/src/components/HealthChecks/CheckLink.tsx
@@ -1,28 +1,44 @@
+import { useQuery } from "@tanstack/react-query";
 import { Link } from "react-router-dom";
-import { ComponentHealthCheckView } from "../../api/services/topology";
-import { HealthCheck } from "../../api/types/health";
+import { getHealthCheckSummary } from "../../api/services/topology";
+import { HealthCheckSummary } from "../../api/types/health";
 import { Icon } from "../Icon";
 import { HealthCheckStatus } from "../Status/HealthCheckStatus";
 
 type ComponentCheckLinkProps = {
-  componentCheck: ComponentHealthCheckView;
+  check?: HealthCheckSummary;
+  checkId?: string;
 };
 
-export function CheckLink({ componentCheck: check }: ComponentCheckLinkProps) {
+export function CheckLink({ check, checkId }: ComponentCheckLinkProps) {
+  const { data } = useQuery(["check", checkId, check], () => {
+    if (check) {
+      return check;
+    }
+    if (checkId != null) {
+      return getHealthCheckSummary(checkId);
+    }
+    return null;
+  });
+
+  if (data == null) {
+    return null;
+  }
+
   return (
     <Link
       to={{
         pathname: `/health`,
-        search: `?checkId=${check.id}&timeRange=1h`
+        search: `?checkId=${data.id}&timeRange=1h`
       }}
       className={`flex flex-row justify-between w-full items-center space-x-2 p-2 rounded-md hover:bg-gray-100`}
     >
       <div className="flex flex-row gap-2 w-full items-center">
         <div className="flex flex-row space-x-1 items-center flex-1text-sm ">
-          <HealthCheckStatus check={check as Pick<HealthCheck, "status">} />
-          <Icon name={check.type} className="w-4 h-auto" />
+          <HealthCheckStatus check={data} />
+          <Icon name={data.type} className="w-4 h-auto" />
           <div className="overflow-hidden text-ellipsis flex-1">
-            {check.name}
+            {data.name}
           </div>
         </div>
       </div>

diff --git a/src/components/HealthChecks/__tests__/CheckLink.unit.test.tsx b/src/components/HealthChecks/__tests__/CheckLink.unit.test.tsx
@@ -16,7 +16,7 @@ describe("CheckLink", () => {
   it("renders with healthy status", () => {
     render(
       <MemoryRouter>
-        <CheckLink componentCheck={check} />
+        <CheckLink check={check} />
       </MemoryRouter>
     );
 
@@ -38,7 +38,7 @@ describe("CheckLink", () => {
 
     render(
       <MemoryRouter>
-        <CheckLink componentCheck={unhealthyCheck} />
+        <CheckLink check={unhealthyCheck} />
       </MemoryRouter>
     );
 

diff --git a/src/components/JSONViewer/index.tsx b/src/components/JSONViewer/index.tsx
@@ -100,8 +100,6 @@ export function JSONViewer({
 
   const copyFn = useCopyToClipboard();
 
-  theme.plain.backgroundColor = "#fffff";
-
   const formatDerived = useMemo(() => {
     if (format !== "json") {
       return format;

diff --git a/src/components/TopologySidebar/ComponentChecks.tsx b/src/components/TopologySidebar/ComponentChecks.tsx
@@ -61,10 +61,7 @@ export function ComponentChecks({
           <TextSkeletonLoader />
         ) : componentChecks && componentChecks.length > 0 ? (
           componentChecks.map((componentCheck) => (
-            <CheckLink
-              key={componentCheck.id}
-              componentCheck={componentCheck}
-            />
+            <CheckLink key={componentCheck.id} check={componentCheck} />
           ))
         ) : (
           <EmptyState />

diff --git a/src/pages/TopologyCard.tsx b/src/pages/TopologyCard.tsx
@@ -12,7 +12,6 @@ export function TopologyCardPage() {
     queryKey: ["topology", id],
     queryFn: () => getTopology({ id: id })
   });
-
   if (!data || !data.components || data.components?.length === 0) {
     return <InfoMessage message="Component not found" />;
   }

diff --git a/src/pages/config/ConfigDetailsPage.tsx b/src/pages/config/ConfigDetailsPage.tsx
@@ -90,7 +90,8 @@ export function ConfigDetailsPage() {
     const ordered = Object.keys(configDetails.config)
       .sort()
       .reduce((obj: Record<string, any>, key) => {
-        obj[key] = configDetails.config ? [key] : null;
+        //eslint-disable-next-line
+        obj[key] = configDetails.config[key];
         return obj;
       }, {});