split dropdowns / panels when possible

netobserv · Jun 17, 2024 · c320bcf · c320bcf
1 parent 58868cc
commit c320bcf
Show file tree

Hide file tree

Showing 29 changed files with 1,796 additions and 1,704 deletions.
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",
@@ -298,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",
@@ -311,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",

diff --git a/web/src/components/dropdowns/__tests__/group-dropdown.spec.tsx b/web/src/components/dropdowns/__tests__/group-dropdown.spec.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { FlowScope } from '../../../model/flow-query';
 import { MetricScopeOptions } from '../../../model/metrics';
 import { TopologyGroupTypes } from '../../../model/topology';
-import GroupDropdown from '../group-dropdown';
+import { GroupDropdown } from '../group-dropdown';
 
 describe('<GroupDropdown />', () => {
   const props = {

diff --git a/web/src/components/dropdowns/__tests__/layout-dropdown.spec.tsx b/web/src/components/dropdowns/__tests__/layout-dropdown.spec.tsx
@@ -2,7 +2,7 @@ import { mount, shallow } from 'enzyme';
 import * as React from 'react';
 
 import { LayoutName } from '../../../model/topology';
-import LayoutDropdown from '../layout-dropdown';
+import { LayoutDropdown } from '../layout-dropdown';
 
 describe('<LayoutDropdown />', () => {
   const props = {

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 { 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 { 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
@@ -2,10 +2,11 @@ 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,

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

diff --git a/web/src/components/dropdowns/__tests__/table-display-dropdown.spec.tsx b/web/src/components/dropdowns/__tests__/table-display-dropdown.spec.tsx
@@ -3,7 +3,8 @@ import { mount, shallow } from 'enzyme';
 import * as React from 'react';
 
 import { act } from 'react-dom/test-utils';
-import { Size, TableDisplayDropdown, TableDisplayOptions } from '../table-display-dropdown';
+import { Size, TableDisplayDropdown } from '../table-display-dropdown';
+import { TableDisplayOptions } from '../table-display-options';
 
 describe('<DisplayDropdown />', () => {
   const props = {

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

diff --git a/web/src/components/dropdowns/overview-display-dropdown.tsx b/web/src/components/dropdowns/overview-display-dropdown.tsx
@@ -1,16 +1,14 @@
-import { Select, Switch, Text, TextVariants, Tooltip } from '@patternfly/react-core';
-import { InfoAltIcon } from '@patternfly/react-icons';
+import { Select, Text, TextVariants } from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FlowScope } from '../../model/flow-query';
-
 import './overview-display-dropdown.css';
-import ScopeDropdown from './scope-dropdown';
-import TruncateDropdown, { TruncateLength } from './truncate-dropdown';
+import { OverviewDisplayOptions } from './overview-display-options';
+import { TruncateLength } from './truncate-dropdown';
 
 export type Size = 's' | 'm' | 'l';
 
-export interface OverviewDisplayOptionsProps {
+export interface OverviewDisplayDropdownProps {
   metricScope: FlowScope;
   setMetricScope: (s: FlowScope) => void;
   truncateLength: TruncateLength;
@@ -20,7 +18,7 @@ export interface OverviewDisplayOptionsProps {
   allowedScopes: FlowScope[];
 }
 
-export const OverviewDisplayOptions: React.FC<OverviewDisplayOptionsProps> = ({
+export const OverviewDisplayDropdown: React.FC<OverviewDisplayDropdownProps> = ({
   metricScope,
   setMetricScope,
   truncateLength,
@@ -30,62 +28,6 @@ export const OverviewDisplayOptions: React.FC<OverviewDisplayOptionsProps> = ({
   allowedScopes
 }) => {
   const { t } = useTranslation('plugin__netobserv-plugin');
-
-  return (
-    <>
-      <div className="pf-c-select__menu-group">
-        <Tooltip content={t('The level of details represented.')}>
-          <div className="pf-c-select__menu-group-title">
-            <Text component={TextVariants.p}>
-              {t('Scope')} <InfoAltIcon />
-            </Text>
-          </div>
-        </Tooltip>
-        <div className="display-dropdown-padding">
-          <ScopeDropdown
-            data-test="scope"
-            id="scope"
-            selected={metricScope}
-            setScopeType={setMetricScope}
-            allowedScopes={allowedScopes}
-          />
-        </div>
-      </div>
-      <div className="pf-c-select__menu-group">
-        <Tooltip content={t('Long labels can reduce visibility.')}>
-          <div className="pf-c-select__menu-group-title">
-            <Text component={TextVariants.p}>
-              {t('Truncate labels')} <InfoAltIcon />
-            </Text>
-          </div>
-        </Tooltip>
-        <div className="display-dropdown-padding">
-          <TruncateDropdown id="truncate" selected={truncateLength} setTruncateLength={setTruncateLength} />
-        </div>
-      </div>
-      <div className="pf-c-select__menu-group">
-        <Switch
-          id="focus-switch"
-          className="display-dropdown-padding"
-          label={t('Single graph focus')}
-          isChecked={focus}
-          onChange={setFocus}
-        />
-      </div>
-    </>
-  );
-};
-
-export const OverviewDisplayDropdown: React.FC<{
-  metricScope: FlowScope;
-  setMetricScope: (s: FlowScope) => void;
-  truncateLength: TruncateLength;
-  setTruncateLength: (v: TruncateLength) => void;
-  focus: boolean;
-  setFocus: (v: boolean) => void;
-  allowedScopes: FlowScope[];
-}> = ({ metricScope, setMetricScope, truncateLength, setTruncateLength, focus, setFocus, allowedScopes }) => {
-  const { t } = useTranslation('plugin__netobserv-plugin');
   const [isOpen, setOpen] = React.useState<boolean>(false);
 
   return (

diff --git a/web/src/components/dropdowns/overview-display-options.tsx b/web/src/components/dropdowns/overview-display-options.tsx
@@ -0,0 +1,78 @@
+import { Switch, Text, TextVariants, Tooltip } from '@patternfly/react-core';
+import { InfoAltIcon } from '@patternfly/react-icons';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FlowScope } from '../../model/flow-query';
+
+import ScopeDropdown from './scope-dropdown';
+import TruncateDropdown, { TruncateLength } from './truncate-dropdown';
+
+export type Size = 's' | 'm' | 'l';
+
+export interface OverviewDisplayOptionsProps {
+  metricScope: FlowScope;
+  setMetricScope: (s: FlowScope) => void;
+  truncateLength: TruncateLength;
+  setTruncateLength: (v: TruncateLength) => void;
+  focus: boolean;
+  setFocus: (v: boolean) => void;
+  allowedScopes: FlowScope[];
+}
+
+export const OverviewDisplayOptions: React.FC<OverviewDisplayOptionsProps> = ({
+  metricScope,
+  setMetricScope,
+  truncateLength,
+  setTruncateLength,
+  focus,
+  setFocus,
+  allowedScopes
+}) => {
+  const { t } = useTranslation('plugin__netobserv-plugin');
+
+  return (
+    <>
+      <div className="pf-c-select__menu-group">
+        <Tooltip content={t('The level of details represented.')}>
+          <div className="pf-c-select__menu-group-title">
+            <Text component={TextVariants.p}>
+              {t('Scope')} <InfoAltIcon />
+            </Text>
+          </div>
+        </Tooltip>
+        <div className="display-dropdown-padding">
+          <ScopeDropdown
+            data-test="scope"
+            id="scope"
+            selected={metricScope}
+            setScopeType={setMetricScope}
+            allowedScopes={allowedScopes}
+          />
+        </div>
+      </div>
+      <div className="pf-c-select__menu-group">
+        <Tooltip content={t('Long labels can reduce visibility.')}>
+          <div className="pf-c-select__menu-group-title">
+            <Text component={TextVariants.p}>
+              {t('Truncate labels')} <InfoAltIcon />
+            </Text>
+          </div>
+        </Tooltip>
+        <div className="display-dropdown-padding">
+          <TruncateDropdown id="truncate" selected={truncateLength} setTruncateLength={setTruncateLength} />
+        </div>
+      </div>
+      <div className="pf-c-select__menu-group">
+        <Switch
+          id="focus-switch"
+          className="display-dropdown-padding"
+          label={t('Single graph focus')}
+          isChecked={focus}
+          onChange={setFocus}
+        />
+      </div>
+    </>
+  );
+};
+
+export default OverviewDisplayOptions;