65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import styled from 'styled-components';
|
|
import colors from 'styles/colors';
|
|
import { Card } from 'components/Form/Card';
|
|
|
|
const RouteRow = styled.div`
|
|
text-align: center;
|
|
width: fit-content;
|
|
margin: 0 auto;
|
|
.ipName {
|
|
font-size: 1rem;
|
|
}
|
|
`;
|
|
|
|
const RouteTimings = styled.div`
|
|
p {
|
|
margin: 0 auto;
|
|
}
|
|
.arrow {
|
|
font-size: 2.5rem;
|
|
color: ${colors.primary};
|
|
margin-top: -1rem;
|
|
}
|
|
.times {
|
|
font-size: 0.85rem;
|
|
color: ${colors.textColorSecondary};
|
|
}
|
|
.completed {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
`;
|
|
|
|
const cardStyles = ``;
|
|
|
|
const TraceRouteCard = (props: { data: any, title: string, actionButtons: any }): JSX.Element => {
|
|
const traceRouteResponse = props.data;
|
|
const routes = traceRouteResponse.result;
|
|
return (
|
|
<Card heading={props.title} actionButtons={props.actionButtons} styles={cardStyles}>
|
|
{routes.filter((x: any) => x).map((route: any, index: number) => (
|
|
<RouteRow key={index}>
|
|
<span className="ipName">{Object.keys(route)[0]}</span>
|
|
<RouteTimings>
|
|
{route[Object.keys(route)[0]].map((time: any, packetIndex: number) => (
|
|
<p className="times" key={`timing-${packetIndex}-${time}`}>
|
|
{ route[Object.keys(route)[0]].length > 1 && (<>Packet #{packetIndex + 1}:</>) }
|
|
Took {time} ms
|
|
</p>
|
|
))}
|
|
<p className="arrow">↓</p>
|
|
</RouteTimings>
|
|
</RouteRow>
|
|
)
|
|
)}
|
|
<RouteTimings>
|
|
<p className="completed">
|
|
Round trip completed in {traceRouteResponse.timeTaken} ms
|
|
</p>
|
|
</RouteTimings>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default TraceRouteCard;
|