Merged PR 3092: 13303 incident detail target table navigation

- incident detail target table navigation - displaying activeTab in tree correctly - removed old navigation incidentDetail - save guard to set incidentNavigation to undefined
dqops · Oct 13, 2024 · c1b3d67 · c1b3d67
2 parents abff87b + 7416120
commit c1b3d67
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 87 deletions.
diff --git a/dqops/src/main/frontend/src/components/Header/index.tsx b/dqops/src/main/frontend/src/components/Header/index.tsx
@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 import { DqoJobChangeModelStatusEnum } from '../../api';
 import { useActionDispatch } from '../../hooks/useActionDispatch';
+import { setIncidentNavigation } from '../../redux/actions/incidents.actions';
 import {
   setAdvisorJobId,
   setAdvisorObject,
@@ -57,6 +58,9 @@ const Header = () => {
   const { tabs, activeTab } = useSelector(
     (state: IRootState) => state.source[checkTypes || CheckTypes.SOURCES]
   );
+  const { incidentNavigation } = useSelector(
+    (state: IRootState) => state.incidents
+  );
   const { activeTab: homeActiveTab } = useSelector(
     (state: IRootState) => state.source['home']
   );
@@ -73,6 +77,32 @@ const Header = () => {
     let url = '';
     let value = '';
 
+    if (incidentNavigation) {
+      const url = ROUTES.TABLE_LEVEL_PAGE(
+        newCheckTypes,
+        incidentNavigation.connection,
+        incidentNavigation.schema,
+        incidentNavigation.table,
+        getFirstLevelTableTab(newCheckTypes)
+      );
+      const value = ROUTES.TABLE_LEVEL_VALUE(
+        newCheckTypes,
+        incidentNavigation.connection,
+        incidentNavigation.schema,
+        incidentNavigation.table
+      );
+      dispatch(
+        addFirstLevelTab(newCheckTypes, {
+          url,
+          value,
+          label: incidentNavigation.table
+        })
+      );
+      dispatch(setIncidentNavigation(undefined));
+      history.push(url);
+    }
+
+    dispatch(setIncidentNavigation(undefined));
     if (match.path === ROUTES.PATTERNS.CONNECTION) {
       const newTab = getFirstLevelConnectionTab(newCheckTypes);
 
@@ -142,7 +172,7 @@ const Header = () => {
         column
       );
     }
-    console.log('url', url);
+
     if (!url) {
       url = `/` + newCheckTypes;
       history.push(url);

diff --git a/dqops/src/main/frontend/src/components/MainLayout/Tree/index.tsx b/dqops/src/main/frontend/src/components/MainLayout/Tree/index.tsx
@@ -48,7 +48,6 @@ const Tree = () => {
   const [flag, setFlag] = useState(false);
   const [search, setSearch] = useState<Record<string, string>>({});
   const [funnel, setFunnel] = useState<Record<string, boolean>>({});
-
   const { job_dictionary_state, advisorJobId } = useSelector(
     (state: IRootState) => state.job || {}
   );
@@ -146,7 +145,6 @@ const Tree = () => {
       if (match.path === ROUTES.PATTERNS.SCHEMA) {
         setActiveTab(schemaNode?.id || '');
       }
-
       if (match.path === ROUTES.PATTERNS.TABLE) {
         setActiveTab(tableNode?.id || '');
       }
@@ -260,7 +258,7 @@ const Tree = () => {
 
       setFlag((prev) => !prev);
     })();
-  }, [firstLevelActiveTab]);
+  }, [firstLevelActiveTab, match.path]);
 
   const groupedData = groupBy(treeData, 'parentId');
 
@@ -416,7 +414,7 @@ const Tree = () => {
                     node.hasCheck ? 'font-bold' : ''
                   )}
                 >
-                  {node.label}
+                  {node.id}
                 </div>
                 {(node.level === TREE_LEVEL.SCHEMA ||
                   node.level === TREE_LEVEL.COLUMNS) && (

diff --git a/dqops/src/main/frontend/src/pages/IncidentDetail/index.tsx b/dqops/src/main/frontend/src/pages/IncidentDetail/index.tsx
@@ -23,6 +23,7 @@ import useDebounce from '../../hooks/useDebounce';
 import { addFirstLevelTab as addFirstLevelConfigurationTab } from '../../redux/actions/definition.actions';
 import {
   getIncidentsIssues,
+  setIncidentNavigation,
   setIncidentsFilter
 } from '../../redux/actions/incidents.actions';
 import { addFirstLevelTab } from '../../redux/actions/source.actions';
@@ -125,6 +126,16 @@ export const IncidentDetail = () => {
     );
   }, [connection, year, month, incidentId]);
 
+  useEffect(() => {
+    dispatch(
+      setIncidentNavigation({
+        connection: incidentDetail?.connection ?? '',
+        schema: incidentDetail?.schema ?? '',
+        table: incidentDetail?.table ?? ''
+      })
+    );
+  }, [incidentDetail]);
+
   const onChangeIncidentStatus = async (status: IncidentModelStatusEnum) => {
     if (!incidentDetail) return;
 
@@ -217,34 +228,6 @@ export const IncidentDetail = () => {
     history.push(url);
   };
 
-  const tableQualityStatusOptions: Array<{
-    checkType: CheckTypes;
-    timeScale?: 'daily' | 'monthly';
-    show?: boolean;
-  }> = histograms && [
-    { checkType: CheckTypes.PROFILING, show: histograms?.hasProfilingIssues },
-    {
-      checkType: CheckTypes.PARTITIONED,
-      timeScale: 'daily',
-      show: histograms?.hasDailyPartitionedIssues
-    },
-    {
-      checkType: CheckTypes.PARTITIONED,
-      timeScale: 'monthly',
-      show: histograms?.hasMonthlyPartitionedIssues
-    },
-    {
-      checkType: CheckTypes.MONITORING,
-      timeScale: 'daily',
-      show: histograms?.hasDailyMonitoringIssues
-    },
-    {
-      checkType: CheckTypes.MONITORING,
-      timeScale: 'monthly',
-      show: histograms?.hasMonthlyMonitoringIssues
-    }
-  ];
-
   const disableIncident = async () => {
     IncidentsApi.disableChecksForIncident(connection, year, month, incidentId);
     setDisableDialog(false);
@@ -310,51 +293,6 @@ export const IncidentDetail = () => {
     }
   };
 
-  const routeTableQualityStatus = (
-    checkType: CheckTypes,
-    timeScale?: 'daily' | 'monthly'
-  ) => {
-    const redirectTableQualityStatus = () => {
-      const schema = incidentDetail?.schema || '';
-      const table = incidentDetail?.table || '';
-      dispatch(
-        addFirstLevelTab(checkType, {
-          url: ROUTES.TABLE_LEVEL_PAGE(
-            checkType,
-            connection,
-            schema,
-            table,
-            timeScale ?? 'advanced'
-          ),
-          value: ROUTES.TABLE_LEVEL_VALUE(checkType, connection, schema, table),
-          state: {},
-          label: table
-        })
-      );
-      history.push(
-        ROUTES.TABLE_LEVEL_PAGE(
-          checkType,
-          connection,
-          schema,
-          table,
-          timeScale ?? 'advanced'
-        )
-      );
-    };
-
-    return (
-      <div className="flex items-center">
-        <Button
-          label={checkType + ' ' + (timeScale !== undefined ? timeScale : '')}
-          variant="text"
-          onClick={redirectTableQualityStatus}
-          className="m-0 p-0 px-1 text-black font-bold"
-        />
-        <SvgIcon name="chevron-right" className="w-4 h-4" />
-      </div>
-    );
-  };
-
   const configureSourceTables = () => {
     const schema = incidentDetail?.schema || '';
     const table = incidentDetail?.table || '';
@@ -394,9 +332,6 @@ export const IncidentDetail = () => {
             </div>
           </div>
           <div className="flex space-x-3">
-            {tableQualityStatusOptions
-              ?.filter((y) => y.show)
-              .map((x) => routeTableQualityStatus(x.checkType, x.timeScale))}
             <div className="flex items-center gap-x-2">
               <Tooltip
                 content={

diff --git a/dqops/src/main/frontend/src/redux/actions/incidents.actions.ts b/dqops/src/main/frontend/src/redux/actions/incidents.actions.ts
@@ -19,9 +19,9 @@ import { Dispatch } from 'redux';
 import { AxiosResponse } from 'axios';
 import {
   CheckResultEntryModel,
-  IssueHistogramModel,
   IncidentModel,
-  IncidentsPerConnectionModel
+  IncidentsPerConnectionModel,
+  IssueHistogramModel
 } from '../../api';
 import { IncidentsApi } from '../../services/apiClient';
 import {
@@ -209,9 +209,7 @@ export const getIncidentsHistogramsRequest = () => ({
   type: INCIDENTS_ACTION.GET_INCIDENTS_HISTOGRAMS
 });
 
-export const getIncidentsHistogramsSuccess = (
-  data: IssueHistogramModel
-) => ({
+export const getIncidentsHistogramsSuccess = (data: IssueHistogramModel) => ({
   type: INCIDENTS_ACTION.GET_INCIDENTS_HISTOGRAMS_SUCCESS,
   data
 });
@@ -270,3 +268,16 @@ export const setIncidentsHistogram = (data: IssueHistogramModel) => ({
   type: INCIDENTS_ACTION.SET_INCIDENTS_HISTOGRAM,
   data
 });
+
+export const setIncidentNavigation = (
+  data:
+    | {
+        connection: string;
+        schema: string;
+        table: string;
+      }
+    | undefined
+) => ({
+  type: INCIDENTS_ACTION.SET_INCIDENT_NAVIGATION,
+  data
+});
diff --git a/dqops/src/main/frontend/src/redux/reducers/incidents.reducer.ts b/dqops/src/main/frontend/src/redux/reducers/incidents.reducer.ts
@@ -94,6 +94,7 @@ export interface IIncidentsState {
   tabs: INestTab[];
   activeTab?: string;
   selectedConnections?: { [key: string]: string };
+  incidentNavigation?: { connection: string; schema: string; table: string };
 }
 
 const initialState: IIncidentsState = {
@@ -274,6 +275,12 @@ const incidentsReducer = (state = initialState, action: any) => {
         selectedConnections: { ...state.selectedConnections, ...action.data }
       };
     }
+    case INCIDENTS_ACTION.SET_INCIDENT_NAVIGATION: {
+      return {
+        ...state,
+        incidentNavigation: action.data
+      };
+    }
 
     default:
       return state;

diff --git a/dqops/src/main/frontend/src/redux/types/incidents.types.ts b/dqops/src/main/frontend/src/redux/types/incidents.types.ts
@@ -42,5 +42,7 @@ export enum INCIDENTS_ACTION {
 
   SET_INCIDENTS_HISTOGRAM_FILTER = 'INCIDENTS_ACTION/SET_INCIDENTS_HISTOGRAM_FILTER',
 
-  ADD_SELECTED_CONNECTION = 'INCIDENTS_ACTION/ADD_SELECTED_CONNECTION'
+  ADD_SELECTED_CONNECTION = 'INCIDENTS_ACTION/ADD_SELECTED_CONNECTION',
+
+  SET_INCIDENT_NAVIGATION = 'INCIDENTS_ACTION/SET_INCIDENT_NAVIGATION'
 }