Added breadcrumb

plugins/kiali/src/components/BreadcrumbView/BreadcrumbView.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+
+import { Breadcrumbs } from '@material-ui/core';
+
+import { HistoryManager } from '../../app/History';
+import { isMultiCluster, Paths } from '../../config';
+import { kialiStyle, linkStyle } from '../../styles/StyleUtils';
+import { dicIstioType } from '../../types/IstioConfigList';
+import { FilterSelected } from '../Filters/StatefulFilters';
+
+interface BreadCumbViewProps {
+  location: {
+    pathname: string;
+    search: string;
+  };
+}
+
+const ItemNames = {
+  applications: 'App',
+  services: 'Service',
+  workloads: 'Workload',
+  istio: 'Istio Object',
+};
+
+const pluginRoot = 'kiali';
+const IstioName = 'Istio Config';
+const namespaceRegex =
+  /kiali\/([a-z0-9-]+)\/([\w-.]+)\/([\w-.*]+)(\/([\w-.]+))?(\/([\w-.]+))?/;
+
+export const getPath = (props: BreadCumbViewProps) => {
+  const match = props.location.pathname.match(namespaceRegex) || [];
+  const ns = match[2];
+  // @ts-ignore
+  const page = Paths[match[1].toUpperCase()];
+  const istioType = match[3];
+  const urlParams = new URLSearchParams(props.location.search);
+  const itemName = page !== 'istio' ? match[3] : match[5];
+  return {
+    cluster: HistoryManager.getClusterName(urlParams),
+    istioType: istioType,
+    item: itemName,
+    // @ts-ignore
+    itemName: ItemNames[page],
+    namespace: ns,
+    pathItem: page,
+  };
+};
+
+const breadcrumStyle = kialiStyle({
+  marginBottom: '20px',
+  marginTop: '-30px',
+});
+
+export const BreadcrumbView = (props: BreadCumbViewProps) => {
+  const capitalize = (str: string) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  };
+
+  const path = getPath(props);
+
+  const istioTypeF = (rawType: string) => {
+    // @ts-ignore
+    const istioType = Object.keys(dicIstioType).find(
+      key => dicIstioType[key] === rawType,
+    );
+    return istioType ? istioType : capitalize(rawType);
+  };
+
+  const cleanFilters = () => {
+    FilterSelected.resetFilters();
+  };
+
+  const isIstioF = () => {
+    return path?.pathItem === 'istio';
+  };
+
+  const getItemPage = () => {
+    if (path) {
+      let pathT = `/${pluginRoot}/${path?.pathItem}/${path?.namespace}/${path?.item}`;
+      if (path?.cluster && isMultiCluster) {
+        pathT += `?clusterName=${path.cluster}`;
+      }
+      return pathT;
+    }
+    return '';
+  };
+
+  const namespace = path ? path.namespace : '';
+  const item = path ? path.item : '';
+  const istioType = path ? path.istioType : '';
+  const pathItem = path ? path.pathItem : '';
+
+  const isIstio = isIstioF();
+  const linkItem = isIstio ? (
+    { item }
+  ) : (
+    <Link to={getItemPage()} onClick={cleanFilters}>
+      {item}
+    </Link>
+  );
+  // @ts-ignore
+  const linkTo = `/${pluginRoot}/${pathItem}?namespaces=${namespace}&type=${
+    dicIstioType[path?.istioType || '']
+  }`;
+  return (
+    <div className={breadcrumStyle}>
+      <Breadcrumbs>
+        <Link
+          to={`/${pluginRoot}/${pathItem}`}
+          onClick={cleanFilters}
+          className={linkStyle}
+        >
+          {isIstio ? IstioName : capitalize(pathItem)}
+        </Link>
+        <Link
+          to={`/${pluginRoot}/${pathItem}?namespaces=${namespace}`}
+          onClick={cleanFilters}
+          className={linkStyle}
+        >
+          Namespace: {namespace}
+        </Link>
+        {isIstio && (
+          <Link to={linkTo} onClick={cleanFilters} className={linkStyle}>
+            {istioType ? istioTypeF(istioType) : istioType}
+          </Link>
+        )}
+        {linkItem}
+      </Breadcrumbs>
+    </div>
+  );
+};

plugins/kiali/src/components/VirtualList/Renderers.tsx

@@ -8,6 +8,7 @@ import { isWaypoint } from '../../helpers/LabelFilterHelper';
 import { infoStyle } from '../../pages/Overview/OverviewCard/CanaryUpgradeProgress';
 import { ControlPlaneBadge } from '../../pages/Overview/OverviewCard/ControlPlaneBadge';
 import { OverviewCardSparklineCharts } from '../../pages/Overview/OverviewCard/OverviewCardSparklineCharts';
+import { linkStyle } from '../../styles/StyleUtils';
 import { Health } from '../../types/Health';
 import { IstioConfigItem } from '../../types/IstioConfigList';
 import { ValidationStatus } from '../../types/IstioObjects';
@@ -115,7 +116,9 @@ export const item: Renderer<TResource> = (
       style={{ verticalAlign: 'middle', whiteSpace: 'nowrap' }}
     >
       <PFBadge badge={serviceBadge} position={topPosition} />
-      {resource.name}
+      <Link key={key} to={getLink(resource, config)} className={linkStyle}>
+        {resource.name}
+      </Link>
     </TableCell>
   );
 };

plugins/kiali/src/pages/WorkloadDetails/WorkloadDetailsPage.tsx

@@ -7,6 +7,8 @@ import { useApi } from '@backstage/core-plugin-api';
 
 import { CircularProgress } from '@material-ui/core';
 
+import { history } from '../../app/History';
+import { BreadcrumbView } from '../../components/BreadcrumbView/BreadcrumbView';
 import { DefaultSecondaryMasthead } from '../../components/DefaultSecondaryMasthead/DefaultSecondaryMasthead';
 import * as FilterHelper from '../../components/FilterList/FilterHelper';
 import { TimeDurationComponent } from '../../components/Time/TimeDurationComponent';
@@ -104,6 +106,7 @@ export const WorkloadDetailsPage = () => {
   return (
     <div className={baseStyle}>
       <Content>
+        <BreadcrumbView location={history.location} />
         <DefaultSecondaryMasthead
           elements={grids()}
           onRefresh={() => fetchWorkload()}

plugins/kiali/src/styles/StyleUtils.ts

@@ -18,3 +18,8 @@ export const baseStyle = kialiStyle({
   display: 'contents',
   overflow: 'visible',
 });
+
+export const linkStyle = kialiStyle({
+  color: '#06c',
+  cursor: 'pointer',
+});