fix(kiali): remove IstioConfig extra, Fix links and add kiali control

Author: Alberto Gutierrez

plugins/kiali-backend/__fixtures__/data/config/status.json

@@ -1,9 +1,9 @@
 {
   "status": {
     "Kiali commit hash": "72a2496cb4ed1545457a68e34fe3e81409b1611d",
-    "Kiali container version": "v1.71.0-SNAPSHOT",
+    "Kiali container version": "v1.73.0-SNAPSHOT",
     "Kiali state": "running",
-    "Kiali version": "v1.71.0-SNAPSHOT",
+    "Kiali version": "v1.73.0-SNAPSHOT",
     "Mesh name": "Istio",
     "Mesh version": "1.17.1"
   },

plugins/kiali-backend/src/clients/KialiAPIConnector.ts

@@ -1,13 +1,22 @@
 import { Logger } from 'winston';
 
+import supported from '../kiali_supported.json';
 import { KialiDetails } from '../service/config';
-import { KialiFetcher } from './fetch';
+import { AuthValid, KialiFetcher } from './fetch';
 
 export type Options = {
   logger: Logger;
   kiali: KialiDetails;
 };
 
+const KIALI_CORE_VERSION = 'Kiali version';
+
+type Status = { [K: string]: string };
+
+interface StatusState {
+  status: Status;
+}
+
 export interface KialiApi {
   proxy(endpoint: string, method?: string): Promise<any>;
 }
@@ -21,7 +30,26 @@ export class KialiApiImpl implements KialiApi {
     this.kialiFetcher = new KialiFetcher(options.kiali, options.logger);
   }
 
-  async proxy(endpoint: string, method: string): Promise<any> {
+  supportedVersion = (version: string): string | undefined => {
+    this.logger.info('Validating kiali version');
+    const versionSupported = supported[KIALI_CORE_VERSION].replace(
+      /^./,
+      '',
+    ).split('.');
+    const versionClean = version.replace(/^./, '').split('.');
+    this.logger.info(
+      `Kiali Version supported ${supported[KIALI_CORE_VERSION]}`,
+    );
+    if (
+      versionSupported[0] === versionClean[0] &&
+      versionSupported[1] === versionClean[1]
+    ) {
+      return undefined;
+    }
+    return `kiali version supported is ${supported[KIALI_CORE_VERSION]}, we found version ${version}`;
+  };
+
+  async proxy(endpoint: string): Promise<any> {
     const authValid = await this.kialiFetcher.checkSession();
     if (authValid.verify) {
       this.logger.debug(
@@ -30,7 +58,7 @@ export class KialiApiImpl implements KialiApi {
         }`,
       );
       return this.kialiFetcher
-        .newRequest<any>(endpoint, false, method)
+        .newRequest<any>(endpoint, false)
         .then(resp => resp.data);
     }
     this.logger.debug(
@@ -45,9 +73,21 @@ export class KialiApiImpl implements KialiApi {
   async status(): Promise<any> {
     const authValid = await this.kialiFetcher.checkSession();
     if (authValid.verify) {
-      return this.kialiFetcher
-        .newRequest<any>('api/status')
-        .then(resp => resp.data);
+      return this.kialiFetcher.newRequest<any>('api/status').then(resp => {
+        const st: StatusState = resp.data;
+        const versionControl = this.supportedVersion(
+          st.status[KIALI_CORE_VERSION],
+        );
+        if (versionControl) {
+          const response: AuthValid = {
+            verify: false,
+            title: 'kiali version not supported',
+            message: versionControl,
+          };
+          return Promise.resolve(response);
+        }
+        return Promise.resolve(resp.data);
+      });
     }
     return Promise.resolve(authValid);
   }

plugins/kiali-backend/src/clients/fetch.ts

@@ -14,6 +14,7 @@ import {
 
 export type AuthValid = {
   verify: boolean;
+  title?: string;
   missingAttributes?: string[];
   message?: string;
   helper?: string;
@@ -32,13 +33,9 @@ export class KialiFetcher {
     this.kialiAuth = new KialiAuthentication(KD);
   }
 
-  newRequest = async <P>(
-    endpoint: string,
-    auth: boolean = false,
-    method?: string,
-  ) => {
+  newRequest = async <P>(endpoint: string, auth: boolean = false) => {
     this.logger.info(`Query to ${endpoint}`);
-    return axios.request<P>(this.getRequestInit(endpoint, auth, method));
+    return axios.request<P>(this.getRequestInit(endpoint, auth));
   };
 
   private async getAuthInfo(): Promise<AuthInfo> {
@@ -63,6 +60,7 @@ export class KialiFetcher {
           this.KialiDetails.serviceAccountToken === ''
         ) {
           result.verify = false;
+          result.title = 'Authentication failed';
           result.message = `Attribute 'serviceAccountToken' is not in the backstage configuration`;
           result.helper = `For more information follow the steps in https://janus-idp.io/plugins/kiali`;
           result.missingAttributes = ['serviceAccountToken'];
@@ -71,6 +69,7 @@ export class KialiFetcher {
       }
       default:
         result.verify = false;
+        result.title = 'Authentication failed';
         result.message = `Strategy ${auth.strategy} is not supported in Kiali backstage plugin yet`;
         break;
     }
@@ -107,6 +106,7 @@ export class KialiFetcher {
         })
         .catch(err => {
           checkAuth.verify = false;
+          checkAuth.title = 'Authentication failed';
           checkAuth.message = this.handleUnsuccessfulResponse(err);
         });
     }
@@ -126,7 +126,6 @@ export class KialiFetcher {
   private getRequestInit = (
     endpoint: string,
     auth: boolean = false,
-    method?: string,
   ): AxiosRequestConfig => {
     const requestInit: AxiosRequestConfig = { timeout: TIMEOUT_FETCH };
     const headers = { 'X-Auth-Type-Kiali-UI': '1' };
@@ -141,7 +140,7 @@ export class KialiFetcher {
       requestInit.data = params;
       requestInit.method = 'post';
     } else {
-      requestInit.method = method ? method : 'get';
+      requestInit.method = 'get';
       requestInit.headers = {
         ...headers,
         Accept: 'application/json',

plugins/kiali-backend/src/kiali_supported.json

@@ -0,0 +1,3 @@
+{
+  "Kiali version": "v1.73"
+}

plugins/kiali-backend/src/service/router.test.ts

@@ -54,9 +54,9 @@ describe('createRouter', () => {
       expect(result.body).toEqual({
         status: {
           'Kiali commit hash': '72a2496cb4ed1545457a68e34fe3e81409b1611d',
-          'Kiali container version': 'v1.71.0-SNAPSHOT',
+          'Kiali container version': 'v1.73.0-SNAPSHOT',
           'Kiali state': 'running',
-          'Kiali version': 'v1.71.0-SNAPSHOT',
+          'Kiali version': 'v1.73.0-SNAPSHOT',
           'Mesh name': 'Istio',
           'Mesh version': '1.17.1',
         },

plugins/kiali-backend/src/service/router.ts

@@ -22,10 +22,8 @@ export const makeRouter = (
   // curl -H "Content-type: application/json" -H "Accept: application/json" -X GET localhost:7007/api/kiali/proxy --data '{"endpoint": "api/namespaces"}'
   router.post('/proxy', async (req, res) => {
     const endpoint = req.body.endpoint;
-    const method = req.body.method;
-
     logger.info(`Call to Kiali ${endpoint}`);
-    res.json(await kialiAPI.proxy(endpoint, method));
+    res.json(await kialiAPI.proxy(endpoint));
   });
 
   router.post('/status', async (_, res) => {

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

@@ -7,6 +7,11 @@ import { HistoryManager } from '../../app/History';
 import { isMultiCluster, Paths } from '../../config';
 import { kialiStyle, useLinkStyle } from '../../styles/StyleUtils';
 import { dicIstioType } from '../../types/IstioConfigList';
+import {
+  getJanusEntityView,
+  getJanusObjectLink,
+  getJanusSectionLink,
+} from '../../utils/janusLinks';
 import { FilterSelected } from '../Filters/StatefulFilters';
 
 const ItemNames = {
@@ -16,7 +21,6 @@ const ItemNames = {
   istio: 'Istio Object',
 };
 
-export const pluginRoot = 'kiali';
 const IstioName = 'Istio Config';
 const namespaceRegex =
   /kiali\/([a-z0-9-]+)\/([\w-.]+)\/([\w-.*]+)(\/([\w-.]+))?(\/([\w-.]+))?/;
@@ -45,7 +49,7 @@ const breadcrumStyle = kialiStyle({
   marginTop: '-20px',
 });
 
-export const BreadcrumbView = () => {
+export const BreadcrumbView = (props: { entity?: boolean }) => {
   const capitalize = (str: string) => {
     return str?.charAt(0)?.toUpperCase() + str?.slice(1);
   };
@@ -70,11 +74,15 @@ export const BreadcrumbView = () => {
 
   const getItemPage = () => {
     if (path) {
-      let pathT = `/${pluginRoot}/${path?.pathItem}/${path?.namespace}/${path?.item}`;
-      if (path?.cluster && isMultiCluster) {
-        pathT += `?clusterName=${path.cluster}`;
-      }
-      return pathT;
+      const query =
+        path?.cluster && isMultiCluster ? `clusterName=${path.cluster}` : '';
+      return getJanusObjectLink(
+        path?.pathItem,
+        path?.namespace,
+        path?.item,
+        undefined,
+        query,
+      );
     }
     return '';
   };
@@ -94,23 +102,37 @@ export const BreadcrumbView = () => {
     </Link>
   );
 
-  const linkTo = `/${pluginRoot}/${pathItem}?namespaces=${namespace}&type=${
-    // @ts-ignore
-    dicIstioType[path?.istioType || '']
-  }`;
+  const tab = `tabresources=${pathItem}`;
+  const filterNs = `namespaces=${namespace}`;
+
+  const linkTo = getJanusSectionLink(
+    pathItem,
+    `${filterNs}&type=${
+      // @ts-ignore
+      dicIstioType[path?.istioType || '']
+    }`,
+  );
 
   return (
     <div className={breadcrumStyle}>
       <Breadcrumbs>
         <Link
-          to={`/${pluginRoot}/${pathItem}`}
+          to={
+            props.entity
+              ? getJanusEntityView(tab)
+              : getJanusSectionLink(pathItem)
+          }
           onClick={cleanFilters}
           className={linkStyle}
         >
           {isIstio ? IstioName : capitalize(pathItem)}
         </Link>
         <Link
-          to={`/${pluginRoot}/${pathItem}?namespaces=${namespace}`}
+          to={
+            props.entity
+              ? getJanusEntityView(`${tab}&${filterNs}`)
+              : getJanusSectionLink(pathItem, filterNs)
+          }
           onClick={cleanFilters}
           className={linkStyle}
         >

plugins/kiali/src/components/Link/IstioObjectLink.tsx

@@ -3,9 +3,9 @@ import { Link as RouterLink } from 'react-router-dom';
 
 import { Link, Tooltip } from '@material-ui/core';
 
-import { isMultiCluster, KialiIcon, Paths } from '../../config';
+import { KialiIcon } from '../../config';
 import { kialiStyle } from '../../styles/StyleUtils';
-import { pluginRoot } from '../BreadcrumbView/BreadcrumbView';
+import { useJanusObjectLink } from '../../utils/janusLinks';
 import { PFBadge } from '../Pf/PfBadges';
 import { IstioTypes } from '../VirtualList/Config';
 
@@ -22,38 +22,19 @@ type IstioObjectProps = ReferenceIstioObjectProps & {
   children: React.ReactNode;
 };
 
-export const getIstioObjectUrl = (
-  name: string,
-  namespace: string,
-  type: string,
-  cluster?: string,
-  query?: string,
-): string => {
-  const istioType = IstioTypes[type];
-  let to = `/${pluginRoot}/${Paths.ISTIO}/${namespace}`;
-
-  to = `${to}/${istioType.url}/${name}`;
-
-  if (cluster && isMultiCluster) {
-    to = `${to}?clusterName=${cluster}`;
-  }
-
-  if (!query) {
-    if (to.includes('?')) {
-      to = `${to}&${query}`;
-    } else {
-      to = `${to}?${query}`;
-    }
-  }
-
-  return to;
-};
-
 export const IstioObjectLink: React.FC<IstioObjectProps> = (
   props: IstioObjectProps,
 ) => {
   const { name, namespace, type, cluster, query } = props;
-  const href = getIstioObjectUrl(name, namespace, type, cluster, query);
+  const istioType = IstioTypes[type];
+  const href = useJanusObjectLink(
+    'istio',
+    namespace,
+    name,
+    istioType.url,
+    cluster,
+    query,
+  );
 
   return (
     <Link