From 6eea8f68fb43f5320cead651f4ac0ddb73645c46 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 10 Aug 2023 17:59:24 +0530
Subject: [PATCH] change(ui): health modal changes

---
 .../Header/HealthStatus/HealthStatus.tsx      |  33 +++---
 .../Header/HealthStatus/HealthWidget.tsx      | 108 ++++++++++--------
 frontend/app/svg/logo-gray.svg                |  21 ++++
 3 files changed, 93 insertions(+), 69 deletions(-)
 create mode 100644 frontend/app/svg/logo-gray.svg

diff --git a/frontend/app/components/Header/HealthStatus/HealthStatus.tsx b/frontend/app/components/Header/HealthStatus/HealthStatus.tsx
index 05ae85cd5..7a5d07255 100644
--- a/frontend/app/components/Header/HealthStatus/HealthStatus.tsx
+++ b/frontend/app/components/Header/HealthStatus/HealthStatus.tsx
@@ -60,26 +60,21 @@ function HealthStatus() {
   const icon = !isError && healthResponse?.overallHealth ? 'pulse' : ('exclamation-circle-fill' as const);
   return (
     <>
-      <Popover content={
-        <HealthWidget
-          healthResponse={healthResponse}
-          getHealth={getHealth}
-          isLoading={isLoading}
-          lastAsked={lastAsked}
-          setShowModal={setShowModal}
-          isError={isError}
-        />
-      }>
+      <Popover
+        content={
+          <HealthWidget
+            healthResponse={healthResponse}
+            getHealth={getHealth}
+            isLoading={isLoading}
+            lastAsked={lastAsked}
+            setShowModal={setShowModal}
+            isError={isError}
+          />
+        }
+        open={true}
+        placement="topRight"
+      >
         <Button icon={<ExclamationCircleOutlined />}></Button>
-        {/*<div*/}
-        {/*  className={*/}
-        {/*    'rounded cursor-pointer flex items-center h-full'*/}
-        {/*  }*/}
-        {/*>*/}
-        {/*  <div className={'rounded p-2 border border-light-gray bg-white flex items-center'}>*/}
-        {/*    <Icon name={icon} size={18} />*/}
-        {/*  </div>*/}
-        {/*</div>*/}
       </Popover>
       {showModal ? (
         <HealthModal
diff --git a/frontend/app/components/Header/HealthStatus/HealthWidget.tsx b/frontend/app/components/Header/HealthStatus/HealthWidget.tsx
index 16986634e..92d846106 100644
--- a/frontend/app/components/Header/HealthStatus/HealthWidget.tsx
+++ b/frontend/app/components/Header/HealthStatus/HealthWidget.tsx
@@ -3,6 +3,9 @@ import { Icon } from 'UI';
 import ServiceCategory from 'Components/Header/HealthStatus/ServiceCategory';
 import cn from 'classnames';
 import { IServiceStats } from './HealthStatus';
+import { Divider, Space } from 'antd';
+
+const Logo = require('../../../svg/logo-gray.svg').default;
 
 function HealthWidget({
                         healthResponse,
@@ -38,63 +41,68 @@ function HealthWidget({
   );
 
   return (
-    <div
-      // style={{ width: 220, right: '-30%', height: '110%' }}
-      // className={'absolute group'}
-    >
+    <div className='w-full flex flex-col gap-2 items-center' style={{ minWidth: '200px'}}>
+      <div className='self-start mb-2'>
+        <Space>
+          <img src={Logo} width={20} />
+          <div>{`v${window.env.VERSION}`}</div>
+        </Space>
+      </div>
       <div
-        className={
-          'w-full flex flex-col gap-2 items-center'
-        }
+        className={cn(
+          'gap-2 w-full font-medium flex items-center rounded',
+          !isError && healthOk
+            ? 'color-green'
+            : 'color-red'
+        )}
       >
+        <Icon name={icon} size={16} color={!isError && healthOk ? 'green' : 'red'} />
+        <span>{title}</span>
+      </div>
+      <div className={'text-secondary flex w-full justify-between items-center text-sm'}>
+        <span className='color-gray-medium'>Checked {lastAskedDiff}min ago.</span>
         <div
-          className={cn(
-            'p-2 gap-2 w-full font-semibold flex items-center rounded',
-            !isError && healthOk
-              ? 'color-green bg-figmaColors-secondary-outlined-hover-background'
-              : 'bg-red-lightest color-red'
-          )}
+          className={cn('cursor-pointer', isLoading ? 'animate-spin' : '')}
+          onClick={() => getHealth()}
         >
-          <Icon name={icon} size={16} color={!isError && healthOk ? 'green': 'red'} />
-          <span>{title}</span>
+          <Icon name={'arrow-repeat'} size={16} color={'main'} />
         </div>
-        <div className={'text-secondary flex w-full justify-between items-center text-sm'}>
-          <span>Last checked {lastAskedDiff}min ago.</span>
-          <div
-            className={cn('cursor-pointer', isLoading ? 'animate-spin' : '')}
-            onClick={() => getHealth()}
-          >
-            <Icon name={'arrow-repeat'} size={16} color={'main'} />
+      </div>
+      {isError && <div className={'text-secondary text-sm'}>Error getting service health status</div>}
+      <Divider style={{ margin: '4px 0px' }} />
+      <div className={'w-full'}>
+        <div className={'font-medium mb-2'}>Captured</div>
+        <div className='grid grid-cols-2'>
+          <div className='flex flex-col'>
+            <div className=''>{healthResponse.details?.numberOfSessionsCaptured.toLocaleString()}</div>
+            <div className='color-gray-medium'>Sessions</div>
+          </div>
+          <div className='flex flex-col'>
+            <div className=''>{healthResponse.details?.numberOfEventCaptured.toLocaleString()}</div>
+            <div className='color-gray-medium'>Events</div>
           </div>
         </div>
-        {isError && <div className={'text-secondary text-sm'}>Error getting service health status</div>}
-
-        <div className={'w-full'}>
-          <div className={'font-semibold'}>Captured</div>
-          <div>{healthResponse.details?.numberOfSessionsCaptured.toLocaleString()} Sessions</div>
-          <div>{healthResponse.details?.numberOfEventCaptured.toLocaleString()} Events</div>
-        </div>
-        <div className={'w-full'}>
-          {!isError && !healthOk ? (
-            <>
-              <div className={'divider w-full border border-b-light-gray my-2'} />
-              <div className={'text-secondary pb-2'}>
-                Observed installation Issue with the following
-              </div>
-              {problematicServices.map((service) => (
-                <React.Fragment key={service.serviceName}>
-                  <ServiceCategory
-                    onClick={() => setShowModal(true)}
-                    healthOk={false}
-                    name={service.name}
-                    isSelectable
-                    noBorder={problematicServices.length === 1}
-                  />
-                </React.Fragment>
-              ))}
-            </>
-          ) : null}
-        </div>
+      </div>
+      <div className={'w-full'}>
+        {!isError && !healthOk ? (
+          <>
+            <div className={'divider w-full border border-b-light-gray my-2'} />
+            <div className={'text-secondary pb-2'}>
+              Observed installation Issue with the following
+            </div>
+            {problematicServices.map((service) => (
+              <React.Fragment key={service.serviceName}>
+                <ServiceCategory
+                  onClick={() => setShowModal(true)}
+                  healthOk={false}
+                  name={service.name}
+                  isSelectable
+                  noBorder={problematicServices.length === 1}
+                />
+              </React.Fragment>
+            ))}
+          </>
+        ) : null}
       </div>
     </div>
   );
diff --git a/frontend/app/svg/logo-gray.svg b/frontend/app/svg/logo-gray.svg
new file mode 100644
index 000000000..d0ca00334
--- /dev/null
+++ b/frontend/app/svg/logo-gray.svg
@@ -0,0 +1,21 @@
+<svg viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="Frame" clip-path="url(#clip0_200_10536)">
+        <g id="logos">
+            <g id="1">
+                <g id="Group">
+                    <path id="outline"
+                          d="M13.6088 9.87453L2.00012 3.08069V16.6684L13.6088 9.87453ZM15.1929 8.47016C15.6921 8.75846 16 9.29429 16 9.87453C16 10.4548 15.6921 10.9906 15.1929 11.2789L2.46615 18.7285C1.42609 19.3379 0 18.6418 0 17.3242V2.42491C0 1.1073 1.42609 0.411173 2.46615 1.02054L15.1929 8.47016Z"
+                          fill="#595959"/>
+                    <path id="inner-play"
+                          d="M9.05095 9.55353L4.55169 6.99617C4.3744 6.8954 4.149 6.95743 4.04823 7.13471C4.01662 7.19033 4 7.2532 4 7.31717V12.4319C4 12.6358 4.16531 12.8011 4.36923 12.8011C4.4332 12.8011 4.49607 12.7845 4.55169 12.7529L9.05095 10.1955C9.22823 10.0948 9.29026 9.86936 9.18949 9.69208C9.15663 9.63426 9.10876 9.5864 9.05095 9.55353Z"
+                          fill="#595959"/>
+                </g>
+            </g>
+        </g>
+    </g>
+    <defs>
+        <clipPath id="clip0_200_10536">
+            <rect width="16" height="18.1538" fill="white" transform="translate(0 0.797607)"/>
+        </clipPath>
+    </defs>
+</svg>