NETOBSERV-662 UI Consistency: Dropdown labels (#240)

* actions labels

* i18n

Author: jpinsonneau

web/locales/en/plugin__netobserv-plugin.json

@@ -192,6 +192,8 @@
   "More options": "More options",
   "Display": "Display",
   "Actions": "Actions",
+  "Time range": "Time range",
+  "Refresh interval": "Refresh interval",
   "Collapse": "Collapse",
   "Expand": "Expand",
   "View": "View",

web/src/components/filters/filters-toolbar.tsx

@@ -46,7 +46,6 @@ export interface FiltersToolbarProps {
   id: string;
   filters?: Filter[];
   forcedFilters?: Filter[];
-  actions?: React.ReactNode;
   skipTipsDelay?: boolean;
   setFilters: (v: Filter[]) => void;
   clearFilters: () => void;
@@ -61,7 +60,6 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
   id,
   filters,
   forcedFilters,
-  actions,
   skipTipsDelay,
   setFilters,
   clearFilters,
@@ -290,11 +288,6 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
             </OverflowMenu>
           </ToolbarItem>
         )}
-        {actions && (
-          <ToolbarItem className="flex-start" alignment={{ default: 'alignRight' }}>
-            {actions}
-          </ToolbarItem>
-        )}
         {getFiltersChips()}
       </ToolbarContent>
     </Toolbar>

web/src/components/netflow-traffic.css

@@ -11,6 +11,14 @@
     height: 33px !important;
 }
 
+.netobserv-refresh-interval-container {
+    margin: 0 !important;
+}
+
+.netobserv-refresh-container {
+    align-self: end;
+}
+
 span.pf-c-button__icon.pf-m-start {
     width: 14px;
     display: flex;
@@ -64,9 +72,17 @@ span.pf-c-button__icon.pf-m-start {
 
 /* flex page header */
 #pageHeader {
-    display: flex;
-    flex-direction: row;
-    padding: 1.5rem;
+    padding: 1.5rem 1.5rem 0 1.5rem;
+}
+
+#pageHeader>div {
+    align-items: start;
+}
+
+.netobserv-action-title {
+    height: 2em;
+    padding: 0 !important;
+    margin: 0 !important;
 }
 
 #page-content-flex {

web/src/components/netflow-traffic.tsx

@@ -660,30 +660,50 @@ export const NetflowTraffic: React.FC<{
 
   const actions = () => {
     return (
-      <div className="co-actions">
-        <TimeRangeDropdown
-          data-test="time-range-dropdown"
-          id="time-range-dropdown"
-          range={range}
-          setRange={setRange}
-          openCustomModal={() => setTRModalOpen(true)}
-        />
-        <RefreshDropdown
-          data-test="refresh-dropdown"
-          id="refresh-dropdown"
-          disabled={typeof range !== 'number'}
-          interval={interval}
-          setInterval={setInterval}
-        />
-        <Button
-          data-test="refresh-button"
-          id="refresh-button"
-          className="co-action-refresh-button"
-          variant="primary"
-          onClick={() => tick()}
-          icon={<SyncAltIcon style={{ animation: `spin ${loading ? 1 : 0}s linear infinite` }} />}
-        />
-      </div>
+      <Flex direction={{ default: 'row' }}>
+        <FlexItem>
+          <Flex direction={{ default: 'column' }}>
+            <FlexItem className="netobserv-action-title">
+              <Text component={TextVariants.h4}>{t('Time range')}</Text>
+            </FlexItem>
+            <FlexItem flex={{ default: 'flex_1' }}>
+              <TimeRangeDropdown
+                data-test="time-range-dropdown"
+                id="time-range-dropdown"
+                range={range}
+                setRange={setRange}
+                openCustomModal={() => setTRModalOpen(true)}
+              />
+            </FlexItem>
+          </Flex>
+        </FlexItem>
+        <FlexItem className="netobserv-refresh-interval-container">
+          <Flex direction={{ default: 'column' }}>
+            <FlexItem className="netobserv-action-title">
+              <Text component={TextVariants.h4}>{t('Refresh interval')}</Text>
+            </FlexItem>
+            <FlexItem flex={{ default: 'flex_1' }}>
+              <RefreshDropdown
+                data-test="refresh-dropdown"
+                id="refresh-dropdown"
+                disabled={typeof range !== 'number'}
+                interval={interval}
+                setInterval={setInterval}
+              />
+            </FlexItem>
+          </Flex>
+        </FlexItem>
+        <FlexItem className="netobserv-refresh-container">
+          <Button
+            data-test="refresh-button"
+            id="refresh-button"
+            className="co-action-refresh-button"
+            variant="primary"
+            onClick={() => tick()}
+            icon={<SyncAltIcon style={{ animation: `spin ${loading ? 1 : 0}s linear infinite` }} />}
+          />
+        </FlexItem>
+      </Flex>
     );
   };
 
@@ -932,9 +952,12 @@ export const NetflowTraffic: React.FC<{
         //display title only if forced filters is not set
         _.isEmpty(forcedFilters) && (
           <div id="pageHeader">
-            <div className="flex">
-              <Text component={TextVariants.h1}>{t('Network Traffic')}</Text>
-            </div>
+            <Flex direction={{ default: 'row' }}>
+              <FlexItem flex={{ default: 'flex_1' }}>
+                <Text component={TextVariants.h1}>{t('Network Traffic')}</Text>
+              </FlexItem>
+              <FlexItem>{actions()}</FlexItem>
+            </Flex>
           </div>
         )
       }
@@ -955,7 +978,6 @@ export const NetflowTraffic: React.FC<{
           useTopK: selectedViewId === 'overview'
         }}
         forcedFilters={forcedFilters}
-        actions={actions()}
         quickFilters={getQuickFilters()}
         menuContent={filtersExtraContent()}
         menuControl={filtersExtraControl()}