NETOBSERV-268 frontend code styling

web/.prettierrc.json

@@ -2,5 +2,6 @@
   "arrowParens": "avoid",
   "printWidth": 120,
   "singleQuote": true,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-organize-imports"]
 }

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",

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 {

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> => {

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 = [

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));
 

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: {

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;
 

web/src/components/alerts/banner.tsx

@@ -1,16 +1,16 @@
-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<{
   rule: Rule;

web/src/components/alerts/fetcher.tsx

@@ -1,7 +1,7 @@
+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';
 

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

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

web/src/components/dropdowns/__tests__/metric-function-dropdown.spec.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { mount, shallow } from 'enzyme';
+import * as React from 'react';
 
 import MetricFunctionDropdown from '../metric-function-dropdown';
 

web/src/components/dropdowns/__tests__/metric-type-dropdown.spec.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { mount, shallow } from 'enzyme';
+import * as React from 'react';
 
 import MetricTypeDropdown from '../metric-type-dropdown';
 

web/src/components/dropdowns/__tests__/query-options-dropdown.spec.tsx

@@ -1,6 +1,6 @@
-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';
 

web/src/components/dropdowns/__tests__/refresh-dropdown.spec.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { mount, shallow } from 'enzyme';
+import * as React from 'react';
 
 import RefreshDropdown, { RefreshDropdownProps } from '../refresh-dropdown';
 

web/src/components/dropdowns/__tests__/time-range-dropdown.spec.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { mount, shallow } from 'enzyme';
+import * as React from 'react';
 
 import TimeRangeDropdown, { TimeRangeDropdownProps } from '../time-range-dropdown';
 

web/src/components/dropdowns/__tests__/truncate-dropdown.spec.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { mount, shallow } from 'enzyme';
+import * as React from 'react';
 
 import { TruncateDropdown, TruncateLength } from '../truncate-dropdown';
 

web/src/components/dropdowns/group-dropdown.tsx

@@ -1,9 +1,9 @@
 import { Dropdown, DropdownItem, DropdownToggle } from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { FlowScope } from '../../model/flow-query';
 import { MetricScopeOptions } from '../../model/metrics';
 import { getGroupsForScope, isGroupEnabled, TopologyGroupTypes } from '../../model/topology';
-import { FlowScope } from '../../model/flow-query';
 
 export const GroupDropdown: React.FC<{
   disabled?: boolean;
@@ -19,39 +19,39 @@ export const GroupDropdown: React.FC<{
   const getGroupDisplay = (groupType: TopologyGroupTypes) => {
     switch (groupType) {
       /** Clusters aggregation and groups */
-      case TopologyGroupTypes.CLUSTERS:
+      case TopologyGroupTypes.clusters:
         return t('Clusters');
-      case TopologyGroupTypes.CLUSTERS_HOSTS:
+      case TopologyGroupTypes.clustersHosts:
         return t('Clusters + Nodes');
-      case TopologyGroupTypes.CLUSTERS_ZONES:
+      case TopologyGroupTypes.clustersZones:
         return t('Clusters + Zones');
-      case TopologyGroupTypes.CLUSTERS_NAMESPACES:
+      case TopologyGroupTypes.clustersNamespaces:
         return t('Clusters + Namespaces');
-      case TopologyGroupTypes.CLUSTERS_OWNERS:
+      case TopologyGroupTypes.clustersOwners:
         return t('Clusters + Owners');
       /** Zones aggregation and groups */
-      case TopologyGroupTypes.ZONES:
+      case TopologyGroupTypes.zones:
         return t('Zones');
-      case TopologyGroupTypes.ZONES_HOSTS:
+      case TopologyGroupTypes.zonesHosts:
         return t('Zones + Nodes');
-      case TopologyGroupTypes.ZONES_NAMESPACES:
+      case TopologyGroupTypes.zonesNamespaces:
         return t('Zones + Namespaces');
-      case TopologyGroupTypes.ZONES_OWNERS:
+      case TopologyGroupTypes.zonesOwners:
         return t('Zones + Owners');
       /** Hosts aggregation and groups */
-      case TopologyGroupTypes.HOSTS:
+      case TopologyGroupTypes.hosts:
         return t('Nodes');
-      case TopologyGroupTypes.HOSTS_NAMESPACES:
+      case TopologyGroupTypes.hostsNamespaces:
         return t('Nodes + Namespaces');
-      case TopologyGroupTypes.HOSTS_OWNERS:
+      case TopologyGroupTypes.hostsOwners:
         return t('Nodes + Owners');
       /** Namespaces aggregation and groups */
-      case TopologyGroupTypes.NAMESPACES:
+      case TopologyGroupTypes.namespaces:
         return t('Namespaces');
-      case TopologyGroupTypes.NAMESPACES_OWNERS:
+      case TopologyGroupTypes.namespacesOwners:
         return t('Namespaces + Owners');
       /** Owner aggregation */
-      case TopologyGroupTypes.OWNERS:
+      case TopologyGroupTypes.owners:
         return t('Owners');
       default:
         return t('None');