diff --git a/src/pages/audit-report/components/View/View.tsx b/src/pages/audit-report/components/View/View.tsx index b49ad21b0..2c0560bff 100644 --- a/src/pages/audit-report/components/View/View.tsx +++ b/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 = ({ ); }; -const renderPanel = (panel: any, index: number) => { +const renderPanel = (panel: PanelResult, index: number) => { switch (panel.type) { case "number": return ; @@ -205,6 +206,8 @@ const renderPanel = (panel: any, index: number) => { return ; case "text": return ; + case "duration": + return ; default: return null; } diff --git a/src/pages/audit-report/components/View/panels/DurationPanel.tsx b/src/pages/audit-report/components/View/panels/DurationPanel.tsx new file mode 100644 index 000000000..a9fbfb817 --- /dev/null +++ b/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 = ({ 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 ( +
+

+ {label || summary.name} +

+ {summary.description && ( +

+ {summary.description} +

+ )} +
+

+ {formattedDuration} +

+
+
+ ); + })} + + ); +}; + +export default DurationPanel; diff --git a/src/pages/audit-report/components/View/panels/index.ts b/src/pages/audit-report/components/View/panels/index.ts index ee01e80a3..3eab1538a 100644 --- a/src/pages/audit-report/components/View/panels/index.ts +++ b/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"; diff --git a/src/pages/audit-report/types/index.ts b/src/pages/audit-report/types/index.ts index 42d22f59b..55f0504f7 100644 --- a/src/pages/audit-report/types/index.ts +++ b/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[]; gauge?: GaugeConfig;