X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/78224728bc808a560718e934ef124afa77b81834..499628c02528314b043f9ac649971b62f116a27e:/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 0637676c..6d95196d 100644
--- a/src/views-components/data-explorer/renderers.tsx
+++ b/src/views-components/data-explorer/renderers.tsx
@@ -3,43 +3,48 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Grid, Typography, withStyles, Tooltip, IconButton, Checkbox, Button } from '@material-ui/core';
-import { FavoriteStar } from '../favorite-star/favorite-star';
+import { Grid, Typography, withStyles, Tooltip, IconButton, Checkbox } from '@material-ui/core';
+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 { ProjectIcon, CollectionIcon, ProcessIcon, DefaultIcon, ShareIcon, CollectionOldVersionIcon, WorkflowIcon } from '~/components/icon/icon';
+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 { withResource, getDataFromResource, withResourceData } from '~/views-components/data-explorer/with-resources';
+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: GroupContentsResource) =>
     <Grid container alignItems="center" wrap="nowrap" spacing={16}>
         <Grid item>
             {renderIcon(item)}
         </Grid>
         <Grid item>
-            <Typography color="primary" style={{ width: '450px' }}>
+            <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>
         <Grid item>
             <Typography variant="caption">
                 <FavoriteStar resourceUuid={item.uuid} />
+                <PublicFavoriteStar resourceUuid={item.uuid} />
             </Typography>
         </Grid>
     </Grid>;
@@ -47,15 +52,18 @@ const renderName = (item: { name: string; uuid: string, kind: string }) =>
 export const ResourceName = connect(
     (state: RootState, props: { uuid: string }) => {
         const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
-        return resource || { name: '', uuid: '', kind: '' };
-    })(renderName);
+        return resource;
+    })((resource: GroupContentsResource & DispatchProp<any>) => renderName(resource.dispatch, resource));
 
-const renderIcon = (item: { kind: string }) => {
+const renderIcon = (item: GroupContentsResource) => {
     switch (item.kind) {
         case ResourceKind.PROJECT:
             return <ProjectIcon />;
         case ResourceKind.COLLECTION:
-            return <CollectionIcon />;
+            if (item.uuid === item.currentVersionUuid) {
+                return <CollectionIcon />;
+            }
+            return <CollectionOldVersionIcon />;
         case ResourceKind.PROCESS:
             return <ProcessIcon />;
         case ResourceKind.WORKFLOW:
@@ -69,7 +77,7 @@ const renderDate = (date?: string) => {
     return <Typography noWrap style={{ minWidth: '100px' }}>{formatDate(date)}</Typography>;
 };
 
-const renderWorkflowName = (item: { name: string; uuid: string, kind: string, ownerUuid: string }) =>
+const renderWorkflowName = (item: WorkflowResource) =>
     <Grid container alignItems="center" wrap="nowrap" spacing={16}>
         <Grid item>
             {renderIcon(item)}
@@ -81,10 +89,10 @@ const renderWorkflowName = (item: { name: string; uuid: string, kind: string, ow
         </Grid>
     </Grid>;
 
-export const RosurceWorkflowName = connect(
+export const ResourceWorkflowName = connect(
     (state: RootState, props: { uuid: string }) => {
         const resource = getResource<WorkflowResource>(props.uuid)(state.resources);
-        return resource || { name: '', uuid: '', kind: '', ownerUuid: '' };
+        return resource;
     })(renderWorkflowName);
 
 const getPublicUuid = (uuidPrefix: string) => {
@@ -224,6 +232,31 @@ const renderNodeInfo = (data: string) => {
     return <Typography>{JSON.stringify(data, null, 4)}</Typography>;
 };
 
+const clusterColors = [
+    ['#f44336', '#fff'],
+    ['#2196f3', '#fff'],
+    ['#009688', '#fff'],
+    ['#cddc39', '#fff'],
+    ['#ff9800', '#fff']
+];
+
+export const ResourceCluster = (props: { uuid: string }) => {
+    const CLUSTER_ID_LENGTH = 5;
+    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))
+        + 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);
 
 export const ComputeNodeDomain = withResourceData('domain', renderCommonData);
@@ -261,13 +294,13 @@ const renderLinkTail = (dispatch: Dispatch, item: { uuid: string, tailUuid: stri
     const currentLabel = resourceLabel(item.tailKind);
     const isUnknow = currentLabel === "Unknown";
     return (<div>
-        { !isUnknow  ? (
-                renderLink(dispatch, item.tailUuid, currentLabel)
-            ) : (
+        {!isUnknow ? (
+            renderLink(dispatch, item.tailUuid, currentLabel)
+        ) : (
                 <Typography noWrap color="default">
                     {item.tailUuid}
                 </Typography>
-        )}
+            )}
     </div>);
 };
 
@@ -328,9 +361,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);
     }
 };
 
@@ -353,6 +386,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);
@@ -372,12 +411,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>;
 
@@ -387,6 +426,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)}
@@ -398,6 +445,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>version {props.collection.version}</Typography>
+        : <Typography>head version</Typography>
+    );
+
 export const ProcessStatus = compose(
     connect((state: RootState, props: { uuid: string }) => {
         return { process: getProcess(props.uuid)(state.resources) };
@@ -407,8 +470,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);
+    }
+});
