Merge pull request #179 from OlivierCazade/lastRefresh

NETOBSERV-299 : Added last refresh date in query summary

Author: OlivierCazade

web/locales/en/plugin__network-observability-plugin.json

@@ -167,6 +167,7 @@
   "{{count}} packets": "{{count}} packets",
   "{{count}} packets_plural": "{{count}} packets",
   "Filtered average speed": "Filtered average speed",
+  "Last refresh: {{time}}": "Last refresh: {{time}}",
   "{{count}} IP(s)": "{{count}} IP(s)",
   "{{count}} IP(s)_plural": "{{count}} IP(s)",
   "{{count}} Port(s)": "{{count}} Port(s)",

web/src/components/netflow-traffic.tsx

@@ -142,6 +142,7 @@ export const NetflowTraffic: React.FC<{
   const [metrics, setMetrics] = React.useState<TopologyMetrics[]>([]);
   const [isShowTopologyOptions, setShowTopologyOptions] = React.useState<boolean>(false);
   const [isShowQuerySummary, setShowQuerySummary] = React.useState<boolean>(false);
+  const [lastRefresh, setLastRefresh] = React.useState<Date | undefined>(undefined);
   const [error, setError] = React.useState<string | undefined>();
   const [size, setSize] = useLocalStorage<Size>(LOCAL_STORAGE_SIZE_KEY, 'm');
   const [isTRModalOpen, setTRModalOpen] = React.useState(false);
@@ -278,10 +279,12 @@ export const NetflowTraffic: React.FC<{
             .then(result => {
               setFlows(result.records);
               setStats(result.stats);
+              setLastRefresh(new Date());
             })
             .catch(err => {
               setFlows([]);
               setError(getHTTPErrorDetails(err));
+              setLastRefresh(new Date());
               setWarningMessage(undefined);
             })
             .finally(() => {
@@ -601,6 +604,7 @@ export const NetflowTraffic: React.FC<{
           id="summaryPanel"
           flows={flows}
           stats={stats}
+          lastRefresh={lastRefresh}
           range={range}
           onClose={() => setShowQuerySummary(false)}
         />
@@ -743,6 +747,7 @@ export const NetflowTraffic: React.FC<{
         flows={flows}
         range={range}
         stats={stats}
+        lastRefresh={lastRefresh}
         toggleQuerySummary={() => onToggleQuerySummary(!isShowQuerySummary)}
       />
       <TimeRangeModal

web/src/components/query-summary/__tests__/query-summary.spec.tsx

@@ -4,14 +4,17 @@ import { FlowsSample } from '../../../components/__tests-data__/flows';
 import { QuerySummary, QuerySummaryContent } from '../query-summary';
 
 describe('<QuerySummary />', () => {
+  const now = new Date();
+
   const mocks = {
     toggleQuerySummary: jest.fn(),
     flows: FlowsSample,
     range: 300,
     stats: {
       limitReached: false,
       numQueries: 1
-    }
+    },
+    lastRefresh: now
   };
 
   it('should shallow component', async () => {
@@ -26,6 +29,7 @@ describe('<QuerySummary />', () => {
     expect(wrapper.find('#bytesCount').last().text()).toBe('161 kB');
     expect(wrapper.find('#packetsCount').last().text()).toBe('1100 packets');
     expect(wrapper.find('#bpsCount').last().text()).toBe('538 Bps');
+    expect(wrapper.find('#lastRefresh').last().text()).toBe(now.toLocaleTimeString());
   });
 
   it('should toggle panel', async () => {

web/src/components/query-summary/__tests__/summary-panel.spec.tsx

@@ -13,6 +13,7 @@ describe('<SummaryPanel />', () => {
       limitReached: false,
       numQueries: 1
     },
+    lastRefresh: new Date(),
     id: 'summary-panel'
   };
 

web/src/components/query-summary/query-summary.tsx

@@ -12,9 +12,10 @@ export const QuerySummaryContent: React.FC<{
   flows: Record[];
   limitReached: boolean;
   range: number | TimeRange;
+  lastRefresh: Date | undefined;
   direction: 'row' | 'column';
   className?: string;
-}> = ({ flows, limitReached, range, direction, className }) => {
+}> = ({ flows, limitReached, range, lastRefresh, direction, className }) => {
   const { t } = useTranslation('plugin__network-observability-plugin');
 
   let rangeInSeconds: number;
@@ -69,6 +70,21 @@ export const QuerySummaryContent: React.FC<{
           </Text>
         </Tooltip>
       </FlexItem>
+      <FlexItem>
+        <Tooltip
+          content={
+            <Text component={TextVariants.p}>
+              {t('Last refresh: {{time}}', {
+                time: lastRefresh ? lastRefresh.toLocaleString() : ''
+              })}
+            </Text>
+          }
+        >
+          <Text id="lastRefresh" component={TextVariants.p}>
+            {lastRefresh ? lastRefresh.toLocaleTimeString() : ''}
+          </Text>
+        </Tooltip>
+      </FlexItem>
     </Flex>
   );
 };
@@ -77,12 +93,19 @@ export const QuerySummary: React.FC<{
   flows: Record[] | undefined;
   stats: Stats | undefined;
   range: number | TimeRange;
+  lastRefresh: Date | undefined;
   toggleQuerySummary: () => void;
-}> = ({ flows, stats, range, toggleQuerySummary }) => {
-  if (flows && flows.length && stats) {
+}> = ({ flows, stats, range, lastRefresh, toggleQuerySummary }) => {
+  if (flows && flows.length && stats && lastRefresh) {
     return (
       <Card id="query-summary" isSelectable onClick={toggleQuerySummary}>
-        <QuerySummaryContent direction="row" flows={flows} limitReached={stats.limitReached} range={range} />
+        <QuerySummaryContent
+          direction="row"
+          flows={flows}
+          limitReached={stats.limitReached}
+          range={range}
+          lastRefresh={lastRefresh}
+        />
       </Card>
     );
   }

web/src/components/query-summary/summary-panel.tsx

@@ -42,7 +42,8 @@ export const SummaryPanelContent: React.FC<{
   flows: Record[] | undefined;
   stats: Stats | undefined;
   range: number | TimeRange;
-}> = ({ flows, stats, range }) => {
+  lastRefresh: Date | undefined;
+}> = ({ flows, stats, range, lastRefresh }) => {
   const { t } = useTranslation('plugin__network-observability-plugin');
   const [expanded, setExpanded] = React.useState<string>('');
 
@@ -227,6 +228,7 @@ export const SummaryPanelContent: React.FC<{
           flows={flows || []}
           limitReached={stats?.limitReached || false}
           range={range}
+          lastRefresh={lastRefresh}
         />
       </TextContent>
       <TextContent className="summary-text-container">
@@ -243,8 +245,9 @@ export const SummaryPanel: React.FC<{
   flows: Record[] | undefined;
   stats: Stats | undefined;
   range: number | TimeRange;
+  lastRefresh: Date | undefined;
   id?: string;
-}> = ({ flows, stats, range, id, onClose }) => {
+}> = ({ flows, stats, range, lastRefresh, id, onClose }) => {
   const { t } = useTranslation('plugin__network-observability-plugin');
 
   return (
@@ -263,7 +266,7 @@ export const SummaryPanel: React.FC<{
         </DrawerActions>
       </DrawerHead>
       <DrawerPanelBody>
-        <SummaryPanelContent flows={flows} stats={stats} range={range} />
+        <SummaryPanelContent flows={flows} stats={stats} range={range} lastRefresh={lastRefresh} />
       </DrawerPanelBody>
     </DrawerPanelContent>
   );