feat(View): Duration Panel

src/pages/audit-report/components/View/View.tsx

@@ -19,7 +19,8 @@ import {
   TablePanel,
   PieChartPanel,
   GaugePanel,
-  TextPanel
+  TextPanel,
+  DurationPanel
 } from "./panels";
 import GlobalFilters from "./GlobalFilters";
 import GlobalFiltersForm from "./GlobalFiltersForm";
@@ -193,7 +194,7 @@ const View: React.FC<ViewProps> = ({
   );
 };
 
-const renderPanel = (panel: any, index: number) => {
+const renderPanel = (panel: PanelResult, index: number) => {
   switch (panel.type) {
     case "number":
       return <NumberPanel key={`${panel.name}-${index}`} summary={panel} />;
@@ -205,6 +206,8 @@ const renderPanel = (panel: any, index: number) => {
       return <GaugePanel key={`${panel.name}-${index}`} summary={panel} />;
     case "text":
       return <TextPanel key={`${panel.name}-${index}`} summary={panel} />;
+    case "duration":
+      return <DurationPanel key={`${panel.name}-${index}`} summary={panel} />;
     default:
       return null;
   }

src/pages/audit-report/components/View/panels/DurationPanel.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { formatDuration } from "@flanksource-ui/utils/date";
+import { PanelResult } from "../../../types";
+
+interface DurationPanelProps {
+  summary: PanelResult;
+}
+
+const DurationPanel: React.FC<DurationPanelProps> = ({ summary }) => {
+  if (!summary.rows || summary.rows.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {summary.rows.map((row, rowIndex) => {
+        const { value, label } = row;
+
+        // NOTE: The value is expected to be in nanoseconds
+        const nanoseconds = Number(value);
+        const milliseconds = nanoseconds / 1000000;
+        const formattedDuration = formatDuration(milliseconds);
+
+        return (
+          <div
+            key={`${summary.name}-${rowIndex}`}
+            className="flex h-full w-full flex-col rounded-lg border border-gray-200 bg-white p-4"
+          >
+            <h4 className="mb-2 text-sm font-medium capitalize text-gray-600">
+              {label || summary.name}
+            </h4>
+            {summary.description && (
+              <p className="mb-3 text-xs text-gray-500">
+                {summary.description}
+              </p>
+            )}
+            <div className="flex flex-1 items-center justify-center">
+              <p className="text-6xl font-semibold text-teal-600">
+                {formattedDuration}
+              </p>
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default DurationPanel;

src/pages/audit-report/components/View/panels/index.ts

@@ -3,3 +3,4 @@ export { default as TablePanel } from "./TablePanel";
 export { default as PieChartPanel } from "./PieChartPanel";
 export { default as GaugePanel } from "./GaugePanel";
 export { default as TextPanel } from "./TextPanel";
+export { default as DurationPanel } from "./DurationPanel";

src/pages/audit-report/types/index.ts

@@ -251,7 +251,7 @@ export interface GaugeConfig {
 
 export type PanelResult = {
   name: string;
-  type: "piechart" | "number" | "text" | "table" | "gauge";
+  type: "piechart" | "number" | "text" | "table" | "gauge" | "duration";
   description?: string;
   rows?: Record<string, any>[];
   gauge?: GaugeConfig;