Merge pull request #437 from bartoval/remove_exposure_for_remote_process

refactor(General): ♻️ Remove exposed status for remote processes

mocks/data/SERVICE_FLOW_PAIRS.json

@@ -5,6 +5,7 @@
       "identity": "fp-6z7k6:1827",
       "startTime": 1674159205860550,
       "endTime": 0,
+      "duration": 4000,
       "protocol": "http2",
       "sourceSiteId": "site-1",
       "sourceSiteName": "site 1",
@@ -55,6 +56,7 @@
       "identity": "fp-6z7k6:2284",
       "startTime": 1674202674218241,
       "endTime": 1674202674222329,
+      "duration": 0,
       "protocol": "http2",
       "sourceSiteId": "site-1",
       "sourceSiteName": "site 1",
@@ -105,6 +107,7 @@
       "identity": "fp-6z7k6:2304",
       "startTime": 1674202675458245,
       "endTime": 1674202675462225,
+      "duration": 0,
       "protocol": "http2",
       "sourceSiteId": "site-1",
       "sourceSiteName": "site 1",
@@ -155,6 +158,7 @@
       "identity": "fp-mm1-to-nb:8000",
       "startTime": 1674202675458245,
       "endTime": 1674202675462225,
+      "duration": 0,
       "protocol": "tcp",
       "sourceSiteId": "site-2",
       "sourceSiteName": "site 2",

mocks/server.ts

@@ -1,6 +1,6 @@
 import { createServer, Response } from 'miragejs';
 
-import { AvailableProtocols, FlowDirection } from '@API/REST.enum';
+import { AvailableProtocols, Direction } from '@API/REST.enum';
 import {
   ServiceResponse,
   ProcessPairsResponse,
@@ -123,7 +123,7 @@ mockSitePairsForPerf.forEach((_, index) => {
       mode: 'interior',
       name: '',
       linkCost: 1,
-      direction: FlowDirection.Outgoing,
+      direction: Direction.Outgoing,
       sourceSiteId: site1.identity,
       destinationSiteId: site2.identity
     },
@@ -136,7 +136,7 @@ mockSitePairsForPerf.forEach((_, index) => {
       mode: 'interior',
       name: '',
       linkCost: 1,
-      direction: FlowDirection.Incoming,
+      direction: Direction.Incoming,
       sourceSiteId: site2.identity,
       destinationSiteId: site1.identity
     }

package.json

@@ -36,7 +36,7 @@
     "commit": "git-cz"
   },
   "dependencies": {
-    "@antv/g6": "^5.0.10",
+    "@antv/g6": "^5.0.13",
     "@nivo/sankey": "^0.87.0",
     "@patternfly/patternfly": "^5.3.1",
     "@patternfly/react-charts": "^7.3.0",
@@ -46,14 +46,14 @@
     "@tanstack/react-query": "^5.51.21",
     "axios": "^1.7.3",
     "date-fns": "^3.6.0",
-    "framer-motion": "^11.3.21",
+    "framer-motion": "^11.3.23",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-router-dom": "^6.26.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
+    "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.8",
@@ -68,7 +68,7 @@
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
-    "cypress": "^13.13.1",
+    "cypress": "^13.13.2",
     "cz-git": "^1.9.4",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",

src/API/REST.enum.ts

@@ -15,7 +15,7 @@ export enum TcpStatus {
   Terminated = 'terminated'
 }
 
-export enum FlowDirection {
+export enum Direction {
   Outgoing = 'outgoing',
   Incoming = 'incoming'
 }
@@ -26,3 +26,16 @@ export enum Quantiles {
   NinetyFive = 0.95,
   NinetyNine = 0.99
 }
+
+// Process and Component Exposure
+export enum Binding {
+  Exposed = 'bound',
+  Unexposed = 'unbound'
+}
+
+// Process and Component Roles
+export enum Role {
+  External = 'external',
+  Internal = 'internal',
+  Remote = 'remote'
+}

src/API/REST.interfaces.ts

@@ -1,9 +1,9 @@
 import { AxiosError, AxiosRequestConfig } from 'axios';
 
-import { AvailableProtocols, FlowDirection, SortDirection } from './REST.enum';
+import { AvailableProtocols, Binding, Direction, Role, SortDirection } from './REST.enum';
 
 export type FetchWithOptions = AxiosRequestConfig;
-export type FlowDirections = FlowDirection.Outgoing | FlowDirection.Incoming;
+export type FlowDirections = Direction.Outgoing | Direction.Incoming;
 
 export interface RemoteFilterOptions extends Record<string, string | string[] | number | SortDirection | undefined> {
   filter?: string;
@@ -61,7 +61,7 @@ export interface SiteResponse extends BaseResponse {
 
 export interface ComponentResponse extends BaseResponse {
   name: string;
-  processGroupRole: 'external' | 'internal' | 'remote';
+  processGroupRole: Role;
   processCount: number;
 }
 
@@ -74,8 +74,8 @@ export interface ProcessResponse extends BaseResponse {
   imageName?: string;
   sourceHost: string;
   hostName: string;
-  processBinding: 'bound' | 'unbound';
-  processRole: 'external' | 'internal' | 'remote';
+  processBinding: Binding;
+  processRole: Role;
   addresses?: string[];
 }
 

src/core/components/DurationCell/index.tsx → src/core/components/SKDurationCell/index.tsx

@@ -1,14 +1,19 @@
+import { ReactNode } from 'react';
+
 import { Tooltip } from '@patternfly/react-core';
 import { TableText } from '@patternfly/react-table';
 
 import { formatLatency } from '@core/utils/formatLatency';
 
-import { DurationCellProps } from './DurationCell';
+export interface SKDurationCellProps<T> {
+  data: T;
+  value: ReactNode;
+}
 
 /**
  *  value is expected to be in microseconds
  */
-const DurationCell = function <T>({ value }: DurationCellProps<T>) {
+const SkDurationCell = function <T>({ value }: SKDurationCellProps<T>) {
   if (!value) {
     return null;
   }
@@ -22,4 +27,4 @@ const DurationCell = function <T>({ value }: DurationCellProps<T>) {
   );
 };
 
-export default DurationCell;
+export default SkDurationCell;

src/core/components/EndTimeCell/index.tsx → src/core/components/SkEndTimeCell/index.tsx

@@ -5,7 +5,7 @@ import { timeAgo } from '@core/utils/timeAgo';
 
 import { EndTimeProps } from './EndTime.interfaces';
 
-const EndTimeCell = function <T>({ value }: EndTimeProps<T>) {
+const SkEndTimeCell = function <T>({ value }: EndTimeProps<T>) {
   if (!value) {
     return null;
   }
@@ -24,4 +24,4 @@ const EndTimeCell = function <T>({ value }: EndTimeProps<T>) {
   );
 };
 
-export default EndTimeCell;
+export default SkEndTimeCell;

src/core/components/SkExposureCell/index.tsx → src/core/components/SkExposedCell/index.tsx

@@ -1,13 +1,18 @@
 import { Label } from '@patternfly/react-core';
 
+import { Binding } from '@API/REST.enum';
 import { ProcessesLabels } from '@pages/Processes/Processes.enum';
 
-const SkExposureCell = function ({ value }: { value: 'bound' | 'unbound' }) {
-  if (value === 'bound') {
+const SkExposedCell = function ({ value }: { value: Binding }) {
+  if (!value) {
+    return '-';
+  }
+
+  if (value === Binding.Exposed) {
     return <Label color="blue">{ProcessesLabels.IsExposed}</Label>;
   }
 
   return <Label color="gold">{ProcessesLabels.IsNotExposed}</Label>;
 };
 
-export default SkExposureCell;
+export default SkExposedCell;

src/pages/ProcessGroups/views/ProcessGroup.tsx

@@ -132,7 +132,8 @@ const ProcessGroup = function () {
               customCells={{
                 linkCell: CustomProcessCells.linkCell,
                 linkCellSite: CustomProcessCells.linkCellSite,
-                TimestampCell: CustomProcessCells.TimestampCell
+                TimestampCell: CustomProcessCells.TimestampCell,
+                ExposureCell: CustomProcessCells.ExposureCell
               }}
             />
           )}

src/pages/ProcessGroups/views/ProcessGroups.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState, startTransition } from 'react';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { RESTApi } from '@API/REST.api';
+import { Role } from '@API/REST.enum';
 import { RemoteFilterOptions } from '@API/REST.interfaces';
 import { BIG_PAGINATION_SIZE, UPDATE_INTERVAL } from '@config/config';
 import { getTestsIds } from '@config/testIds';
@@ -15,7 +16,7 @@ import { ComponentLabels, QueriesComponent } from '../ProcessGroups.enum';
 
 const initComponentsQueryParams = {
   limit: BIG_PAGINATION_SIZE,
-  processGroupRole: ['remote', 'external'],
+  processGroupRole: [Role.Remote, Role.External],
   endTime: 0
 };
 

src/pages/Processes/Processes.constants.ts

@@ -1,10 +1,10 @@
 import { ProcessPairsResponse, FlowPairsResponse, ProcessResponse } from '@API/REST.interfaces';
-import EndTimeCell from '@core/components/EndTimeCell';
 import HighlightValueCell from '@core/components/HighlightValueCell';
 import { HighlightValueCellProps } from '@core/components/HighlightValueCell/HighightValueCell.interfaces';
 import LinkCell from '@core/components/LinkCell';
 import { LinkCellProps } from '@core/components/LinkCell/LinkCell.interfaces';
-import SkExposureCell from '@core/components/SkExposureCell';
+import SkEndTimeCell from '@core/components/SkEndTimeCell';
+import SkExposedCell from '@core/components/SkExposedCell';
 import { SKColumn } from '@core/components/SkTable/SkTable.interfaces';
 import { formatByteRate, formatBytes } from '@core/utils/formatBytes';
 import { formatLatency } from '@core/utils/formatLatency';
@@ -58,8 +58,8 @@ export const CustomProcessCells = {
     HighlightValueCell({ ...props, format: formatBytes }),
   ByteRateFormatCell: (props: HighlightValueCellProps<FlowPairsResponse>) =>
     HighlightValueCell({ ...props, format: formatByteRate }),
-  TimestampCell: (props: LinkCellProps<ProcessResponse>) => EndTimeCell(props),
-  ExposureCell: SkExposureCell
+  TimestampCell: (props: LinkCellProps<ProcessResponse>) => SkEndTimeCell(props),
+  ExposureCell: SkExposedCell
 };
 
 export const processesTableColumns: SKColumn<ProcessResponse>[] = [

src/pages/Processes/components/Details.tsx

@@ -18,7 +18,7 @@ import {
 import { Link } from 'react-router-dom';
 
 import ResourceIcon from '@core/components/ResourceIcon';
-import SkExposureCell from '@core/components/SkExposureCell';
+import SkExposedCell from '@core/components/SkExposedCell';
 import { timeAgo } from '@core/utils/timeAgo';
 import { ComponentRoutesPaths } from '@pages/ProcessGroups/ProcessGroups.enum';
 import { ServicesRoutesPaths } from '@pages/Services/Services.enum';
@@ -106,7 +106,7 @@ const Details: FC<DetailsProps> = function ({ process, title }) {
               <DescriptionListGroup>
                 <DescriptionListTerm>{ProcessesLabels.ExposedTitle}</DescriptionListTerm>
                 <DescriptionListDescription>
-                  <SkExposureCell value={processBinding} />
+                  <SkExposedCell value={processBinding} />
                 </DescriptionListDescription>
               </DescriptionListGroup>
             </GridItem>

src/pages/Processes/views/Processes.tsx

@@ -3,6 +3,7 @@ import { startTransition, useCallback, useState } from 'react';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { RESTApi } from '@API/REST.api';
+import { Role } from '@API/REST.enum';
 import { RemoteFilterOptions } from '@API/REST.interfaces';
 import { BIG_PAGINATION_SIZE, UPDATE_INTERVAL } from '@config/config';
 import { getTestsIds } from '@config/testIds';
@@ -17,7 +18,7 @@ import { ProcessesLabels, QueriesProcesses } from '../Processes.enum';
 //TODO: currently we can't query filter for a multivalue and we need to call separate queries, merge and sort them locally
 const initProcessesQueryParams = {
   limit: BIG_PAGINATION_SIZE,
-  processRole: ['remote', 'external'],
+  processRole: [Role.Remote, Role.External],
   endTime: 0
 };
 

src/pages/Sites/components/Details.tsx

@@ -18,7 +18,7 @@ import {
 import { useSuspenseQueries } from '@tanstack/react-query';
 import { Link } from 'react-router-dom';
 
-import { FlowDirection } from '@API/REST.enum';
+import { Direction, Role } from '@API/REST.enum';
 import EmptyData from '@core/components/EmptyData';
 import ResourceIcon from '@core/components/ResourceIcon';
 import { ProcessesRoutesPaths } from '@pages/Processes/Processes.enum';
@@ -29,7 +29,7 @@ import { DetailsProps } from '../Sites.interfaces';
 import { queryDetails } from '../Sites.queries';
 
 const processQueryParams = { endTime: 0 };
-const linkQueryParams = { direction: FlowDirection.Outgoing };
+const linkQueryParams = { direction: Direction.Outgoing };
 
 const Details: FC<DetailsProps> = function ({ site }) {
   const { identity: siteId, nameSpace, siteVersion, platform } = site;
@@ -45,7 +45,7 @@ const Details: FC<DetailsProps> = function ({ site }) {
 
   const { linkSiteIds } = SitesController.bindLinksWithSiteIds([site], links)[0];
   const linkedSites = sites.filter(({ identity }) => linkSiteIds.map((id) => id.targetId).includes(identity));
-  const processResults = processesData.results.filter(({ processRole }) => processRole !== 'internal');
+  const processResults = processesData.results.filter(({ processRole }) => processRole !== Role.Internal);
 
   return (
     <Grid hasGutter sm={12} xl={6} xl2={4}>

src/pages/Sites/views/Sites.tsx

@@ -4,9 +4,9 @@ import { RESTApi } from '@API/REST.api';
 import { SiteResponse } from '@API/REST.interfaces';
 import { BIG_PAGINATION_SIZE, UPDATE_INTERVAL } from '@config/config';
 import { getTestsIds } from '@config/testIds';
-import EndTimeCell from '@core/components/EndTimeCell';
 import LinkCell from '@core/components/LinkCell';
 import { LinkCellProps } from '@core/components/LinkCell/LinkCell.interfaces';
+import SkEndTimeCell from '@core/components/SkEndTimeCell';
 import SkTable from '@core/components/SkTable';
 import MainContainer from '@layout/MainContainer';
 import { TopologyRoutesPaths, TopologyViews } from '@pages/Topology/Topology.enum';
@@ -33,7 +33,7 @@ const Sites = function () {
           rows={sites}
           paginationPageSize={BIG_PAGINATION_SIZE}
           customCells={{
-            TimestampCell: (props: LinkCellProps<SiteResponse>) => EndTimeCell(props),
+            TimestampCell: SkEndTimeCell,
             LinkCell: (props: LinkCellProps<SiteResponse>) =>
               LinkCell({
                 ...props,