NETOBSERV-268 frontend code styling (#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

Author: jpinsonneau

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

web/.prettierrc.json

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

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

web/package-lock.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/package.json

@@ -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/loki.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/api/routes.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__/filters.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__/flows.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: {