Merge branch '16718-past-collection-versions-search'
[arvados-workbench2.git] / src / views-components / data-explorer / renderers.tsx
index 5dc1e02aea789f72c55bdb3bd4c1793ec32f1bdd..8afa45325ee7ba211950ab3015fbf4fb76fe603a 100644 (file)
@@ -7,33 +7,37 @@ 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';
-import { ResourceStatus } from '~/views/workflow-panel/workflow-panel-view';
+import { ResourceStatus as WorkflowStatus } from '~/views/workflow-panel/workflow-panel-view';
 import { getUuidPrefix, openRunProcess } from '~/store/workflow-panel/workflow-panel-actions';
-import { getResourceData } from "~/store/resources-data/resources-data";
 import { openSharingDialog } from '~/store/sharing-dialog/sharing-dialog-actions';
 import { UserResource } from '~/models/user';
 import { toggleIsActive, toggleIsAdmin } from '~/store/users/users-actions';
 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 = (item: { name: string; uuid: string, kind: string }) =>
+const renderName = (dispatch: Dispatch, item: { name: string; uuid: string, kind: string }) =>
     <Grid container alignItems="center" wrap="nowrap" spacing={16}>
         <Grid item>
             {renderIcon(item.kind)}
         </Grid>
         <Grid item>
-            <Typography color="primary" style={{ width: 'auto' }}>
+            <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>
@@ -49,7 +53,7 @@ export const ResourceName = connect(
     (state: RootState, props: { uuid: string }) => {
         const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
         return resource || { name: '', uuid: '', kind: '' };
-    })(renderName);
+    })((resource: { name: string; uuid: string, kind: string } & DispatchProp<any>) => renderName(resource.dispatch, resource));
 
 const renderIcon = (kind: string) => {
     switch (kind) {
@@ -235,17 +239,19 @@ const clusterColors = [
 
 export const ResourceCluster = (props: { uuid: string }) => {
     const CLUSTER_ID_LENGTH = 5;
-    const pos = props.uuid.indexOf('-');
+    const pos = props.uuid.length > CLUSTER_ID_LENGTH ? props.uuid.indexOf('-') : 5;
     const clusterId = pos >= CLUSTER_ID_LENGTH ? props.uuid.substr(0, pos) : '';
-    const ci = pos >= CLUSTER_ID_LENGTH ? (props.uuid.charCodeAt(0) + props.uuid.charCodeAt(1)) % clusterColors.length : 0;
-    return <Typography>
-        <div style={{
-            backgroundColor: clusterColors[ci][0],
-            color: clusterColors[ci][1],
-            padding: "2px 7px",
-            borderRadius: 3
-        }}>{clusterId}</div>
-    </Typography>;
+    const ci = pos >= CLUSTER_ID_LENGTH ? (((((
+        (props.uuid.charCodeAt(0) * props.uuid.charCodeAt(1))
+        + props.uuid.charCodeAt(2))
+        * props.uuid.charCodeAt(3))
+        + props.uuid.charCodeAt(4))) % clusterColors.length) : 0;
+    return <span style={{
+        backgroundColor: clusterColors[ci][0],
+        color: clusterColors[ci][1],
+        padding: "2px 7px",
+        borderRadius: 3
+    }}>{clusterId}</span>;
 };
 
 export const ComputeNodeInfo = withResourceData('info', renderNodeInfo);
@@ -352,9 +358,9 @@ export const ResourceRunProcess = connect(
 
 const renderWorkflowStatus = (uuidPrefix: string, ownerUuid?: string) => {
     if (ownerUuid === getPublicUuid(uuidPrefix)) {
-        return renderStatus(ResourceStatus.PUBLIC);
+        return renderStatus(WorkflowStatus.PUBLIC);
     } else {
-        return renderStatus(ResourceStatus.PRIVATE);
+        return renderStatus(WorkflowStatus.PRIVATE);
     }
 };
 
@@ -377,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);
@@ -396,12 +408,12 @@ export const renderFileSize = (fileSize?: number) =>
 
 export const ResourceFileSize = connect(
     (state: RootState, props: { uuid: string }) => {
-        const resource = getResourceData(props.uuid)(state.resourcesData);
-        return { fileSize: resource ? resource.fileSize : 0 };
+        const resource = getResource<CollectionResource>(props.uuid)(state.resources);
+        return { fileSize: resource ? resource.fileSizeTotal : 0 };
     })((props: { fileSize?: number }) => renderFileSize(props.fileSize));
 
 const renderOwner = (owner: string) =>
-    <Typography noWrap color="primary" >
+    <Typography noWrap>
         {owner}
     </Typography>;
 
@@ -411,6 +423,14 @@ export const ResourceOwner = connect(
         return { owner: resource ? resource.ownerUuid : '' };
     })((props: { owner: string }) => renderOwner(props.owner));
 
+export const ResourceOwnerName = connect(
+    (state: RootState, props: { uuid: string }) => {
+        const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
+        const ownerNameState = state.ownerName;
+        const ownerName = ownerNameState.find(it => it.uuid === resource!.ownerUuid);
+        return { owner: ownerName ? ownerName!.name : resource!.ownerUuid };
+    })((props: { owner: string }) => renderOwner(props.owner));
+
 const renderType = (type: string) =>
     <Typography noWrap>
         {resourceLabel(type)}
@@ -422,6 +442,22 @@ export const ResourceType = connect(
         return { type: resource ? resource.kind : '' };
     })((props: { type: string }) => renderType(props.type));
 
+export const ResourceStatus = connect((state: RootState, props: { uuid: string }) => {
+        return { resource: getResource<GroupContentsResource>(props.uuid)(state.resources) };
+    })((props: { resource: GroupContentsResource }) =>
+        (props.resource && props.resource.kind === ResourceKind.COLLECTION)
+        ? <CollectionStatus uuid={props.resource.uuid} />
+        : <ProcessStatus uuid={props.resource.uuid} />
+    );
+
+export const CollectionStatus = connect((state: RootState, props: { uuid: string }) => {
+        return { collection: getResource<CollectionResource>(props.uuid)(state.resources) };
+    })((props: { collection: CollectionResource }) =>
+        (props.collection.uuid !== props.collection.currentVersionUuid)
+        ? <Typography>old version</Typography>
+        : <Typography>current</Typography>
+    );
+
 export const ProcessStatus = compose(
     connect((state: RootState, props: { uuid: string }) => {
         return { process: getProcess(props.uuid)(state.resources) };
@@ -431,8 +467,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);
+    }
+});