Skip to content

Commit

Permalink
Merge pull request #992 from memphisdev/cloud-dashboard
Browse files Browse the repository at this point in the history
Cloud dashboard
  • Loading branch information
SvetaMemphis committed Jun 18, 2023
2 parents 6a17bbf + d3d3588 commit 9b138f7
Show file tree
Hide file tree
Showing 15 changed files with 498 additions and 10 deletions.
3 changes: 3 additions & 0 deletions ui_src/src/assets/images/add.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ui_src/src/assets/images/pagerduty.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ui_src/src/assets/images/s3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ui_src/src/assets/images/slackicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 48 additions & 5 deletions ui_src/src/domain/overview/genericDetails/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
79 changes: 79 additions & 0 deletions ui_src/src/domain/overview/genericDetails/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
margin-right: 20px;
}
.data-wrapper {
.operational-health {
display: flex;
align-items: center;
}
span {
font-size: 14px;
color: #979797;
Expand All @@ -27,6 +31,7 @@
color: #1d1d1d;
font-family: 'InterBold';
margin: 0;
margin-right: 10px;
display: flex;
span {
font-size: 12px;
Expand All @@ -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;
}
}
}
}
}
11 changes: 10 additions & 1 deletion ui_src/src/domain/overview/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down
53 changes: 53 additions & 0 deletions ui_src/src/domain/overview/integrations/index.js
Original file line number Diff line number Diff line change
@@ -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;
37 changes: 37 additions & 0 deletions ui_src/src/domain/overview/integrations/style.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
57 changes: 57 additions & 0 deletions ui_src/src/domain/overview/schemaverse/index.js
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 9b138f7

Please sign in to comment.