Hide waypoint proxies from Graph (kiali#7015)

* Add option to show waypoints, enabled by default

frontend/src/actions/ActionKeys.ts

@@ -39,6 +39,7 @@ export enum ActionKeys {
   GRAPH_TOOLBAR_TOGGLE_RANK_BY = 'GRAPH_TOOLBAR_TOGGLE_RANK_BY',
   GRAPH_TOOLBAR_TOGGLE_SERVICE_NODES = 'GRAPH_TOOLBAR_TOGGLE_SERVICE_NODES',
   GRAPH_TOOLBAR_TOGGLE_TRAFFIC_ANIMATION = 'GRAPH_TOOLBAR_TOGGLE_TRAFFIC_ANIMATION',
+  GRAPH_TOOLBAR_TOGGLE_WAYPOINT = 'GRAPH_TOOLBAR_TOGGLE_WAYPOINT',
 
   GRAPH_UPDATE_SUMMARY = 'GRAPH_UPDATE_SUMMARY',
 

frontend/src/actions/GraphToolbarActions.ts

@@ -26,7 +26,8 @@ export const GraphToolbarActions = {
   toggleOperationNodes: createAction(ActionKeys.GRAPH_TOOLBAR_TOGGLE_OPERATION_NODES),
   toggleRank: createAction(ActionKeys.GRAPH_TOOLBAR_TOGGLE_RANK),
   toggleServiceNodes: createAction(ActionKeys.GRAPH_TOOLBAR_TOGGLE_SERVICE_NODES),
-  toggleTrafficAnimation: createAction(ActionKeys.GRAPH_TOOLBAR_TOGGLE_TRAFFIC_ANIMATION)
+  toggleTrafficAnimation: createAction(ActionKeys.GRAPH_TOOLBAR_TOGGLE_TRAFFIC_ANIMATION),
+  toggleWaypoints: createAction(ActionKeys.GRAPH_TOOLBAR_TOGGLE_WAYPOINT)
 };
 
 export type GraphToolbarAction = ActionType<typeof GraphToolbarActions>;

frontend/src/app/History.ts

@@ -2,7 +2,7 @@ import { createBrowserHistory, createMemoryHistory, createHashHistory } from 'hi
 import { toValidDuration } from '../config/ServerConfig';
 import { BoundsInMilliseconds } from 'types/Common';
 
-const createHistory = (baseName: string) => {
+const createHistory = (baseName: string): any => {
   return process.env.TEST_RUNNER
     ? createMemoryHistory()
     : historyMode === 'hash'
@@ -16,12 +16,12 @@ const createHistory = (baseName: string) => {
  * routes to a different page within Kiali in these platforms.
  * This method is not used in standalone Kiali application
  */
-export const setHistory = (baseName: string) => {
+export const setHistory = (baseName: string): void => {
   history = createHistory(baseName);
 };
 
 const webRoot = (window as any).WEB_ROOT ? (window as any).WEB_ROOT : undefined;
-const baseName = webRoot && webRoot !== '/' ? webRoot + '/console' : '/console';
+const baseName = webRoot && webRoot !== '/' ? `${webRoot}/console` : '/console';
 const historyMode = (window as any).HISTORY_MODE ? (window as any).HISTORY_MODE : 'browser';
 let history = createHistory(baseName);
 
@@ -60,6 +60,7 @@ export enum URLParam {
   GRAPH_SERVICE_NODES = 'injectServiceNodes',
   GRAPH_TRAFFIC = 'traffic',
   GRAPH_TYPE = 'graphType',
+  GRAPH_WAYPOINTS = 'waypoints',
   TRACING_ERRORS_ONLY = 'errs',
   TRACING_LIMIT_TRACES = 'limit',
   TRACING_PERCENTILE = 'percentile',
@@ -92,10 +93,10 @@ export enum ParamAction {
 }
 
 export class HistoryManager {
-  static setParam = (name: URLParam | string, value: string) => {
+  static setParam = (name: URLParam | string, value: string): void => {
     const urlParams = new URLSearchParams(history.location.search);
     urlParams.set(name, value);
-    history.replace(history.location.pathname + '?' + urlParams.toString());
+    history.replace(`${history.location.pathname}?${urlParams.toString()}`);
   };
 
   static getParam = (name: URLParam | string, urlParams?: URLSearchParams): string | undefined => {
@@ -116,17 +117,17 @@ export class HistoryManager {
     return p !== undefined ? p === 'true' : undefined;
   };
 
-  static deleteParam = (name: URLParam, historyReplace?: boolean) => {
+  static deleteParam = (name: URLParam, historyReplace?: boolean): void => {
     const urlParams = new URLSearchParams(history.location.search);
     urlParams.delete(name);
     if (historyReplace) {
-      history.replace(history.location.pathname + '?' + urlParams.toString());
+      history.replace(`${history.location.pathname}?${urlParams.toString()}`);
     } else {
-      history.push(history.location.pathname + '?' + urlParams.toString());
+      history.push(`${history.location.pathname}?${urlParams.toString()}`);
     }
   };
 
-  static setParams = (params: URLParamValue[], paramAction?: ParamAction, historyReplace?: boolean) => {
+  static setParams = (params: URLParamValue[], paramAction?: ParamAction, historyReplace?: boolean): void => {
     const urlParams = new URLSearchParams(history.location.search);
 
     if (params.length > 0 && paramAction === ParamAction.APPEND) {
@@ -144,9 +145,9 @@ export class HistoryManager {
     });
 
     if (historyReplace) {
-      history.replace(history.location.pathname + '?' + urlParams.toString());
+      history.replace(`${history.location.pathname}?${urlParams.toString()}`);
     } else {
-      history.push(history.location.pathname + '?' + urlParams.toString());
+      history.push(`${history.location.pathname}?${urlParams.toString()}`);
     }
   };
 

frontend/src/components/CytoscapeGraph/MiniGraphCard.tsx

@@ -68,21 +68,21 @@ class MiniGraphCardComponent extends React.Component<MiniGraphCardProps, MiniGra
     this.state = { isKebabOpen: false, isTimeOptionsOpen: false, graphData: props.dataSource.graphData };
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     this.props.dataSource.on('fetchSuccess', this.refresh);
     this.props.dataSource.on('fetchError', this.refresh);
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     this.props.dataSource.removeListener('fetchSuccess', this.refresh);
     this.props.dataSource.removeListener('fetchError', this.refresh);
   }
 
-  private refresh = () => {
+  private refresh = (): void => {
     this.setState({ graphData: this.props.dataSource.graphData });
   };
 
-  render() {
+  render(): React.ReactNode {
     const graphCardActions = [
       <DropdownItem key="viewFullGraph" onClick={this.onViewFullGraph}>
         Show full graph
@@ -210,25 +210,25 @@ class MiniGraphCardComponent extends React.Component<MiniGraphCardProps, MiniGra
     );
   }
 
-  private setCytoscapeGraph(cytoscapeGraph: any) {
+  private setCytoscapeGraph(cytoscapeGraph: any): void {
     this.cytoscapeGraphRef.current = cytoscapeGraph;
   }
 
-  private handleLaunchWizard = (key: WizardAction, mode: WizardMode) => {
+  private handleLaunchWizard = (key: WizardAction, mode: WizardMode): void => {
     this.onGraphActionsToggle(false);
     if (this.props.onLaunchWizard) {
       this.props.onLaunchWizard(key, mode);
     }
   };
 
-  private handleDeleteTrafficRouting = (key: string) => {
+  private handleDeleteTrafficRouting = (key: string): void => {
     this.onGraphActionsToggle(false);
     if (this.props.onDeleteTrafficRouting) {
       this.props.onDeleteTrafficRouting(key);
     }
   };
 
-  private handleNodeTap = (e: GraphNodeTapEvent) => {
+  private handleNodeTap = (e: GraphNodeTapEvent): void => {
     // Do nothing on inaccessible nodes or service entry nodes
     if (e.isInaccessible || e.isServiceEntry) {
       return;
@@ -260,7 +260,7 @@ class MiniGraphCardComponent extends React.Component<MiniGraphCardProps, MiniGra
     let href = `/namespaces/${e.namespace}/${resourceType}s/${resource}`;
 
     if (e.cluster && isMultiCluster) {
-      href = href + '?clusterName=' + e.cluster;
+      href = `${href}?clusterName=${e.cluster}`;
     }
 
     if (isParentKiosk(this.props.kiosk)) {
@@ -270,13 +270,13 @@ class MiniGraphCardComponent extends React.Component<MiniGraphCardProps, MiniGra
     }
   };
 
-  private onGraphActionsToggle = (isOpen: boolean) => {
+  private onGraphActionsToggle = (isOpen: boolean): void => {
     this.setState({
       isKebabOpen: isOpen
     });
   };
 
-  private onViewFullGraph = () => {
+  private onViewFullGraph = (): void => {
     const namespace = this.props.dataSource.fetchParameters.namespaces[0].name;
     let graphSelector = new GraphSelectorBuilder().namespace(namespace);
     let graphType: GraphType = GraphType.APP;
@@ -317,7 +317,7 @@ class MiniGraphCardComponent extends React.Component<MiniGraphCardProps, MiniGra
     }
   };
 
-  private onViewNodeGraph = () => {
+  private onViewNodeGraph = (): void => {
     let graphType = this.props.dataSource.fetchParameters.graphType;
     switch (this.props.dataSource.fetchParameters.node!.nodeType) {
       case NodeType.APP:
@@ -345,14 +345,15 @@ class MiniGraphCardComponent extends React.Component<MiniGraphCardProps, MiniGra
       showIdleNodes: this.props.dataSource.fetchParameters.showIdleNodes,
       showOperationNodes: this.props.dataSource.fetchParameters.showOperationNodes,
       showServiceNodes: true,
+      showWaypoints: true,
       trafficRates: this.props.dataSource.fetchParameters.trafficRates
     };
 
     // To ensure updated components get the updated URL, update the URL first and then the state
     history.push(makeNodeGraphUrlFromParams(urlParams));
   };
 
-  private toggleTimeOptionsVisibility = () => {
+  private toggleTimeOptionsVisibility = (): void => {
     this.setState(prevState => ({ isTimeOptionsOpen: !prevState.isTimeOptionsOpen }));
   };
 }

frontend/src/components/CytoscapeGraph/__tests__/CytoscapeGraph.test.tsx

@@ -14,15 +14,15 @@ jest.mock('../../../services/Api');
 
 const testNamespace = 'ISTIO_SYSTEM';
 
-const testClickHandler = () => {
+const testClickHandler = (): void => {
   console.log('click');
 };
 
-const testReadyHandler = () => {
+const testReadyHandler = (): void => {
   console.log('ready');
 };
 
-const testSetHandler = () => {
+const testSetHandler = (): void => {
   console.log('set');
 };
 
@@ -46,6 +46,7 @@ describe('CytoscapeGraph component test', () => {
       showIdleNodes: false,
       showOperationNodes: false,
       showSecurity: true,
+      showWaypoints: false,
       trafficRates: DefaultTrafficRates
     });
 
@@ -72,6 +73,7 @@ describe('CytoscapeGraph component test', () => {
               showIdleNodes: false,
               showOperationNodes: false,
               showSecurity: true,
+              showWaypoints: false,
               trafficRates: DefaultTrafficRates
             },
             timestamp: 0

frontend/src/components/Nav/NavUtils.tsx

@@ -19,6 +19,7 @@ export type GraphUrlParams = {
   showIdleNodes: boolean;
   showOperationNodes: boolean;
   showServiceNodes: boolean;
+  showWaypoints: boolean;
   trafficRates: TrafficRate[];
 };
 
@@ -52,9 +53,9 @@ export const makeNamespacesGraphUrlFromParams = (params: GraphUrlParams, isPf =
   }
   if (isKioskMode()) {
     // Kiosk value can be true or the url of the parent
-    queryParams += '&kiosk=' + getKioskMode();
+    queryParams += `&kiosk=${getKioskMode()}`;
   }
-  return `/${route}/namespaces?` + queryParams;
+  return `/${route}/namespaces?${queryParams}`;
 };
 
 export const makeNodeGraphUrlFromParams = (params: GraphUrlParams, isPf = false): string => {
@@ -63,34 +64,31 @@ export const makeNodeGraphUrlFromParams = (params: GraphUrlParams, isPf = false)
   if (node) {
     switch (node.nodeType) {
       case NodeType.AGGREGATE:
-        return (
-          `/${route}/node/namespaces/${node.namespace.name}/aggregates/${node.aggregate}/${node.aggregateValue}?` +
-          buildCommonQueryParams(params)
-        );
+        return `/${route}/node/namespaces/${node.namespace.name}/aggregates/${node.aggregate}/${
+          node.aggregateValue
+        }?${buildCommonQueryParams(params)}`;
       case NodeType.APP:
         if (node.version && node.version !== 'unknown') {
-          return (
-            `/${route}/node/namespaces/${node.namespace.name}/applications/${node.app}/versions/${node.version}?` +
-            buildCommonQueryParams(params)
-          );
+          return `/${route}/node/namespaces/${node.namespace.name}/applications/${node.app}/versions/${
+            node.version
+          }?${buildCommonQueryParams(params)}`;
         }
-        return (
-          `/${route}/node/namespaces/${node.namespace.name}/applications/${node.app}?` + buildCommonQueryParams(params)
-        );
+        return `/${route}/node/namespaces/${node.namespace.name}/applications/${node.app}?${buildCommonQueryParams(
+          params
+        )}`;
       case NodeType.BOX:
         // can only be app box
-        return (
-          `/${route}/node/namespaces/${node.namespace.name}/applications/${node.app}?` + buildCommonQueryParams(params)
-        );
+        return `/${route}/node/namespaces/${node.namespace.name}/applications/${node.app}?${buildCommonQueryParams(
+          params
+        )}`;
       case NodeType.SERVICE:
-        return (
-          `/${route}/node/namespaces/${node.namespace.name}/services/${node.service}?` + buildCommonQueryParams(params)
-        );
+        return `/${route}/node/namespaces/${node.namespace.name}/services/${node.service}?${buildCommonQueryParams(
+          params
+        )}`;
       case NodeType.WORKLOAD:
-        return (
-          `/${route}/node/namespaces/${node.namespace.name}/workloads/${node.workload}?` +
-          buildCommonQueryParams(params)
-        );
+        return `/${route}/node/namespaces/${node.namespace.name}/workloads/${node.workload}?${buildCommonQueryParams(
+          params
+        )}`;
       default:
         console.debug('makeNodeUrl defaulting to makeNamespaceUrl');
         return makeNamespacesGraphUrlFromParams(params, isPf);