From d24254dd798c7135ed65957765a2e35adc3b11f0 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Thu, 8 Dec 2022 00:50:39 -0800
Subject: [PATCH] [FEATURE] Overview | Update stats to use EUI stats component
 #156 (#194) (#203)

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
(cherry picked from commit 9abf9eec25585384b0b75c7b9f6102c20ea78bed)

Co-authored-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
---
 .../Overview/components/Widgets/Summary.tsx   | 36 +++++++++----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/public/pages/Overview/components/Widgets/Summary.tsx b/public/pages/Overview/components/Widgets/Summary.tsx
index e2ebdd361..f7cec1576 100644
--- a/public/pages/Overview/components/Widgets/Summary.tsx
+++ b/public/pages/Overview/components/Widgets/Summary.tsx
@@ -3,14 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiText, EuiLink } from '@elastic/eui';
-import { ROUTES } from '../../../../utils/constants';
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiStat } from '@elastic/eui';
 import React, { useCallback, useEffect, useState } from 'react';
 import { WidgetContainer } from './WidgetContainer';
 import { summaryGroupByOptions } from '../../utils/constants';
 import { getOverviewVisualizationSpec, getTimeWithMinPrecision } from '../../utils/helpers';
 import { AlertItem, FindingItem } from '../../models/interfaces';
 import { createSelectComponent, renderVisualization } from '../../../../utils/helpers';
+import { ROUTES } from '../../../../utils/constants';
 
 export interface SummaryProps {
   findings: FindingItem[];
@@ -92,26 +92,22 @@ export const Summary: React.FC<SummaryProps> = ({ alerts, findings }) => {
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="xl">
             <EuiFlexItem grow={false}>
-              <EuiText size="s">
-                <p>Total active alerts</p>
-              </EuiText>
-              <EuiLink
-                href={`#${ROUTES.ALERTS}`}
-                style={{ fontSize: 20, textDecoration: 'underline' }}
-              >
-                {activeAlerts}
-              </EuiLink>
+              <EuiStat
+                title={<EuiLink href={`#${ROUTES.ALERTS}`}>{activeAlerts}</EuiLink>}
+                description="Total active alerts"
+                textAlign="left"
+                titleColor="primary"
+                isLoading={!activeAlerts}
+              />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiText size="s">
-                <p>Total findings</p>
-              </EuiText>
-              <EuiLink
-                href={`#${ROUTES.FINDINGS}`}
-                style={{ fontSize: 20, textDecoration: 'underline' }}
-              >
-                {totalFindings}
-              </EuiLink>
+              <EuiStat
+                title={<EuiLink href={`#${ROUTES.FINDINGS}`}>{totalFindings}</EuiLink>}
+                description="Total findings"
+                textAlign="left"
+                titleColor="primary"
+                isLoading={!totalFindings}
+              />
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>