diff --git a/ui_src/src/assets/images/add.svg b/ui_src/src/assets/images/add.svg new file mode 100644 index 000000000..4aabde0a9 --- /dev/null +++ b/ui_src/src/assets/images/add.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui_src/src/assets/images/pagerduty.png b/ui_src/src/assets/images/pagerduty.png new file mode 100644 index 000000000..0efdd3898 Binary files /dev/null and b/ui_src/src/assets/images/pagerduty.png differ diff --git a/ui_src/src/assets/images/s3.png b/ui_src/src/assets/images/s3.png new file mode 100644 index 000000000..b6060f70c Binary files /dev/null and b/ui_src/src/assets/images/s3.png differ diff --git a/ui_src/src/assets/images/slackicon.png b/ui_src/src/assets/images/slackicon.png new file mode 100644 index 000000000..92256cb55 Binary files /dev/null and b/ui_src/src/assets/images/slackicon.png differ diff --git a/ui_src/src/domain/overview/genericDetails/index.js b/ui_src/src/domain/overview/genericDetails/index.js index eb4ecb54c..b4dbb31b9 100644 --- a/ui_src/src/domain/overview/genericDetails/index.js +++ b/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 = ( + <> +
+
+
+ + add station + + +
+ some info +
+ +
+ add station +
+
+
+
+
+ + add schema + + +
+ some info +
+ +
+ add station +
+
+ + ); + return (
@@ -51,10 +89,15 @@ const GenericDetails = () => {
- AttachedSchema + Logo
- Attached schema -

{state?.monitor_data?.total_dls_messages?.toLocaleString()}

+ Operational health + +

76%

+ + + +
diff --git a/ui_src/src/domain/overview/genericDetails/style.scss b/ui_src/src/domain/overview/genericDetails/style.scss index 828adb95f..9db09e04f 100644 --- a/ui_src/src/domain/overview/genericDetails/style.scss +++ b/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; + } + } + } + } } diff --git a/ui_src/src/domain/overview/index.js b/ui_src/src/domain/overview/index.js index 628839364..f7255c232 100644 --- a/ui_src/src/domain/overview/index.js +++ b/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() { modalFlip(e)} /> - {!isCloud() && ( + {isCloud() ? ( +
+ + + +
+ ) : (
diff --git a/ui_src/src/domain/overview/integrations/index.js b/ui_src/src/domain/overview/integrations/index.js new file mode 100644 index 000000000..167b6db9a --- /dev/null +++ b/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 ( +
+
+
+

Integrations

+ +
+
+
+ slack + +
+
+ s3 + +
+
+ pagerduty + +
+
+
+
+ ); +}; + +export default Integrations; diff --git a/ui_src/src/domain/overview/integrations/style.scss b/ui_src/src/domain/overview/integrations/style.scss new file mode 100644 index 000000000..400eed5ca --- /dev/null +++ b/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; + } + } + } +} diff --git a/ui_src/src/domain/overview/schemaverse/index.js b/ui_src/src/domain/overview/schemaverse/index.js new file mode 100644 index 000000000..6ed1b4ea0 --- /dev/null +++ b/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 ( +
+
+
+

Schemaverse

+ +
+
+ +

Total Schemas

+

50

+ + + +

Enforced Schemas

+

50

+ +
+
+ +
+
+
+ ); +}; + +export default Schemaverse; diff --git a/ui_src/src/domain/overview/schemaverse/schemaChart.js b/ui_src/src/domain/overview/schemaverse/schemaChart.js new file mode 100644 index 000000000..960ecf2ae --- /dev/null +++ b/ui_src/src/domain/overview/schemaverse/schemaChart.js @@ -0,0 +1,51 @@ +// 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, { useEffect, useState } from 'react'; +import { Badge } from 'antd'; + +const SchemaChart = ({ schemas }) => { + const [max, setMax] = useState(null); + useEffect(() => { + const max = schemas?.reduce((a, b) => (a.usage > b.usage ? a : b)).usage; + setMax(max); + }, [schemas]); + + const getLength = (usage) => { + return usage / max; + }; + + return ( +
+ {max && + schemas?.map((schema) => { + return ( +
+
+ {' '} + +
+ ); + })} +
+ ); +}; + +export default SchemaChart; diff --git a/ui_src/src/domain/overview/schemaverse/style.scss b/ui_src/src/domain/overview/schemaverse/style.scss new file mode 100644 index 000000000..781f6c51d --- /dev/null +++ b/ui_src/src/domain/overview/schemaverse/style.scss @@ -0,0 +1,72 @@ +.overview-schema-container { + position: relative; + height: 100%; + padding: 15px; + + .schemaverse-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; + } + } + .total-data { + margin-top: 10px; + border: 1px solid #e6e6e6; + border-radius: 8px; + display: flex; + justify-content: space-evenly; + align-items: center; + padding: 5px; + p { + margin: 0; + } + .total-measure { + font-weight: 500; + font-size: 14px; + color: #d5d5d7; + } + .total-value { + font-weight: 600; + font-size: 20px; + color: #2e2c34; + } + } + .ant-divider-vertical { + height: 40px; + margin: 0; + } + + .schema-chart-container { + padding: 10px; + width: 100%; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + .schema-item { + display: flex; + align-items: center; + margin-bottom: 4px; + .schema-bar { + background: rgba(101, 87, 255, 0.4); + border-radius: 4px; + height: 35px; + } + .schema-bar:hover { + opacity: 0.9; + } + .schema-name { + font-weight: 600; + font-size: 14px; + color: #2e2c34; + margin-left: 5px; + margin-right: 5px; + } + } + } +} diff --git a/ui_src/src/domain/overview/style.scss b/ui_src/src/domain/overview/style.scss index 065da5dff..96a8cc24d 100644 --- a/ui_src/src/domain/overview/style.scss +++ b/ui_src/src/domain/overview/style.scss @@ -78,8 +78,8 @@ } } } - .top-component{ - min-width:1250px; + .top-component { + min-width: 1250px; } .overview-components-wrapper { @@ -128,12 +128,15 @@ position: relative; min-height: 590px; min-width: 420px; + display: flex; + flex-direction: column; + justify-content: space-between; } - + .system-components-wrapper { height: 100%; position: relative; } } } -} \ No newline at end of file +} diff --git a/ui_src/src/domain/overview/tags/index.js b/ui_src/src/domain/overview/tags/index.js new file mode 100644 index 000000000..e8d01dbf1 --- /dev/null +++ b/ui_src/src/domain/overview/tags/index.js @@ -0,0 +1,50 @@ +// 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, { useState } from 'react'; +import Tag from '../../../components/tag'; +import { Divider } from 'antd'; + +const Tags = () => { + const [tags, setTags] = useState([ + { name: 'Github', usage: '10 stations, 2 schemas', color: '0, 165, 255' }, + { name: 'Launch 2.0', usage: '7 stations, 2 schemas', color: '252, 52, 0' }, + { name: 'MACQUARIE', usage: '2 schemas', color: '85, 66, 246' } + ]); + + return ( +
+
+
+

Most used tags

+
+ + {tags.map((tag, index) => ( +
+ + + + ''}> + + + + +
+ ))} +
+
+ ); +}; + +export default Tags; diff --git a/ui_src/src/domain/overview/tags/style.scss b/ui_src/src/domain/overview/tags/style.scss new file mode 100644 index 000000000..00ba662f3 --- /dev/null +++ b/ui_src/src/domain/overview/tags/style.scss @@ -0,0 +1,31 @@ +.overview-tags-container { + position: relative; + height: 100%; + padding: 15px; + .tag-item { + margin-top: 10px; + display: flex; + justify-content: space-between; + // padding: 15px; + .item { + display: flex; + align-items: center; + .item-num { + font-weight: 600; + font-size: 12px; + color: rgba(74, 73, 92, 0.8); + margin-right: 10px; + } + } + .attached-component { + font-weight: 600; + font-size: 12px; + line-height: 18px; + text-align: right; + color: rgba(74, 73, 92, 0.8); + } + } + .ant-divider { + margin: 5px 0 5px 0; + } +}