feat(kiali): add namespace selector (#675)

* feat(kiali): add namespace selector * Add namespaces to dev * Fix prettier
janus-idp · Aug 30, 2023 · e3cfc26 · e3cfc26
1 parent 8c7c165
commit e3cfc26
Show file tree

Hide file tree

Showing 9 changed files with 221 additions and 81 deletions.
diff --git a/plugins/kiali-backend/src/clients/KialiAPIConnector.ts b/plugins/kiali-backend/src/clients/KialiAPIConnector.ts
@@ -190,6 +190,28 @@ export class KialiApiImpl implements KialiApi {
     return response;
   }
 
+  async fetchNamespaces(entity: Entity): Promise<FetchResponseWrapper> {
+    const result: FetchResponseWrapper = {
+      errors: [],
+      warnings: [],
+    };
+
+    await this.kialiFetcher.checkSession().then(resp => {
+      result.errors = resp.errors;
+      result.warnings = resp.warnings;
+      return result;
+    });
+    if (result.errors.length === 0) {
+      await this.handlePromise<Namespace[]>(
+        result,
+        config.api.urls.namespaces,
+        resp => (result.response = filterNsByAnnotation(resp.data, entity)),
+      );
+    }
+
+    return result;
+  }
+
   handlePromise<T>(
     result: FetchResponseWrapper,
     endpoint: string,

diff --git a/plugins/kiali-backend/src/service/router.ts b/plugins/kiali-backend/src/service/router.ts
@@ -84,6 +84,13 @@ export const makeRouter = (
     res.json(response);
   });
 
+  router.post('/namespaces', async (req, res) => {
+    const entity = await getEntityByReq(req);
+    logger.debug('Call to Namespaces');
+    const response = await kialiAPI.fetchNamespaces(entity);
+    res.json(response);
+  });
+
   router.post('/overview', async (req, res) => {
     const entity = await getEntityByReq(req);
     const query: OverviewQuery = {

diff --git a/plugins/kiali-common/src/types/Fetch.ts b/plugins/kiali-common/src/types/Fetch.ts
@@ -3,6 +3,7 @@ import {
   ControlPlaneMetricsMap,
   KialiConfigT,
   Metric,
+  Namespace,
   NamespaceHealth,
   NamespaceInfo,
   OverviewData,
@@ -25,7 +26,8 @@ export type FetchResponse =
   | TLSStatus
   | NsMetrics
   | ControlPlaneMetricsMap
-  | HealthNamespace;
+  | HealthNamespace
+  | Namespace[];
 
 export interface StatusError {
   errorType: string;

diff --git a/plugins/kiali/dev/__fixtures__/namespaces.json b/plugins/kiali/dev/__fixtures__/namespaces.json
@@ -0,0 +1,44 @@
+[
+  {
+    "name": "bookinfo",
+    "cluster": "Kubernetes",
+    "isAmbient": false,
+    "labels": {
+      "istio-injection": "enabled",
+      "kubernetes.io/metadata.name": "bookinfo",
+      "pod-security.kubernetes.io/audit": "privileged",
+      "pod-security.kubernetes.io/audit-version": "v1.24",
+      "pod-security.kubernetes.io/warn": "privileged",
+      "pod-security.kubernetes.io/warn-version": "v1.24"
+    },
+    "annotations": {
+      "openshift.io/description": "",
+      "openshift.io/display-name": "",
+      "openshift.io/requester": "kubeadmin",
+      "openshift.io/sa.scc.mcs": "s0:c26,c10",
+      "openshift.io/sa.scc.supplemental-groups": "1000670000/10000",
+      "openshift.io/sa.scc.uid-range": "1000670000/10000"
+    }
+  },
+  {
+    "name": "istio-system",
+    "cluster": "Kubernetes",
+    "isAmbient": false,
+    "labels": {
+      "kubernetes.io/metadata.name": "istio-system",
+      "pod-security.kubernetes.io/audit": "baseline",
+      "pod-security.kubernetes.io/audit-version": "v1.24",
+      "pod-security.kubernetes.io/warn": "baseline",
+      "pod-security.kubernetes.io/warn-version": "v1.24",
+      "topology.istio.io/network": ""
+    },
+    "annotations": {
+      "openshift.io/description": "",
+      "openshift.io/display-name": "",
+      "openshift.io/requester": "kubeadmin",
+      "openshift.io/sa.scc.mcs": "s0:c26,c0",
+      "openshift.io/sa.scc.supplemental-groups": "1000650000/10000",
+      "openshift.io/sa.scc.uid-range": "1000650000/10000"
+    }
+  }
+]
diff --git a/plugins/kiali/dev/index.tsx b/plugins/kiali/dev/index.tsx
@@ -14,6 +14,7 @@ import { KialiApi, kialiApiRef } from '../src/api';
 import { KialiPage, kialiPlugin } from '../src/plugin';
 import overviewJson from './__fixtures__/1-overview.json';
 import configJson from './__fixtures__/config.json';
+import namespacesJson from './__fixtures__/namespaces.json';
 import statusJson from './__fixtures__/status.json';
 
 const mockEntity: Entity = {
@@ -37,15 +38,18 @@ class MockKialiClient implements KialiApi {
   readonly resource: FetchResponse;
   readonly status: FetchResponse;
   readonly config: FetchResponse;
+  readonly namespaces: FetchResponse;
 
   constructor(
     fixtureData: any,
     status: any = statusJson,
     config: any = configJson,
+    namespaces: any = namespacesJson,
   ) {
     this.resource = fixtureData;
     this.status = status;
     this.config = config;
+    this.namespaces = namespaces;
   }
 
   setEntity(_: Entity): void {}
@@ -58,6 +62,14 @@ class MockKialiClient implements KialiApi {
     };
   }
 
+  async getNamespaces(): Promise<FetchResponseWrapper> {
+    return {
+      errors: [],
+      warnings: [],
+      response: this.namespaces,
+    };
+  }
+
   async getInfo(): Promise<FetchResponseWrapper> {
     return {
       errors: [],

diff --git a/plugins/kiali/src/api/apiClient.ts b/plugins/kiali/src/api/apiClient.ts
@@ -19,6 +19,7 @@ export interface KialiApi {
     duration: number,
     direction: DirectionType,
   ): Promise<FetchResponseWrapper>;
+  getNamespaces(): Promise<FetchResponseWrapper>;
   setEntity(entity: Entity): void;
 }
 
@@ -30,6 +31,7 @@ export const KialiEndpoints = {
   getInfo: 'info',
   getOverview: 'overview',
   getConfig: 'config',
+  getNamespaces: 'namespaces',
 };
 
 /**
@@ -74,6 +76,13 @@ export class KialiApiClient implements KialiApi {
     return this.getAPI(KialiEndpoints.getInfo, {});
   }
 
+  async getNamespaces(): Promise<FetchResponseWrapper> {
+    const requestBody = {
+      entityRef: this.entity ? stringifyEntityRef(this.entity) : '',
+    };
+    return this.getAPI(KialiEndpoints.getNamespaces, requestBody);
+  }
+
   async getConfig(): Promise<FetchResponseWrapper> {
     const requestBody = {
       entityRef: this.entity ? stringifyEntityRef(this.entity) : '',

diff --git a/plugins/kiali/src/components/KialiComponent/Header/Header.tsx b/plugins/kiali/src/components/KialiComponent/Header/Header.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ContentHeader } from '@backstage/core-components';
+import { ContentHeader, Select } from '@backstage/core-components';
 
 import { Chip, Drawer, IconButton, Tooltip } from '@material-ui/core';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
@@ -10,6 +10,7 @@ import StorageRounded from '@material-ui/icons/StorageRounded';
 import {
   KialiConfigT,
   KialiInfo,
+  Namespace,
 } from '@janus-idp/backstage-plugin-kiali-common';
 
 import { getHomeCluster } from '../../../helper';
@@ -29,57 +30,71 @@ export const KialiHeader = (props: {
   title: string;
   kialiStatus: KialiInfo;
   config: KialiConfigT;
+  namespaces: Namespace[];
+  namespacesFiltered: string[];
+  setNamespaceFilter: (ns: string[]) => void;
 }) => {
   const [isOpen, toggleDrawer] = React.useState<boolean>(false);
   const kialiHomeCluster = getHomeCluster(props.config.server);
   const classes = useDrawerStyles();
+
   return (
-    <ContentHeader title={props.title}>
-      {props.config.username && (
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span style={{ margin: '10px' }}>
-            <b>User : </b>
-            {props.config.username}
-          </span>
-        </div>
-      )}
-      {kialiHomeCluster && (
-        <Tooltip
-          title={<div>Kiali home cluster: {kialiHomeCluster?.name}</div>}
-        >
-          <Chip icon={<StorageRounded />} label={kialiHomeCluster?.name} />
+    <>
+      <ContentHeader title={props.title}>
+        {props.config.username && (
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+            }}
+          >
+            <span style={{ margin: '10px' }}>
+              <b>User : </b>
+              {props.config.username}
+            </span>
+          </div>
+        )}
+        {kialiHomeCluster && (
+          <Tooltip
+            title={<div>Kiali home cluster: {kialiHomeCluster?.name}</div>}
+          >
+            <Chip icon={<StorageRounded />} label={kialiHomeCluster?.name} />
+          </Tooltip>
+        )}
+        <Tooltip title="Show Kiali information">
+          <IconButton
+            aria-label="info"
+            onClick={() => toggleDrawer(true)}
+            style={{ marginTop: '-10px' }}
+          >
+            <Info />
+          </IconButton>
         </Tooltip>
-      )}
-      <Tooltip title="Show Kiali information">
-        <IconButton
-          aria-label="info"
-          onClick={() => toggleDrawer(true)}
-          style={{ marginTop: '-10px' }}
+        <Drawer
+          classes={{
+            paper: classes.paper,
+          }}
+          variant="persistent"
+          anchor="right"
+          open={isOpen}
+          onClose={() => toggleDrawer(false)}
         >
-          <Info />
-        </IconButton>
-      </Tooltip>
-      <Drawer
-        classes={{
-          paper: classes.paper,
-        }}
-        variant="persistent"
-        anchor="right"
-        open={isOpen}
-        onClose={() => toggleDrawer(false)}
-      >
-        <StatusContent
-          toggleDrawer={toggleDrawer}
-          kialiStatus={props.kialiStatus}
-          config={props.config}
-        />
-      </Drawer>
-    </ContentHeader>
+          <StatusContent
+            toggleDrawer={toggleDrawer}
+            kialiStatus={props.kialiStatus}
+            config={props.config}
+          />
+        </Drawer>
+      </ContentHeader>
+      <Select
+        label="Namespaces Selected"
+        placeholder="Select namespaces"
+        items={props.namespaces.map(ns => ({ label: ns.name, value: ns.name }))}
+        selected={props.namespacesFiltered}
+        multiple
+        onChange={value => props.setNamespaceFilter(value as string[])}
+      />
+    </>
   );
 };