15012: Adds run time column to all_processes. Fixes created_at column's label.

[arvados-workbench2.git] / src / views-components / data-explorer / renderers.tsx

diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx
index 4179d60eb3f25120dbd0940eb0f93f2159f7207f..90d8d977a2ef5103e8c227cd9935fddbee4a092c 100644 (file)
--- a/src/views-components/data-explorer/renderers.tsx
+++ b/src/views-components/data-explorer/renderers.tsx
@@ -7,13 +7,13 @@ import { Grid, Typography, withStyles, Tooltip, IconButton, Checkbox } from '@ma
 import { FavoriteStar, PublicFavoriteStar } from '../favorite-star/favorite-star';
 import { ResourceKind, TrashableResource } from '~/models/resource';
 import { ProjectIcon, CollectionIcon, ProcessIcon, DefaultIcon, WorkflowIcon, ShareIcon } from '~/components/icon/icon';
-import { formatDate, formatFileSize } from '~/common/formatters';
+import { formatDate, formatFileSize, formatTime } from '~/common/formatters';
 import { resourceLabel } from '~/common/labels';
 import { connect, DispatchProp } from 'react-redux';
 import { RootState } from '~/store/store';
 import { getResource } from '~/store/resources/resources';
 import { GroupContentsResource } from '~/services/groups-service/groups-service';
-import { getProcess, Process, getProcessStatus, getProcessStatusColor } from '~/store/processes/process';
+import { getProcess, Process, getProcessStatus, getProcessStatusColor, getProcessRuntime } from '~/store/processes/process';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { compose, Dispatch } from 'redux';
 import { WorkflowResource } from '~/models/workflow';
@@ -26,6 +26,7 @@ import { LinkResource } from '~/models/link';
 import { navigateTo } from '~/store/navigation/navigation-action';
 import { withResourceData } from '~/views-components/data-explorer/with-resources';
 import { CollectionResource } from '~/models/collection';
+import { IllegalNamingWarning } from '~/components/warning/warning';
 
 const renderName = (dispatch: Dispatch, item: { name: string; uuid: string, kind: string }) =>
     <Grid container alignItems="center" wrap="nowrap" spacing={16}>
@@ -34,6 +35,9 @@ const renderName = (dispatch: Dispatch, item: { name: string; uuid: string, kind
         </Grid>
         <Grid item>
             <Typography color="primary" style={{ width: 'auto', cursor: 'pointer' }} onClick={() => dispatch<any>(navigateTo(item.uuid))}>
+                {item.kind === ResourceKind.PROJECT || item.kind === ResourceKind.COLLECTION
+                    ? <IllegalNamingWarning name={item.name} />
+                    : null}
                 {item.name}
             </Typography>
         </Grid>
@@ -379,6 +383,12 @@ export const ResourceLastModifiedDate = connect(
         return { date: resource ? resource.modifiedAt : '' };
     })((props: { date: string }) => renderDate(props.date));
 
+export const ResourceCreatedAtDate = connect(
+    (state: RootState, props: { uuid: string }) => {
+        const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
+        return { date: resource ? resource.createdAt : '' };
+    })((props: { date: string }) => renderDate(props.date));
+
 export const ResourceTrashDate = connect(
     (state: RootState, props: { uuid: string }) => {
         const resource = getResource<TrashableResource>(props.uuid)(state.resources);
@@ -441,8 +451,57 @@ export const ProcessStatus = compose(
         const status = props.process ? getProcessStatus(props.process) : "-";
         return <Typography
             noWrap
-            align="center"
             style={{ color: getProcessStatusColor(status, props.theme) }} >
             {status}
         </Typography>;
     });
+
+export const ProcessStartDate = connect(
+    (state: RootState, props: { uuid: string }) => {
+        const process = getProcess(props.uuid)(state.resources);
+        return { date: ( process && process.container ) ? process.container.startedAt : '' };
+    })((props: { date: string }) => renderDate(props.date));
+
+export const renderRunTime = (time: number) =>
+    <Typography noWrap style={{ minWidth: '45px' }}>
+        {formatTime(time, true)}
+    </Typography>;
+
+interface ContainerRunTimeProps {
+    process: Process;
+}
+
+interface ContainerRunTimeState {
+    runtime: number;
+}
+
+export const ContainerRunTime = connect((state: RootState, props: { uuid: string }) => {
+    return { process: getProcess(props.uuid)(state.resources) };
+})(class extends React.Component<ContainerRunTimeProps, ContainerRunTimeState> {
+    private timer: any;
+
+    constructor(props: ContainerRunTimeProps) {
+        super(props);
+        this.state = { runtime: this.getRuntime() };
+    }
+
+    getRuntime() {
+        return this.props.process ? getProcessRuntime(this.props.process) : 0;
+    }
+
+    updateRuntime() {
+        this.setState({ runtime: this.getRuntime() });
+    }
+
+    componentDidMount() {
+        this.timer = setInterval(this.updateRuntime.bind(this), 5000);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.timer);
+    }
+
+    render() {
+        return renderRunTime(this.state.runtime);
+    }
+});