services/workbench2/src/components/subprocess-progress-bar/subprocess-progress-bar.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React, { useEffect, useState } from "react";
   6 import { StyleRulesCallback, Tooltip, WithStyles, withStyles } from "@material-ui/core";
   7 import { CProgressStacked, CProgress } from '@coreui/react';
   8 import { useAsyncInterval } from "common/use-async-interval";
   9 import { Process } from "store/processes/process";
  10 import { connect } from "react-redux";
  11 import { Dispatch } from "redux";
  12 import { fetchProcessProgressBarStatus } from "store/subprocess-panel/subprocess-panel-actions";
  13 import { ProcessStatusFilter, serializeOnlyProcessTypeFilters } from "store/resource-type-filters/resource-type-filters";
  14 import { ProjectResource } from "models/project";
  15 import { getDataExplorer } from "store/data-explorer/data-explorer-reducer";
  16 import { RootState } from "store/store";
  17 import { ProcessResource } from "models/process";
  18 import { getDataExplorerColumnFilters } from "store/data-explorer/data-explorer-middleware-service";
  19 import { ProjectPanelRunColumnNames } from "views/project-panel/project-panel-run";
  20 import { DataColumns } from "components/data-table/data-table";
  21
  22 type CssRules = 'progressStacked';
  23
  24 const styles: StyleRulesCallback<CssRules> = (theme) => ({
  25     progressStacked: {
  26         border: "1px solid gray",
  27         height: "10px",
  28         // Override stripe color to be close to white
  29         "& .progress-bar-striped": {
  30             backgroundImage:
  31                 "linear-gradient(45deg,rgba(255,255,255,.80) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.80) 50%,rgba(255,255,255,.80) 75%,transparent 75%,transparent)",
  32         },
  33     },
  34 });
  35
  36 export interface ProgressBarDataProps {
  37     parentResource: Process | ProjectResource | undefined;
  38     dataExplorerId?: string;
  39     typeFilter?: string;
  40 }
  41
  42 export interface ProgressBarActionProps {
  43     fetchProcessProgressBarStatus: (parentResource: Process | ProjectResource, typeFilter?: string) => Promise<ProgressBarStatus | undefined>;
  44 }
  45
  46 type ProgressBarProps = ProgressBarDataProps & ProgressBarActionProps & WithStyles<CssRules>;
  47
  48 export type ProgressBarCounts = {
  49     [ProcessStatusFilter.COMPLETED]: number;
  50     [ProcessStatusFilter.RUNNING]: number;
  51     [ProcessStatusFilter.FAILED]: number;
  52     [ProcessStatusFilter.QUEUED]: number;
  53 };
  54
  55 export type ProgressBarStatus = {
  56     counts: ProgressBarCounts;
  57     isRunning: boolean;
  58 };
  59
  60 const mapStateToProps = (state: RootState, props: ProgressBarDataProps) => {
  61     let typeFilter: string | undefined = undefined;
  62
  63     if (props.dataExplorerId) {
  64         const dataExplorerState = getDataExplorer(state.dataExplorer, props.dataExplorerId);
  65         const columns = dataExplorerState.columns as DataColumns<string, ProcessResource>;
  66         typeFilter = serializeOnlyProcessTypeFilters(getDataExplorerColumnFilters(columns, ProjectPanelRunColumnNames.TYPE));
  67     }
  68
  69     return { typeFilter };
  70 };
  71
  72 const mapDispatchToProps = (dispatch: Dispatch): ProgressBarActionProps => ({
  73     fetchProcessProgressBarStatus: (parentResource: Process | ProjectResource, typeFilter?: string) => {
  74         return dispatch<any>(fetchProcessProgressBarStatus(parentResource, typeFilter));
  75     },
  76 });
  77
  78 export const SubprocessProgressBar = connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(
  79     ({ parentResource, typeFilter, classes, fetchProcessProgressBarStatus }: ProgressBarProps) => {
  80
  81         const [progressCounts, setProgressData] = useState<ProgressBarCounts | undefined>(undefined);
  82         const [isRunning, setIsRunning] = useState<boolean>(false);
  83
  84         useAsyncInterval(async () => {
  85             if (parentResource) {
  86                 fetchProcessProgressBarStatus(parentResource, typeFilter)
  87                     .then(result => {
  88                         if (result) {
  89                             setProgressData(result.counts);
  90                             setIsRunning(result.isRunning);
  91                         }
  92                     });
  93             }
  94         }, isRunning ? 5000 : null);
  95
  96         useEffect(() => {
  97             if (!isRunning && parentResource) {
  98                 fetchProcessProgressBarStatus(parentResource, typeFilter)
  99                     .then(result => {
 100                         if (result) {
 101                             setProgressData(result.counts);
 102                             setIsRunning(result.isRunning);
 103                         }
 104                     });
 105             }
 106         }, [fetchProcessProgressBarStatus, isRunning, parentResource, typeFilter]);
 107
 108         let tooltip = "";
 109         if (progressCounts) {
 110             let total = 0;
 111             [ProcessStatusFilter.COMPLETED,
 112             ProcessStatusFilter.RUNNING,
 113             ProcessStatusFilter.FAILED,
 114             ProcessStatusFilter.QUEUED].forEach(psf => {
 115                 if (progressCounts[psf] > 0) {
 116                     if (tooltip.length > 0) { tooltip += ", "; }
 117                     tooltip += `${progressCounts[psf]} ${psf}`;
 118                     total += progressCounts[psf];
 119                 }
 120             });
 121             if (total > 0) {
 122                 if (tooltip.length > 0) { tooltip += ", "; }
 123                 tooltip += `${total} Total`;
 124             }
 125         }
 126
 127         return progressCounts !== undefined && getStatusTotal(progressCounts) > 0 ? <Tooltip title={tooltip}>
 128             <CProgressStacked className={classes.progressStacked}>
 129                 <CProgress height={10} color="success"
 130                     value={getStatusPercent(progressCounts, ProcessStatusFilter.COMPLETED)} />
 131                 <CProgress height={10} color="success" variant="striped"
 132                     value={getStatusPercent(progressCounts, ProcessStatusFilter.RUNNING)} />
 133                 <CProgress height={10} color="danger"
 134                     value={getStatusPercent(progressCounts, ProcessStatusFilter.FAILED)} />
 135                 <CProgress height={10} color="secondary" variant="striped"
 136                     value={getStatusPercent(progressCounts, ProcessStatusFilter.QUEUED)} />
 137             </CProgressStacked>
 138         </Tooltip> : <></>;
 139     }
 140 ));
 141
 142 const getStatusTotal = (progressCounts: ProgressBarCounts) =>
 143     (Object.keys(progressCounts).reduce((accumulator, key) => (accumulator += progressCounts[key]), 0));
 144
 145 /**
 146  * Gets the integer percent value for process status
 147  */
 148 const getStatusPercent = (progressCounts: ProgressBarCounts, status: keyof ProgressBarCounts) =>
 149     (progressCounts[status] / getStatusTotal(progressCounts) * 100);