X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/41732be42d860aa191a0670552e142497170aa02..73122efb6429184611d17b3278ecbe9c2e26a6c2:/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 be0fc793..314390e2 100644 --- a/src/views-components/data-explorer/renderers.tsx +++ b/src/views-components/data-explorer/renderers.tsx @@ -2,44 +2,51 @@ // // 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 { ResourceKind, TrashableResource } from '~/models/resource'; -import { ProjectIcon, CollectionIcon, ProcessIcon, DefaultIcon, WorkflowIcon, ShareIcon } from '~/components/icon/icon'; -import { formatDate, formatFileSize } from '~/common/formatters'; -import { resourceLabel } from '~/common/labels'; +import React from 'react'; +import { Grid, Typography, withStyles, Tooltip, IconButton, Checkbox } from '@material-ui/core'; +import { FavoriteStar, PublicFavoriteStar } from '../favorite-star/favorite-star'; +import { Resource, ResourceKind, TrashableResource } from 'models/resource'; +import { ProjectIcon, FilterGroupIcon, 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 { ArvadosTheme } from '~/common/custom-theme'; +import { RootState } from 'store/store'; +import { getResource } from 'store/resources/resources'; +import { GroupContentsResource } from 'services/groups-service/groups-service'; +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 { 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'; - -const renderName = (item: { name: string; uuid: string, kind: string }) => +import { WorkflowResource } from 'models/workflow'; +import { ResourceStatus as WorkflowStatus } from 'views/workflow-panel/workflow-panel-view'; +import { getUuidPrefix, openRunProcess } from 'store/workflow-panel/workflow-panel-actions'; +import { openSharingDialog } from 'store/sharing-dialog/sharing-dialog-actions'; +import { getUserFullname, User, 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'; +import { loadResource } from 'store/resources/resources-actions'; +import { GroupClass } from 'models/group'; + +const renderName = (dispatch: Dispatch, item: GroupContentsResource) => {renderIcon(item)} - + dispatch(navigateTo(item.uuid))}> + {item.kind === ResourceKind.PROJECT || item.kind === ResourceKind.COLLECTION + ? + : null} {item.name} + ; @@ -47,15 +54,21 @@ const renderName = (item: { name: string; uuid: string, kind: string }) => export const ResourceName = connect( (state: RootState, props: { uuid: string }) => { const resource = getResource(props.uuid)(state.resources); - return resource || { name: '', uuid: '', kind: '' }; - })(renderName); + return resource; + })((resource: GroupContentsResource & DispatchProp) => renderName(resource.dispatch, resource)); -const renderIcon = (item: { kind: string }) => { +const renderIcon = (item: GroupContentsResource) => { switch (item.kind) { case ResourceKind.PROJECT: + if (item.groupClass === GroupClass.FILTER) { + return ; + } return ; case ResourceKind.COLLECTION: - return ; + if (item.uuid === item.currentVersionUuid) { + return ; + } + return ; case ResourceKind.PROCESS: return ; case ResourceKind.WORKFLOW: @@ -69,7 +82,7 @@ const renderDate = (date?: string) => { return {formatDate(date)}; }; -const renderWorkflowName = (item: { name: string; uuid: string, kind: string, ownerUuid: string }) => +const renderWorkflowName = (item: WorkflowResource) => {renderIcon(item)} @@ -84,7 +97,7 @@ const renderWorkflowName = (item: { name: string; uuid: string, kind: string, ow export const ResourceWorkflowName = connect( (state: RootState, props: { uuid: string }) => { const resource = getResource(props.uuid)(state.resources); - return resource || { name: '', uuid: '', kind: '', ownerUuid: '' }; + return resource; })(renderWorkflowName); const getPublicUuid = (uuidPrefix: string) => { @@ -219,11 +232,6 @@ export const TokenScopes = withResourceData('scopes', renderCommonData); export const TokenUserId = withResourceData('userId', renderCommonData); -// Compute Node Resources -const renderNodeInfo = (data: string) => { - return {JSON.stringify(data, null, 4)}; -}; - const clusterColors = [ ['#f44336', '#fff'], ['#2196f3', '#fff'], @@ -234,33 +242,21 @@ 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 -
{clusterId}
-
; + 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 {clusterId}; }; -export const ComputeNodeInfo = withResourceData('info', renderNodeInfo); - -export const ComputeNodeDomain = withResourceData('domain', renderCommonData); - -export const ComputeNodeFirstPingAt = withResourceData('firstPingAt', renderCommonDate); - -export const ComputeNodeHostname = withResourceData('hostname', renderCommonData); - -export const ComputeNodeIpAddress = withResourceData('ipAddress', renderCommonData); - -export const ComputeNodeJobUuid = withResourceData('jobUuid', renderCommonData); - -export const ComputeNodeLastPingAt = withResourceData('lastPingAt', renderCommonDate); - // Links Resources const renderLinkName = (item: { name: string }) => {item.name || '(none)'}; @@ -284,13 +280,13 @@ const renderLinkTail = (dispatch: Dispatch, item: { uuid: string, tailUuid: stri const currentLabel = resourceLabel(item.tailKind); const isUnknow = currentLabel === "Unknown"; return (
- { !isUnknow ? ( - renderLink(dispatch, item.tailUuid, currentLabel) - ) : ( + {!isUnknow ? ( + renderLink(dispatch, item.tailUuid, currentLabel) + ) : ( {item.tailUuid} - )} + )}
); }; @@ -351,9 +347,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); } }; @@ -376,6 +372,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(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(props.uuid)(state.resources); @@ -395,12 +397,17 @@ 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(props.uuid)(state.resources); + + if (resource && resource.kind !== ResourceKind.COLLECTION) { + return { fileSize: '' }; + } + + return { fileSize: resource ? resource.fileSizeTotal : 0 }; })((props: { fileSize?: number }) => renderFileSize(props.fileSize)); const renderOwner = (owner: string) => - + {owner} ; @@ -410,16 +417,125 @@ export const ResourceOwner = connect( return { owner: resource ? resource.ownerUuid : '' }; })((props: { owner: string }) => renderOwner(props.owner)); -const renderType = (type: string) => +export const ResourceOwnerName = connect( + (state: RootState, props: { uuid: string }) => { + const resource = getResource(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)); + +export const ResourceOwnerWithName = + compose( + connect( + (state: RootState, props: { uuid: string }) => { + let ownerName = ''; + const resource = getResource(props.uuid)(state.resources); + + if (resource) { + ownerName = getUserFullname(resource as User) || (resource as GroupContentsResource).name; + } + + return { uuid: props.uuid, ownerName }; + }), + withStyles({}, { withTheme: true })) + ((props: { uuid: string, ownerName: string, dispatch: Dispatch, theme: ArvadosTheme }) => { + const { uuid, ownerName, dispatch, theme } = props; + + if (ownerName === '') { + dispatch(loadResource(uuid, false)); + return + {uuid} + ; + } + + return + {ownerName} ({uuid}) + ; + }); + +export const ResponsiblePerson = + compose( + connect( + (state: RootState, props: { uuid: string, parentRef: HTMLElement | null }) => { + let responsiblePersonName: string = ''; + let responsiblePersonUUID: string = ''; + let responsiblePersonProperty: string = ''; + + if (state.auth.config.clusterConfig.Collections.ManagedProperties) { + let index = 0; + const keys = Object.keys(state.auth.config.clusterConfig.Collections.ManagedProperties); + + while (!responsiblePersonProperty && keys[index]) { + const key = keys[index]; + if (state.auth.config.clusterConfig.Collections.ManagedProperties[key].Function === 'original_owner') { + responsiblePersonProperty = key; + } + index++; + } + } + + let resource: Resource | undefined = getResource(props.uuid)(state.resources); + + while (resource && resource.kind !== ResourceKind.USER && responsiblePersonProperty) { + responsiblePersonUUID = (resource as CollectionResource).properties[responsiblePersonProperty]; + resource = getResource(responsiblePersonUUID)(state.resources); + } + + if (resource && resource.kind === ResourceKind.USER) { + responsiblePersonName = getUserFullname(resource as UserResource) || (resource as GroupContentsResource).name; + } + + return { uuid: responsiblePersonUUID, responsiblePersonName, parentRef: props.parentRef }; + }), + withStyles({}, { withTheme: true })) + ((props: { uuid: string | null, responsiblePersonName: string, parentRef: HTMLElement | null, theme: ArvadosTheme }) => { + const { uuid, responsiblePersonName, parentRef, theme } = props; + + if (!uuid && parentRef) { + parentRef.style.display = 'none'; + return null; + } else if (parentRef) { + parentRef.style.display = 'block'; + } + + if (!responsiblePersonName) { + return + {uuid} + ; + } + + return + {responsiblePersonName} ({uuid}) + ; + }); + +const renderType = (type: string, subtype: string) => - {resourceLabel(type)} + {resourceLabel(type, subtype)} ; export const ResourceType = connect( (state: RootState, props: { uuid: string }) => { const resource = getResource(props.uuid)(state.resources); - return { type: resource ? resource.kind : '' }; - })((props: { type: string }) => renderType(props.type)); + return { type: resource ? resource.kind : '', subtype: resource && resource.kind === ResourceKind.GROUP ? resource.groupClass : '' }; + })((props: { type: string, subtype: string }) => renderType(props.type, props.subtype)); + +export const ResourceStatus = connect((state: RootState, props: { uuid: string }) => { + return { resource: getResource(props.uuid)(state.resources) }; +})((props: { resource: GroupContentsResource }) => + (props.resource && props.resource.kind === ResourceKind.COLLECTION) + ? + : +); + +export const CollectionStatus = connect((state: RootState, props: { uuid: string }) => { + return { collection: getResource(props.uuid)(state.resources) }; +})((props: { collection: CollectionResource }) => + (props.collection.uuid !== props.collection.currentVersionUuid) + ? version {props.collection.version} + : head version +); export const ProcessStatus = compose( connect((state: RootState, props: { uuid: string }) => { @@ -430,8 +546,57 @@ export const ProcessStatus = compose( const status = props.process ? getProcessStatus(props.process) : "-"; return {status} ; }); + +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) => + + {formatTime(time, true)} + ; + +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 { + 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); + } +});