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 all 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
91 changes: 62 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,20 @@ 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={(theme) => ({ backgroundColor: theme.palette.primaryBlue, color: theme.palette.darkGrey })}
size="small"
/>
</TableCell>
<TableCell className="status-table-cell">-</TableCell>
</TableRow>
);
};
Expand All @@ -153,19 +164,37 @@ 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={(theme) => ({ backgroundColor: theme.palette.primaryBlue, color: theme.palette.darkGrey })}
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 +229,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
46 changes: 46 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,49 @@
.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;
border-color: var(--mui-palette-menuBorder);
}

.status-table-cell {
width: 15%;
padding: 0;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.269rem;
border-bottom: 1px solid;
border-color: var(--mui-palette-menuBorder);
}

.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
7 changes: 5 additions & 2 deletions frontend/src/themes/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import amber from "@mui/material/colors/amber";
import red from "@mui/material/colors/deepOrange";
import grey from "@mui/material/colors/grey";
import blue from "@mui/material/colors/indigo";
import { experimental_extendTheme as extendTheme } from "@mui/material/styles";
import { alpha, experimental_extendTheme as extendTheme } from "@mui/material/styles";

export const muiTheme = extendTheme({
transitions: {
Expand All @@ -26,7 +26,10 @@ export const muiTheme = extendTheme({
selected: blue[900]
},
tonalOffset: 0.6,
empty: { state: grey[100] }
empty: { state: grey[100] },
primaryBlue: alpha("#1744e51a", 0.1),
darkGrey: "#3f434d",
menuBorder: alpha("#3f434d1a", 0.1)
},
components: {
MuiTextField: {
Expand Down