X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/8c9cf2d12a513379d13db279b076314b292c037e..7ea638f63582f5c9b6ab696c3dcb1855778d2432:/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 a4713c8d..c118017d 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 { 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 { 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 { Link } from 'react-router-dom'; +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 }) => - {renderIcon(item)} + {renderIcon(item.kind)} - + dispatch(navigateTo(item.uuid))}> + {item.kind === ResourceKind.PROJECT || item.kind === ResourceKind.COLLECTION + ? + : null} {item.name} + ; @@ -48,10 +53,10 @@ export const ResourceName = connect( (state: RootState, props: { uuid: string }) => { const resource = getResource(props.uuid)(state.resources); return resource || { name: '', uuid: '', kind: '' }; - })(renderName); + })((resource: { name: string; uuid: string, kind: string } & DispatchProp) => renderName(resource.dispatch, resource)); -const renderIcon = (item: { kind: string }) => { - switch (item.kind) { +const renderIcon = (kind: string) => { + switch (kind) { case ResourceKind.PROJECT: return ; case ResourceKind.COLLECTION: @@ -72,7 +77,7 @@ const renderDate = (date?: string) => { const renderWorkflowName = (item: { name: string; uuid: string, kind: string, ownerUuid: string }) => - {renderIcon(item)} + {renderIcon(item.kind)} @@ -81,7 +86,7 @@ const renderWorkflowName = (item: { name: string; uuid: string, kind: string, ow ; -export const RosurceWorkflowName = connect( +export const ResourceWorkflowName = connect( (state: RootState, props: { uuid: string }) => { const resource = getResource(props.uuid)(state.resources); return resource || { name: '', uuid: '', kind: '', ownerUuid: '' }; @@ -191,6 +196,78 @@ export const ResourceUsername = connect( return resource || { username: '' }; })(renderUsername); +// Common methods +const renderCommonData = (data: string) => + {data}; + +const renderCommonDate = (date: string) => + {formatDate(date)}; + +export const CommonUuid = withResourceData('uuid', renderCommonData); + +// Api Client Authorizations +export const TokenApiClientId = withResourceData('apiClientId', renderCommonData); + +export const TokenApiToken = withResourceData('apiToken', renderCommonData); + +export const TokenCreatedByIpAddress = withResourceData('createdByIpAddress', renderCommonDate); + +export const TokenDefaultOwnerUuid = withResourceData('defaultOwnerUuid', renderCommonData); + +export const TokenExpiresAt = withResourceData('expiresAt', renderCommonDate); + +export const TokenLastUsedAt = withResourceData('lastUsedAt', renderCommonDate); + +export const TokenLastUsedByIpAddress = withResourceData('lastUsedByIpAddress', renderCommonData); + +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'], + ['#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 {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)'}; @@ -214,13 +291,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} - )} + )}
); }; @@ -306,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(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); @@ -325,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(props.uuid)(state.resources); + return { fileSize: resource ? resource.fileSizeTotal : 0 }; })((props: { fileSize?: number }) => renderFileSize(props.fileSize)); const renderOwner = (owner: string) => - + {owner} ; @@ -340,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(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) => {resourceLabel(type)} @@ -360,8 +451,51 @@ export const ProcessStatus = compose( const status = props.process ? getProcessStatus(props.process) : "-"; return {status} ; }); + +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); + } +});