Polished toggle hpa metrics

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -415,7 +415,7 @@ const ExpandedChart: React.FC<Props> = (props) => {
   const updateTabs = () => {
     // Collate non-form tabs
     let tabOptions = [] as any[];
-    // tabOptions.push({ label: "Status", value: "status" });
+    tabOptions.push({ label: "Status", value: "status" });
 
     if (props.isMetricsInstalled) {
       tabOptions.push({ label: "Metrics", value: "metrics" });

dashboard/src/main/home/cluster-dashboard/expanded-chart/metrics/AreaChart.tsx

@@ -76,6 +76,7 @@ export type AreaProps = {
 
 const AreaChart: React.FunctionComponent<AreaProps> = ({
   data,
+  dataKey,
   hpaEnabled = false,
   hpaData = [],
   resolution,
@@ -100,24 +101,32 @@ const AreaChart: React.FunctionComponent<AreaProps> = ({
   // bounds
   const innerWidth = width - margin.left - margin.right - 40;
   const innerHeight = height - margin.top - margin.bottom - 20;
+  const isHpaEnabled = hpaEnabled && !!hpaData.length;
 
   // scales
   const dateScale = useMemo(
     () =>
       scaleTime({
         range: [margin.left, innerWidth + margin.left],
-        domain: extent([...globalData, ...hpaData], getDate) as [Date, Date],
+        domain: extent(
+          [...globalData, ...(isHpaEnabled ? hpaData : [])],
+          getDate
+        ) as [Date, Date],
       }),
-    [margin.left, width, height, data, hpaData]
+    [margin.left, width, height, data, hpaData, isHpaEnabled]
   );
   const valueScale = useMemo(
     () =>
       scaleLinear({
         range: [innerHeight + margin.top, margin.top],
-        domain: [0, 1.25 * max([...globalData, ...hpaData], getValue)],
+        domain: [
+          0,
+          1.25 *
+            max([...globalData, ...(isHpaEnabled ? hpaData : [])], getValue),
+        ],
         nice: true,
       }),
-    [margin.top, width, height, data, hpaData]
+    [margin.top, width, height, data, hpaData, isHpaEnabled]
   );
 
   // tooltip handler
@@ -204,7 +213,6 @@ const AreaChart: React.FunctionComponent<AreaProps> = ({
   const dataGraphTooltipGlyphPosition =
     (tooltipData?.data && valueScale(getValue(tooltipData.data))) || 0;
 
-  const isHpaEnabled = hpaEnabled && !!hpaData.length;
   return (
     <div>
       <svg width={width} height={height} ref={svgContainer}>
@@ -257,16 +265,19 @@ const AreaChart: React.FunctionComponent<AreaProps> = ({
           fill="url(#area-gradient)"
           curve={curveMonotoneX}
         />
-        <LinePath<NormalizedMetricsData>
-          stroke="#ffffff"
-          strokeWidth={2}
-          data={hpaData}
-          x={(d) => dateScale(getDate(d)) ?? 0}
-          y={(d) => valueScale(getValue(d)) ?? 0}
-          strokeDasharray="6,4"
-          strokeOpacity={1}
-          pointerEvents="none"
-        />
+        {isHpaEnabled && (
+          <LinePath<NormalizedMetricsData>
+            stroke="#ffffff"
+            strokeWidth={2}
+            data={hpaData}
+            x={(d) => dateScale(getDate(d)) ?? 0}
+            y={(d) => valueScale(getValue(d)) ?? 0}
+            strokeDasharray="6,4"
+            strokeOpacity={1}
+            pointerEvents="none"
+          />
+        )}
+
         <AxisLeft
           left={10}
           scale={valueScale}
@@ -376,9 +387,13 @@ const AreaChart: React.FunctionComponent<AreaProps> = ({
             }}
           >
             {formatDate(getDate(tooltipData.data))}
-            <div>CPU DATA: {getValue(tooltipData.data)}</div>
+            <div style={{ color: accentColor }}>
+              {dataKey}: {getValue(tooltipData.data)}
+            </div>
             {isHpaEnabled && (
-              <div>HPA DATA: {getValue(tooltipData.tooltipHpaData)}</div>
+              <div style={{ color: "#FFF" }}>
+                HPA Threshold: {getValue(tooltipData.tooltipHpaData)}
+              </div>
             )}
           </TooltipWithBounds>
         </div>

dashboard/src/main/home/cluster-dashboard/expanded-chart/metrics/MetricsSection.tsx

@@ -13,6 +13,7 @@ import SelectRow from "components/values-form/SelectRow";
 import AreaChart from "./AreaChart";
 import { MetricNormalizer } from "./MetricNormalizer";
 import { AvailableMetrics, NormalizedMetricsData } from "./types";
+import CheckboxRow from "components/values-form/CheckboxRow";
 
 type PropsType = {
   currentChart: ChartTypeWithExtendedConfig;
@@ -56,7 +57,9 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
   ]);
   const [isLoading, setIsLoading] = useState(0);
   const [hpaData, setHpaData] = useState([]);
-  const [hpaEnabled, setHpaEnabled] = useState(false);
+  const [hpaEnabled, setHpaEnabled] = useState(
+    currentChart?.config?.autoscaling?.enabled
+  );
 
   const { currentCluster, currentProject, setCurrentError } = useContext(
     Context
@@ -432,6 +435,14 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
           <Highlight color={"#7d7d81"} onClick={getMetrics}>
             <i className="material-icons">autorenew</i>
           </Highlight>
+
+          {currentChart?.config?.autoscaling?.enabled && (
+            <CheckboxRow
+              toggle={() => setHpaEnabled((prev) => !prev)}
+              checked={hpaEnabled}
+              label="Enable HPA Metrics"
+            />
+          )}
         </Flex>
         <RangeWrapper>
           <TabSelector
@@ -465,7 +476,7 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
               dataKey={selectedMetricLabel}
               data={data}
               hpaData={hpaData}
-              hpaEnabled={currentChart?.config?.autoscaling?.enabled}
+              hpaEnabled={hpaEnabled}
               width={width}
               height={height - 10}
               resolution={selectedRange}