Merge remote-tracking branch 'official/main'

Author: vlasov-y

plugin-catalog/src/components/plugins/List.tsx

@@ -9,6 +9,7 @@ import { PluginCard } from './PluginCard';
 import { Switch } from '@mui/material';
 import { FormControlLabel } from '@mui/material';
 import { isEqual } from 'lodash';
+import semver from 'semver';
 
 const PAGE_SIZE = 60; // Maximum allowed by the API
 const ARTIFACTHUB_HEADLAMP_PLUGIN_KIND = '21';
@@ -49,6 +50,7 @@ export interface PluginPackage {
     organization_name: string;
   };
   isInstalled: boolean;
+  isUpdateAvailable: boolean;
 }
 
 async function fetchPlugins(offset: number, org?: string) {
@@ -126,7 +128,15 @@ async function processPlugins() {
   } catch (err) {
     console.log('plugin-catalog: Failed to list plugins', err);
   }
-  const installedPlugins = pluginData.map((plugin: any) => plugin.folderName);
+  const installedVersions: Record<string, string> = pluginData.reduce(
+    (acc, plugin: any) => {
+      if (plugin.folderName && plugin.artifacthubVersion) {
+        acc[plugin.folderName] = plugin.artifacthubVersion;
+      }
+      return acc;
+    },
+    {}
+  );
 
   // Merge all plugins and org-specific plugins, removing duplicates
   const mergedPlugins = [...allPlugins, ...orgPlugins];
@@ -135,10 +145,24 @@ async function processPlugins() {
   );
 
   const pluginsWithInstallStatus = uniquePlugins
-    .map((pkg: PluginPackage) => ({
-      ...pkg,
-      isInstalled: installedPlugins.includes(pkg.name),
-    }))
+    .map((pkg: PluginPackage) => {
+      const installedVersion = installedVersions[pkg.name];
+      let isInstalled = false;
+      let isUpdateAvailable = false;
+
+      if (installedVersion) {
+        isInstalled = true;
+        if (semver.valid(pkg.version) && semver.valid(installedVersion)) {
+          isUpdateAvailable = semver.gt(pkg.version, installedVersion);
+        }
+      }
+
+      return {
+        ...pkg,
+        isInstalled,
+        isUpdateAvailable,
+      };
+    })
     // Reorder so plugins with logos show first.
     .sort((a, b) => (!!b.logo_image_id ? 1 : 0) - (!!a.logo_image_id ? 1 : 0));
 

plugin-catalog/src/components/plugins/PluginCard.tsx

@@ -151,7 +151,9 @@ export function PluginCard(props: PluginCardProps) {
           }}
         >
           <span></span>
-          {plugin.isInstalled && <Typography>Installed</Typography>}
+          {plugin.isInstalled && (
+            <Typography>{plugin.isUpdateAvailable ? 'Update available' : 'Installed'}</Typography>
+          )}
         </CardActions>
       </Card>
     </Box>

prometheus/src/components/Chart/CPUChart/CPUChart.tsx

@@ -1,4 +1,5 @@
-import { useTheme } from '@mui/material';
+import { alpha, useTheme } from '@mui/material';
+import { blue } from '@mui/material/colors';
 import { fetchMetrics } from '../../../request';
 import { createTickTimestampFormatter, dataProcessor, PrometheusEndpoint } from '../../../util';
 import Chart from '../Chart/Chart';
@@ -45,7 +46,7 @@ export function CPUChart(props: CPUChartProps) {
 
   const YTickProps = {
     domain: ['dataMin', 'auto'],
-    width: 80,
+    width: 60,
   };
 
   return (
@@ -54,8 +55,8 @@ export function CPUChart(props: CPUChartProps) {
         {
           query: props.query,
           name: 'cpu (cores)',
-          strokeColor: '#CDC300',
-          fillColor: '#FFF178',
+          strokeColor: alpha(blue[400], 0.8),
+          fillColor: alpha(blue[400], 0.1),
           dataProcessor: dataProcessor,
         },
       ]}

prometheus/src/components/Chart/Chart/Chart.tsx

@@ -1,7 +1,16 @@
 import { EmptyContent, Loader } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
 import { Box, useTheme } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { Area, AreaChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
 import { getTimeRange, PrometheusEndpoint } from '../../../util';
 
 /**
@@ -50,10 +59,11 @@ export default function Chart(props: ChartProps) {
     SUCCESS,
   }
   const { fetchMetrics, xAxisProps, yAxisProps } = props;
-  const [metrics, setMetrics] = useState<object>({});
+  const [metrics, setMetrics] = useState<Array<any>>([]);
   const [state, setState] = useState<ChartState | null>(null);
   const [error, setError] = useState<string | null>(null);
   const theme = useTheme();
+  const timeRange = getTimeRange(props.interval);
 
   const fetchMetricsData = async (
     plots: Array<{ query: string; name: string; dataProcessor: (data: any) => any }>,
@@ -142,29 +152,38 @@ export default function Chart(props: ChartProps) {
         clearInterval(refreshInterval);
       };
     }
-  }, [props.autoRefresh, props.plots]);
+  }, [props.autoRefresh, props.plots, props.interval]);
 
   let chartContent;
 
   if (state === ChartState.SUCCESS) {
     chartContent = (
-      <AreaChart data={metrics}>
-        <XAxis stroke={theme.palette.chartStyles.labelColor} {...xAxisProps} />
-        <YAxis stroke={theme.palette.chartStyles.labelColor} {...yAxisProps} />
+      <AreaChart data={metrics} style={{ fontSize: 14 }}>
+        <XAxis
+          stroke={theme.palette.chartStyles.labelColor}
+          fontSize={12}
+          {...xAxisProps}
+          type="number"
+          domain={[timeRange.from, timeRange.to]}
+          allowDataOverflow
+        />
+        <YAxis fontSize={14} stroke={theme.palette.chartStyles.labelColor} {...yAxisProps} />
         {props.CustomTooltip === undefined ? (
           <Tooltip />
         ) : (
           <Tooltip content={props.CustomTooltip} />
         )}
         <Legend />
+        <CartesianGrid strokeDasharray="2 4" stroke={theme.palette.divider} vertical={false} />
         {props.plots.map(plot => (
           <Area
             stackId="1"
-            type="monotone"
+            type="step"
             dataKey={plot.name}
             stroke={plot.strokeColor}
+            strokeWidth={2}
             fill={plot.fillColor}
-            activeDot={{ r: 8 }}
+            activeDot={{ r: 2 }}
             animationDuration={props.autoRefresh ? 0 : 400} // Disable animation when refreshing
           />
         ))}

prometheus/src/components/Chart/FilesystemChart/FilesystemChart.tsx

@@ -1,4 +1,5 @@
-import { useTheme } from '@mui/material';
+import { alpha, useTheme } from '@mui/material';
+import { orange, purple } from '@mui/material/colors';
 import { fetchMetrics } from '../../../request';
 import { createTickTimestampFormatter, dataProcessor, PrometheusEndpoint } from '../../../util';
 import { formatBytes } from '../../../util';
@@ -32,15 +33,15 @@ export function FilesystemChart(props: FilesystemChartProps) {
         {
           query: props.readQuery,
           name: 'read',
-          strokeColor: '#CDC300',
-          fillColor: '#FFF178',
+          strokeColor: alpha(orange[400], 0.8),
+          fillColor: alpha(orange[400], 0.1),
           dataProcessor: dataProcessor,
         },
         {
           query: props.writeQuery,
           name: 'write',
-          strokeColor: '#006B58',
-          fillColor: '#98F6DC',
+          strokeColor: alpha(purple[400], 0.8),
+          fillColor: alpha(purple[400], 0.1),
           dataProcessor: dataProcessor,
         },
       ]}