Merge pull request #28 from headlamp-k8s/pvcmetrics

prometheus: Add chart for PVC

Author: yolossn

prometheus/src/common.tsx

@@ -30,6 +30,43 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
+function InstallPrometheusBanner() {
+  const classes = useStyles();
+  const pluginSettings = usePluginSettings();
+
+  return (
+    <Grid
+      container
+      spacing={2}
+      direction="column"
+      justifyContent="center"
+      alignItems="center"
+      className={classes.skeletonBox}
+    >
+    <Grid item>
+      <Typography variant="h5">Install Prometheus for accessing metrics charts</Typography>
+    </Grid>
+    <Grid item>
+      <Typography>
+        <Link href={learnMoreLink} target="_blank">
+          Learn more about enabling advanced charts.
+        </Link>
+      </Typography>
+    </Grid>
+    <Grid item>
+      <Button
+        className={classes.dismissButton}
+        size="small"
+        variant="contained"
+        onClick={() => pluginSettings.setIsVisible(false)}
+      >
+        Dismiss
+      </Button>
+      </Grid>
+    </Grid>
+  )
+}
+
 export function GenericMetricsChart(props: {
   cpuQuery: string;
   memoryQuery: string;
@@ -45,7 +82,6 @@ export function GenericMetricsChart(props: {
     INSTALLED,
   }
 
-  const classes = useStyles();
   const pluginSettings = usePluginSettings();
   const [chartVariant, setChartVariant] = useState<string>('cpu');
   const [refresh, setRefresh] = useState<boolean>(true);
@@ -160,35 +196,99 @@ export function GenericMetricsChart(props: {
           <Alert severity="warning">Error fetching prometheus Info</Alert>
         </Box>
       ) : (
-        <Grid
-          container
-          spacing={2}
-          direction="column"
-          justifyContent="center"
-          alignItems="center"
-          className={classes.skeletonBox}
-        >
-          <Grid item>
-            <Typography variant="h5">Install Prometheus for accessing metrics charts</Typography>
-          </Grid>
-          <Grid item>
-            <Typography>
-              <Link href={learnMoreLink} target="_blank">
-                Learn more about enabling advanced charts.
-              </Link>
-            </Typography>
-          </Grid>
-          <Grid item>
-            <Button
-              className={classes.dismissButton}
-              size="small"
-              variant="contained"
-              onClick={() => pluginSettings.setIsVisible(false)}
-            >
-              Dismiss
-            </Button>
-          </Grid>
-        </Grid>
+        <InstallPrometheusBanner />
+      )}
+    </SectionBox>
+  );
+}
+
+export function DiskMetricsChart(props: {
+  usageQuery?: string;
+  capacityQuery?: string;
+}) {
+  enum prometheusState {
+    UNKNOWN,
+    LOADING,
+    ERROR,
+    INSTALLED,
+  }
+
+  const pluginSettings = usePluginSettings();
+  const [refresh, setRefresh] = useState<boolean>(true);
+
+  const [prometheusInfo, setPrometheusInfo] = useState<{
+    podName: string;
+    podNamespace: string;
+  } | null>(null);
+  const [state, setState] = useState<prometheusState>(prometheusState.LOADING);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const [isInstalled, podName, namespace] = await isPrometheusInstalled();
+        if (isInstalled) {
+          setPrometheusInfo({ podName, podNamespace: namespace });
+          setState(prometheusState.INSTALLED);
+        } else {
+          setPrometheusInfo(null);
+          setState(prometheusState.UNKNOWN);
+        }
+      } catch (e) {
+        setState(prometheusState.ERROR);
+        return;
+      }
+    })();
+  }, []);
+
+  if (!pluginSettings.isVisible) {
+    return null;
+  }
+
+  return (
+    <SectionBox>
+      <Box
+        display="flex"
+        justifyContent="space-around"
+        alignItems="center"
+        style={{ marginBottom: '0.5rem', margin: '0 auto', width: '0%' }}
+
+      >
+        {state === prometheusState.INSTALLED
+          ? [
+            <Box>Disk</Box>,
+            <Box pl={2}>
+              <IconButton
+                onClick={() => {
+                  setRefresh(refresh => !refresh);
+                }}
+                size="Big"
+              >
+                {refresh ? <Icon icon="mdi:pause" /> : <Icon icon="mdi:play" />}
+              </IconButton>
+            </Box>,
+          ]
+          : []}
+      </Box>
+
+      {prometheusInfo ? (
+        <Box style={{ justifyContent: 'center', display: 'flex', height: '40vh', width: '80%', margin: '0 auto'}}>
+          <DiskChart
+            usageQuery={props.usageQuery}
+            capacityQuery={props.capacityQuery}
+            autoRefresh={refresh}
+            prometheusPrefix={`${prometheusInfo.podNamespace}/pods/${prometheusInfo.podName}`}
+          />
+        </Box>
+      ) : state === prometheusState.LOADING ? (
+        <Box m={2}>
+          <Loader title="Loading Prometheus Info" />
+        </Box>
+      ) : state === prometheusState.ERROR ? (
+        <Box m={2}>
+          <Alert severity="warning">Error fetching prometheus Info</Alert>
+        </Box>
+      ) : (
+        <InstallPrometheusBanner />
       )}
     </SectionBox>
   );
@@ -442,6 +542,70 @@ export function NetworkChart(props: {
   );
 }
 
+export function DiskChart(props: {
+  usageQuery: string;
+  capacityQuery: string;
+  prometheusPrefix: string;
+  autoRefresh: boolean;
+}) {
+  const xTickFormatter = createTickTimestampFormatter();
+  const theme = useTheme();
+
+  return (
+    <Chart
+      plots={[
+        {
+          query: props.usageQuery,
+          name: 'usage',
+          strokeColor: '#CDC300',
+          fillColor: '#FFF178',
+          dataProcessor: dataProcessor,
+        },
+        {
+          query: props.capacityQuery,
+          name: 'capacity',
+          strokeColor: '#006B58',
+          fillColor: '#98F6DC',
+          dataProcessor: dataProcessor,
+        },
+      ]}
+      xAxisProps={{
+        dataKey: 'timestamp',
+        tickLine: false,
+        tick: props => {
+          const value = xTickFormatter(props.payload.value);
+          return (
+            value !== '' && (
+              <g
+                transform={`translate(${props.x},${props.y})`}
+                fill={theme.palette.chartStyles.labelColor}
+              >
+                <text x={0} y={10} dy={0} textAnchor="middle">
+                  {value}
+                </text>
+              </g>
+            )
+          );
+        },
+      }}
+      yAxisProps={{
+        domain: ['dataMin', 'auto'],
+        tick: ({ x, y, payload }) => (
+          <g transform={`translate(${x},${y})`} fill={theme.palette.chartStyles.labelColor}>
+            <text x={-35} y={0} dy={0} textAnchor="middle">
+              {formatBytes(payload.value)}
+            </text>
+          </g>
+        ),
+        width: 80,
+      }}
+      fetchMetrics={fetchMetrics}
+      CustomTooltip={CustomTooltipFormatBytes}
+      {...props}
+    />
+  );
+}
+
 export function FilesystemChart(props: {
   readQuery: string;
   writeQuery: string;

prometheus/src/index.tsx

@@ -4,7 +4,7 @@ import {
   registerDetailsViewHeaderActionsProcessor,
   registerDetailsViewSectionsProcessor,
 } from '@kinvolk/headlamp-plugin/lib';
-import { GenericMetricsChart } from './common';
+import { DiskMetricsChart, GenericMetricsChart } from './common';
 import { ChartEnabledKinds } from './util';
 import VisibilityButton from './VisibilityButton';
 
@@ -38,6 +38,15 @@ function PrometheusMetrics(resource: DetailsViewSectionProps) {
       />
     );
   }
+
+  if (resource.kind === 'PersistentVolumeClaim') {
+    return (
+      <DiskMetricsChart
+        usageQuery={`sum(kubelet_volume_stats_used_bytes{namespace='${resource.jsonData.metadata.namespace}',persistentvolumeclaim='${resource.jsonData.metadata.name}'}) by (persistentvolumeclaim, namespace)`}
+        capacityQuery={`sum(kubelet_volume_stats_capacity_bytes{namespace='${resource.jsonData.metadata.namespace}',persistentvolumeclaim='${resource.jsonData.metadata.name}'}) by (persistentvolumeclaim, namespace)`}
+      />
+    );
+  }
 }
 
 registerDetailsViewSectionsProcessor(function addSubheaderSection(resource, sections) {