NETOBSERV-268 frontend code styling (netobserv#541)

* prettier sort imports * sort imports + constants naming * flex + flexitem * TextContent and Text usage * interfaces for props * move helpers + voronoi as component * split dropdowns / panels when possible * fixes * removed unecessary CSS * fix voronoi container
jotak · Jul 15, 2024 · 8a3bed3 · 8a3bed3
1 parent 788ddb1
commit 8a3bed3
Show file tree

Hide file tree

Showing 149 changed files with 3,302 additions and 2,978 deletions.
diff --git a/mocks/loki/flow_records.json b/mocks/loki/flow_records.json
@@ -14,7 +14,7 @@
         "values": [
           [
             "1708011867120999936",
-            "{\"SrcK8S_Name\":\"ip-10-0-1-7.ec2.internal\",\"Bytes\":66,\"TimeFlowRttNs\":10000,\"Packets\":1,\"Interface\":\"br-ex\",\"SrcMac\":\"02:27:A1:A8:84:B9\",\"Proto\":6,\"SrcK8S_HostIP\":\"10.0.1.7\",\"SrcK8S_HostName\":\"ip-10-0-1-7.ec2.internal\",\"Flags\":16,\"DnsErrno\":0,\"TimeFlowStartMs\":1708011867121,\"TimeReceived\":1708011867,\"DstAddr\":\"10.0.1.140\",\"Etype\":2048,\"SrcPort\":50104,\"AgentIP\":\"10.0.1.7\",\"SrcK8S_OwnerType\":\"Node\",\"Dscp\":0,\"TimeFlowEndMs\":1708011867121,\"IfDirection\":1,\"SrcAddr\":\"10.0.1.7\",\"Duplicate\":false,\"DstMac\":\"02:7B:32:68:BE:65\",\"DstPort\":443}"
+            "{\"SrcK8S_Name\":\"ip-10-0-1-7.ec2.internal\",\"Bytes\":66,\"TimeFlowRttNs\":10000,\"Packets\":1,\"Interfaces\":[\"br-ex\",\"test\"],\"SrcMac\":\"02:27:A1:A8:84:B9\",\"Proto\":6,\"SrcK8S_HostIP\":\"10.0.1.7\",\"SrcK8S_HostName\":\"ip-10-0-1-7.ec2.internal\",\"Flags\":16,\"DnsErrno\":0,\"TimeFlowStartMs\":1708011867121,\"TimeReceived\":1708011867,\"DstAddr\":\"10.0.1.140\",\"Etype\":2048,\"SrcPort\":50104,\"AgentIP\":\"10.0.1.7\",\"SrcK8S_OwnerType\":\"Node\",\"Dscp\":0,\"TimeFlowEndMs\":1708011867121,\"IfDirections\":[\"1\",\"0\"],\"SrcAddr\":\"10.0.1.7\",\"Duplicate\":false,\"DstMac\":\"02:7B:32:68:BE:65\",\"DstPort\":443,\"IcmpType\":1,\"IcmpCode\":1}"
           ],
           [
             "1708011867120999936",

diff --git a/web/.prettierrc.json b/web/.prettierrc.json
@@ -2,5 +2,6 @@
   "arrowParens": "avoid",
   "printWidth": 120,
   "singleQuote": true,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-organize-imports"]
 }
diff --git a/web/locales/en/plugin__netobserv-plugin.json b/web/locales/en/plugin__netobserv-plugin.json
@@ -45,12 +45,13 @@
   "Dropped packets": "Dropped packets",
   "DNS latencies": "DNS latencies",
   "RTT": "RTT",
+  "Display options": "Display options",
   "The level of details represented.": "The level of details represented.",
   "Scope": "Scope",
   "Long labels can reduce visibility.": "Long labels can reduce visibility.",
   "Truncate labels": "Truncate labels",
   "Single graph focus": "Single graph focus",
-  "Display options": "Display options",
+  "Query options": "Query options",
   "Conversation": "Conversation",
   "Flow": "Flow",
   "Loki": "Loki",
@@ -87,7 +88,6 @@
   "Depending on the matching and filter settings, several queries can be performed under the cover, each with this parameter set, resulting in more results after aggregation.": "Depending on the matching and filter settings, several queries can be performed under the cover, each with this parameter set, resulting in more results after aggregation.",
   "Top / Bottom": "Top / Bottom",
   "Limit": "Limit",
-  "Query options": "Query options",
   "Refresh off": "Refresh off",
   "15 seconds": "15 seconds",
   "30 seconds": "30 seconds",
@@ -149,9 +149,6 @@
   "Switch between one way / back and forth filtering": "Switch between one way / back and forth filtering",
   "One way shows traffic strictly as defined per your filters": "One way shows traffic strictly as defined per your filters",
   "Back and forth shows traffic according to your filters, plus the related return traffic": "Back and forth shows traffic according to your filters, plus the related return traffic",
-  "Source": "Source",
-  "Destination": "Destination",
-  "Common": "Common",
   "Filter already exists": "Filter already exists",
   "Hide filters": "Hide filters",
   "Show {{count}} filters": "Show {{count}} filters",
@@ -160,6 +157,8 @@
   "Collapse": "Collapse",
   "Expand": "Expand",
   "Quick filters": "Quick filters",
+  "Source": "Source",
+  "Destination": "Destination",
   "Step {{index}}/{{count}}": "Step {{index}}/{{count}}",
   "Step {{index}}/{{count}}_plural": "Step {{index}}/{{count}}",
   "Previous tip": "Previous tip",
@@ -212,9 +211,6 @@
   "Reset time range": "Reset time range",
   "Others": "Others",
   "Total dropped": "Total dropped",
-  "(non nodes)": "(non nodes)",
-  "(non pods)": "(non pods)",
-  "internal": "internal",
   "Manage columns": "Manage columns",
   "Selected columns will appear in the table.": "Selected columns will appear in the table.",
   "Click and drag the items to reorder the columns in the table.": "Click and drag the items to reorder the columns in the table.",
@@ -302,6 +298,7 @@
   "Name": "Name",
   "IP": "IP",
   "No information available for this content. Change scope to get more details.": "No information available for this content. Change scope to get more details.",
+  "Cluster name": "Cluster name",
   "Stats": "Stats",
   "Top 5 DNS latency": "Top 5 DNS latency",
   "Top 5 flow RTT": "Top 5 flow RTT",
@@ -315,7 +312,6 @@
   "Average rate": "Average rate",
   "Latest time": "Latest time",
   "Latest rate": "Latest rate",
-  "Cluster name": "Cluster name",
   "Edge": "Edge",
   "Drops": "Drops",
   "Query is slow": "Query is slow",
@@ -424,6 +420,10 @@
   "Not a valid MAC address": "Not a valid MAC address",
   "Unknown protocol": "Unknown protocol",
   "Unknown direction": "Unknown direction",
+  "Common": "Common",
+  "(non nodes)": "(non nodes)",
+  "(non pods)": "(non pods)",
+  "internal": "internal",
   "P": "P",
   "Pps": "Pps",
   "minimum": "minimum",

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -72,6 +72,7 @@
     "mobx": "^5.15.7",
     "parse-duration": "^1.1.0",
     "prettier": "^2.5.1",
+    "prettier-plugin-organize-imports": "^3.2.4",
     "pretty-quick": "^3.1.2",
     "react-transition-group": "^4.4.2",
     "style-loader": "^3.3.1",

diff --git a/web/src/api/loki.ts b/web/src/api/loki.ts
@@ -1,6 +1,6 @@
-import { getFunctionFromId, getRateFunctionFromId } from '../utils/overview-panels';
 import { FlowScope, MetricType, StatFunction } from '../model/flow-query';
 import { cyrb53 } from '../utils/hash';
+import { getFunctionFromId, getRateFunctionFromId } from '../utils/overview-panels';
 import { Field, Fields, Labels, Record } from './ipfix';
 
 export interface AggregatedQueryResponse {

diff --git a/web/src/api/routes.ts b/web/src/api/routes.ts
@@ -4,18 +4,18 @@ import { buildExportQuery } from '../model/export-query';
 import { FlowQuery, FlowScope, isTimeMetric } from '../model/flow-query';
 import { ContextSingleton } from '../utils/context';
 import { TimeRange } from '../utils/datetime';
-import { parseTopologyMetrics, parseGenericMetrics } from '../utils/metrics';
+import { parseGenericMetrics, parseTopologyMetrics } from '../utils/metrics';
 import { AlertsResult, SilencedAlert } from './alert';
 import { Field } from './ipfix';
 import {
   AggregatedQueryResponse,
+  FlowMetricsResult,
   GenericMetricsResult,
   parseStream,
   RawTopologyMetrics,
   RecordsResult,
   Stats,
-  StreamResult,
-  FlowMetricsResult
+  StreamResult
 } from './loki';
 
 export const getFlowRecords = (params: FlowQuery): Promise<RecordsResult> => {

diff --git a/web/src/components/__tests-data__/filters.ts b/web/src/components/__tests-data__/filters.ts
@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
-import { findFilter, getFilterDefinitions } from '../../utils/filter-definitions';
 import { Filter, FilterId, FilterValue } from '../../model/filters';
+import { findFilter, getFilterDefinitions } from '../../utils/filter-definitions';
 import { ColumnConfigSampleDefs } from './columns';
 
 export const FilterConfigSampleDefs = [

diff --git a/web/src/components/__tests-data__/flows.ts b/web/src/components/__tests-data__/flows.ts
@@ -1,6 +1,6 @@
-import { parseStream, RecordsResult, StreamResult } from '../../api/loki';
-import { FlowDirection, Record } from '../../api/ipfix';
 import flowsJson from '../../../../mocks/loki/flow_records.json';
+import { FlowDirection, Record } from '../../api/ipfix';
+import { parseStream, RecordsResult, StreamResult } from '../../api/loki';
 
 export const FlowsMock: Record[] = (flowsJson.data.result as StreamResult[]).flatMap(r => parseStream(r));
 

diff --git a/web/src/components/__tests-data__/metrics.ts b/web/src/components/__tests-data__/metrics.ts
@@ -1,5 +1,5 @@
-import { parseTopologyMetrics } from '../../utils/metrics';
 import { RawTopologyMetrics, TopologyMetrics } from '../../api/loki';
+import { parseTopologyMetrics } from '../../utils/metrics';
 
 export const metric1: RawTopologyMetrics = {
   metric: {

diff --git a/web/src/components/__tests__/netflow-traffic.spec.tsx b/web/src/components/__tests__/netflow-traffic.spec.tsx
@@ -1,17 +1,17 @@
 import { useResolvedExtensions } from '@openshift-console/dynamic-plugin-sdk';
+import { waitFor } from '@testing-library/react';
 import { mount, render, shallow } from 'enzyme';
 import * as React from 'react';
-import { waitFor } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-import { getConfig, getFlowGenericMetrics, getFlowRecords, getFlowMetrics } from '../../api/routes';
+import { AlertsResult, SilencedAlert } from '../../api/alert';
+import { FlowMetricsResult, GenericMetricsResult } from '../../api/loki';
+import { getConfig, getFlowGenericMetrics, getFlowMetrics, getFlowRecords } from '../../api/routes';
+import { FlowQuery } from '../../model/flow-query';
 import NetflowTraffic from '../netflow-traffic';
-import { extensionsMock } from '../__tests-data__/extensions';
-import { FlowsResultSample } from '../__tests-data__/flows';
 import NetflowTrafficParent from '../netflow-traffic-parent';
-import { GenericMetricsResult, FlowMetricsResult } from '../../api/loki';
-import { AlertsResult, SilencedAlert } from '../../api/alert';
 import { FullConfigResultSample, SimpleConfigResultSample } from '../__tests-data__/config';
-import { FlowQuery } from '../../model/flow-query';
+import { extensionsMock } from '../__tests-data__/extensions';
+import { FlowsResultSample } from '../__tests-data__/flows';
 
 const useResolvedExtensionsMock = useResolvedExtensions as jest.Mock;
 

diff --git a/web/src/components/alerts/banner.tsx b/web/src/components/alerts/banner.tsx
@@ -1,21 +1,23 @@
-import { useTranslation } from 'react-i18next';
-import * as React from 'react';
+import { Rule } from '@openshift-console/dynamic-plugin-sdk';
 import {
   Alert,
-  AlertActionLink,
   AlertActionCloseButton,
-  TextContent,
+  AlertActionLink,
   Text,
+  TextContent,
   TextVariants
 } from '@patternfly/react-core';
-import './banner.css';
-import { Rule } from '@openshift-console/dynamic-plugin-sdk';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { navigate } from '../dynamic-loader/dynamic-loader';
+import './banner.css';
 
-export const AlertBanner: React.FC<{
+export interface AlertBannerProps {
   rule: Rule;
   onDelete: () => void;
-}> = ({ rule, onDelete }) => {
+}
+
+export const AlertBanner: React.FC<AlertBannerProps> = ({ rule, onDelete }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
   const routeAlert = () => {
     let path = `/monitoring/alerts/${rule.id}`;

diff --git a/web/src/components/alerts/fetcher.tsx b/web/src/components/alerts/fetcher.tsx
@@ -1,11 +1,11 @@
+import { Rule } from '@openshift-console/dynamic-plugin-sdk';
 import * as React from 'react';
-import AlertBanner from './banner';
 import { getAlerts, getSilencedAlerts } from '../../api/routes';
-import { Rule } from '@openshift-console/dynamic-plugin-sdk';
+import AlertBanner from './banner';
 
 import { murmur3 } from 'murmurhash-js';
 
-type AlertFetcherProps = {};
+export interface AlertFetcherProps {}
 
 export const AlertFetcher: React.FC<AlertFetcherProps> = ({ children }) => {
   const [alerts, setAlerts] = React.useState<Rule[]>([]);

diff --git a/web/src/components/dropdowns/__tests__/group-dropdown.spec.tsx b/web/src/components/dropdowns/__tests__/group-dropdown.spec.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react';
 import { mount, shallow } from 'enzyme';
+import * as React from 'react';
 
-import GroupDropdown from '../group-dropdown';
-import { TopologyGroupTypes } from '../../../model/topology';
-import { MetricScopeOptions } from '../../../model/metrics';
 import { FlowScope } from '../../../model/flow-query';
+import { MetricScopeOptions } from '../../../model/metrics';
+import { TopologyGroupTypes } from '../../../model/topology';
+import { GroupDropdown } from '../group-dropdown';
 
 describe('<GroupDropdown />', () => {
   const props = {
     scope: MetricScopeOptions.RESOURCE,
-    selected: TopologyGroupTypes.HOSTS,
+    selected: TopologyGroupTypes.hosts,
     setGroupType: jest.fn(),
     id: 'group',
     allowedScopes: ['host', 'namespace', 'owner'] as FlowScope[]
@@ -41,13 +41,13 @@ describe('<GroupDropdown />', () => {
     //open dropdown and select NONE
     dropdown.at(0).simulate('click');
     wrapper.find('[id="none"]').at(0).simulate('click');
-    expect(props.setGroupType).toHaveBeenCalledWith(TopologyGroupTypes.NONE);
+    expect(props.setGroupType).toHaveBeenCalledWith(TopologyGroupTypes.none);
     expect(wrapper.find('li').length).toBe(0);
 
     //open dropdown and select OWNERS
     dropdown.at(0).simulate('click');
     wrapper.find('[id="owners"]').at(0).simulate('click');
-    expect(props.setGroupType).toHaveBeenCalledWith(TopologyGroupTypes.OWNERS);
+    expect(props.setGroupType).toHaveBeenCalledWith(TopologyGroupTypes.owners);
     expect(wrapper.find('li').length).toBe(0);
 
     //setGroupType should be called twice

diff --git a/web/src/components/dropdowns/__tests__/layout-dropdown.spec.tsx b/web/src/components/dropdowns/__tests__/layout-dropdown.spec.tsx
@@ -1,12 +1,12 @@
-import * as React from 'react';
 import { mount, shallow } from 'enzyme';
+import * as React from 'react';
 
-import LayoutDropdown from '../layout-dropdown';
 import { LayoutName } from '../../../model/topology';
+import { LayoutDropdown } from '../layout-dropdown';
 
 describe('<LayoutDropdown />', () => {
   const props = {
-    selected: LayoutName.Cola,
+    selected: LayoutName.cola,
     setLayout: jest.fn(),
     id: 'layout'
   };
@@ -37,13 +37,13 @@ describe('<LayoutDropdown />', () => {
     //open dropdown and select Dagre
     dropdown.at(0).simulate('click');
     wrapper.find('[id="Dagre"]').at(0).simulate('click');
-    expect(props.setLayout).toHaveBeenCalledWith(LayoutName.Dagre);
+    expect(props.setLayout).toHaveBeenCalledWith(LayoutName.dagre);
     expect(wrapper.find('li').length).toBe(0);
 
     //open dropdown and select Force
     dropdown.at(0).simulate('click');
     wrapper.find('[id="Force"]').at(0).simulate('click');
-    expect(props.setLayout).toHaveBeenCalledWith(LayoutName.Force);
+    expect(props.setLayout).toHaveBeenCalledWith(LayoutName.force);
     expect(wrapper.find('li').length).toBe(0);
 
     //setLayout should be called twice

diff --git a/web/src/components/dropdowns/__tests__/metric-function-dropdown.spec.tsx b/web/src/components/dropdowns/__tests__/metric-function-dropdown.spec.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { mount, shallow } from 'enzyme';
+import * as React from 'react';
 
-import MetricFunctionDropdown from '../metric-function-dropdown';
+import { MetricFunctionDropdown } from '../metric-function-dropdown';
 
 describe('<MetricDropdown />', () => {
   const props = {

diff --git a/web/src/components/dropdowns/__tests__/metric-type-dropdown.spec.tsx b/web/src/components/dropdowns/__tests__/metric-type-dropdown.spec.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
 import { mount, shallow } from 'enzyme';
+import * as React from 'react';
 
-import MetricTypeDropdown from '../metric-type-dropdown';
+import { MetricTypeDropdown } from '../metric-type-dropdown';
 
 describe('<MetricDropdown />', () => {
   const props = {

diff --git a/web/src/components/dropdowns/__tests__/query-options-dropdown.spec.tsx b/web/src/components/dropdowns/__tests__/query-options-dropdown.spec.tsx
@@ -1,11 +1,12 @@
-import * as React from 'react';
 import { Checkbox, Radio, Select } from '@patternfly/react-core';
 import { shallow } from 'enzyme';
+import * as React from 'react';
 import { act } from 'react-dom/test-utils';
-import QueryOptionsDropdown, { QueryOptionsDropdownProps, QueryOptionsPanel } from '../query-options-dropdown';
+import { QueryOptionsDropdown, QueryOptionsProps } from '../query-options-dropdown';
+import { QueryOptionsPanel } from '../query-options-panel';
 
 describe('<QueryOptionsDropdown />', () => {
-  const props: QueryOptionsDropdownProps = {
+  const props: QueryOptionsProps = {
     recordType: 'allConnections',
     dataSource: 'auto',
     showDuplicates: true,
@@ -35,7 +36,7 @@ describe('<QueryOptionsDropdown />', () => {
 });
 
 describe('<QueryOptionsPanel />', () => {
-  const props: QueryOptionsDropdownProps = {
+  const props: QueryOptionsProps = {
     recordType: 'allConnections',
     dataSource: 'auto',
     showDuplicates: true,