paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 17 Packages Projects Releases Wiki Activity

feat(cicd-statistics): Allow multi-step progress when loading statistics

Browse Source 
Loading can take a pretty long time, and often in several steps, such as "loading builds" followed by "loading pipelines per build".

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>
This commit is contained in:
Gustaf Räntilä
2022-02-07 12:56:21 +01:00
committed by blam
parent d5acd9f035
commit 365e3f87ad
5 changed files with 144 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/cicd-statistics/src/apis/types.ts
+13 -5
View File
@@ -220,12 +220,20 @@ export interface CicdState {
*
* This can be called at any rate. Rate limiting (debouncing) is implemented in
* the UI.
*
* Optionally this can signal multiple progresses in several steps
*/
export type UpdateProgress = (
completed: number,
total: number,
started?: number,
) => void;
export interface UpdateProgress {
(completed: number, total: number, started?: number): void;
(
steps: Array<{
title: string;
completed: number;
total: number;
started?: number;
}>,
): void;
}
/**
* When reading configuration, the Api can return a custom settings depending on
plugins/cicd-statistics/src/components/progress.tsx
+91 -22
View File
@@ -14,12 +14,23 @@
* limitations under the License.
*/
import React, { DependencyList } from 'react';
import React, { CSSProperties, DependencyList } from 'react';
import { useAsync } from 'react-use';
import { Box, LinearProgress } from '@material-ui/core';
import Timeline from '@material-ui/lab/Timeline';
import TimelineItem from '@material-ui/lab/TimelineItem';
import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
import TimelineConnector from '@material-ui/lab/TimelineConnector';
import TimelineContent from '@material-ui/lab/TimelineContent';
import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
import TimelineDot, { TimelineDotProps } from '@material-ui/lab/TimelineDot';
import Alert from '@material-ui/lab/Alert';
import { useApp } from '@backstage/core-plugin-api';
const stepProgressStyle: CSSProperties = {
marginTop: 6,
};
// Matching react-use, only has loading/error/value
type AsyncState<T> =
| {
@@ -43,24 +54,33 @@ type AsyncState<T> =
value: T;
};
export type ProgressAsLoading = {
export interface ProgressStep extends ProgessAsSingle {
title: string;
}
export interface ProgessAsSteps {
steps: Array<ProgressStep>;
}
export interface ProgessAsSingle<T = number> {
progress?: T;
progressBuffer?: T;
}
export type ProgessState<T = number> =
| ProgessAsSingle<T>
| (T extends number ? ProgessAsSteps : { steps?: undefined });
export type ProgressAsLoading = ProgessState & {
loading: true;
progress?: number;
progressBuffer?: number;
error?: undefined;
value?: undefined;
};
export type ProgressAsError = {
export type ProgressAsError = ProgessState<undefined> & {
loading?: false | undefined;
progress?: undefined;
progressBuffer?: undefined;
error: Error;
value?: undefined;
};
export type ProgressAsValue<T> = {
export type ProgressAsValue<T> = ProgessState<undefined> & {
loading?: false | undefined;
progress?: undefined;
progressBuffer?: undefined;
error?: undefined;
value: T;
};
@@ -69,7 +89,7 @@ export type ProgressAsValue<T> = {
* An AsyncState but with the addition of progress (decimal 0-1) to allow
* rendering a progress bar while waiting.
*/
export type Progress<T> =
export type ProgressType<T> =
| ProgressAsLoading
| ProgressAsError
| ProgressAsValue<T>;
@@ -79,8 +99,8 @@ const sentry = Symbol();
/**
* Casts an AsyncState or Progress into its non-succeeded sub types
*/
type Unsuccessful<S extends Progress<any> | AsyncState<any>> =
S extends Progress<any>
type Unsuccessful<S extends ProgressType<any> | AsyncState<any>> =
S extends ProgressType<any>
? ProgressAsLoading | ProgressAsError
: Omit<AsyncState<any>, 'value'>;
@@ -92,7 +112,7 @@ type Unsuccessful<S extends Progress<any> | AsyncState<any>> =
* invoked for a new layer of async state with the dependent (upstream) success
* result as argument.
*/
export function useAsyncChain<S extends Progress<any> | AsyncState<any>, R>(
export function useAsyncChain<S extends ProgressType<any> | AsyncState<any>, R>(
parentState: S,
fn: (value: NonNullable<S['value']>) => Promise<R>,
deps: DependencyList,
@@ -111,7 +131,7 @@ export function useAsyncChain<S extends Progress<any> | AsyncState<any>, R>(
}
export function renderFallbacks<T>(
state: Progress<T> | AsyncState<T>,
state: ProgressType<T> | AsyncState<T>,
success: (value: T) => JSX.Element,
): JSX.Element {
if (state.loading) {
@@ -130,18 +150,67 @@ export function ViewProgress({
}) {
const { Progress } = useApp().getComponents();
const stateAsProgress = state as ProgressAsLoading;
const stateAsSingleProgress = state as ProgessAsSingle;
const stateAsStepProgress = state as ProgessAsSteps;
if (!stateAsProgress.progress && !stateAsProgress.progressBuffer) {
if (
!stateAsSingleProgress.progress &&
!stateAsSingleProgress.progressBuffer &&
!stateAsStepProgress.steps
) {
// Simple spinner
return <Progress />;
} else if (stateAsSingleProgress.progress !== undefined) {
// Simple _single_ progress
return (
<Box sx={{ width: '100%' }}>
<LinearProgress
variant="buffer"
value={(stateAsSingleProgress.progress ?? 0) * 100}
valueBuffer={(stateAsSingleProgress.progressBuffer ?? 0) * 100}
/>
</Box>
);
}
// Multi-step progresses
return (
<Box sx={{ width: '100%' }}>
<LinearProgress
variant="buffer"
value={(stateAsProgress.progress ?? 0) * 100}
valueBuffer={(stateAsProgress.progressBuffer ?? 0) * 100}
/>
<Timeline>
{stateAsStepProgress.steps.map((step, index) => (
<TimelineItem key={index}>
<TimelineOppositeContent>{step.title}</TimelineOppositeContent>
<TimelineSeparator>
<TimelineDot color={getDotColor(step)} />
{index < stateAsStepProgress.steps.length - 1 ? (
<TimelineConnector />
) : null}
</TimelineSeparator>
<TimelineContent>
{!step.progress && !step.progressBuffer ? null : (
<LinearProgress
style={stepProgressStyle}
variant="buffer"
value={(step.progress ?? 0) * 100}
valueBuffer={(step.progressBuffer ?? 0) * 100}
/>
)}
</TimelineContent>
</TimelineItem>
))}
</Timeline>
</Box>
);
}
function getDotColor(step: ProgressStep): TimelineDotProps['color'] {
const progress = step.progress ?? 0;
if (progress >= 1) {
return 'primary';
} else if (progress > 0) {
return 'secondary';
}
return 'grey';
}
plugins/cicd-statistics/src/entity-page.tsx
+4
View File
@@ -16,6 +16,7 @@
import React, { useCallback, useState, useMemo, useEffect } from 'react';
import { Grid, makeStyles, Theme } from '@material-ui/core';
import { Alert } from '@material-ui/lab';
import { useEntity } from '@backstage/plugin-catalog-react';
import { useApi, errorApiRef } from '@backstage/core-plugin-api';
import { DateTime } from 'luxon';
@@ -182,6 +183,9 @@ function CicdCharts(props: CicdChartsProps) {
<Grid item xs={12} lg={10} className={classes.pane}>
{renderFallbacks(chartableStagesState, chartableStages => (
<>
{chartableStages.stages.size > 0 ? null : (
<Alert severity="info">No data</Alert>
)}
{!statisticsState.value?.builds?.length ||
!chartableStagesState.value?.daily?.values?.length ? null : (
<StatusChart analysis={chartableStagesState.value} />
plugins/cicd-statistics/src/hooks/use-cicd-configuration.ts
+3 -3
View File
@@ -18,15 +18,15 @@ import { useState, useEffect } from 'react';
import { useEntity } from '@backstage/plugin-catalog-react';
import { CicdConfiguration, statusTypes } from '../apis';
import { Progress } from '../components/progress';
import { ProgressType } from '../components/progress';
import { defaultFormatStageName } from '../utils/stage-names';
import { useCicdStatisticsApi } from './use-cicd-statistics-api';
export function useCicdConfiguration(): Progress<CicdConfiguration> {
export function useCicdConfiguration(): ProgressType<CicdConfiguration> {
const cicdStatisticsApi = useCicdStatisticsApi();
const { entity } = useEntity();
const [state, setState] = useState<Progress<CicdConfiguration>>({
const [state, setState] = useState<ProgressType<CicdConfiguration>>({
loading: true,
});
plugins/cicd-statistics/src/hooks/use-cicd-statistics.ts
+33 -6
View File
@@ -24,8 +24,9 @@ import {
AbortError,
FilterStatusType,
FilterBranchType,
UpdateProgress,
} from '../apis';
import { Progress } from '../components/progress';
import { ProgressType } from '../components/progress';
import { useCicdStatisticsApi } from './use-cicd-statistics-api';
export interface UseCicdStatisticsOptions {
@@ -39,7 +40,7 @@ export interface UseCicdStatisticsOptions {
export function useCicdStatistics(
options: UseCicdStatisticsOptions,
): Progress<CicdState> {
): ProgressType<CicdState> {
const {
entity,
abortController,
@@ -49,7 +50,9 @@ export function useCicdStatistics(
filterType,
} = options;
const [state, setState] = useState<Progress<CicdState>>({ loading: true });
const [state, setState] = useState<ProgressType<CicdState>>({
loading: true,
});
const cicdStatisticsApi = useCicdStatisticsApi();
@@ -62,15 +65,39 @@ export function useCicdStatistics(
let mounted = true;
let completed = false; // successfully or failed
const updateProgress = throttle((count, total, started = 0) => {
if (mounted && !completed) {
const updateProgressImpl: UpdateProgress = (_count, _total?, _started?) => {
if (!mounted || completed) {
return;
}
if (Array.isArray(_count)) {
// Multi-progress
setState({
loading: true,
steps: _count.map(step => ({
title: step.title,
progress: !step.total ? 0 : step.completed / step.total,
progressBuffer: !step.total ? 0 : (step.started ?? 0) / step.total,
})),
});
} else {
// Single-progress
const count = _count;
const total = _total as number;
const started = (_started as number) ?? 0;
setState({
loading: true,
progress: !total ? 0 : count / total,
progressBuffer: !total ? 0 : started / total,
});
}
}, 200);
};
const updateProgress = throttle(
updateProgressImpl,
200,
// throttle doesn't handle types of multi-signature functions
) as any as UpdateProgress;
const fetchOptions: FetchBuildsOptions = {
entity,