All urls to Istio details page using same component

kiali · May 25, 2020 · 7213f16 · 7213f16
1 parent acaa501
commit 7213f16
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 80 deletions.
diff --git a/src/components/Link/IstioObjectLink.tsx b/src/components/Link/IstioObjectLink.tsx
@@ -9,10 +9,10 @@ interface Props {
   namespace: string;
   type: string;
   subType?: string;
+  query?: string;
 }
 
-const IstioObjectLink = (props: Props) => {
-  const { name, namespace, type, subType } = props;
+export const GetIstioObjectUrl = (name: string, namespace: string, type: string, subType?: string, query?: string): string => {
   const istioType = IstioTypes[type];
   let to = '/namespaces/' + namespace + '/' + Paths.ISTIO;
 
@@ -22,16 +22,41 @@ const IstioObjectLink = (props: Props) => {
     to = to + '/' + istioType.url + '/' + name;
   }
 
-  return (
-    <>
-      <Tooltip position={TooltipPosition.top} content={<>{istioType.name}</>}>
-        <Badge className={'virtualitem_badge_definition'}>{istioType.icon}</Badge>
-      </Tooltip>
-      <Link to={to}>
-        {namespace}/{name}
-      </Link>
-    </>
-  );
+  if (!!query) {
+    to = to  + '?' + query;
+  }
+
+  return to;
 };
 
+export class ReferenceIstioObjectLink extends React.Component<Props> {
+  render() {
+    const { name, namespace, type, subType } = this.props;
+    const istioType = IstioTypes[type];
+
+    return (
+      <>
+        <Tooltip position={TooltipPosition.top} content={<>{istioType.name}</>}>
+          <Badge className={'virtualitem_badge_definition'}>{istioType.icon}</Badge>
+        </Tooltip>
+        <IstioObjectLink name={name} namespace={namespace} type={type} subType={subType}>
+          {namespace}/{name}
+        </IstioObjectLink>
+      </>
+    );
+  }
+}
+
+class IstioObjectLink extends React.Component<Props>  {
+ render() {
+   const { name, namespace, type, subType, query } = this.props;
+
+  return (
+    <Link to={GetIstioObjectUrl(name, namespace, type, subType, query)}>
+      {this.props.children}
+    </Link>
+  )
+ }
+}
+
 export default IstioObjectLink;
diff --git a/src/components/VirtualList/Renderers.tsx b/src/components/VirtualList/Renderers.tsx
@@ -23,6 +23,7 @@ import ValidationSummary from '../Validations/ValidationSummary';
 import OverviewCardContentExpanded from '../../pages/Overview/OverviewCardContentExpanded';
 import { OverviewToolbar } from '../../pages/Overview/OverviewToolbar';
 import OverviewCardLinks from '../../pages/Overview/OverviewCardLinks';
+import { GetIstioObjectUrl } from '../Link/IstioObjectLink';
 
 // Links
 
@@ -32,21 +33,15 @@ const getLink = (item: TResource, config: Resource, query?: string) => {
 };
 
 const getIstioLink = (item: TResource) => {
-  let to = '/namespaces/' + item.namespace + '/istio';
-  const name = item.name;
   const type = item['type'];
+  let subType;
 
   // Adapters and Templates need to pass subtype
   if (type === 'adapter' || type === 'template') {
-    // Build a /adapters/<adapter_type_plural>/<adapter_name> or
-    //         /templates/<template_type_plural>/<template_name>
-    const istioType = type + 's';
-    const subtype = type === 'adapter' ? item['adapter']!.adapters : item['template']!.templates;
-    to = to + '/' + istioType + '/' + subtype + '/' + name;
-  } else {
-    to = to + '/' + IstioTypes[type].url + '/' + name;
+    subType = type === 'adapter' ? item['adapter']!.adapters : item['template']!.templates;
   }
-  return to;
+
+  return GetIstioObjectUrl(item.name, item.namespace, type, subType);
 };
 
 // Cells

diff --git a/src/pages/IstioConfigDetails/IstioConfigDetailsPage.tsx b/src/pages/IstioConfigDetails/IstioConfigDetailsPage.tsx
@@ -15,7 +15,7 @@ import 'brace/theme/eclipse';
 import { ObjectReference, ObjectValidation } from '../../types/IstioObjects';
 import { AceValidations, jsYaml, parseKialiValidations, parseYamlValidations } from '../../types/AceValidations';
 import IstioActionDropdown from '../../components/IstioActions/IstioActionsDropdown';
-import { RenderHeader, RenderComponentScroll } from '../../components/Nav/Page';
+import { RenderComponentScroll, RenderHeader } from '../../components/Nav/Page';
 import './IstioConfigDetailsPage.css';
 import { default as IstioActionButtonsContainer } from '../../components/IstioActions/IstioActionsButtons';
 import VirtualServiceDetail from './IstioObjectDetails/VirtualServiceDetail';
@@ -31,9 +31,9 @@ import {
   CardBody,
   CardHeader,
   EmptyState,
+  EmptyStateBody,
   EmptyStateIcon,
   EmptyStateVariant,
-  EmptyStateBody,
   Grid,
   GridItem,
   Stack,
@@ -47,7 +47,7 @@ import { KialiIcon } from '../../config/KialiIcon';
 import { dicIstioType } from '../../types/IstioConfigList';
 import { showInMessageCenter } from '../../utils/IstioValidationUtils';
 import { PfColors } from '../../components/Pf/PfColors';
-import IstioObjectLink from '../../components/Link/IstioObjectLink';
+import { ReferenceIstioObjectLink } from '../../components/Link/IstioObjectLink';
 
 const rightToolbarStyle = style({
   position: 'absolute',
@@ -408,7 +408,7 @@ class IstioConfigDetailsPage extends React.Component<RouteComponentProps<IstioCo
                     {objectReferences.map((reference, i) => {
                       return (
                         <StackItem key={'rel-object-' + i}>
-                          <IstioObjectLink
+                          <ReferenceIstioObjectLink
                             name={reference.name}
                             type={reference.objectType}
                             namespace={reference.namespace}

diff --git a/src/pages/IstioConfigDetails/IstioObjectDetails/VirtualServiceDetail.tsx b/src/pages/IstioConfigDetails/IstioObjectDetails/VirtualServiceDetail.tsx
@@ -4,9 +4,9 @@ import { Host, ObjectValidation, VirtualService } from '../../../types/IstioObje
 import LocalTime from '../../../components/Time/LocalTime';
 import DetailObject from '../../../components/Details/DetailObject';
 import VirtualServiceRoute from './VirtualServiceRoute';
-import { Link } from 'react-router-dom';
 import { Card, CardBody, Grid, GridItem, Stack, StackItem, Text, TextVariants, Title } from '@patternfly/react-core';
 import GlobalValidation from '../../../components/Validations/GlobalValidation';
+import IstioObjectLink from '../../../components/Link/IstioObjectLink';
 
 interface VirtualServiceProps {
   namespace: string;
@@ -69,7 +69,9 @@ class VirtualServiceDetail extends React.Component<VirtualServiceProps> {
           {host.service === 'mesh' || !isValid ? (
             host.service
           ) : (
-            <Link to={`/namespaces/${host.namespace}/istio/gateways/${host.service}`}>{gateways[key]}</Link>
+            <IstioObjectLink name={host.service} namespace={host.namespace} type={'gateway'}>
+              {gateways[key]}
+            </IstioObjectLink>
           )}
         </li>
       );

diff --git a/src/pages/ServiceDetails/ServiceInfo/ServiceInfoDestinationRules.tsx b/src/pages/ServiceDetails/ServiceInfo/ServiceInfoDestinationRules.tsx
@@ -4,22 +4,22 @@ import {
   CardBody,
   EmptyState,
   EmptyStateBody,
-  EmptyStateVariant,
   EmptyStateIcon,
+  EmptyStateVariant,
   Grid,
   GridItem,
   Title
 } from '@patternfly/react-core';
-import { ICell, IRow, Table, TableHeader, TableBody, TableVariant, cellWidth } from '@patternfly/react-table';
+import { cellWidth, ICell, IRow, Table, TableBody, TableHeader, TableVariant } from '@patternfly/react-table';
 import { NetworkIcon } from '@patternfly/react-icons';
 import LocalTime from '../../../components/Time/LocalTime';
 import DetailObject from '../../../components/Details/DetailObject';
-import { Link } from 'react-router-dom';
 import { ValidationObjectSummary } from '../../../components/Validations/ValidationObjectSummary';
 import { DestinationRule, ObjectValidation, Subset } from '../../../types/IstioObjects';
 import Labels from '../../../components/Label/Labels';
 import { safeRender } from '../../../utils/SafeRender';
 import { ServiceDetailsInfo } from '../../../types/ServiceInfo';
+import IstioObjectLink from '../../../components/Link/IstioObjectLink';
 
 interface ServiceInfoDestinationRulesProps {
   destinationRules?: DestinationRule[];
@@ -45,17 +45,9 @@ class ServiceInfoDestinationRules extends React.Component<ServiceInfoDestination
 
   yamlLink(destinationRule: DestinationRule) {
     return (
-      <Link
-        to={
-          '/namespaces/' +
-          destinationRule.metadata.namespace +
-          '/istio/destinationrules/' +
-          destinationRule.metadata.name +
-          '?list=yaml'
-        }
-      >
+      <IstioObjectLink name={destinationRule.metadata.name} namespace={destinationRule.metadata.namespace || ''} type={'destinationrule'} query={'list=yaml'}>
         View YAML
-      </Link>
+      </IstioObjectLink>
     );
   }
 
@@ -69,17 +61,9 @@ class ServiceInfoDestinationRules extends React.Component<ServiceInfoDestination
 
   overviewLink(destinationRule: DestinationRule) {
     return (
-      <Link
-        to={
-          '/namespaces/' +
-          destinationRule.metadata.namespace +
-          '/istio/destinationrules/' +
-          destinationRule.metadata.name +
-          '?list=overview'
-        }
-      >
+      <IstioObjectLink name={destinationRule.metadata.name} namespace={destinationRule.metadata.namespace || ''} type={'destinationrule'}>
         {destinationRule.metadata.name}
-      </Link>
+      </IstioObjectLink>
     );
   }
 

diff --git a/src/pages/ServiceDetails/ServiceInfo/ServiceInfoVirtualServices.tsx b/src/pages/ServiceDetails/ServiceInfo/ServiceInfoVirtualServices.tsx
@@ -4,20 +4,20 @@ import {
   CardBody,
   EmptyState,
   EmptyStateBody,
-  EmptyStateVariant,
   EmptyStateIcon,
+  EmptyStateVariant,
   Grid,
   GridItem,
   Title
 } from '@patternfly/react-core';
-import { ICell, IRow, Table, TableHeader, TableBody, TableVariant, cellWidth } from '@patternfly/react-table';
+import { cellWidth, ICell, IRow, Table, TableBody, TableHeader, TableVariant } from '@patternfly/react-table';
 import { CodeBranchIcon } from '@patternfly/react-icons';
-import { Link } from 'react-router-dom';
 import { ObjectValidation, VirtualService } from '../../../types/IstioObjects';
 import './ServiceInfoVirtualServices.css';
 import LocalTime from '../../../components/Time/LocalTime';
 import { ValidationObjectSummary } from '../../../components/Validations/ValidationObjectSummary';
 import { ServiceDetailsInfo } from '../../../types/ServiceInfo';
+import IstioObjectLink from '../../../components/Link/IstioObjectLink';
 
 interface ServiceInfoVirtualServicesProps {
   virtualServices?: VirtualService[];
@@ -49,33 +49,17 @@ class ServiceInfoVirtualServices extends React.Component<ServiceInfoVirtualServi
 
   overviewLink(virtualService: VirtualService) {
     return (
-      <Link
-        to={
-          '/namespaces/' +
-          virtualService.metadata.namespace +
-          '/istio/virtualservices/' +
-          virtualService.metadata.name +
-          '?list=overview'
-        }
-      >
+      <IstioObjectLink name={virtualService.metadata.name} namespace={virtualService.metadata.namespace || ''} type={'virtualservice'}>
         {virtualService.metadata.name}
-      </Link>
+      </IstioObjectLink>
     );
   }
 
   yamlLink(virtualService: VirtualService) {
     return (
-      <Link
-        to={
-          '/namespaces/' +
-          virtualService.metadata.namespace +
-          '/istio/virtualservices/' +
-          virtualService.metadata.name +
-          '?list=yaml'
-        }
-      >
+      <IstioObjectLink name={virtualService.metadata.name} namespace={virtualService.metadata.namespace || ''} type={'virtualservice'} query={'list=yaml'}>
         View YAML
-      </Link>
+      </IstioObjectLink>
     );
   }
 

diff --git a/src/pages/ServiceDetails/ServiceInfo/__tests__/ServiceMock.ts b/src/pages/ServiceDetails/ServiceInfo/__tests__/ServiceMock.ts
@@ -5,6 +5,7 @@ const virtualServices: VirtualService[] = [
   {
     metadata: {
       name: 'reviews-default',
+      namespace: 'bookinfo',
       resourceVersion: '1234',
       creationTimestamp: '2018-03-14T10:17:52Z'
     },

diff --git a/...Details/ServiceInfo/__tests__/__snapshots__/ServiceInfoRouteVirtualServices.test.tsx.snap b/...Details/ServiceInfo/__tests__/__snapshots__/ServiceInfoRouteVirtualServices.test.tsx.snap
@@ -59,11 +59,13 @@ exports[`#ServiceInfoVirtualServices render correctly with data should render se
                     />,
                   },
                   Object {
-                    "title": <Link
-                      to="/namespaces/undefined/istio/virtualservices/reviews-default?list=overview"
+                    "title": <IstioObjectLink
+                      name="reviews-default"
+                      namespace="bookinfo"
+                      type="virtualservice"
                     >
                       reviews-default
-                    </Link>,
+                    </IstioObjectLink>,
                   },
                   Object {
                     "title": <LocalTime
@@ -74,11 +76,14 @@ exports[`#ServiceInfoVirtualServices render correctly with data should render se
                     "title": "1234",
                   },
                   Object {
-                    "title": <Link
-                      to="/namespaces/undefined/istio/virtualservices/reviews-default?list=yaml"
+                    "title": <IstioObjectLink
+                      name="reviews-default"
+                      namespace="bookinfo"
+                      query="list=yaml"
+                      type="virtualservice"
                     >
                       View YAML
-                    </Link>,
+                    </IstioObjectLink>,
                   },
                 ],
               },