refs #master Merge branch 'origin/master' into 14280-query-language
[arvados-workbench2.git] / src / views-components / data-explorer / renderers.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import * as React from 'react';
6 import { Grid, Typography, withStyles, Tooltip, IconButton } from '@material-ui/core';
7 import { FavoriteStar } from '../favorite-star/favorite-star';
8 import { ResourceKind, TrashableResource } from '~/models/resource';
9 import { ProjectIcon, CollectionIcon, ProcessIcon, DefaultIcon, WorkflowIcon, ShareIcon } from '~/components/icon/icon';
10 import { formatDate, formatFileSize } from '~/common/formatters';
11 import { resourceLabel } from '~/common/labels';
12 import { connect, DispatchProp } from 'react-redux';
13 import { RootState } from '~/store/store';
14 import { getResource } from '~/store/resources/resources';
15 import { GroupContentsResource } from '~/services/groups-service/groups-service';
16 import { getProcess, Process, getProcessStatus, getProcessStatusColor } from '~/store/processes/process';
17 import { ArvadosTheme } from '~/common/custom-theme';
18 import { compose, Dispatch } from 'redux';
19 import { WorkflowResource } from '~/models/workflow';
20 import { ResourceStatus } from '~/views/workflow-panel/workflow-panel-view';
21 import { getUuidPrefix, openRunProcess } from '~/store/workflow-panel/workflow-panel-actions';
22 import { getResourceData } from "~/store/resources-data/resources-data";
23 import { openSharingDialog } from '~/store/sharing-dialog/sharing-dialog-actions';
24
25 export const renderName = (item: { name: string; uuid: string, kind: string }) =>
26     <Grid container alignItems="center" wrap="nowrap" spacing={16}>
27         <Grid item>
28             {renderIcon(item)}
29         </Grid>
30         <Grid item>
31             <Typography color="primary" style={{ width: '450px' }}>
32                 {item.name}
33             </Typography>
34         </Grid>
35         <Grid item>
36             <Typography variant="caption">
37                 <FavoriteStar resourceUuid={item.uuid} />
38             </Typography>
39         </Grid>
40     </Grid>;
41
42 export const ResourceName = connect(
43     (state: RootState, props: { uuid: string }) => {
44         const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
45         return resource || { name: '', uuid: '', kind: '' };
46     })(renderName);
47
48 export const renderIcon = (item: { kind: string }) => {
49     switch (item.kind) {
50         case ResourceKind.PROJECT:
51             return <ProjectIcon />;
52         case ResourceKind.COLLECTION:
53             return <CollectionIcon />;
54         case ResourceKind.PROCESS:
55             return <ProcessIcon />;
56         case ResourceKind.WORKFLOW:
57             return <WorkflowIcon />;
58         default:
59             return <DefaultIcon />;
60     }
61 };
62
63 export const renderDate = (date?: string) => {
64     return <Typography noWrap style={{ minWidth: '100px' }}>{formatDate(date)}</Typography>;
65 };
66
67 export const renderWorkflowName = (item: { name: string; uuid: string, kind: string, ownerUuid: string }) =>
68     <Grid container alignItems="center" wrap="nowrap" spacing={16}>
69         <Grid item>
70             {renderIcon(item)}
71         </Grid>
72         <Grid item>
73             <Typography color="primary" style={{ width: '100px' }}>
74                 {item.name}
75             </Typography>
76         </Grid>
77     </Grid>;
78
79 export const RosurceWorkflowName = connect(
80     (state: RootState, props: { uuid: string }) => {
81         const resource = getResource<WorkflowResource>(props.uuid)(state.resources);
82         return resource || { name: '', uuid: '', kind: '', ownerUuid: '' };
83     })(renderWorkflowName);
84
85 const getPublicUuid = (uuidPrefix: string) => {
86     return `${uuidPrefix}-tpzed-anonymouspublic`;
87 };
88
89 export const resourceShare = (dispatch: Dispatch, uuidPrefix: string, ownerUuid?: string, uuid?: string) => {
90     const isPublic = ownerUuid === getPublicUuid(uuidPrefix);
91     return (
92         <div>
93             {!isPublic && uuid &&
94                 <Tooltip title="Share">
95                     <IconButton onClick={() => dispatch<any>(openSharingDialog(uuid))}>
96                         <ShareIcon />
97                     </IconButton>
98                 </Tooltip>
99             }
100         </div>
101     );
102 };
103
104 export const ResourceShare = connect(
105     (state: RootState, props: { uuid: string }) => {
106         const resource = getResource<WorkflowResource>(props.uuid)(state.resources);
107         const uuidPrefix = getUuidPrefix(state);
108         return {
109             uuid: resource ? resource.uuid : '',
110             ownerUuid: resource ? resource.ownerUuid : '',
111             uuidPrefix
112         };
113     })((props: { ownerUuid?: string, uuidPrefix: string, uuid?: string } & DispatchProp<any>) =>
114         resourceShare(props.dispatch, props.uuidPrefix, props.ownerUuid, props.uuid));
115
116 export const resourceRunProcess = (dispatch: Dispatch, uuid: string) => {
117     return (
118         <div>
119             {uuid &&
120                 <Tooltip title="Run process">
121                     <IconButton onClick={() => dispatch<any>(openRunProcess(uuid))}>
122                         <ProcessIcon />
123                     </IconButton>
124                 </Tooltip>}
125         </div>
126     );
127 };
128
129 export const ResourceRunProcess = connect(
130     (state: RootState, props: { uuid: string }) => {
131         const resource = getResource<WorkflowResource>(props.uuid)(state.resources);
132         return {
133             uuid: resource ? resource.uuid : ''
134         };
135     })((props: { uuid: string } & DispatchProp<any>) =>
136         resourceRunProcess(props.dispatch, props.uuid));
137
138 export const renderWorkflowStatus = (uuidPrefix: string, ownerUuid?: string) => {
139     if (ownerUuid === getPublicUuid(uuidPrefix)) {
140         return renderStatus(ResourceStatus.PUBLIC);
141     } else {
142         return renderStatus(ResourceStatus.PRIVATE);
143     }
144 };
145
146 const renderStatus = (status: string) =>
147     <Typography noWrap style={{ width: '60px' }}>{status}</Typography>;
148
149 export const ResourceWorkflowStatus = connect(
150     (state: RootState, props: { uuid: string }) => {
151         const resource = getResource<WorkflowResource>(props.uuid)(state.resources);
152         const uuidPrefix = getUuidPrefix(state);
153         return {
154             ownerUuid: resource ? resource.ownerUuid : '',
155             uuidPrefix
156         };
157     })((props: { ownerUuid?: string, uuidPrefix: string }) => renderWorkflowStatus(props.uuidPrefix, props.ownerUuid));
158
159 export const ResourceLastModifiedDate = connect(
160     (state: RootState, props: { uuid: string }) => {
161         const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
162         return { date: resource ? resource.modifiedAt : '' };
163     })((props: { date: string }) => renderDate(props.date));
164
165 export const ResourceTrashDate = connect(
166     (state: RootState, props: { uuid: string }) => {
167         const resource = getResource<TrashableResource>(props.uuid)(state.resources);
168         return { date: resource ? resource.trashAt : '' };
169     })((props: { date: string }) => renderDate(props.date));
170
171 export const ResourceDeleteDate = connect(
172     (state: RootState, props: { uuid: string }) => {
173         const resource = getResource<TrashableResource>(props.uuid)(state.resources);
174         return { date: resource ? resource.deleteAt : '' };
175     })((props: { date: string }) => renderDate(props.date));
176
177 export const renderFileSize = (fileSize?: number) =>
178     <Typography noWrap style={{ minWidth: '45px' }}>
179         {formatFileSize(fileSize)}
180     </Typography>;
181
182 export const ResourceFileSize = connect(
183     (state: RootState, props: { uuid: string }) => {
184         const resource = getResourceData(props.uuid)(state.resourcesData);
185         return { fileSize: resource ? resource.fileSize : 0 };
186     })((props: { fileSize?: number }) => renderFileSize(props.fileSize));
187
188 export const renderOwner = (owner: string) =>
189     <Typography noWrap color="primary" >
190         {owner}
191     </Typography>;
192
193 export const ResourceOwner = connect(
194     (state: RootState, props: { uuid: string }) => {
195         const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
196         return { owner: resource ? resource.ownerUuid : '' };
197     })((props: { owner: string }) => renderOwner(props.owner));
198
199 export const renderType = (type: string) =>
200     <Typography noWrap>
201         {resourceLabel(type)}
202     </Typography>;
203
204 export const ResourceType = connect(
205     (state: RootState, props: { uuid: string }) => {
206         const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
207         return { type: resource ? resource.kind : '' };
208     })((props: { type: string }) => renderType(props.type));
209
210 export const ProcessStatus = compose(
211     connect((state: RootState, props: { uuid: string }) => {
212         return { process: getProcess(props.uuid)(state.resources) };
213     }),
214     withStyles({}, { withTheme: true }))
215     ((props: { process?: Process, theme: ArvadosTheme }) => {
216         const status = props.process ? getProcessStatus(props.process) : "-";
217         return <Typography
218             noWrap
219             align="center"
220             style={{ color: getProcessStatusColor(status, props.theme) }} >
221             {status}
222         </Typography>;
223     });