headlamp-k8s · vlasov-y · Jan 8, 2025
diff --git a/prometheus/package-lock.json b/prometheus/package-lock.json
diff --git a/prometheus/package.json b/prometheus/package.json
@@ -33,6 +33,8 @@
     "@kinvolk/headlamp-plugin": "^0.9.2"
   },
   "dependencies": {
+    "@iconify/react": "^5.2.0",
+    "@storybook/react": "^8.4.7",
     "recharts": "^2.7.3",
     "use-between": "^1.3.5"
   }

diff --git a/prometheus/src/components/Chart/CPUChart/CPUChart.tsx b/prometheus/src/components/Chart/CPUChart/CPUChart.tsx
@@ -1,7 +1,7 @@
 import { alpha, useTheme } from '@mui/material';
 import { blue } from '@mui/material/colors';
 import { fetchMetrics } from '../../../request';
-import { createTickTimestampFormatter, dataProcessor } from '../../../util';
+import { createTickTimestampFormatter, dataProcessor, PrometheusEndpoint } from '../../../util';
 import Chart from '../Chart/Chart';
 import { CustomTooltip } from '../common';
 
@@ -15,7 +15,7 @@ import { CustomTooltip } from '../common';
  */
 interface CPUChartProps {
   query: string;
-  prometheusPrefix: string;
+  prometheusEndpoint: PrometheusEndpoint;
   interval: string;
   autoRefresh: boolean;
 }

diff --git a/prometheus/src/components/Chart/Chart/Chart.tsx b/prometheus/src/components/Chart/Chart/Chart.tsx
@@ -11,7 +11,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { getTimeRange } from '../../../util';
+import { getTimeRange, PrometheusEndpoint } from '../../../util';
 
 /**
  * Props for the Chart component.
@@ -40,7 +40,7 @@ export interface ChartProps {
   }>;
   fetchMetrics: (query: object) => Promise<any>;
   interval: string;
-  prometheusPrefix: string;
+  prometheusEndpoint: PrometheusEndpoint;
   autoRefresh: boolean;
   xAxisProps: {
     [key: string]: any;
@@ -85,7 +85,7 @@ export default function Chart(props: ChartProps) {
       var response;
       try {
         response = await fetchMetrics({
-          prefix: props.prometheusPrefix,
+          endpoint: props.prometheusEndpoint,
           query: plot.query,
           from: from,
           to: to,

diff --git a/prometheus/src/components/Chart/Chart/chart.stories.tsx b/prometheus/src/components/Chart/Chart/chart.stories.tsx
@@ -339,7 +339,7 @@ const Template: Story<ChartProps> = () => {
       autoRefresh={false}
       xAxisProps={XTickProps}
       yAxisProps={YTickProps}
-      prometheusPrefix="/api/v1/namespaces/test/proxy"
+      prometheusEndpoint={{prefix: "/api/v1/namespaces/test/proxy"}}
       fetchMetrics={({}) => {
         return Promise.resolve(mockData);
       }}

diff --git a/prometheus/src/components/Chart/DiskChart/DiskChart.tsx b/prometheus/src/components/Chart/DiskChart/DiskChart.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@mui/material';
 import { fetchMetrics } from '../../../request';
-import { createTickTimestampFormatter, dataProcessor } from '../../../util';
+import { createTickTimestampFormatter, dataProcessor, PrometheusEndpoint } from '../../../util';
 import { formatBytes } from '../../../util';
 import Chart from '../Chart/Chart';
 import { CustomTooltipFormatBytes } from '../common';
@@ -18,7 +18,7 @@ interface DiskChartProps {
   usageQuery: string;
   capacityQuery: string;
   interval: string;
-  prometheusPrefix: string;
+  prometheusEndpoint: PrometheusEndpoint;
   autoRefresh: boolean;
 }
 

diff --git a/prometheus/src/components/Chart/DiskMetricsChart/DiskMetricsChart.tsx b/prometheus/src/components/Chart/DiskMetricsChart/DiskMetricsChart.tsx
@@ -4,7 +4,7 @@ import { useCluster } from '@kinvolk/headlamp-plugin/lib/lib/k8s';
 import { Box, Icon, IconButton } from '@mui/material';
 import Alert from '@mui/material/Alert';
 import { useEffect, useState } from 'react';
-import { getConfigStore, getPrometheusInterval, getPrometheusPrefix } from '../../../util';
+import { getConfigStore, getPrometheusInterval, getPrometheusEndpoint, PrometheusEndpoint } from '../../../util';
 import { PrometheusNotFoundBanner } from '../common';
 import { DiskChart } from '../DiskChart/DiskChart';
 
@@ -32,7 +32,7 @@ export function DiskMetricsChart(props: DiskMetricsChartProps) {
   const clusterConfig = configStore.useConfig();
 
   const [refresh, setRefresh] = useState<boolean>(true);
-  const [prometheusPrefix, setPrometheusPrefix] = useState<string | null>(null);
+  const [prometheusEndpoint, setPrometheusEndpoint] = useState<PrometheusEndpoint | null>(null);
   const [state, setState] = useState<prometheusState>(prometheusState.LOADING);
   const [isVisible, setIsVisible] = useState<boolean>(false);
 
@@ -45,16 +45,16 @@ export function DiskMetricsChart(props: DiskMetricsChartProps) {
 
     if (!isEnabled) {
       setState(prometheusState.UNKNOWN);
-      setPrometheusPrefix(null);
+      setPrometheusEndpoint(null);
       return;
     }
 
     setState(prometheusState.LOADING);
     (async () => {
       try {
-        const prefix = await getPrometheusPrefix(cluster);
-        if (prefix) {
-          setPrometheusPrefix(prefix);
+        const endpoint = await getPrometheusEndpoint(cluster);
+        if (endpoint) {
+          setPrometheusEndpoint(endpoint);
           setState(prometheusState.INSTALLED);
         } else {
           setState(prometheusState.UNKNOWN);
@@ -111,7 +111,7 @@ export function DiskMetricsChart(props: DiskMetricsChartProps) {
             capacityQuery={props.capacityQuery}
             interval={interval}
             autoRefresh={refresh}
-            prometheusPrefix={prometheusPrefix}
+            prometheusEndpoint={prometheusEndpoint}
           />
         </Box>
       ) : state === prometheusState.LOADING ? (

diff --git a/prometheus/src/components/Chart/FilesystemChart/FilesystemChart.tsx b/prometheus/src/components/Chart/FilesystemChart/FilesystemChart.tsx
@@ -1,7 +1,7 @@
 import { alpha, useTheme } from '@mui/material';
 import { orange, purple } from '@mui/material/colors';
 import { fetchMetrics } from '../../../request';
-import { createTickTimestampFormatter, dataProcessor } from '../../../util';
+import { createTickTimestampFormatter, dataProcessor, PrometheusEndpoint } from '../../../util';
 import { formatBytes } from '../../../util';
 import Chart from '../Chart/Chart';
 import { CustomTooltipFormatBytes } from '../common';
@@ -19,7 +19,7 @@ interface FilesystemChartProps {
   readQuery: string;
   writeQuery: string;
   interval: string;
-  prometheusPrefix: string;
+  prometheusEndpoint: PrometheusEndpoint;
   autoRefresh: boolean;
 }
 

diff --git a/prometheus/src/components/Chart/GenericMetricsChart/GenericMetricsChart.tsx b/prometheus/src/components/Chart/GenericMetricsChart/GenericMetricsChart.tsx
@@ -13,7 +13,7 @@ import {
 } from '@mui/material';
 import Alert from '@mui/material/Alert';
 import { useEffect, useState } from 'react';
-import { getConfigStore, getPrometheusInterval, getPrometheusPrefix } from '../../../util';
+import { getConfigStore, getPrometheusInterval, getPrometheusEndpoint as getPrometheusEndpoint, PrometheusEndpoint } from '../../../util';
 import { PrometheusNotFoundBanner } from '../common';
 import { CPUChart } from '../CPUChart/CPUChart';
 import { FilesystemChart } from '../FilesystemChart/FilesystemChart';
@@ -50,7 +50,7 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
   const [chartVariant, setChartVariant] = useState<string>('cpu');
   const [refresh, setRefresh] = useState<boolean>(true);
   const [state, setState] = useState<prometheusState>(prometheusState.LOADING);
-  const [prometheusPrefix, setPrometheusPrefix] = useState<string | null>(null);
+  const [prometheusEndpoint, setPrometheusEndpoint] = useState<PrometheusEndpoint | null>(null);
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const cluster = useCluster();
   const configStore = getConfigStore();
@@ -66,16 +66,16 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
 
     if (!isEnabled) {
       setState(prometheusState.UNKNOWN);
-      setPrometheusPrefix(null);
+      setPrometheusEndpoint(null);
       return;
     }
 
     setState(prometheusState.LOADING);
     (async () => {
       try {
-        const prefix = await getPrometheusPrefix(cluster);
-        if (prefix) {
-          setPrometheusPrefix(prefix);
+        const endpoint = await getPrometheusEndpoint(cluster);
+        if (endpoint) {
+          setPrometheusEndpoint(endpoint);
           setState(prometheusState.INSTALLED);
         } else {
           setState(prometheusState.UNKNOWN);
@@ -166,16 +166,16 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
               <CPUChart
                 query={props.cpuQuery}
                 autoRefresh={refresh}
-                prometheusPrefix={prometheusPrefix}
                 interval={timespan}
+                prometheusEndpoint={prometheusEndpoint}
               />
             )}
             {chartVariant === 'memory' && (
               <MemoryChart
                 query={props.memoryQuery}
                 autoRefresh={refresh}
-                prometheusPrefix={prometheusPrefix}
                 interval={timespan}
+                prometheusEndpoint={prometheusEndpoint}
               />
             )}
             {chartVariant === 'network' && (
@@ -184,7 +184,7 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
                 txQuery={props.networkTxQuery}
                 autoRefresh={refresh}
                 interval={timespan}
-                prometheusPrefix={prometheusPrefix}
+                prometheusEndpoint={prometheusEndpoint}
               />
             )}
             {chartVariant === 'filesystem' && (
@@ -193,7 +193,7 @@ export function GenericMetricsChart(props: GenericMetricsChartProps) {
                 writeQuery={props.filesystemWriteQuery}
                 autoRefresh={refresh}
                 interval={timespan}
-                prometheusPrefix={prometheusPrefix}
+                prometheusEndpoint={prometheusEndpoint}
               />
             )}
           </Box>

diff --git a/prometheus/src/components/Chart/MemoryChart/MemoryChart.tsx b/prometheus/src/components/Chart/MemoryChart/MemoryChart.tsx
@@ -1,7 +1,7 @@
 import { alpha, useTheme } from '@mui/material';
 import { blue } from '@mui/material/colors';
 import { fetchMetrics } from '../../../request';
-import { createTickTimestampFormatter, dataProcessor } from '../../../util';
+import { createTickTimestampFormatter, dataProcessor, PrometheusEndpoint } from '../../../util';
 import { formatBytes } from '../../../util';
 import Chart from '../Chart/Chart';
 import { CustomTooltipFormatBytes } from '../common';
@@ -16,7 +16,7 @@ import { CustomTooltipFormatBytes } from '../common';
  */
 interface MemoryChartProps {
   query: string;
-  prometheusPrefix: string;
+  prometheusEndpoint: PrometheusEndpoint;
   interval: string;
   autoRefresh: boolean;
 }

diff --git a/prometheus/src/components/Chart/NetworkChart/NetworkChart.tsx b/prometheus/src/components/Chart/NetworkChart/NetworkChart.tsx
@@ -1,7 +1,7 @@
 import { alpha, useTheme } from '@mui/material';
 import { orange, purple } from '@mui/material/colors';
 import { fetchMetrics } from '../../../request';
-import { createTickTimestampFormatter, dataProcessor } from '../../../util';
+import { createTickTimestampFormatter, dataProcessor, PrometheusEndpoint } from '../../../util';
 import { formatBytes } from '../../../util';
 import Chart from '../Chart/Chart';
 import { CustomTooltipFormatBytes } from '../common';
@@ -19,7 +19,7 @@ interface NetworkChartProps {
   rxQuery: string;
   txQuery: string;
   interval: string;
-  prometheusPrefix: string;
+  prometheusEndpoint: PrometheusEndpoint;
   autoRefresh: boolean;
 }