Cloud dashboard

ui_src/src/domain/overview/genericDetails/index.js

@@ -17,12 +17,50 @@ import { Context } from '../../../hooks/store';
 import TotalMsg from '../../../assets/images/TotalMessages.svg';
 import TotalPoison from '../../../assets/images/DeadLetteredMessages.svg';
 import TotalStations from '../../../assets/images/TotalStations.svg';
-import AttachedSchema from '../../../assets/images/AttachedSchema.svg';
-import { Divider } from 'antd';
+import Logo from '../../../assets/images/logo.svg';
+import Add from '../../../assets/images/add.svg';
+import stationsIconActive from '../../../assets/images/stationsIconActive.svg';
+import schemaIconActive from '../../../assets/images/schemaIconActive.svg';
+import { Progress, Divider, Popover } from 'antd';
 
 const GenericDetails = () => {
     const [state, dispatch] = useContext(Context);
 
+    const healthStatus = (
+        <>
+            <div className="health-item">
+                <div className="health-item-body">
+                    <div className="health-item-body-wrapper">
+                        <span className="img-circle">
+                            <img src={stationsIconActive} alt="add station" />
+                        </span>
+                        <label>Created a new station</label>
+                    </div>
+                    <span className="health-item-body-info">some info</span>
+                </div>
+                <Divider />
+                <div className="health-item-footer">
+                    <label> Add More Stations</label> <img src={Add} alt="add station" />
+                </div>
+            </div>
+            <div className="health-item">
+                <div className="health-item-body">
+                    <div className="health-item-body-wrapper">
+                        <span className="img-circle">
+                            <img src={schemaIconActive} alt="add schema" />
+                        </span>
+                        <label>Created a new schema</label>
+                    </div>
+                    <span className="health-item-body-info">some info</span>
+                </div>
+                <Divider />
+                <div className="health-item-footer">
+                    <label> Add More Schemas</label> <img src={Add} alt="add station" />
+                </div>
+            </div>
+        </>
+    );
+
     return (
         <div className="overview-components-wrapper">
             <div className="generic-details-container">
@@ -51,10 +89,15 @@ const GenericDetails = () => {
                 </div>
                 <Divider type="vertical" />
                 <div className="data-box">
-                    <img src={AttachedSchema} width={50} height={50} alt="AttachedSchema" className="icon-wrapper" />
+                    <img src={Logo} width={50} height={50} alt="Logo" className="icon-wrapper" />
                     <div className="data-wrapper">
-                        <span>Attached schema</span>
-                        <p>{state?.monitor_data?.total_dls_messages?.toLocaleString()}</p>
+                        <span>Operational health</span>
+                        <span className="operational-health">
+                            <p>76%</p>
+                            <Popover overlayClassName="health-status-caontainer" placement="bottom" title="Operational health" content={healthStatus} trigger="click">
+                                <Progress percent={76} showInfo={false} strokeColor={{ '0%': '#6557FF', '50%': '#61DFC6', '100%': '#FFC633' }} className="progress" />
+                            </Popover>
+                        </span>
                     </div>
                 </div>
             </div>

ui_src/src/domain/overview/genericDetails/style.scss

@@ -17,6 +17,10 @@
             margin-right: 20px;
         }
         .data-wrapper {
+            .operational-health {
+                display: flex;
+                align-items: center;
+            }
             span {
                 font-size: 14px;
                 color: #979797;
@@ -27,6 +31,7 @@
                 color: #1d1d1d;
                 font-family: 'InterBold';
                 margin: 0;
+                margin-right: 10px;
                 display: flex;
                 span {
                     font-size: 12px;
@@ -35,4 +40,78 @@
             }
         }
     }
+    .progress {
+        cursor: pointer;
+    }
+}
+.health-status-caontainer {
+    width: 400px;
+    border-radius: 16px;
+    position: relative;
+    .ant-popover-title {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        font-weight: 600;
+        font-size: 16px;
+        display: flex;
+        color: #222124;
+    }
+    .ant-popover-inner {
+        margin-right: 10px;
+    }
+    .ant-popover-inner-content {
+        width: 100%;
+        position: relative;
+        padding-bottom: 10px;
+        .health-item {
+            border: 1px solid #e6e6e6;
+            border-radius: 8px;
+            margin: 15px;
+            .ant-divider-horizontal {
+                margin: 0;
+            }
+            .health-item-body {
+                padding-bottom: 15px;
+                .health-item-body-wrapper {
+                    display: flex;
+                    align-items: center;
+                    padding: 15px;
+                    .img-circle {
+                        margin-right: 10px;
+                        height: 30px;
+                        width: 30px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        background: #e2dfff;
+                        border-radius: 50%;
+                        img {
+                            height: 15px;
+                            width: 15px;
+                        }
+                    }
+                    label {
+                        font-weight: 600;
+                        font-size: 16px;
+                        color: #0b0a0f;
+                    }
+                }
+                .health-item-body-info {
+                    padding-left: 55px;
+                }
+            }
+            .health-item-footer {
+                color: #6e44ff;
+                justify-content: center;
+                display: flex;
+                padding: 10px 0px;
+                label {
+                    cursor: pointer;
+                }
+                img {
+                    margin-left: 5px;
+                }
+            }
+        }
+    }
 }

ui_src/src/domain/overview/index.js

@@ -30,6 +30,9 @@ import { httpRequest } from '../../services/http';
 import SystemComponents from './systemComponents';
 import GenericDetails from './genericDetails';
 import FailedStations from './failedStations';
+import Schemaverse from './schemaverse';
+import Tags from './tags';
+import Integrations from './integrations';
 import Loader from '../../components/loader';
 import Button from '../../components/button';
 import { Context } from '../../hooks/store';
@@ -200,7 +203,13 @@ function OverView() {
                             <FailedStations createStationTrigger={(e) => modalFlip(e)} />
                             <Throughput />
                         </div>
-                        {!isCloud() && (
+                        {isCloud() ? (
+                            <div className="right-side">
+                                <Schemaverse />
+                                <Tags />
+                                <Integrations />
+                            </div>
+                        ) : (
                             <div className="right-side">
                                 <SystemComponents />
                             </div>

ui_src/src/domain/overview/integrations/index.js

@@ -0,0 +1,53 @@
+// Copyright 2022-2023 The Memphis.dev Authors
+// Licensed under the Memphis Business Source License 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// Changed License: [Apache License, Version 2.0 (https://www.apache.org/licenses/LICENSE-2.0), as published by the Apache Foundation.
+//
+// https://github.com/memphisdev/memphis/blob/master/LICENSE
+//
+// Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
+// A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
+
+import './style.scss';
+
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import pagerDutyIcon from '../../../../src/assets/images/pagerDutyIcon.svg';
+import slackLogo from '../../../../src/assets/images/slackLogo.svg';
+import s3Logo from '../../../../src/assets/images/s3Logo.svg';
+import pathDomains from '../../../router';
+
+const Integrations = () => {
+    const history = useHistory();
+
+    return (
+        <div className="overview-components-wrapper">
+            <div className="overview-integrations-container">
+                <div className="overview-components-header integrations-header">
+                    <p>Integrations</p>
+                    <label className="link-to-page" onClick={() => history.push(`${pathDomains.administration}/integrations`)}>
+                        Go to integrations
+                    </label>
+                </div>
+                <div className="integrations-list">
+                    <div className="integration-item">
+                        <img className="img-icon" src={slackLogo} alt="slack" />
+                        <label className="integration-name">Slack</label>
+                    </div>
+                    <div className="integration-item">
+                        <img className="img-icon" src={s3Logo} alt="s3" />
+                        <label className="integration-name">S3 Bucket</label>
+                    </div>
+                    <div className="integration-item">
+                        <img className="img-icon" src={pagerDutyIcon} alt="pagerduty" />
+                        <label className="integration-name">PagerDuty</label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Integrations;

ui_src/src/domain/overview/integrations/style.scss

@@ -0,0 +1,37 @@
+.overview-integrations-container {
+    position: relative;
+    height: 100%;
+    padding: 15px;
+    .integrations-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .link-to-page {
+            font-weight: 500;
+            font-size: 12 !important;
+            color: #6557ff !important;
+            cursor: pointer;
+        }
+    }
+    .integrations-list {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 10px;
+        .integration-item {
+            border: 1px solid #f1f1f1;
+            border-radius: 4px;
+            padding: 8px;
+            width: 30%;
+            .img-icon {
+                height: 20px;
+                width: 20px;
+            }
+            .integration-name {
+                font-weight: 600;
+                font-size: 14px;
+                color: #2e2c34;
+                margin-left: 10px;
+            }
+        }
+    }
+}

ui_src/src/domain/overview/schemaverse/index.js

@@ -0,0 +1,57 @@
+// Copyright 2022-2023 The Memphis.dev Authors
+// Licensed under the Memphis Business Source License 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// Changed License: [Apache License, Version 2.0 (https://www.apache.org/licenses/LICENSE-2.0), as published by the Apache Foundation.
+//
+// https://github.com/memphisdev/memphis/blob/master/LICENSE
+//
+// Additional Use Grant: You may make use of the Licensed Work (i) only as part of your own product or service, provided it is not a message broker or a message queue product or service; and (ii) provided that you do not use, provide, distribute, or make available the Licensed Work as a Service.
+// A "Service" is a commercial offering, product, hosted, or managed service, that allows third parties (other than your own employees and contractors acting on your behalf) to access and/or use the Licensed Work or a substantial set of the features or functionality of the Licensed Work to third parties as a software-as-a-service, platform-as-a-service, infrastructure-as-a-service or other similar services that compete with Licensor products or services.
+
+import './style.scss';
+
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Divider } from 'antd';
+import pathDomains from '../../../router';
+import SchemaChart from './schemaChart';
+
+const Schemaverse = () => {
+    const history = useHistory();
+    return (
+        <div className="overview-components-wrapper">
+            <div className="overview-schema-container">
+                <div className="overview-components-header schemaverse-header">
+                    <p> Schemaverse </p>
+                    <label className="link-to-page" onClick={() => history.push(`${pathDomains.schemaverse}/list`)}>
+                        Go to schemaverse
+                    </label>
+                </div>
+                <div className="total-data">
+                    <span>
+                        <p className="total-measure">Total Schemas</p>
+                        <p className="total-value">50</p>
+                    </span>
+                    <Divider type="vertical" />
+                    <span>
+                        <p className="total-measure">Enforced Schemas</p>
+                        <p className="total-value">50</p>
+                    </span>
+                </div>
+                <div className="total-data">
+                    <SchemaChart
+                        schemas={[
+                            { name: 'Protobuf', usage: 15 },
+                            { name: 'Json', usage: 7 },
+                            { name: 'Avro', usage: 3 }
+                        ]}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Schemaverse;