fix slider lint (#4347)

dashboard/src/lib/hooks/useClusterResourceLimits.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import {
   Contract,
+  GKENodePoolType,
   LoadBalancerType,
   NodeGroupType,
   NodePoolType,
@@ -11,10 +12,7 @@ import { match } from "ts-pattern";
 import { z } from "zod";
 
 import { azureMachineTypeDetails } from "components/azureUtils";
-import {
-  AWS_INSTANCE_LIMITS,
-  GPU_INSTANCE_LIMIT,
-} from "main/home/app-dashboard/validate-apply/services-settings/tabs/utils";
+import { AWS_INSTANCE_LIMITS } from "main/home/app-dashboard/validate-apply/services-settings/tabs/utils";
 
 import api from "shared/api";
 
@@ -101,8 +99,6 @@ const clusterNodesValidator = z
       maxRAM:
         AWS_INSTANCE_LIMITS[DEFAULT_INSTANCE_CLASS][DEFAULT_INSTANCE_SIZE].RAM,
       maxGPU: 1,
-      instanceClass: DEFAULT_INSTANCE_CLASS,
-      instanceSize: DEFAULT_INSTANCE_SIZE,
     };
     if (!data.labels) {
       return defaultResources;
@@ -120,15 +116,6 @@ const clusterNodesValidator = z
       return defaultResources;
     }
 
-    // update resource limits to the custom GPU limits
-    if (workloadKind === "custom" && GPU_INSTANCE_LIMIT[instanceType]) {
-      const { vCPU, RAM, GPU } = GPU_INSTANCE_LIMIT[instanceType];
-      return {
-        maxCPU: vCPU,
-        maxRAM: RAM,
-        maxGPU: GPU,
-      };
-    }
     // Azure instance types are all prefixed with "Standard_"
     if (instanceType.startsWith("Standard_")) {
       const azureMachineType = azureMachineTypeDetails(instanceType);
@@ -137,8 +124,7 @@ const clusterNodesValidator = z
         return {
           maxCPU: vCPU,
           maxRAM: RAM,
-          maxGPU: GPU,
-          azureType: instanceType,
+          maxGPU: GPU || 1,
         };
       } else {
         return defaultResources;
@@ -172,8 +158,6 @@ const clusterNodesValidator = z
         maxCPU: vCPU,
         maxRAM: RAM,
         maxGPU: GPU || 1,
-        instanceClass,
-        instanceSize,
       };
     }
     return defaultResources;
@@ -379,9 +363,10 @@ export const useClusterResourceLimits = ({
         .with({ kindValues: { case: "gkeKind" } }, (c) => {
           return c.kindValues.value.nodePools.some(
             (ng) =>
-              (ng.nodePoolType === NodePoolType.CUSTOM &&
+              (ng.nodePoolType === GKENodePoolType.GKE_NODE_POOL_TYPE_CUSTOM &&
                 ng.instanceType.includes("n1")) ||
-              (ng.nodePoolType === NodePoolType.APPLICATION &&
+              (ng.nodePoolType ===
+                GKENodePoolType.GKE_NODE_POOL_TYPE_APPLICATION &&
                 ng.instanceType.includes("n1"))
           );
         })

dashboard/src/main/home/app-dashboard/validate-apply/services-settings/tabs/IntelligentSlider.tsx

@@ -1,211 +1,239 @@
-import React, { useMemo, useState } from 'react';
-import Slider, { Mark } from '@material-ui/core/Slider';
-import Tooltip from '@material-ui/core/Tooltip';
-import styled from 'styled-components';
-import { withStyles } from '@material-ui/core/styles';
-import Spacer from 'components/porter/Spacer';
-import NodeInfoModal from 'main/home/app-dashboard/new-app-flow/tabs/NodeInfoModal';
+import React, { useMemo, useState } from "react";
+import Slider, { type Mark } from "@material-ui/core/Slider";
+import { withStyles } from "@material-ui/core/styles";
+import Tooltip from "@material-ui/core/Tooltip";
+import styled from "styled-components";
+
+import Spacer from "components/porter/Spacer";
+import NodeInfoModal from "main/home/app-dashboard/new-app-flow/tabs/NodeInfoModal";
 
 const SMART_LIMIT_FRACTION = 0.5;
 
 type IntelligentSliderProps = {
-    label?: string;
-    unit?: string;
-    min: number;
-    max: number;
-    value: string;
-    setValue: (value: number) => void;
-    disabled?: boolean;
-    disabledTooltip?: string;
-    color?: string;
-    width?: string;
-    step?: number;
-    isSmartOptimizationOn: boolean;
-    decimalsToRoundTo?: number;
+  label?: string;
+  unit?: string;
+  min: number;
+  max: number;
+  value: string;
+  setValue: (value: number) => void;
+  disabled?: boolean;
+  disabledTooltip?: string;
+  color?: string;
+  width?: string;
+  step?: number;
+  isSmartOptimizationOn: boolean;
+  decimalsToRoundTo?: number;
 };
 
-const ValueLabelComponent: React.FC<any> = (props) => {
-    const { children, value } = props;
+type ValueLabelComponentProps = {
+  children: React.ReactElement;
+  value: number;
+};
+const ValueLabelComponent: React.FC<ValueLabelComponentProps> = (props) => {
+  const { children, value } = props;
 
-    return (
-        <StyledTooltip
-            placement="bottom"
-            title={value}
-            arrow
-        >
-            {children}
-        </StyledTooltip>
-    );
-}
+  return (
+    <StyledTooltip placement="bottom" title={value} arrow>
+      {children}
+    </StyledTooltip>
+  );
+};
 
 const IntelligentSlider: React.FC<IntelligentSliderProps> = ({
-    label,
-    unit,
-    min,
-    max,
-    value,
-    setValue,
-    disabled,
-    disabledTooltip,
-    color,
-    step,
-    width,
-    isSmartOptimizationOn,
-    decimalsToRoundTo = 0,
+  label,
+  unit,
+  min,
+  max,
+  value,
+  setValue,
+  disabled,
+  disabledTooltip,
+  color,
+  step,
+  width,
+  isSmartOptimizationOn,
+  decimalsToRoundTo = 0,
 }) => {
-    const [showNeedHelpModal, setShowNeedHelpModal] = useState(false);
+  const [showNeedHelpModal, setShowNeedHelpModal] = useState(false);
 
-    const marks: Mark[] = useMemo(() => {
-        const marks: Mark[] = [
-            {
-                value: max,
-                label: max.toString(),
-            },
-            {
-                value: min,
-                label: min.toString(),
-            }
-        ];
+  const marks: Mark[] = useMemo(() => {
+    const marks: Mark[] = [
+      {
+        value: max,
+        label: max.toString(),
+      },
+      {
+        value: min,
+        label: min.toString(),
+      },
+    ];
 
-        if (isSmartOptimizationOn) {
-            const half = Number((min + (max - min) * 0.5).toFixed(decimalsToRoundTo));
-            const quarter = Number((min + (max - min) * 0.25).toFixed(decimalsToRoundTo));
-            const eighth = Number((min + (max - min) * 0.125).toFixed(decimalsToRoundTo));
+    if (isSmartOptimizationOn) {
+      const half = Number((min + (max - min) * 0.5).toFixed(decimalsToRoundTo));
+      const quarter = Number(
+        (min + (max - min) * 0.25).toFixed(decimalsToRoundTo)
+      );
+      const eighth = Number(
+        (min + (max - min) * 0.125).toFixed(decimalsToRoundTo)
+      );
 
-            marks.push(
-                {
-                    value: half,
-                    label: half.toString(),
-                },
-                {
-                    value: quarter,
-                    label: quarter.toString(),
-                },
-                {
-                    value: eighth,
-                    label: eighth.toString(),
-                },
-            );
+      marks.push(
+        {
+          value: half,
+          label: half.toString(),
+        },
+        {
+          value: quarter,
+          label: quarter.toString(),
+        },
+        {
+          value: eighth,
+          label: eighth.toString(),
         }
+      );
+    }
 
-        return marks;
-    }, [isSmartOptimizationOn, min, max, decimalsToRoundTo]);
-
-    const displayOptimalText = useMemo(() => {
-        const half = Number((min + (max - min) * 0.5).toFixed(decimalsToRoundTo));
-        const quarter = Number((min + (max - min) * 0.25).toFixed(decimalsToRoundTo));
-        const eighth = Number((min + (max - min) * 0.125).toFixed(decimalsToRoundTo));
+    return marks;
+  }, [isSmartOptimizationOn, min, max, decimalsToRoundTo]);
 
-        return isSmartOptimizationOn && (Number(value) === quarter || Number(value) === eighth || Number(value) === half);
-    }, [value, min, max, isSmartOptimizationOn]);
+  const displayOptimalText = useMemo(() => {
+    const half = Number((min + (max - min) * 0.5).toFixed(decimalsToRoundTo));
+    const quarter = Number(
+      (min + (max - min) * 0.25).toFixed(decimalsToRoundTo)
+    );
+    const eighth = Number(
+      (min + (max - min) * 0.125).toFixed(decimalsToRoundTo)
+    );
 
-    const smartLimit = useMemo(() => {
-        return Number((min + (max - min) * SMART_LIMIT_FRACTION).toFixed(decimalsToRoundTo));
-    }, [min, max]);
+    return (
+      isSmartOptimizationOn &&
+      (Number(value) === quarter ||
+        Number(value) === eighth ||
+        Number(value) === half)
+    );
+  }, [value, min, max, isSmartOptimizationOn]);
 
-    const isExceedingLimit = useMemo(() => {
-        return isSmartOptimizationOn && Number(value) > smartLimit;
-    }, [value, min, max, isSmartOptimizationOn]);
+  const smartLimit = useMemo(() => {
+    return Number(
+      (min + (max - min) * SMART_LIMIT_FRACTION).toFixed(decimalsToRoundTo)
+    );
+  }, [min, max]);
 
-    const getClosestMark = (value: string, marks: Mark[]) => {
-        return marks.reduce((prev, curr) => (
-            Math.abs(curr.value - Number(value)) < Math.abs(prev.value - Number(value)) ? curr : prev
-        )).value;
-    };
+  const isExceedingLimit = useMemo(() => {
+    return isSmartOptimizationOn && Number(value) > smartLimit;
+  }, [value, min, max, isSmartOptimizationOn]);
 
-    return (
-        <SliderContainer width={width}>
-            <LabelContainer>
-                {label && <Label>{label}</Label>}
-                <Value>{`${value} ${unit}`}</Value>
-                {displayOptimalText &&
-                    <>
-                        <Spacer inline x={1} /><Label>Recommended based on the available compute </Label>  <StyledIcon
-                            className="material-icons"
-                            onClick={() => {
-                                setShowNeedHelpModal(true)
-                            }}
-                        >
-                            help_outline
-                        </StyledIcon>
-                    </>
-                }
-                {showNeedHelpModal &&
-                    <NodeInfoModal
-                        setModalVisible={setShowNeedHelpModal}
-                    />
-                }
-                {isExceedingLimit &&
-                    <>
-                        <Spacer inline x={1} />
-                        <Label color="#FFBF00"> Value is not optimal for cost</Label>
-                    </>
-                }
-            </LabelContainer>
+  const getClosestMark = (value: string, marks: Mark[]): number => {
+    return marks.reduce((prev, curr) =>
+      Math.abs(curr.value - Number(value)) <
+      Math.abs(prev.value - Number(value))
+        ? curr
+        : prev
+    ).value;
+  };
 
-            <DisabledTooltip title={disabled ? disabledTooltip || '' : ''} arrow>
-                <div style={{ position: 'relative' }}>
-                    <MaxedOutToolTip title={Number(value) === smartLimit && isSmartOptimizationOn ? "Using resources beyond this limit is not cost-optimal - to override, toggle off Smart Optimization" : ""} arrow>
-                        <div style={{ position: 'relative' }}>
-                            <StyledSlider
-                                ValueLabelComponent={ValueLabelComponent}
-                                aria-label="input slider"
-                                isExceedingLimit={isExceedingLimit}
-                                min={min}
-                                max={max}
-                                value={(Number(value))}
-                                onChange={(_, newValue) => {
-                                    if (!Array.isArray(newValue)) {
-                                        if (isSmartOptimizationOn) {
-                                            if (newValue > smartLimit) {
-                                                return; // can't go beyond the limit
-                                            }
-                                            const closestMark = getClosestMark(newValue.toString(), marks);
-                                            setValue(closestMark);
-                                        } else {
-                                            setValue(newValue);
-                                        }
-                                    }
-                                }}
-                                classes={{
-                                    track: isExceedingLimit ? 'exceeds-limit' : '',
-                                    rail: isExceedingLimit ? 'exceeds-limit' : ''
-                                }}
-                                valueLabelDisplay={smartLimit && Number(value) > smartLimit ? "off" : "auto"}
-                                disabled={disabled}
-                                marks={marks}
-                                step={(step ? step : 1)}
-                                style={{
-                                    color: disabled ? "gray" : color,
-                                }}
-                            />
-                        </div>
-                    </MaxedOutToolTip>
-                    {disabled && (
-                        <div
-                            style={{
-                                position: 'absolute',
-                                top: 0,
-                                left: 0,
-                                right: 0,
-                                bottom: 0,
-                                cursor: 'not-allowed',
-                                zIndex: 1
-                            }}
-                        />
-                    )}
-                </div>
-            </DisabledTooltip>
+  return (
+    <SliderContainer width={width}>
+      <LabelContainer>
+        {label && <Label>{label}</Label>}
+        <Value>{`${value} ${unit}`}</Value>
+        {displayOptimalText && (
+          <>
+            <Spacer inline x={1} />
+            <Label>Recommended based on the available compute </Label>{" "}
+            <StyledIcon
+              className="material-icons"
+              onClick={() => {
+                setShowNeedHelpModal(true);
+              }}
+            >
+              help_outline
+            </StyledIcon>
+          </>
+        )}
+        {showNeedHelpModal && (
+          <NodeInfoModal setModalVisible={setShowNeedHelpModal} />
+        )}
+        {isExceedingLimit && (
+          <>
+            <Spacer inline x={1} />
+            <Label color="#FFBF00"> Value is not optimal for cost</Label>
+          </>
+        )}
+      </LabelContainer>
 
-        </SliderContainer >
-    );
+      <DisabledTooltip title={disabled ? disabledTooltip || "" : ""} arrow>
+        <div style={{ position: "relative" }}>
+          <MaxedOutToolTip
+            title={
+              Number(value) === smartLimit && isSmartOptimizationOn
+                ? "Using resources beyond this limit is not cost-optimal - to override, toggle off Smart Optimization"
+                : ""
+            }
+            arrow
+          >
+            <div style={{ position: "relative" }}>
+              <StyledSlider
+                ValueLabelComponent={ValueLabelComponent}
+                aria-label="input slider"
+                min={min}
+                max={max}
+                value={Number(value)}
+                onChange={(_, newValue) => {
+                  if (!Array.isArray(newValue)) {
+                    if (isSmartOptimizationOn) {
+                      if (newValue > smartLimit) {
+                        return; // can't go beyond the limit
+                      }
+                      const closestMark = getClosestMark(
+                        newValue.toString(),
+                        marks
+                      );
+                      setValue(closestMark);
+                    } else {
+                      setValue(newValue);
+                    }
+                  }
+                }}
+                classes={{
+                  track: isExceedingLimit ? "exceeds-limit" : "",
+                  rail: isExceedingLimit ? "exceeds-limit" : "",
+                }}
+                valueLabelDisplay={
+                  smartLimit && Number(value) > smartLimit ? "off" : "auto"
+                }
+                disabled={disabled}
+                marks={marks}
+                step={step || 1}
+                style={{
+                  color: disabled ? "gray" : color,
+                }}
+              />
+            </div>
+          </MaxedOutToolTip>
+          {disabled && (
+            <div
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                cursor: "not-allowed",
+                zIndex: 1,
+              }}
+            />
+          )}
+        </div>
+      </DisabledTooltip>
+    </SliderContainer>
+  );
 };
 
-
 export default IntelligentSlider;
 
 const SliderContainer = styled.div<{ width?: string }>`
-  width: ${({ width }) => width || '90%'};
+  width: ${({ width }) => width || "90%"};
   margin: 1px 0;
 `;
 
@@ -213,7 +241,7 @@ const Label = styled.div<{ color?: string }>`
   font-size: 13px;
   margin-right: 5px;
   margin-bottom: 10px;
-  color: ${props => props.color ? props.color : '#aaaabb'};
+  color: ${(props) => (props.color ? props.color : "#aaaabb")};
 `;
 
 const Value = styled.div<{ color?: string }>`
@@ -222,114 +250,111 @@ const Value = styled.div<{ color?: string }>`
   color: #ffff;
 `;
 
-const DisabledTooltip = withStyles(theme => ({
-    tooltip: {
-        backgroundColor: '#333',
-        color: '#fff',
-        padding: '8px',
-        borderRadius: '4px',
-        fontSize: '14px',
-        textAlign: 'center',
-        whiteSpace: 'pre-wrap',
-        wordWrap: 'break-word',
-        maxWidth: '200px',
-        width: '200px',
-        [theme.breakpoints.up('sm')]: {
-            margin: '0 14px',
-        },
-    },
-    arrow: {
-        color: '#333',
+const DisabledTooltip = withStyles((theme) => ({
+  tooltip: {
+    backgroundColor: "#333",
+    color: "#fff",
+    padding: "8px",
+    borderRadius: "4px",
+    fontSize: "14px",
+    textAlign: "center",
+    whiteSpace: "pre-wrap",
+    wordWrap: "break-word",
+    maxWidth: "200px",
+    width: "200px",
+    [theme.breakpoints.up("sm")]: {
+      margin: "0 14px",
     },
+  },
+  arrow: {
+    color: "#333",
+  },
 }))(Tooltip);
 
-const MaxedOutToolTip = withStyles(theme => ({
-    tooltip: {
-        backgroundColor: '#333',
-        color: '#fff',
-        padding: '5px',
-        borderRadius: '2px',
-        fontSize: '12px',
-        textAlign: 'center',
-        whiteSpace: 'pre-wrap',
-        wordWrap: 'break-word',
-        maxWidth: '200px',
-        width: '200px',
-        [theme.breakpoints.up('sm')]: {
-            margin: '0 2px',
-        },
+const MaxedOutToolTip = withStyles((theme) => ({
+  tooltip: {
+    backgroundColor: "#333",
+    color: "#fff",
+    padding: "5px",
+    borderRadius: "2px",
+    fontSize: "12px",
+    textAlign: "center",
+    whiteSpace: "pre-wrap",
+    wordWrap: "break-word",
+    maxWidth: "200px",
+    width: "200px",
+    [theme.breakpoints.up("sm")]: {
+      margin: "0 2px",
     },
+  },
 }))(Tooltip);
 
 const StyledSlider = withStyles({
-    root: {
-        height: '8px', //height of the track
-    },
-    mark: {
-        backgroundColor: '#fff',  // mark color
-        height: 4, // size of the mark
-        width: 1, // size of the mark
-        borderRadius: '50%',
-        marginTop: 6,
-        marginLeft: -1,
-    },
-    markActive: {
-        backgroundColor: '#fff',
+  root: {
+    height: "8px", // height of the track
+  },
+  mark: {
+    backgroundColor: "#fff", // mark color
+    height: 4, // size of the mark
+    width: 1, // size of the mark
+    borderRadius: "50%",
+    marginTop: 6,
+    marginLeft: -1,
+  },
+  markActive: {
+    backgroundColor: "#fff",
+  },
+  markLabel: {
+    color: "#6e717d",
+    fontSize: "12px",
+    marginRight: 5,
+    '&[data-mark-value="Recommended"]': {
+      // targeting the Recommended label
+      transform: "translateY(-100%)", // move it upwards
+      marginBottom: "15px", // adjust the margin to position it
     },
-    markLabel: {
-        color: '#6e717d',
-        fontSize: '12px',
-        marginRight: 5,
-        '&[data-mark-value="Recommended"]': { // targeting the Recommended label
-            transform: 'translateY(-100%)', // move it upwards
-            marginBottom: '15px', // adjust the margin to position it
-        },
+  },
+  markLabelActive: {
+    color: "#6e717d",
+    marginRight: 5,
+  },
+  thumb: {
+    height: 16, // Size of the thumb
+    width: 16, // Size of the thumb
+    backgroundColor: "#fff",
+    border: "2px solid currentColor",
+    "&:focus, &:hover": {
+      boxShadow: "inherit",
     },
-    markLabelActive: {
-        color: '#6e717d',
-        marginRight: 5,
+    "&$disabled": {
+      // Targeting the thumb when the slider is disabled
+      height: 16,
+      width: 16,
     },
-    thumb: {
-        height: 16, // Size of the thumb
-        width: 16, // Size of the thumb
-        backgroundColor: '#fff',
-        border: '2px solid currentColor',
-        '&:focus, &:hover, &$active': {
-            boxShadow: 'inherit',
-        },
-        '&$disabled': { // Targeting the thumb when the slider is disabled
-            height: 16,
-            width: 16,
-        },
+  },
+  track: () => ({
+    height: 8,
+    borderRadius: 4,
+  }),
+  rail: () => ({
+    height: 8,
+    borderRadius: 4,
+  }),
+  valueLabel: {
+    top: -22,
+    "& *": {
+      background: "transparent",
+      border: "none", // remove the default border
     },
-    track: (props) => ({
-        height: 8,
-        borderRadius: 4,
-        backgroundColor: props.isExceedingLimit ? '#FFBF00' : '',  // setting color conditionally
-    }),
-    rail: (props) => ({
-        height: 8,
-        borderRadius: 4,
-        backgroundColor: props.isExceedingLimit ? '#FFBF00' : '',  // setting color conditionally
-    }),
-    valueLabel: {
-        top: -22,
-        '& *': {
-            background: 'transparent',
-            border: 'none', // remove the default border
-        },
-    }
-    ,
-    disabled: {},
+  },
+  disabled: {},
 })(Slider);
 
-
 const StyledTooltip = withStyles({
-    tooltip: {
-        fontSize: 12,
-        padding: "5px 10px",
-
-    }
+  tooltip: {
+    fontSize: 12,
+    padding: "5px 10px",
+  },
 })(Tooltip);
 
 const LabelContainer = styled.div`
@@ -339,9 +364,9 @@ const LabelContainer = styled.div`
 
 const StyledIcon = styled.i`
   cursor: pointer;
-  font-size: 16px; 
-  margin-bottom : 10px;
+  font-size: 16px;
+  margin-bottom: 10px;
   &:hover {
-    color: #666;  
+    color: #666;
   }
-`;
+`;