Update links for drawer view

josunect · josunect · commit 7a6a8136985e · 2024-05-03T08:47:10.000+01:00
diff --git a/plugins/kiali/src/components/DetailDescription/DetailDescription.tsx b/plugins/kiali/src/components/DetailDescription/DetailDescription.tsx
@@ -11,6 +11,7 @@ import { kialiStyle } from '../../styles/StyleUtils';
 import { AppWorkload } from '../../types/App';
 import * as H from '../../types/Health';
 import { HealthSubItem } from '../../types/Health';
+import { DRAWER } from '../../types/types';
 import { Workload } from '../../types/Workload';
 import { renderTrafficStatus } from '../Health/HealthDetails';
 import { MissingSidecar } from '../MissingSidecar/MissingSidecar';
@@ -24,6 +25,7 @@ type Props = {
   services?: string[];
   waypointWorkloads?: Workload[];
   workloads?: AppWorkload[];
+  view?: string;
 };
 
 const iconStyle = kialiStyle({
@@ -79,6 +81,10 @@ export const DetailDescription: React.FC<Props> = (props: Props) => {
       href = `${href}?clusterName=${props.cluster}`;
     }
 
+    if (props.view === DRAWER) {
+      href = `#application/${namespace}_${appName}`;
+    }
+
     const link = <Link to={href}>{appName}</Link>;
 
     return (
@@ -102,6 +108,9 @@ export const DetailDescription: React.FC<Props> = (props: Props) => {
       href = `${href}?clusterName=${props.cluster}`;
     }
 
+    if (props.view === DRAWER) {
+      href = `#service/${namespace}_${serviceName}`;
+    }
     const link = <Link to={href}>{serviceName}</Link>;
 
     return (
@@ -177,6 +186,10 @@ export const DetailDescription: React.FC<Props> = (props: Props) => {
       href = `${href}?clusterName=${props.cluster}`;
     }
 
+    if (props.view === DRAWER) {
+      href = `#workload/${props.namespace}_${workload.workloadName}`;
+    }
+
     const link = <Link to={href}>{workload.workloadName}</Link>;
 
     return (
@@ -225,6 +238,10 @@ export const DetailDescription: React.FC<Props> = (props: Props) => {
         href = `${href}?clusterName=${props.cluster}`;
       }
 
+      if (props.view === DRAWER) {
+        href = `#workload/${props.namespace}_${workload.workloadName}`;
+      }
+
       const link = <Link to={href}>{workload.workloadName}</Link>;
 
       return (
diff --git a/plugins/kiali/src/components/Drawers/AppDetailsDrawer.tsx b/plugins/kiali/src/components/Drawers/AppDetailsDrawer.tsx
@@ -11,7 +11,7 @@ import { AppInfo } from '../../pages/AppDetails/AppInfo';
 import { kialiApiRef } from '../../services/Api';
 import { App, AppQuery } from '../../types/App';
 import { AppHealth } from '../../types/Health';
-import { ENTITY } from '../../types/types';
+import { DRAWER } from '../../types/types';
 
 type Props = {
   namespace: string;
@@ -68,7 +68,7 @@ export const AppDetailsDrawer = (props: Props) => {
   return (
     <>
       {appItem && (
-        <AppInfo app={appItem} duration={60} health={health} view={ENTITY} />
+        <AppInfo app={appItem} duration={60} health={health} view={DRAWER} />
       )}
     </>
   );
diff --git a/plugins/kiali/src/components/Drawers/ServiceDetailsDrawer.tsx b/plugins/kiali/src/components/Drawers/ServiceDetailsDrawer.tsx
@@ -10,7 +10,7 @@ import { ServiceInfo } from '../../pages/ServiceDetails/ServiceInfo';
 import { kialiApiRef } from '../../services/Api';
 import { Validations } from '../../types/IstioObjects';
 import { ServiceDetailsInfo } from '../../types/ServiceInfo';
-import { ENTITY } from '../../types/types';
+import { DRAWER } from '../../types/types';
 
 type Props = {
   namespace: string;
@@ -63,7 +63,7 @@ export const ServiceDetailsDrawer = (props: Props) => {
           k8sGateways={[]}
           peerAuthentications={[]}
           istioAPIEnabled
-          view={ENTITY}
+          view={DRAWER}
         />
       )}
     </>
diff --git a/plugins/kiali/src/components/Drawers/WorkloadDetailsDrawer.tsx b/plugins/kiali/src/components/Drawers/WorkloadDetailsDrawer.tsx
@@ -8,7 +8,7 @@ import { CircularProgress } from '@material-ui/core';
 import { WorkloadInfo } from '../../pages/WorkloadDetails/WorkloadInfo';
 import { kialiApiRef } from '../../services/Api';
 import { WorkloadHealth } from '../../types/Health';
-import { ENTITY } from '../../types/types';
+import { DRAWER } from '../../types/types';
 import { Workload, WorkloadQuery } from '../../types/Workload';
 
 type Props = {
@@ -76,7 +76,7 @@ export const WorkloadDetailsDrawer = (props: Props) => {
           duration={60}
           namespace={props.namespace}
           health={health}
-          view={ENTITY}
+          view={DRAWER}
         />
       )}
     </>
diff --git a/plugins/kiali/src/components/VirtualList/Renderers.tsx b/plugins/kiali/src/components/VirtualList/Renderers.tsx
@@ -120,6 +120,7 @@ const DrawerDiv = ({
         <div style={{ paddingBottom: '10px' }}>
           <IconButton
             key="dismiss"
+            id="close_drawer"
             title="Close the drawer"
             onClick={() => toggleDrawer2(false)}
             color="inherit"
@@ -149,6 +150,7 @@ const DrawerDiv = ({
       <Button
         variant="contained"
         color="primary"
+        id={`drawer_${namespace}_${name}`}
         onClick={() => toggleDrawer(true)}
       >
         {name}
diff --git a/plugins/kiali/src/dynamic/EntityKialiResourcesCard.tsx b/plugins/kiali/src/dynamic/EntityKialiResourcesCard.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { useRef } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import {
   CardTab,
@@ -20,8 +22,71 @@ const tabStyle: React.CSSProperties = {
   maxHeight: '400px',
 };
 
+const tabs = ['workload', 'service', 'application'];
+
 export const EntityKialiResourcesCard = () => {
   const { entity } = useEntity();
+  const location = useLocation();
+  const [element, setElement] = React.useState<string>();
+  const prevElement = useRef(element);
+  const [renderCount, setRenderCount] = React.useState(0);
+
+  const getInitValue = (): string => {
+    const hash = location.hash.replace(/^#,?\s*/, '');
+    const data = hash.split('/');
+
+    const close = document.getElementById('close_drawer');
+    if (close) {
+      close.click();
+    }
+
+    if (data.length > 1 && data[1] !== element) {
+      setElement(data[1]);
+    }
+    if (tabs.includes(data[0])) {
+      return data[0];
+    }
+    return tabs[0];
+  };
+  const [value, setValue] = React.useState<string | number>(getInitValue());
+
+  const navigate = useNavigate();
+
+  const handleChange = (
+    _: React.ChangeEvent<{}>,
+    newValue: string | number,
+  ) => {
+    setValue(newValue);
+    navigate(`#${newValue}`);
+  };
+
+  React.useEffect(() => {
+    // This time out is needed to have rendered the context and be able to call the element to open the drawer
+    const timeout = setTimeout(() => {
+      setRenderCount(prevCount => prevCount + 1);
+    }, 1000);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  React.useEffect(() => {
+    const val = getInitValue();
+    if (val !== value) {
+      setValue(val);
+      setTimeout(() => {
+        setRenderCount(prevCount => prevCount + 1);
+      }, 1000);
+      return;
+    }
+
+    if (element && element !== prevElement.current && renderCount > 0) {
+      const drawer = document.getElementById(`drawer_${element}`);
+      if (drawer) {
+        drawer.click();
+      }
+      prevElement.current = element;
+    }
+  }, [element, renderCount]);
+
   return !entity ? (
     <EmptyState
       missing="data"
@@ -44,18 +109,22 @@ export const EntityKialiResourcesCard = () => {
       }
     />
   ) : (
-    <TabbedCard title="Service Mesh Resources">
-      <CardTab label="Workloads">
+    <TabbedCard
+      title="Service Mesh Resources"
+      onChange={handleChange}
+      value={value}
+    >
+      <CardTab label="Workloads" value="workload">
         <div style={tabStyle}>
           <WorkloadListPage view={DRAWER} entity={entity} />
         </div>
       </CardTab>
-      <CardTab label="Services">
+      <CardTab label="Services" value="service">
         <div style={tabStyle}>
           <ServiceListPage view={DRAWER} entity={entity} />
         </div>
       </CardTab>
-      <CardTab label="Applications">
+      <CardTab label="Applications" value="application">
         <div style={tabStyle}>
           <AppListPage view={DRAWER} entity={entity} />
         </div>
diff --git a/plugins/kiali/src/pages/AppDetails/AppDescription.tsx b/plugins/kiali/src/pages/AppDetails/AppDescription.tsx
@@ -14,6 +14,7 @@ import * as H from '../../types/Health';
 type AppDescriptionProps = {
   app?: App;
   health?: H.Health;
+  view?: string;
 };
 
 const iconStyle = kialiStyle({
@@ -36,25 +37,29 @@ export const AppDescription: React.FC<AppDescriptionProps> = (
 
   return props.app ? (
     <Card id="AppDescriptionCard" data-test="app-description-card">
-      <CardHeader>
-        <Typography variant="h6" style={{ margin: '10px' }}>
-          <div key="service-icon" className={iconStyle}>
-            <PFBadge badge={PFBadges.App} />
-          </div>
+      <CardHeader
+        title={
+          <>
+            <Typography variant="h6" style={{ margin: '10px' }}>
+              <div key="service-icon" className={iconStyle}>
+                <PFBadge badge={PFBadges.App} />
+              </div>
 
-          {props.app.name}
+              {props.app.name}
 
-          <span className={healthIconStyle}>
-            <HealthIndicator id={props.app.name} health={props.health} />
-          </span>
-        </Typography>
+              <span className={healthIconStyle}>
+                <HealthIndicator id={props.app.name} health={props.health} />
+              </span>
+            </Typography>
 
-        {props.app.cluster && isMultiCluster && (
-          <div key="cluster-icon" style={{ paddingBottom: '0.5rem' }}>
-            <PFBadge badge={PFBadges.Cluster} /> {props.app.cluster}
-          </div>
-        )}
-      </CardHeader>
+            {props.app.cluster && isMultiCluster && (
+              <div key="cluster-icon" style={{ paddingBottom: '0.5rem' }}>
+                <PFBadge badge={PFBadges.Cluster} /> {props.app.cluster}
+              </div>
+            )}
+          </>
+        }
+      />
       <CardContent>
         <Labels
           labels={appLabels}
@@ -67,6 +72,7 @@ export const AppDescription: React.FC<AppDescriptionProps> = (
           services={props.app ? props.app.serviceNames : []}
           health={props.health}
           cluster={props.app?.cluster}
+          view={props.view}
         />
       </CardContent>
     </Card>
diff --git a/plugins/kiali/src/pages/AppDetails/AppInfo.tsx b/plugins/kiali/src/pages/AppDetails/AppInfo.tsx
@@ -5,7 +5,7 @@ import { Grid } from '@material-ui/core';
 import { App } from '../../types/App';
 import { DurationInSeconds } from '../../types/Common';
 import { AppHealth } from '../../types/Health';
-import { ENTITY } from '../../types/types';
+import { DRAWER, ENTITY } from '../../types/types';
 import { AppDescription } from './AppDescription';
 
 type AppInfoProps = {
@@ -16,11 +16,15 @@ type AppInfoProps = {
 };
 
 export const AppInfo = (appProps: AppInfoProps) => {
-  const size = appProps.view === ENTITY ? 12 : 4;
+  const size = appProps.view === ENTITY || appProps.view === DRAWER ? 12 : 4;
   return (
     <Grid container spacing={1} style={{ paddingTop: '20px' }}>
       <Grid key={`Card_${appProps.app?.name}`} item xs={size}>
-        <AppDescription app={appProps.app} health={appProps.health} />
+        <AppDescription
+          app={appProps.app}
+          health={appProps.health}
+          view={appProps.view}
+        />
       </Grid>
     </Grid>
   );
diff --git a/plugins/kiali/src/pages/ServiceDetails/ServiceDescription.tsx b/plugins/kiali/src/pages/ServiceDetails/ServiceDescription.tsx
@@ -24,6 +24,7 @@ import { ServiceDetailsInfo, WorkloadOverview } from '../../types/ServiceInfo';
 interface ServiceInfoDescriptionProps {
   namespace: string;
   serviceDetails?: ServiceDetailsInfo;
+  view?: string;
 }
 
 const resourceListStyle = kialiStyle({
@@ -235,6 +236,7 @@ export const ServiceDescription: React.FC<ServiceInfoDescriptionProps> = (
           workloads={workloads}
           health={props.serviceDetails?.health}
           cluster={props.serviceDetails?.cluster}
+          view={props.view}
         />
       </CardContent>
     </Card>
diff --git a/plugins/kiali/src/pages/ServiceDetails/ServiceInfo.tsx b/plugins/kiali/src/pages/ServiceDetails/ServiceInfo.tsx
@@ -22,7 +22,7 @@ import {
 } from '../../types/IstioObjects';
 import { ServiceId } from '../../types/ServiceId';
 import { ServiceDetailsInfo } from '../../types/ServiceInfo';
-import { ENTITY } from '../../types/types';
+import { DRAWER, ENTITY } from '../../types/types';
 import { ServiceDescription } from './ServiceDescription';
 import { ServiceNetwork } from './ServiceNetwork';
 
@@ -112,7 +112,8 @@ export const ServiceInfo = (serviceProps: Props) => {
     ),
   );
 
-  const size = serviceProps.view === ENTITY ? 12 : 4;
+  const size =
+    serviceProps.view === ENTITY || serviceProps.view === DRAWER ? 12 : 4;
   return (
     <>
       {serviceProps.serviceDetails && (
@@ -121,9 +122,10 @@ export const ServiceInfo = (serviceProps: Props) => {
             <ServiceDescription
               namespace={serviceProps.namespace}
               serviceDetails={serviceProps.serviceDetails}
+              view={serviceProps.view}
             />
           </Grid>
-          {serviceProps.view !== ENTITY && (
+          {serviceProps.view !== DRAWER && (
             <>
               <Grid key={`Card_${serviceProps.service}`} item xs={4}>
                 <ServiceNetwork
diff --git a/plugins/kiali/src/pages/WorkloadDetails/WorkloadInfo.tsx b/plugins/kiali/src/pages/WorkloadDetails/WorkloadInfo.tsx
diff --git a/plugins/kiali/src/pages/WorkloadDetails/WorkloadsDescription.tsx b/plugins/kiali/src/pages/WorkloadDetails/WorkloadsDescription.tsx
