Validation reference link broken

src/components/Link/IstioObjectLink.tsx

@@ -9,10 +9,16 @@ 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 +28,37 @@ 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;

src/components/VirtualList/Config.ts

@@ -176,10 +176,10 @@ export const IstioTypes = {
   quotaspecbinding: { name: 'QuotaSpecBinding', url: 'quotaspecbindings', icon: 'QSB' },
   policy: { name: 'Policy', url: 'policies', icon: 'P' },
   meshpolicy: { name: 'MeshPolicy', url: 'meshpolicies', icon: 'MP' },
-  servicemeshpolicy: { name: 'ServiceMeshPolicy', url: 'servicemeshpolicy', icon: 'SMP' },
+  servicemeshpolicy: { name: 'ServiceMeshPolicy', url: 'servicemeshpolicies', icon: 'SMP' },
   clusterrbacconfig: { name: 'ClusterRbacConfig', url: 'clusterrbacconfigs', icon: 'CRC' },
   rbacconfig: { name: 'RbacConfig', url: 'rbacconfigs', icon: 'RC' },
-  authorizationpolicy: { name: 'AuthorizationPolicy', url: 'authorizationpolicy', icon: 'AP' },
+  authorizationpolicy: { name: 'AuthorizationPolicy', url: 'authorizationpolicies', icon: 'AP' },
   servicemeshrbacconfig: { name: 'ServiceMeshRbacConfig', url: 'servicemeshrbacconfigs', icon: 'SRC' },
   sidecar: { name: 'Sidecar', url: 'sidecars', icon: 'S' },
   servicerole: { name: 'ServiceRole', url: 'serviceroles', icon: 'SR' },

src/components/VirtualList/Renderers.tsx

@@ -5,11 +5,11 @@ import * as FilterHelper from '../FilterList/FilterHelper';
 import { appLabelFilter, versionLabelFilter } from '../../pages/WorkloadList/FiltersAndSorts';
 
 import MissingSidecar from '../MissingSidecar/MissingSidecar';
-import { hasMissingSidecar, IstioTypes, Renderer, Resource, TResource, SortResource } from './Config';
+import { hasMissingSidecar, IstioTypes, Renderer, Resource, SortResource, TResource } from './Config';
 import { DisplayMode, HealthIndicator } from '../Health/HealthIndicator';
 import { ValidationObjectSummary } from '../Validations/ValidationObjectSummary';
 import { WorkloadListItem } from '../../types/Workload';
-import { dicIstioType, IstioConfigItem } from '../../types/IstioConfigList';
+import { IstioConfigItem } from '../../types/IstioConfigList';
 import { AppListItem } from '../../types/AppList';
 import { ServiceListItem } from '../../types/ServiceList';
 import { ActiveFilter, LabelFilter } from '../../types/Filters';
@@ -24,6 +24,7 @@ import OverviewCardContentExpanded from '../../pages/Overview/OverviewCardConten
 import { OverviewToolbar } from '../../pages/Overview/OverviewToolbar';
 import OverviewCardLinks from '../../pages/Overview/OverviewCardLinks';
 import { StatefulFilters } from '../Filters/StatefulFilters';
+import { GetIstioObjectUrl } from '../Link/IstioObjectLink';
 
 // Links
 
@@ -33,21 +34,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 + '/' + dicIstioType[IstioTypes[type].name] + '/' + name;
+    subType = type === 'adapter' ? item['adapter']!.adapters : item['template']!.templates;
   }
-  return to;
+
+  return GetIstioObjectUrl(item.name, item.namespace, type, subType);
 };
 
 // Cells

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}

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>
       );

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,14 @@ 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 +66,13 @@ 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>
     );
   }
 

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,26 @@ 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>
     );
   }
 

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'
     },

src/pages/ServiceDetails/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>,
                   },
                 ],
               },