Skip to content

2058 status page redesign #2096

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MartinJurcoGlina wants to merge 4 commits into
base: main
Choose a base branch
from
Open

2058 status page redesign #2096

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf0fada
redesigned service status page
MartinJurcoGlina Nov 13, 2024
2671a24
Merge branch 'main' of github.com:openkfw/TruBudget into 2058-status-…
MartinJurcoGlina Nov 13, 2024
c43b592
fixed npm audit in blockchain
MartinJurcoGlina Nov 13, 2024
0d98ca7
moved colors definitions to theme
MartinJurcoGlina Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions blockchain/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion frontend/src/languages/english.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -699,7 +699,9 @@ const en = {
error: "Error",
warning: "Warning",
done: "Done",
toBeDone: "To Be Done"
toBeDone: "To Be Done",
speed: "Speed",
connected: "Connected"
},

picture: {
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/languages/french.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -709,7 +709,9 @@ const fr = {
error: "erreur",
warning: "avertissement",
done: "fait",
toBeDone: "A faire"
toBeDone: "A faire",
speed: "Vitesse",
connected: "Connecté"
},

picture: {
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/languages/georgian.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -701,7 +701,9 @@ const ka = {
error: "შეცდომა",
warning: "გაფრთხილება",
done: "შესრულებულია",
toBeDone: "უნდა გაკეთდეს"
toBeDone: "უნდა გაკეთდეს",
speed: "სიჩქარე",
connected: "დაკავშირებულია"
},

picture: {
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/languages/german.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -701,7 +701,9 @@ const de = {
error: "Fehler",
warning: "Warnung",
done: "Fertig",
toBeDone: "Ist noch offen"
toBeDone: "Ist noch offen",
speed: "Geschwindigkeit",
connected: "Verbunden"
},

picture: {
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/languages/portuguese.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -703,7 +703,9 @@ const pt = {
error: "Erro",
warning: "Advertência",
done: "feito",
toBeDone: "A fazer"
toBeDone: "A fazer",
speed: "Velocidade",
connected: "Conectado"
},

picture: {
Expand Down
97 changes: 68 additions & 29 deletions frontend/src/pages/Status/StatusTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import React, { useCallback, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

import CircleIcon from "@mui/icons-material/Circle";
import DesktopMacOutlinedIcon from "@mui/icons-material/DesktopMacOutlined";
import {
Button,
Chip,
CircularProgress,
Paper,
Table,
Expand Down Expand Up @@ -33,7 +36,7 @@ const getConnectionDescription = (ping) => {
ping = Number(ping);
if (ping <= FAST_CONNECTION_PING) {
return {
circleColor: "green",
circleColor: "#39F439",
connectionDescription: strings.status.fast
};
}
Expand All @@ -57,18 +60,18 @@ const getConnectionDescription = (ping) => {

function renderCircularProgressRow(service) {
return (
<TableRow key={`status-${service}-row`}>
<TableCell>{service}</TableCell>
<TableCell>
<TableRow key={`status-${service}-row`} className="status-table-row">
<TableCell className="status-table-cell first-table-cell">{service}</TableCell>
<TableCell className="status-table-cell">
<CircularProgress size={20} />
</TableCell>
<TableCell>
<TableCell className="status-table-cell">
<CircularProgress size={20} />
</TableCell>
<TableCell className="centered-table-cell">
<TableCell className="status-table-cell">
<CircularProgress size={20} />
</TableCell>
<TableCell />
<TableCell className="status-table-cell" />
</TableRow>
);
}
Expand Down Expand Up @@ -139,12 +142,23 @@ const StatusTable = (props) => {
const renderEmptyStatusRow = (service) => {
const release = filteredVersions[service].release || "?";
return (
<TableRow key={`status-${service}-row`}>
<TableCell>{service}</TableCell>
<TableCell data-test={`release-version-${service}`}>{release}</TableCell>
<TableCell />
<TableCell />
<TableCell />
<TableRow key={`status-${service}-row`} className="status-table-row">
<TableCell className="status-table-cell first-table-cell">{service}</TableCell>
<TableCell className="status-table-cell" data-test={`release-version-${service}`}>
{release}
</TableCell>
<TableCell className="status-table-cell">-</TableCell>
<TableCell className="status-table-cell">
<Chip
label="N/A"
sx={{
backgroundColor: "rgba(23, 68, 229, 0.1)",
Copy link
Collaborator

@pmolnar-dev pmolnar-dev Nov 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here I would suggest to insert both colors in the theme.js I already did that for my task and I named them like this: primaryBlue: alpha("#1744e51a", 0.1), darkGrey: "#3f434d". Then you can use sx={(theme) => ({ backgroundColor: theme.palette.primaryBlue, color: theme.palette.darkGrey })}

color: "rgba(63, 67, 77, 1)"
}}
size="small"
/>
</TableCell>
<TableCell className="status-table-cell">-</TableCell>
</TableRow>
);
};
Expand All @@ -153,19 +167,40 @@ const StatusTable = (props) => {
const ping = filteredVersions[service].ping;
const release = filteredVersions[service].release || "?";
const { circleColor, connectionDescription } = getConnectionDescription(ping);
const circle = <div className="status-circle" style={{ backgroundColor: circleColor }} />;
const circle = (
<Chip
label={strings.status.connected}
sx={{
backgroundColor: "rgba(23, 68, 229, 0.1)",
Copy link
Collaborator

@pmolnar-dev pmolnar-dev Nov 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as comment before

color: "rgba(63, 67, 77, 1)"
}}
size="small"
icon={
<CircleIcon
color="info"
sx={{
backgroundColor: "white",
color: circleColor,
borderRadius: "100%",
width: "0.75rem",
height: "0.75rem"
}}
/>
}
/>
);
if (!isFetchingVersion(service)) {
return (
<TableRow key={`status-${service}-row`}>
<TableCell>{service}</TableCell>
<TableCell data-test={`release-version-${service}`}>{release}</TableCell>
<TableCell>
<Typography>{ping ? `${ping.toFixed(0)} ms` : strings.status.no_ping_available}</Typography>
<TableRow key={`status-${service}-row`} className="status-table-row">
<TableCell className="status-table-cell first-table-cell">{service}</TableCell>
<TableCell className="status-table-cell" data-test={`release-version-${service}`}>
{release}
</TableCell>
<TableCell className="centered-table-cell">{circle}</TableCell>
<TableCell>
<Typography>{connectionDescription}</Typography>
<TableCell className="status-table-cell">
{ping ? `${ping.toFixed(0)} ms` : strings.status.no_ping_available}
</TableCell>
<TableCell className="status-table-cell">{circle}</TableCell>
<TableCell className="status-table-cell">{connectionDescription}</TableCell>
</TableRow>
);
} else {
Expand Down Expand Up @@ -200,15 +235,19 @@ const StatusTable = (props) => {
<p>This will turn off, upgrade and restart the application.</p>
</div>
)}
<Paper>
<Paper sx={{ padding: "1.5rem" }}>
<div className="title-row">
<DesktopMacOutlinedIcon fontSize="small" />
<Typography className="status-card-title">{strings.navigation.service_status}</Typography>
</div>
<Table>
<TableHead>
<TableRow>
<TableCell>{strings.status.service}</TableCell>
<TableCell>{strings.status.version}</TableCell>
<TableCell>{strings.status.ping}</TableCell>
<TableCell className="centered-table-cell">{strings.status.connection}</TableCell>
<TableCell />
<TableRow className="status-table-header">
<TableCell className="status-header-cell first-table-cell">{strings.status.service}</TableCell>
<TableCell className="status-header-cell">{strings.status.version}</TableCell>
<TableCell className="status-header-cell">{strings.status.ping}</TableCell>
<TableCell className="status-header-cell">{strings.status.connection}</TableCell>
<TableCell className="status-header-cell">{strings.status.speed}</TableCell>
</TableRow>
</TableHead>
<TableBody data-test="status-table-body">
Expand Down
44 changes: 44 additions & 0 deletions frontend/src/pages/Status/StatusTable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,47 @@
.title-row {
display: flex;
margin-bottom: 1.5rem;
align-items: center;
}

.status-header-cell {
width: 15%;
padding: 0;
font-weight: 400;
font-size: 0.75rem;
line-height: 1.05rem;
vertical-align: top;
border-bottom: 1px solid rgba(63, 67, 77, 0.1);
Copy link
Collaborator

@pmolnar-dev pmolnar-dev Nov 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would use separate border-color and add it like this: border-color: var(--mui-palette-menuBorder) and in theme it is menuBorder: alpha("#3f434d1a", 0.1),

}

.status-table-cell {
width: 15%;
padding: 0;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.269rem;
border-bottom: 1px solid rgba(63, 67, 77, 0.1);
Copy link
Collaborator

@pmolnar-dev pmolnar-dev Nov 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as previous comment

}

.first-table-cell {
width: 40%;
}

.status-table-header {
height: 2rem;
}

.status-table-row {
height: 3rem;
}

.status-card-title {
margin-left: 0.5rem;
font-weight: 600;
line-height: 1.688rem;
font-size: 1.125rem;
}

.status-circle {
background-color: var(--mui-palette-primary-secondary);
width: 1.25rem;
Expand Down