mirror of
https://github.com/Lissy93/web-check.git
synced 2025-01-10 08:19:28 +01:00
Write a progress bar component, to show load status
This commit is contained in:
Alicia Sykes
parent
8d8307e60e
commit
590178983e
348
src/components/misc/ProgressBar.tsx
Normal file
348
src/components/misc/ProgressBar.tsx
Normal file
@ -0,0 +1,348 @@
|
|||||||
|
import styled from 'styled-components';
|
||||||
|
import colors from 'styles/colors';
|
||||||
|
import Card from 'components/Form/Card';
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
|
||||||
|
const LoadCard = styled(Card)`
|
||||||
|
margin: 0 auto 1rem auto;
|
||||||
|
width: 95vw;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
&.hidden {
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProgressBarContainer = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
height: 0.5rem;
|
||||||
|
background: ${colors.bgShadowColor};
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ProgressBarSegment = styled.div<{ color: string, color2: string, width: number }>`
|
||||||
|
height: 1rem;
|
||||||
|
display: inline-block;
|
||||||
|
width: ${props => props.width}%;
|
||||||
|
background: ${props => props.color};
|
||||||
|
background: ${props => props.color2 ?
|
||||||
|
`repeating-linear-gradient( 315deg, ${props.color}, ${props.color} 3px, ${props.color2} 3px, ${props.color2} 6px )`
|
||||||
|
: props.color};
|
||||||
|
transition: width 0.5s ease-in-out;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Details = styled.details`
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
summary {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
summary:before {
|
||||||
|
content: "►";
|
||||||
|
position: absolute;
|
||||||
|
margin-left: -1rem;
|
||||||
|
color: ${colors.primary};
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
&[open] summary:before {
|
||||||
|
content: "▼";
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0.25rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
p.error {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
opacity: 0.75;
|
||||||
|
color: ${colors.danger};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StatusInfoWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.run-status {
|
||||||
|
color: ${colors.textColorSecondary};
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const SummaryContainer = styled.div`
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
b {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
&.error-info {
|
||||||
|
color: ${colors.danger};
|
||||||
|
}
|
||||||
|
&.success-info {
|
||||||
|
color: ${colors.success};
|
||||||
|
}
|
||||||
|
&.loading-info {
|
||||||
|
color: ${colors.info};
|
||||||
|
}
|
||||||
|
.skipped {
|
||||||
|
margin-left: 0.75rem;
|
||||||
|
color: ${colors.warning};
|
||||||
|
}
|
||||||
|
.success {
|
||||||
|
margin-left: 0.75rem;
|
||||||
|
color: ${colors.success};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const DismissButton = styled.button`
|
||||||
|
width: fit-content;
|
||||||
|
position: absolute;
|
||||||
|
right: 1rem;
|
||||||
|
bottom: 1rem;
|
||||||
|
background: ${colors.background};
|
||||||
|
color: ${colors.textColorSecondary};
|
||||||
|
border: none;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: PTMono;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
color: ${colors.primary};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export type LoadingState = 'success' | 'loading' | 'skipped' | 'error' | 'timed-out';
|
||||||
|
|
||||||
|
export interface LoadingJob {
|
||||||
|
name: string,
|
||||||
|
state: LoadingState,
|
||||||
|
error?: string,
|
||||||
|
timeTaken?: number,
|
||||||
|
}
|
||||||
|
|
||||||
|
const jobNames = [
|
||||||
|
'get-ip',
|
||||||
|
'ssl',
|
||||||
|
'dns',
|
||||||
|
'cookies',
|
||||||
|
'robots-txt',
|
||||||
|
'headers',
|
||||||
|
'lighthouse',
|
||||||
|
'location',
|
||||||
|
// 'server-info',
|
||||||
|
'whois',
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export const initialJobs = jobNames.map((job: string) => {
|
||||||
|
return {
|
||||||
|
name: job,
|
||||||
|
state: 'loading' as LoadingState,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export const calculateLoadingStatePercentages = (loadingJobs: LoadingJob[]): Record<LoadingState | string, number> => {
|
||||||
|
const totalJobs = loadingJobs.length;
|
||||||
|
|
||||||
|
// Initialize count object
|
||||||
|
const stateCount: Record<LoadingState, number> = {
|
||||||
|
'success': 0,
|
||||||
|
'loading': 0,
|
||||||
|
'skipped': 0,
|
||||||
|
'error': 0,
|
||||||
|
'timed-out': 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Count the number of each state
|
||||||
|
loadingJobs.forEach((job) => {
|
||||||
|
stateCount[job.state] += 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Convert counts to percentages
|
||||||
|
const statePercentage: Record<LoadingState, number> = {
|
||||||
|
'success': (stateCount['success'] / totalJobs) * 100,
|
||||||
|
'loading': (stateCount['loading'] / totalJobs) * 100,
|
||||||
|
'skipped': (stateCount['skipped'] / totalJobs) * 100,
|
||||||
|
'error': (stateCount['error'] / totalJobs) * 100,
|
||||||
|
'timed-out': (stateCount['timed-out'] / totalJobs) * 100,
|
||||||
|
};
|
||||||
|
|
||||||
|
return statePercentage;
|
||||||
|
};
|
||||||
|
|
||||||
|
const MillisecondCounter = (props: {isDone: boolean}) => {
|
||||||
|
const { isDone } = props;
|
||||||
|
const [milliseconds, setMilliseconds] = useState<number>(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let timer: NodeJS.Timeout;
|
||||||
|
// Start the timer as soon as the component mounts
|
||||||
|
if (!isDone) {
|
||||||
|
timer = setInterval(() => {
|
||||||
|
setMilliseconds(milliseconds => milliseconds + 100);
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
// Clean up the interval on unmount
|
||||||
|
return () => {
|
||||||
|
clearInterval(timer);
|
||||||
|
};
|
||||||
|
}, [isDone]); // If the isDone prop changes, the effect will re-run
|
||||||
|
|
||||||
|
return <span>{milliseconds} ms</span>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const RunningText = (props: { state: LoadingJob[], count: number }): JSX.Element => {
|
||||||
|
const loadingTasksCount = jobNames.length - props.state.filter((val: LoadingJob) => val.state === 'loading').length;
|
||||||
|
const isDone = loadingTasksCount >= jobNames.length;
|
||||||
|
return (
|
||||||
|
<p className="run-status">
|
||||||
|
{ isDone ? 'Finished in ' : `Running ${loadingTasksCount} of ${jobNames.length} jobs - ` }
|
||||||
|
<MillisecondCounter isDone={isDone} />
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const SummaryText = (props: { state: LoadingJob[], count: number }): JSX.Element => {
|
||||||
|
const totalJobs = jobNames.length;
|
||||||
|
let failedTasksCount = props.state.filter((val: LoadingJob) => val.state === 'error').length;
|
||||||
|
let loadingTasksCount = props.state.filter((val: LoadingJob) => val.state === 'loading').length;
|
||||||
|
let skippedTasksCount = props.state.filter((val: LoadingJob) => val.state === 'skipped').length;
|
||||||
|
let successTasksCount = props.state.filter((val: LoadingJob) => val.state === 'success').length;
|
||||||
|
|
||||||
|
const skippedInfo = skippedTasksCount > 0 ? (<span className="skipped">{skippedTasksCount} skipped</span>) : null;
|
||||||
|
const successInfo = skippedTasksCount > 0 ? (<span className="success">{successTasksCount} successful</span>) : null;
|
||||||
|
|
||||||
|
if (failedTasksCount > 0) {
|
||||||
|
return (
|
||||||
|
<SummaryContainer className="error-info">
|
||||||
|
<b>{failedTasksCount} Job{failedTasksCount !== 1 ? 's' : ''} Failed</b>
|
||||||
|
{skippedInfo}
|
||||||
|
{successInfo}
|
||||||
|
</SummaryContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loadingTasksCount > 0) {
|
||||||
|
return (
|
||||||
|
<SummaryContainer className="loading-info">
|
||||||
|
<b>Loading {loadingTasksCount} / {totalJobs} Jobs</b>
|
||||||
|
{skippedInfo}
|
||||||
|
</SummaryContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (failedTasksCount === 0) {
|
||||||
|
return (
|
||||||
|
<SummaryContainer className="success-info">
|
||||||
|
<b>{successTasksCount} Jobs Completed Successfully</b>
|
||||||
|
{skippedInfo}
|
||||||
|
</SummaryContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SummaryContainer className="misc-info">Other</SummaryContainer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ProgressLoader = (props: { loadStatus: LoadingJob[] }): JSX.Element => {
|
||||||
|
const [ hideLoader, setHideLoader ] = useState<boolean>(false);
|
||||||
|
const loadStatus = props.loadStatus;
|
||||||
|
const percentages = calculateLoadingStatePercentages(loadStatus);
|
||||||
|
|
||||||
|
const loadingTasksCount = jobNames.length - loadStatus.filter((val: LoadingJob) => val.state === 'loading').length;
|
||||||
|
const isDone = loadingTasksCount >= jobNames.length;
|
||||||
|
|
||||||
|
const makeBarColor = (colorCode: string): [string, string] => {
|
||||||
|
const amount = 10;
|
||||||
|
const darkerColorCode = '#' + colorCode.replace(/^#/, '').replace(
|
||||||
|
/../g,
|
||||||
|
colorCode => ('0' + Math.min(255, Math.max(0, parseInt(colorCode, 16) - amount)).toString(16)).slice(-2),
|
||||||
|
);
|
||||||
|
return [colorCode, darkerColorCode];
|
||||||
|
};
|
||||||
|
|
||||||
|
const barColors: Record<LoadingState | string, [string, string]> = {
|
||||||
|
'success': isDone ? makeBarColor(colors.primary) : makeBarColor(colors.success),
|
||||||
|
'loading': makeBarColor(colors.info),
|
||||||
|
'skipped': makeBarColor(colors.warning),
|
||||||
|
'error': makeBarColor(colors.danger),
|
||||||
|
'timed-out': makeBarColor(colors.neutral),
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusEmoji = (state: LoadingState): string => {
|
||||||
|
switch (state) {
|
||||||
|
case 'success':
|
||||||
|
return '✅';
|
||||||
|
case 'loading':
|
||||||
|
return '🔄';
|
||||||
|
case 'skipped':
|
||||||
|
return '⏭️';
|
||||||
|
case 'error':
|
||||||
|
return '❌';
|
||||||
|
case 'timed-out':
|
||||||
|
return '⏸️';
|
||||||
|
default:
|
||||||
|
return '❓';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LoadCard className={hideLoader ? 'hidden' : ''}>
|
||||||
|
|
||||||
|
<ProgressBarContainer>
|
||||||
|
{Object.keys(percentages).map((state: string | LoadingState) =>
|
||||||
|
<ProgressBarSegment
|
||||||
|
color={barColors[state][0]}
|
||||||
|
color2={barColors[state][1]}
|
||||||
|
title={`${state} (${Math.round(percentages[state])}%)`}
|
||||||
|
width={percentages[state]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</ProgressBarContainer>
|
||||||
|
|
||||||
|
<StatusInfoWrapper>
|
||||||
|
<SummaryText state={loadStatus} count={loadStatus.length} />
|
||||||
|
<RunningText state={loadStatus} count={loadStatus.length} />
|
||||||
|
</StatusInfoWrapper>
|
||||||
|
|
||||||
|
<Details>
|
||||||
|
<summary>Show Details</summary>
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
loadStatus.map(({ name, state, timeTaken }: LoadingJob) => {
|
||||||
|
return (
|
||||||
|
<li key={name}>
|
||||||
|
<b>{getStatusEmoji(state)} {name}</b>
|
||||||
|
<span style={{color : barColors[state][0]}}> ({state})</span>.
|
||||||
|
<i>{timeTaken ? ` Took ${timeTaken} ms` : '' }</i>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
{ loadStatus.filter((val: LoadingJob) => val.state === 'error').length > 0 &&
|
||||||
|
<p className="error">
|
||||||
|
<b>Check the browser console for logs and more info</b><br />
|
||||||
|
It's normal for some jobs to fail, either because the host doesn't return the required info,
|
||||||
|
or restrictions in the lambda function, or hitting an API limit.
|
||||||
|
</p>}
|
||||||
|
</Details>
|
||||||
|
<DismissButton onClick={() => setHideLoader(true)}>Dismiss</DismissButton>
|
||||||
|
</LoadCard>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default ProgressLoader;
|
||||||
Loading…
Reference in New Issue
Block a user