Skip to content

Commit

Permalink
changes
Browse files Browse the repository at this point in the history
  • Loading branch information
aydin101 committed Nov 7, 2023
1 parent d622cdb commit 825a093
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 148 deletions.
4 changes: 4 additions & 0 deletions ui_src/src/assets/images/discordGroupIcon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions ui_src/src/assets/images/documentGroupIcon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions ui_src/src/assets/images/windowGroupIcon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

This file was deleted.

74 changes: 29 additions & 45 deletions ui_src/src/domain/administration/softwareUpdates/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,52 +15,26 @@ import './style.scss';
import React, { useContext, useState, useEffect } from 'react';
import Button from '../../../components/button';
import { ReactComponent as LogoTexeMemphis } from '../../../assets/images/logoTexeMemphis.svg';
import { ReactComponent as RedirectIcon } from '../../../assets/images/redirectIcon.svg';
import { ReactComponent as RedirectWhiteIcon } from '../../../assets/images/exportWhite.svg';
import CustomGauge from './components/customGauge';
const data = {
labels: ['Red', 'Green', 'Blue'],
datasets: [
{
data: [40, 60, 100],
backgroundColor: ['red', 'green', 'transparent'],
hoverBackgroundColor: ['red', 'green', 'transparent'],
borderWidth: 2, // Add a border for the outer doughnut
borderColor: 'white', // Set the border color for the outer doughnut
cutoutPercentage: 70, // Adjust the cutout percentage to control the size of the inner doughnut
borderAlign: 'inner', // Make sure the border is drawn inside the doughnut
// hoverBorderWidth: 5 // Adjust the hover border width
hoverBorderWidth: 0, // Adjust the hover border width
borderRadius: 10,
hoverBorderColor: 'transparent'
}
]
};
import { ReactComponent as DocumentIcon } from '../../../assets/images/documentGroupIcon.svg';
import { ReactComponent as DisordIcon } from '../../../assets/images/discordGroupIcon.svg';
import { ReactComponent as WindowIcon } from '../../../assets/images/windowGroupIcon.svg';

const options = {
cutoutPercentage: 70, // Adjust the cutout percentage to control the size of the innermost hole
rotation: Math.PI,
tooltips: false
};

const options2 = {
cutoutPercentage: 10, // Adjust the cutout percentage to control the size of the innermost hole
rotation: Math.PI,
tooltips: false
};
function SoftwareUpates({}) {
const [version, setVersion] = useState({
currentVersion: 'v0.4.3 - Beta',
currentVersionURL: 'https://docs.memphis.dev/memphis/release-notes/releases/v0.4.3-beta',
isUpdateAvailable: true
});
return (
<div className="softwate-updates-container">
<div className="rows">
<div className="item-component">
<div className="title-component">
<div className="versions">
<LogoTexeMemphis alt="Memphis logo" />
<label className="curr-version">v0.4.3 - Beta</label>
<span className="new-version">
<label>New Version available </label>
<RedirectIcon alt="redirect" />
</span>
<label className="curr-version">{version.currentVersion}</label>
{version.isUpdateAvailable && <div className="red-dot" />}
</div>
<Button
width="200px"
Expand All @@ -76,8 +50,9 @@ function SoftwareUpates({}) {
backgroundColorType={'purple'}
fontSize="12px"
fontFamily="InterSemiBold"
// htmlType="submit"
onClick={() => console.log('clicked')}
onClick={() => {
window.open('https://docs.memphis.dev/memphis/release-notes/releases', '_blank');
}}
/>
</div>
</div>
Expand All @@ -87,28 +62,37 @@ function SoftwareUpates({}) {
<label className="numbers">600</label>
</div>
<div className="item-component wrapper">
<label className="title">Amount of brokers</label>
<label className="title">total stations</label>
<label className="numbers">600</label>
</div>
<div className="item-component wrapper">
<label className="title">Amount of brokers</label>
<label className="title">total users</label>
<label className="numbers">600</label>
</div>
<div className="item-component wrapper">
<label className="title">Amount of brokers</label>
<label className="title">total schemas</label>
<label className="numbers">600</label>
</div>
</div>
<div className="charts">
<div className="item-component">
<label className="title">Amount of brokers</label>
<CustomGauge />
<DocumentIcon />
<p>Read Our documentation</p>
<span>
Read our documentation to learn more about <a href="https://docs.memphis.dev/memphis/getting-started/readme"> Memphis.dev</a>
</span>
</div>
<div className="item-component">
<label className="title">Amount of brokers</label>
<DisordIcon />
<p>Join our Discord</p>
<span>
Find <a href="https://memphis.dev/open-source-support-bundle/">Memphis.dev's</a> Open-Source contributors and maintainers here
</span>
</div>
<div className="item-component">
<label className="title">Amount of brokers</label>
<WindowIcon />
<p>Open a service request</p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span>
</div>
</div>
</div>
Expand Down
60 changes: 57 additions & 3 deletions ui_src/src/domain/administration/softwareUpdates/style.scss
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
.softwate-updates-container {
height: calc(100% - 80px);
height: 100%;
width: 100%;
margin: 20px 20px 20px 0px;
padding: 20px 20px 20px 0px;
.rows {
height: 100%;
width: 100%;
display: grid;
grid-template-rows: 20% 35% 45%;
grid-template-rows: 15% 20% 35%;
gap: 20px;

.title {
color: #6557ff;
font-family: 'InterBold';
font-size: 14px;
text-transform: uppercase;
}
Expand All @@ -35,6 +36,46 @@
display: grid;
grid-template-columns: 32% 32% 32%;
justify-content: space-between;

.item-component {
width: 100%;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0px 23px 44px 0px rgba(176, 183, 195, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
border-radius: 8px;
padding: 30px;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

svg {
margin-bottom: 16px;
}

p {
margin: 0px;
margin-bottom: 8px;
color: #151515;
font-family: 'InterMedium';
font-size: 16px;
max-width: 80%;
}
span {
color: #131313;
font-family: 'Inter';
font-size: 12px;
max-width: 60%;

a {
color: #6557ff;
font-family: 'InterMedium';
font-size: 12px;
text-decoration-line: underline;
}
}
}
}
.item-component {
width: 100%;
Expand All @@ -54,6 +95,19 @@
display: flex;
align-items: center;
gap: 15px;

position: relative;

.red-dot {
width: 11px;
height: 11px;
border-radius: 50%;
background-color: #f00;

position: absolute;
top: 0px;
right: 0px;
}
.curr-version {
color: #6557ff;
font-size: 14px;
Expand Down
2 changes: 1 addition & 1 deletion ui_src/src/domain/stationsList/stationBoxOverview/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import { ReactComponent as ReplicasIcon } from '../../../assets/images/replicasI
import { ReactComponent as TotalMsgIcon } from '../../../assets/images/totalMsgIcon.svg';
import { ReactComponent as PoisonMsgIcon } from '../../../assets/images/poisonMsgIcon.svg';
import { ReactComponent as RemoteStorageIcon } from '../../../assets/images/remoteStorage.svg';
import { ReactComponent as ClockIcon } from '../../../assets/images/TimeFill.svg';
import { ReactComponent as ClockIcon } from '../../../assets/images/timeFill.svg';
import { ReactComponent as UserIcon } from '../../../assets/images/userPerson.svg';
import { ReactComponent as SchemaIcon } from '../../../assets/images/schemaIconActive.svg';
import { ReactComponent as StationIcon } from '../../../assets/images/stationsIconActive.svg';
Expand Down

0 comments on commit 825a093

Please sign in to comment.