Grooming Traffic Stats Modal - change font and time picker position (#1206)

* font change and time picker position update

* add font-family to variables scss

ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimeRangePicker/TimeTangePicker.tsx

@@ -1,10 +1,12 @@
 import React, { useState, Fragment } from 'react';
+import { EuiProvider } from '@elastic/eui';
 
 import {
     EuiSuperDatePicker,
     EuiSpacer,
 } from '@elastic/eui';
 import dateMath from '@elastic/datemath';
+import '@elastic/eui/dist/eui_theme_light.css';
 
 interface TimeRangePickerProps {
     refreshStats: (startTime, endTime) => void;
@@ -72,21 +74,23 @@ export const TimeRangePicker: React.FC<TimeRangePickerProps> = ({ refreshStats }
     };
 
     return (
-        <Fragment>
-            <EuiSpacer />
-            <EuiSuperDatePicker
-                width='auto'
-                isLoading={isLoading}
-                start={start}
-                end={end}
-                onTimeChange={onTimeChange}
-                onRefresh={onRefresh}
-                isPaused={isPaused}
-                refreshInterval={refreshInterval}
-                onRefreshChange={onRefreshChange}
-                recentlyUsedRanges={recentlyUsedRanges}
-            />
-            <EuiSpacer />
-        </Fragment>
+        <EuiProvider>
+            <Fragment>
+                <EuiSpacer />
+                <EuiSuperDatePicker
+                    width='auto'
+                    isLoading={isLoading}
+                    start={start}
+                    end={end}
+                    onTimeChange={onTimeChange}
+                    onRefresh={onRefresh}
+                    isPaused={isPaused}
+                    refreshInterval={refreshInterval}
+                    onRefreshChange={onRefreshChange}
+                    recentlyUsedRanges={recentlyUsedRanges}
+                />
+                <EuiSpacer />
+            </Fragment>
+        </EuiProvider>
     );
 };

ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.module.sass

@@ -1,3 +1,5 @@
+@import  "../../../../variables.module"
+
 .barChartContainer
     width: 100%
     display: flex 
@@ -6,3 +8,4 @@
 .axisText
     font-size: 12px
     opacity: 0.9
+    font-family: $text-font-family

ui-common/src/components/modals/TrafficStatsModal/TrafficPieChart/TrafficPieChart.module.sass

@@ -0,0 +1,5 @@
+@import  "../../../../variables.module"
+
+.entryName
+    margin-left: 5px
+    font-family: $text-font-family

ui-common/src/components/modals/TrafficStatsModal/TrafficPieChart/TrafficPieChart.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { Cell, Legend, Pie, PieChart, Tooltip } from "recharts";
 import { Utils } from "../../../../helpers/Utils";
 import { ALL_PROTOCOLS ,StatsMode as PieChartMode } from "../consts"
+import styles from "./TrafficPieChart.module.sass";
 
 const RADIAN = Math.PI / 180;
 const renderCustomizedLabel = ({
@@ -76,7 +77,7 @@ export const TrafficPieChart: React.FC<TrafficPieChartProps> = ({ pieChartMode,
     if (selectedProtocol === ALL_PROTOCOLS) {
       legend = data.map(protocol => <div style={{ marginBottom: 5, display: "flex" }}>
         <div style={{ height: 15, width: 30, background: protocol?.color }} />
-        <span style={{ marginLeft: 5 }}>
+        <span className={styles.entryName}>
           {protocol.name}
         </span>
       </div>)
@@ -84,7 +85,7 @@ export const TrafficPieChart: React.FC<TrafficPieChartProps> = ({ pieChartMode,
       legend = data.find(protocol => protocol.name === selectedProtocol)?.methods.map((method) => <div
         style={{ marginBottom: 5, display: "flex" }}>
         <div style={{ height: 15, width: 30, background: method.color}} />
-        <span style={{ marginLeft: 5 }}>
+        <span className={styles.entryName}>
           {method.name}
         </span>
       </div>)

ui-common/src/components/modals/TrafficStatsModal/TrafficStatsModal.module.sass

@@ -1,9 +1,11 @@
+@import  "../../../variables.module"
+  
 .headlineContainer
   display: flex
 
 .title
   color: #494677
-  font-family: Source Sans Pro,Lucida Grande,Tahoma,sans-serif
+  font-family: $text-font-family
   font-size: 28px
   font-weight: 600
 
@@ -21,8 +23,13 @@
   align-items: center
   margin-bottom: 4%
 
+.selectTitle
+  font-family: $text-font-family
+  margin-right: 15px
+
 .select
   border: none
   border-bottom: 1px black solid
   outline: none
   width: 100px
+  font-family: $text-font-family

ui-common/src/components/modals/TrafficStatsModal/TrafficStatsModal.tsx

@@ -7,8 +7,6 @@ import { TimelineBarChart } from "./TimelineBarChart/TimelineBarChart";
 import { LoadingWrapper } from "../../UI/withLoading/withLoading";
 import { ALL_PROTOCOLS, StatsMode } from "./consts";
 import { TimeRangePicker } from "./TimelineBarChart/TimeRangePicker/TimeTangePicker";
-import { EuiProvider } from '@elastic/eui';
-import '@elastic/eui/dist/eui_theme_light.css';
 
 const modalStyle = {
   position: 'absolute',
@@ -68,53 +66,51 @@ export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, on
   }, 500);
 
   return (
-    <EuiProvider>
-      <Modal
-        aria-labelledby="transition-modal-title"
-        aria-describedby="transition-modal-description"
-        open={isOpen}
-        onClose={onClose}
-        closeAfterTransition
-        BackdropComponent={Backdrop}
-        BackdropProps={{ timeout: 500 }}>
-        <Fade in={isOpen}>
-          <Box sx={modalStyle}>
-            <div className={styles.closeIcon}>
-              <img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer", userSelect: "none" }} />
-            </div>
-            <div className={styles.headlineContainer}>
-              <div className={styles.title}>Traffic Statistics</div>
-            </div>
-            <div className={styles.mainContainer}>
-              <div className={styles.selectContainer}>
-                <div>
-                  <TimeRangePicker refreshStats={refreshStats} />
-                </div>
-                <div>
-                  <span style={{ marginRight: 15 }}>Breakdown By</span>
-                  <select className={styles.select} value={statsMode} onChange={(e) => setStatsMode(e.target.value)}>
-                    {modes.map(mode => <option key={mode} value={mode}>{mode}</option>)}
-                  </select>
-                </div>
-                <div>
-                  <span style={{ marginRight: 15 }}>Protocol</span>
-                  <select className={styles.select} value={selectedProtocol} onChange={(e) => setSelectedProtocol(e.target.value)}>
-                    {protocols.map(protocol => <option key={protocol} value={protocol}>{protocol}</option>)}
-                  </select>
-                </div>
+    <Modal
+      aria-labelledby="transition-modal-title"
+      aria-describedby="transition-modal-description"
+      open={isOpen}
+      onClose={onClose}
+      closeAfterTransition
+      BackdropComponent={Backdrop}
+      BackdropProps={{ timeout: 500 }}>
+      <Fade in={isOpen}>
+        <Box sx={modalStyle}>
+          <div className={styles.closeIcon}>
+            <img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer", userSelect: "none" }} />
+          </div>
+          <div className={styles.headlineContainer}>
+            <div className={styles.title}>Traffic Statistics</div>
+          </div>
+          <div className={styles.mainContainer}>
+            <div className={styles.selectContainer}>
+              <div>
+                <span className={styles.selectTitle}>Breakdown By</span>
+                <select className={styles.select} value={statsMode} onChange={(e) => setStatsMode(e.target.value)}>
+                  {modes.map(mode => <option key={mode} value={mode}>{mode}</option>)}
+                </select>
               </div>
               <div>
-                <LoadingWrapper isLoading={isLoading} loaderMargin={20} loaderHeight={50}>
-                  <div>
-                    <TrafficPieChart pieChartMode={statsMode} data={pieStatsData} selectedProtocol={selectedProtocol} />
-                    <TimelineBarChart timeLineBarChartMode={statsMode} data={timelineStatsData} selectedProtocol={selectedProtocol} />
-                  </div>
-                </LoadingWrapper>
+                <span className={styles.selectTitle}>Protocol</span>
+                <select className={styles.select} value={selectedProtocol} onChange={(e) => setSelectedProtocol(e.target.value)}>
+                  {protocols.map(protocol => <option key={protocol} value={protocol}>{protocol}</option>)}
+                </select>
+              </div>
+              <div>
+                <TimeRangePicker refreshStats={refreshStats} />
               </div>
             </div>
-          </Box>
-        </Fade>
-      </Modal>
-    </EuiProvider>
+            <div>
+              <LoadingWrapper isLoading={isLoading} loaderMargin={20} loaderHeight={50}>
+                <div>
+                  <TrafficPieChart pieChartMode={statsMode} data={pieStatsData} selectedProtocol={selectedProtocol} />
+                  <TimelineBarChart timeLineBarChartMode={statsMode} data={timelineStatsData} selectedProtocol={selectedProtocol} />
+                </div>
+              </LoadingWrapper>
+            </div>
+          </div>
+        </Box>
+      </Fade>
+    </Modal>
   );
 }

ui-common/src/variables.module.scss

@@ -14,6 +14,8 @@ $content-section-color: #f8f9fc;
 $blue-gray: #494677;
 $light-gray: #8F9BB2;
 
+$text-font-family: Source Sans Pro, Lucida Grande, Tahoma, sans-serif;
+
 :export {
   mainBackgroundColor: $main-background-color;
   headerBackgroundColor: $header-background-color;
@@ -26,4 +28,5 @@ $light-gray: #8F9BB2;
   blueGray: $blue-gray;
   lightGray: $light-gray;
   contentSectionColor: $content-section-color;
+  textFontFamily: $text-font-family
 }

ui/public/index.html

@@ -9,7 +9,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <meta name="eui-style-insert">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a