fix: mgmt tweaks (#259)

konstructio · Sep 4, 2023 · 7de1c4b · 7de1c4b
1 parent 7fa13a7
commit 7de1c4b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 115 deletions.
diff --git a/containers/header/header.styled.ts b/containers/header/header.styled.ts
@@ -11,22 +11,3 @@ export const Container = styled(row)`
   justify-content: center;
   width: 100%;
 `;
-
-export const ClusterIndicator = styled.div`
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
-  background: #22c55e;
-`;
-
-export const ClusterMenu = styled.div`
-  align-items: center;
-  background: #fafafa;
-  border: 1px solid #f4f4f5;
-  display: flex;
-  height: 28px;
-  gap: 8px;
-  justify-content: center;
-  padding: 0 8px;
-  text-transform: uppercase;
-`;
diff --git a/containers/header/index.tsx b/containers/header/index.tsx
@@ -1,80 +1,6 @@
-import React, { FunctionComponent, useCallback, useEffect, useMemo } from 'react';
-import { useRouter } from 'next/router';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import React, { FunctionComponent } from 'react';
 
-import { resetClusterServices, setSelectedCluster } from '../../redux/slices/cluster.slice';
-import { getClusters } from '../../redux/thunks/api.thunk';
-import Menu from '../../components/menu';
-import { useAppDispatch, useAppSelector } from '../../redux/store';
-import Typography from '../../components/typography';
-import useFeatureFlag from '../../hooks/useFeatureFlag';
-import { SALTBOX_BLUE } from '../../constants/colors';
-
-import { ClusterIndicator, ClusterMenu, Container } from './header.styled';
-
-const Header: FunctionComponent = () => {
-  const dispatch = useAppDispatch();
-  const { pathname } = useRouter();
-  const { isEnabled } = useFeatureFlag('multicluster-management');
-  const { clusters, selectedCluster } = useAppSelector(({ api, cluster }) => ({
-    clusters: api.managementCluster
-      ? [api.managementCluster, ...api.managementCluster.workloadClusters]
-      : [],
-    selectedCluster: cluster.selectedCluster,
-  }));
-
-  const isClusterSelectorEnabled = useMemo(
-    () => pathname.includes('/services') && clusters.length && isEnabled,
-    [clusters.length, isEnabled, pathname],
-  );
-
-  const handleSelectCluster = useCallback(
-    async (selectedClusterName: string) => {
-      const selectedCluster = clusters.find(
-        ({ clusterName }) =>
-          clusterName && clusterName.toLowerCase() === selectedClusterName.toLowerCase(),
-      );
-
-      if (selectedCluster) {
-        dispatch(resetClusterServices());
-        dispatch(setSelectedCluster(selectedCluster));
-      }
-    },
-    [clusters, dispatch],
-  );
-
-  useEffect(() => {
-    dispatch(getClusters());
-  }, [dispatch]);
-
-  useEffect(() => {
-    if (clusters.length && !selectedCluster) {
-      dispatch(setSelectedCluster(clusters[0]));
-    }
-  }, [clusters, clusters.length, dispatch, selectedCluster]);
-
-  return (
-    <Container>
-      {isClusterSelectorEnabled ? (
-        <Menu
-          onClickMenu={handleSelectCluster}
-          label={
-            <ClusterMenu>
-              <ClusterIndicator />
-              <Typography variant="body2" color={SALTBOX_BLUE}>
-                {selectedCluster?.clusterName}
-              </Typography>
-              <KeyboardArrowDownIcon htmlColor={SALTBOX_BLUE} />
-            </ClusterMenu>
-          }
-          options={
-            clusters &&
-            clusters.map(({ clusterName }) => ({ label: clusterName?.toUpperCase() ?? '' }))
-          }
-        />
-      ) : null}
-    </Container>
-  );
-};
+import { Container } from './header.styled';
 
+const Header: FunctionComponent = () => <Container />;
 export default Header;
diff --git a/containers/terminalLogs/terminalLogs.tsx b/containers/terminalLogs/terminalLogs.tsx
@@ -119,15 +119,10 @@ const TerminalLogs: FunctionComponent = () => {
       clearInterval(interval.current);
       dispatch(clearError());
     };
-  }, [
-    isProvisioning,
-    isProvisioned,
-    isError,
-    values,
-    getClusterInterval,
-    dispatch,
-    lastErrorCondition,
-  ]);
+    // This is intented, we only want to watch isProvisioning, isProvisioned, isError
+    // and will be deprecated with the queue
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isProvisioning, isProvisioned, isError]);
 
   useEffect(() => {
     if (terminalRef.current) {
@@ -201,16 +196,18 @@ const TerminalLogs: FunctionComponent = () => {
   }, [loadAddons]);
 
   useEffect(() => {
-    Object.keys(CLUSTER_CHECKS).forEach((checkKey) => {
-      const step = CLUSTER_CHECKS[checkKey];
-      const isStepCompleted = managementCluster?.checks[checkKey];
-      const isStepAdded = completedSteps.find(({ label }) => label === step.label);
-
-      if (isStepCompleted && !isStepAdded?.label) {
-        dispatch(setCompletedSteps([...completedSteps, step]));
-      }
-    });
-  }, [completedSteps, dispatch, managementCluster?.checks]);
+    if (managementCluster && managementCluster?.checks) {
+      Object.keys(CLUSTER_CHECKS).forEach((checkKey) => {
+        const step = CLUSTER_CHECKS[checkKey];
+        const isStepCompleted = managementCluster?.checks[checkKey];
+        const isStepAdded = completedSteps.find(({ label }) => label === step.label);
+
+        if (isStepCompleted && !isStepAdded?.label) {
+          dispatch(setCompletedSteps([...completedSteps, step]));
+        }
+      });
+    }
+  }, [completedSteps, dispatch, managementCluster]);
 
   return (
     <Container>