Skip to content
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

Jump to bottom

BE-340 Display health status of peers and orderers - FrontEnd #342

Merged
merged 2 commits into from Feb 7, 2023
Merged

BE-340 Display health status of peers and orderers - FrontEnd #342

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cc7120d
Modified the PeersHealth.js component to include the status functonal…
saksham1203 Feb 1, 2023
58596c5
Added '@emotion/react','@emotion/styled','@mui/material' dependencies…
saksham1203 Feb 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
79 changes: 63 additions & 16 deletions client/src/components/Lists/PeersHealth.js
View file
Open in desktop
Expand Up @@ -6,40 +6,87 @@ import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import ReactTable from '../Styled/Table';
import { peerStatusType } from '../types';
import Tooltip from "@mui/material/Tooltip";
import styled from "@emotion/styled";
Comment on lines +9 to +10
Copy link
Contributor

Choose a reason for hiding this comment

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

Q: are these libraries already added to project?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

No, earlier it was not there

Copy link
Contributor

Choose a reason for hiding this comment

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

these are not available in the package.json

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added to package.json file with required libraries .


/* eslint-disable */

const styles = theme => ({
table: {
height: 335,
overflowY: 'scroll'
height: 335,
overflowY: "scroll"
},
center: {
textAlign: 'left'
textAlign: "left"
},
circle: {
width: "20px",
height: "20px",
display: "inline-block",
borderRadius: "50%"
},
down: {
backgroundColor: "red"
},
up: {
backgroundColor: "green"
}
});

});

const Status = styled.span`
&.blink {
animation: blink 1s infinite;
}
@keyframes blink {
0% {
transform: scale(1);
opacity: 0.1;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.1;
}
}
`;

/* eslint-enable */

const PeersHealth = ({ peerStatus, classes }) => {
const statusTooltip = title => {
return (
<Tooltip
title={
title === "DOWN" ? "Offline" : title === "UP" ? "Online" : "Fetching Status"
}
placement="top"
>
<Status
className={`${classes.circle} ${
title === "DOWN" ? classes.down : classes.up
} ${!title && "blink"}`}
/>
</Tooltip>
);
};
const columnHeaders = [
{
Header: 'Peer Name',
accessor: 'server_hostname',
filterAll: false,
className: classes.center
} /*
{
Header: 'Status',
accessor: 'status',
filterAll: false,
className: classes.center,
Cell: row => (
<Badge color="success">
{row.value}
</Badge>
),
},*/
},
{
Header: "Status",
accessor: "status",
filterAll: false,
className: classes.center,
Cell: row => statusTooltip(row.value)
}
];
return (
<div>
Expand Down