feat: add popup to error/warning counters

kubeshop · Nov 1, 2021 · d8ebd04 · d8ebd04
1 parent fe6789f
commit d8ebd04
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/organisms/NavigatorPane/SectionRenderer/ItemRenderer/ItemRenderer.tsx b/src/components/organisms/NavigatorPane/SectionRenderer/ItemRenderer/ItemRenderer.tsx
@@ -4,6 +4,7 @@ import AppContext from '@src/AppContext';
 import {NAVIGATOR_HEIGHT_OFFSET} from '@constants/constants';
 import {ItemBlueprint} from '@models/navigator';
 import {useAppDispatch, useAppSelector} from '@redux/hooks';
+import {selectInstance} from '@redux/reducers/navigator';
 import {useItemCustomization} from './useItemCustomization';
 import * as S from './styled';
 
@@ -22,6 +23,7 @@ function NavSectionItem<ItemType, ScopeType>(props: {
   const [isHovered, setIsHovered] = useState<boolean>(false);
 
   const itemInstance = useAppSelector(state => state.navigator.itemInstanceMap[itemId]);
+  const selectedInstanceId = useAppSelector(state => state.navigator.selectedInstanceId);
   const {instanceHandler} = blueprint;
 
   const {Prefix, Suffix, QuickAction, ContextMenu} = useItemCustomization(blueprint.customization);
@@ -53,6 +55,14 @@ function NavSectionItem<ItemType, ScopeType>(props: {
     }
   }, [instanceHandler, itemInstance, dispatch]);
 
+  useEffect(() => {
+    if (selectedInstanceId && itemId === selectedInstanceId) {
+      onClick();
+      selectInstance(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedInstanceId]);
+
   return (
     <ScrollIntoView ref={scrollContainer}>
       <S.ItemContainer

diff --git a/src/components/organisms/NavigatorPane/WarningsAndErrorsDisplay.tsx b/src/components/organisms/NavigatorPane/WarningsAndErrorsDisplay.tsx
@@ -1,11 +1,13 @@
 import React, {useMemo} from 'react';
 import styled from 'styled-components';
 import MonoIcon, {MonoIconTypes} from '@components/atoms/MonoIcon';
-import {useAppSelector} from '@redux/hooks';
+import {useAppSelector, useAppDispatch} from '@redux/hooks';
 import {ResourceRefType} from '@models/k8sresource';
 import Colors from '@styles/Colors';
 import {isInPreviewModeSelector} from '@redux/selectors';
 import {PREVIEW_PREFIX} from '@constants/constants';
+import {Dropdown, Menu} from 'antd';
+import {selectInstance} from '@redux/reducers/navigator';
 
 const Container = styled.span`
   width: 100%;
@@ -14,21 +16,106 @@ const Container = styled.span`
 const WarningContainer = styled.span`
   margin-left: 10px;
   color: ${Colors.yellowWarning};
+  cursor: pointer;
 `;
 
 const ErrorContainer = styled.span`
   margin-left: 10px;
   color: ${Colors.redError};
+  cursor: pointer;
 `;
 
 const Label = styled.span`
   margin-left: 3px;
 `;
 
+const StyledMenu = styled(Menu)`
+  max-height: 400px;
+  overflow-y: scroll;
+  padding: 4px 0;
+`;
+
+const StyledMenuItem = styled(Menu.Item)`
+  margin-bottom: 0 !important;
+  margin-top: 0 !important;
+  height: 28px !important;
+  line-height: 28px !important;
+  padding: 0 4px;
+`;
+
+type Warning = {
+  id: string;
+  type: string;
+  name: string;
+  count: number;
+};
+
+type RefDropdownMenuProps = {
+  warnings: Warning[];
+};
+
+const RefDropdownMenu = (props: RefDropdownMenuProps) => {
+  const dispatch = useAppDispatch();
+  const {warnings} = props;
+  return (
+    <StyledMenu>
+      {warnings.map(warning => (
+        <StyledMenuItem key={warning.id} onClick={() => dispatch(selectInstance(warning.id))}>
+          <Label>{warning.type}:</Label>
+          <Label>&nbsp;{warning.name}</Label>
+          <Label>&nbsp;({warning.count})</Label>
+        </StyledMenuItem>
+      ))}
+    </StyledMenu>
+  );
+};
+
 function WarningsAndErrorsDisplay() {
   const resourceMap = useAppSelector(state => state.main.resourceMap);
   const isInPreviewMode = useAppSelector(isInPreviewModeSelector);
 
+  const warnings: any[] = useMemo(() => {
+    return Object.values(resourceMap)
+      .filter(resource =>
+        isInPreviewMode ? resource.filePath.startsWith(PREVIEW_PREFIX) : !resource.filePath.startsWith(PREVIEW_PREFIX)
+      )
+      .map(resource => {
+        if (resource.refs) {
+          const unsatisfiedRefs = resource.refs.filter(ref => ref.type === ResourceRefType.Unsatisfied);
+          if (unsatisfiedRefs.length > 0) {
+            return {
+              id: resource.id,
+              type: resource.kind,
+              name: resource.name,
+              count: unsatisfiedRefs.length,
+            };
+          }
+          return null;
+        }
+        return null;
+      })
+      .filter(warning => warning);
+  }, [resourceMap, isInPreviewMode]);
+
+  const errors: any[] = useMemo(() => {
+    return Object.values(resourceMap)
+      .filter(resource =>
+        isInPreviewMode ? resource.filePath.startsWith(PREVIEW_PREFIX) : !resource.filePath.startsWith(PREVIEW_PREFIX)
+      )
+      .map(resource => {
+        if (resource.validation && !resource.validation.isValid) {
+          return {
+            id: resource.id,
+            type: resource.kind,
+            name: resource.name,
+            count: resource.validation.errors.length,
+          };
+        }
+        return null;
+      })
+      .filter(error => error);
+  }, [resourceMap, isInPreviewMode]);
+
   const warningsCount = useMemo(() => {
     return Object.values(resourceMap)
       .filter(resource =>
@@ -52,16 +139,20 @@ function WarningsAndErrorsDisplay() {
   return (
     <Container>
       {warningsCount > 0 && (
-        <WarningContainer>
-          <MonoIcon type={MonoIconTypes.Warning} />
-          <Label>{warningsCount}</Label>
-        </WarningContainer>
+        <Dropdown overlay={<RefDropdownMenu warnings={warnings} />} trigger={['click']} placement="bottomCenter">
+          <WarningContainer>
+            <MonoIcon type={MonoIconTypes.Warning} />
+            <Label>{warningsCount}</Label>
+          </WarningContainer>
+        </Dropdown>
       )}
       {errorsCount > 0 && (
-        <ErrorContainer>
-          <MonoIcon type={MonoIconTypes.Error} />
-          <Label>{errorsCount}</Label>
-        </ErrorContainer>
+        <Dropdown overlay={<RefDropdownMenu warnings={errors} />} trigger={['click']} placement="bottomCenter">
+          <ErrorContainer>
+            <MonoIcon type={MonoIconTypes.Error} />
+            <Label>{errorsCount}</Label>
+          </ErrorContainer>
+        </Dropdown>
       )}
     </Container>
   );

diff --git a/src/models/navigator.ts b/src/models/navigator.ts
@@ -110,4 +110,5 @@ export interface NavigatorInstanceState {
 
 export interface NavigatorState extends NavigatorInstanceState {
   collapsedSectionIds: string[];
+  selectedInstanceId: string | null;
 }
diff --git a/src/redux/initialState.ts b/src/redux/initialState.ts
@@ -111,6 +111,7 @@ const initialNavigatorState: NavigatorState = {
   sectionInstanceMap: {},
   itemInstanceMap: {},
   collapsedSectionIds: [],
+  selectedInstanceId: null,
 };
 
 export default {

diff --git a/src/redux/reducers/navigator.ts b/src/redux/reducers/navigator.ts
@@ -25,8 +25,12 @@ export const navigatorSlice = createSlice({
     expandSectionIds: (state: Draft<NavigatorState>, action: PayloadAction<string[]>) => {
       state.collapsedSectionIds = state.collapsedSectionIds.filter(sectionId => !action.payload.includes(sectionId));
     },
+    selectInstance: (state: Draft<NavigatorState>, action: PayloadAction<string | null>) => {
+      state.selectedInstanceId = action.payload;
+    },
   },
 });
 
-export const {updateNavigatorInstanceState, collapseSectionIds, expandSectionIds} = navigatorSlice.actions;
+export const {updateNavigatorInstanceState, collapseSectionIds, expandSectionIds, selectInstance} =
+  navigatorSlice.actions;
 export default navigatorSlice.reducer;