feat(insights): add summary column and fix badge image rendering

Author: adityathebe

src/api/services/configs.ts

@@ -862,7 +862,7 @@ export const getAllConfigInsights = async (
 
   return resolvePostGrestRequestWithPagination(
     ConfigDB.get<ConfigAnalysis[] | null>(
-      `/config_analysis_items?select=id,analysis_type,analyzer,severity,status,source,first_observed,last_observed,config:configs(id,name,config_class,type)${pagingParams}${queryParamsString}${sortString}`,
+      `/config_analysis_items?select=id,analysis_type,analyzer,summary,severity,status,source,first_observed,last_observed,config:configs(id,name,config_class,type)${pagingParams}${queryParamsString}${sortString}`,
       {
         headers: {
           Prefer: "count=exact"

src/components/Configs/Insights/ConfigInsightsColumns.tsx

@@ -34,7 +34,7 @@ export const ConfigInsightsColumns: MRT_ColumnDef<
     header: "Type",
     id: "analysis_type",
     accessorKey: "analysis_type",
-    size: 50,
+    size: 80,
     Cell: ({ cell }) => {
       const data = cell.row.original;
 
@@ -78,6 +78,22 @@ export const ConfigInsightsColumns: MRT_ColumnDef<
     },
     enableSorting: false
   },
+  {
+    header: "Summary",
+    id: "summary",
+    accessorKey: "summary",
+    size: 300,
+    enableSorting: false,
+    Cell: ({ cell }) => {
+      const value = cell.getValue<string>();
+      if (!value) return null;
+      return (
+        <span className="overflow-hidden overflow-ellipsis text-gray-600">
+          {value.charAt(0).toUpperCase() + value.slice(1)}
+        </span>
+      );
+    }
+  },
   {
     header: "Severity",
     id: "severity",

src/components/Topology/TopologyCard/FormatProperty.tsx

@@ -1,6 +1,5 @@
 import { Property as PropertyD } from "@flanksource-ui/api/types/topology";
 import { Age } from "@flanksource-ui/ui/Age";
-import Image from "next/image";
 import { FiExternalLink } from "react-icons/fi";
 import {
   FormatPropertyCPUMemory,
@@ -43,11 +42,10 @@ export function FormatProperty({
 
   if (property.type === "badge") {
     return (
-      <Image
+      // eslint-disable-next-line @next/next/no-img-element
+      <img
         src={property.text!}
         alt={property.label || property.name}
-        height={20}
-        width={80}
         className="inline-block h-5 w-auto"
       />
     );