services/workbench2/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 React from "react";
   6 import { Grid, Typography, Tooltip, IconButton, Checkbox, Chip } from "@mui/material";
   7 import withStyles from '@mui/styles/withStyles';
   8 import withTheme from '@mui/styles/withTheme';
   9 import { FavoriteStar, PublicFavoriteStar } from "../favorite-star/favorite-star";
  10 import { Resource, ResourceKind, TrashableResource } from "models/resource";
  11 import {
  12     FreezeIcon,
  13     ProjectIcon,
  14     FilterGroupIcon,
  15     CollectionIcon,
  16     ProcessIcon,
  17     DefaultIcon,
  18     ShareIcon,
  19     CollectionOldVersionIcon,
  20     WorkflowIcon,
  21     RemoveIcon,
  22     RenameIcon,
  23     ActiveIcon,
  24     SetupIcon,
  25     InactiveIcon,
  26     ErrorIcon,
  27     RestoreFromTrashIcon,
  28 } from "components/icon/icon";
  29 import { formatDate, formatFileSize, formatTime } from "common/formatters";
  30 import { resourceLabel } from "common/labels";
  31 import { connect, DispatchProp } from "react-redux";
  32 import { RootState } from "store/store";
  33 import { getResource, filterResources } from "store/resources/resources";
  34 import { GroupContentsResource } from "services/groups-service/groups-service";
  35 import { getProcess, Process, getProcessStatus, getProcessStatusStyles, getProcessRuntime } from "store/processes/process";
  36 import { ArvadosTheme } from "common/custom-theme";
  37 import { compose, Dispatch } from "redux";
  38 import { WorkflowResource } from "models/workflow";
  39 import { ResourceStatus as WorkflowStatus } from "views/workflow-panel/workflow-panel-view";
  40 import { getUuidPrefix, openRunProcess } from "store/workflow-panel/workflow-panel-actions";
  41 import { openSharingDialog } from "store/sharing-dialog/sharing-dialog-actions";
  42 import { getUserFullname, getUserDisplayName, User, UserResource } from "models/user";
  43 import { LinkClass, LinkResource } from "models/link";
  44 import { navigateTo, navigateToGroupDetails, navigateToUserProfile } from "store/navigation/navigation-action";
  45 import { withResourceData } from "views-components/data-explorer/with-resources";
  46 import { CollectionResource } from "models/collection";
  47 import { IllegalNamingWarning } from "components/warning/warning";
  48 import { loadResource } from "store/resources/resources-actions";
  49 import { BuiltinGroups, getBuiltinGroupUuid, GroupClass, GroupResource, isBuiltinGroup } from "models/group";
  50 import { openRemoveGroupMemberDialog } from "store/group-details-panel/group-details-panel-actions";
  51 import { setMemberIsHidden } from "store/group-details-panel/group-details-panel-actions";
  52 import { formatPermissionLevel } from "views-components/sharing-dialog/permission-select";
  53 import { PermissionLevel } from "models/permission";
  54 import { openPermissionEditContextMenu } from "store/context-menu/context-menu-actions";
  55 import { VirtualMachinesResource } from "models/virtual-machines";
  56 import { CopyToClipboardSnackbar } from "components/copy-to-clipboard-snackbar/copy-to-clipboard-snackbar";
  57 import { ProjectResource } from "models/project";
  58 import { ProcessResource } from "models/process";
  59 import { ServiceRepository } from "services/services";
  60 import { loadUsersPanel } from "store/users/users-actions";
  61 import { InlinePulser } from "components/loading/inline-pulser";
  62 import { ProcessTypeFilter } from "store/resource-type-filters/resource-type-filters";
  63 import { CustomTheme } from "common/custom-theme";
  64 import { dispatchAction } from "common/dispatch-action";
  65 import { getProperty } from "store/properties/properties";
  66 import { ClusterBadge } from "store/auth/cluster-badges";
  67 import { PermissionResource } from 'models/permission';
  68 import { ContainerRequestResource } from 'models/container-request';
  69 import { toggleTrashed } from "store/trash/trash-actions";
  70
  71 export const toggleIsAdmin = (uuid: string) =>
  72     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
  73         const { resources } = getState();
  74         const data = getResource<UserResource>(uuid)(resources);
  75         const isAdmin = data!.isAdmin;
  76         const newActivity = await services.userService.update(uuid, { isAdmin: !isAdmin });
  77         dispatch<any>(loadUsersPanel());
  78         return newActivity;
  79     };
  80
  81 export const renderName = (item: GroupContentsResource) => {
  82     const navFunc = "groupClass" in item && item.groupClass === GroupClass.ROLE ? navigateToGroupDetails : navigateTo;
  83     return (
  84         <Grid
  85             container
  86             alignItems="center"
  87             wrap="nowrap"
  88             spacing={2}
  89         >
  90             <Grid item style={{color: CustomTheme.palette.grey['600'] }}>{renderIcon(item)}</Grid>
  91             <Grid item>
  92                 <Typography
  93                     color="primary"
  94                     style={{ width: "auto", cursor: "pointer" }}
  95                     onClick={(ev) => {
  96                         ev.stopPropagation()
  97                         dispatchAction(navFunc, item.uuid)
  98                     }}
  99                 >
 100                     {item.kind === ResourceKind.PROJECT || item.kind === ResourceKind.COLLECTION ? <IllegalNamingWarning name={item.name} /> : null}
 101                     {item.name}
 102                 </Typography>
 103             </Grid>
 104             <Grid item>
 105                 <Typography variant="caption">
 106                     <FavoriteStar resourceUuid={item.uuid} />
 107                     <PublicFavoriteStar resourceUuid={item.uuid} />
 108                     {item.kind === ResourceKind.PROJECT && <FrozenProject item={item} />}
 109                 </Typography>
 110             </Grid>
 111         </Grid>
 112     );
 113 };
 114
 115 export const FrozenProject = (props: { item: ProjectResource }) => {
 116     const [fullUsername, setFullusername] = React.useState<any>(null);
 117     const getFullName = React.useCallback(() => {
 118         if (props.item.frozenByUuid) {
 119             setFullusername(<UserNameFromID uuid={props.item.frozenByUuid} />);
 120         }
 121     }, [props.item, setFullusername]);
 122
 123     if (props.item.frozenByUuid) {
 124         return (
 125             <Tooltip
 126                 onOpen={getFullName}
 127                 enterDelay={500}
 128                 title={<span>Project was frozen by {fullUsername}</span>}
 129             >
 130                 <FreezeIcon style={{ fontSize: "inherit" }} />
 131             </Tooltip>
 132         );
 133     } else {
 134         return null;
 135     }
 136 };
 137
 138 // export const ResourceName = connect((state: RootState, props: { uuid: string }) => {
 139 //     const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
 140 //     return resource;
 141 // })((resource: GroupContentsResource & DispatchProp<any>) => renderName(resource));
 142
 143 const renderIcon = (item: GroupContentsResource) => {
 144     switch (item.kind) {
 145         case ResourceKind.PROJECT:
 146             if (item.groupClass === GroupClass.FILTER) {
 147                 return <FilterGroupIcon />;
 148             }
 149             return <ProjectIcon />;
 150         case ResourceKind.COLLECTION:
 151             if (item.uuid === item.currentVersionUuid) {
 152                 return <CollectionIcon />;
 153             }
 154             return <CollectionOldVersionIcon />;
 155         case ResourceKind.PROCESS:
 156             return <ProcessIcon />;
 157         case ResourceKind.WORKFLOW:
 158             return <WorkflowIcon />;
 159         default:
 160             return <DefaultIcon />;
 161     }
 162 };
 163
 164 const renderDate = (date?: string) => {
 165     return (
 166         <Typography
 167             noWrap
 168             style={{ minWidth: "100px" }}
 169         >
 170             {formatDate(date)}
 171         </Typography>
 172     );
 173 };
 174
 175 const renderWorkflowName = (item: WorkflowResource) => (
 176     <Grid
 177         container
 178         alignItems="center"
 179         wrap="nowrap"
 180         spacing={2}
 181     >
 182         <Grid item>{renderIcon(item)}</Grid>
 183         <Grid item>
 184             <Typography
 185                 color="primary"
 186                 style={{ width: "100px" }}
 187             >
 188                 {item.name}
 189             </Typography>
 190         </Grid>
 191     </Grid>
 192 );
 193
 194 export const ResourceWorkflowName = connect((state: RootState, props: { uuid: string }) => {
 195     const resource = getResource<WorkflowResource>(props.uuid)(state.resources);
 196     return resource;
 197 })(renderWorkflowName);
 198
 199 const getPublicUuid = (uuidPrefix: string) => {
 200     return `${uuidPrefix}-tpzed-anonymouspublic`;
 201 };
 202
 203 const resourceShare = (dispatch: Dispatch, uuidPrefix: string, ownerUuid?: string, uuid?: string) => {
 204     const isPublic = ownerUuid === getPublicUuid(uuidPrefix);
 205     return (
 206         <div>
 207             {!isPublic && uuid && (
 208                 <Tooltip title="Share">
 209                     <IconButton onClick={() => dispatch<any>(openSharingDialog(uuid))} size="large">
 210                         <ShareIcon />
 211                     </IconButton>
 212                 </Tooltip>
 213             )}
 214         </div>
 215     );
 216 };
 217
 218 export const ResourceShare = connect((state: RootState, props: { uuid: string }) => {
 219     const resource = getResource<WorkflowResource>(props.uuid)(state.resources);
 220     const uuidPrefix = getUuidPrefix(state);
 221     return {
 222         uuid: resource ? resource.uuid : "",
 223         ownerUuid: resource ? resource.ownerUuid : "",
 224         uuidPrefix,
 225     };
 226 })((props: { ownerUuid?: string; uuidPrefix: string; uuid?: string } & DispatchProp<any>) =>
 227     resourceShare(props.dispatch, props.uuidPrefix, props.ownerUuid, props.uuid)
 228 );
 229
 230 // User Resources
 231 const renderFirstName = (item: { firstName: string }) => {
 232     return <Typography noWrap>{item.firstName}</Typography>;
 233 };
 234
 235 export const ResourceFirstName = connect((state: RootState, props: { uuid: string }) => {
 236     const resource = getResource<UserResource>(props.uuid)(state.resources);
 237     return resource || { firstName: "" };
 238 })(renderFirstName);
 239
 240 const renderLastName = (item: { lastName: string }) => <Typography noWrap>{item.lastName}</Typography>;
 241
 242 export const ResourceLastName = connect((state: RootState, props: { uuid: string }) => {
 243     const resource = getResource<UserResource>(props.uuid)(state.resources);
 244     return resource || { lastName: "" };
 245 })(renderLastName);
 246
 247 export const renderFullName = (item: { uuid: string; firstName: string; lastName: string }, link?: boolean) => {
 248     const displayName = (item.firstName + " " + item.lastName).trim() || item.uuid;
 249     return link ? (
 250         <Typography
 251             noWrap
 252             color="primary"
 253             style={{ cursor: "pointer" }}
 254             onClick={() => dispatchAction<any>(navigateToUserProfile, item.uuid)}
 255         >
 256             {displayName}
 257         </Typography>
 258     ) : (
 259         <Typography noWrap>{displayName}</Typography>
 260     );
 261 };
 262
 263 // export const UserResourceFullName = connect((state: RootState, props: { uuid: string; link?: boolean }) => {
 264 //     const resource = getResource<UserResource>(props.uuid)(state.resources);
 265 //     return { item: resource || { uuid: "", firstName: "", lastName: "" }, link: props.link };
 266 // })((props: { item: { uuid: string; firstName: string; lastName: string }; link?: boolean } & DispatchProp<any>) =>
 267 //     renderFullName(props.item, props.link)
 268 // );
 269
 270 export const renderUuid = (item: { uuid: string }) => (
 271     <Typography
 272         data-cy="uuid"
 273         noWrap
 274     >
 275         {item.uuid}
 276         {(item.uuid && <CopyToClipboardSnackbar value={item.uuid} />) || "-"}
 277     </Typography>
 278 );
 279
 280 export const renderResourceUuid = (resource: GroupContentsResource | GroupResource | UserResource) => (
 281     <Typography
 282         data-cy="uuid"
 283         noWrap
 284     >
 285         {resource.uuid}
 286         {(resource.uuid && <CopyToClipboardSnackbar value={resource.uuid} />) || "-"}
 287     </Typography>
 288 );
 289
 290 const renderUuidCopyIcon = (item: { uuid: string }) => (
 291     <Typography
 292         data-cy="uuid"
 293         noWrap
 294     >
 295         {(item.uuid && <CopyToClipboardSnackbar value={item.uuid} />) || "-"}
 296     </Typography>
 297 );
 298
 299 // export const ResourceUuid = connect(
 300 //     (state: RootState, props: { uuid: string }) => getResource<UserResource>(props.uuid)(state.resources) || { uuid: "" }
 301 // )(renderUuid);
 302
 303 export const renderEmail = (item: { email: string }) => <Typography noWrap>{item.email}</Typography>;
 304
 305 // export const ResourceEmail = connect((state: RootState, props: { uuid: string }) => {
 306 //     const resource = getResource<UserResource>(props.uuid)(state.resources);
 307 //     return resource || { email: "" };
 308 // })(renderEmail);
 309
 310 enum UserAccountStatus {
 311     ACTIVE = "Active",
 312     INACTIVE = "Inactive",
 313     SETUP = "Setup",
 314     UNKNOWN = "",
 315 }
 316
 317 const renderAccountStatus = (props: { status: UserAccountStatus }) => (
 318     <Grid
 319         container
 320         alignItems="center"
 321         wrap="nowrap"
 322         spacing={1}
 323         data-cy="account-status"
 324     >
 325         <Grid item>
 326             {(() => {
 327                 switch (props.status) {
 328                     case UserAccountStatus.ACTIVE:
 329                         return <ActiveIcon style={{ color: "#4caf50", verticalAlign: "middle" }} />;
 330                     case UserAccountStatus.SETUP:
 331                         return <SetupIcon style={{ color: "#2196f3", verticalAlign: "middle" }} />;
 332                     case UserAccountStatus.INACTIVE:
 333                         return <InactiveIcon style={{ color: "#9e9e9e", verticalAlign: "middle" }} />;
 334                     default:
 335                         return <></>;
 336                 }
 337             })()}
 338         </Grid>
 339         <Grid item>
 340             <Typography noWrap>{props.status}</Typography>
 341         </Grid>
 342     </Grid>
 343 );
 344
 345 const getUserAccountStatus = (state: RootState, props: { uuid: string }) => {
 346     const user = getResource<UserResource>(props.uuid)(state.resources);
 347     // Get membership links for all users group
 348     const allUsersGroupUuid = getBuiltinGroupUuid(state.auth.localCluster, BuiltinGroups.ALL);
 349     const permissions = filterResources(
 350         (resource: LinkResource) =>
 351             resource.kind === ResourceKind.LINK &&
 352             resource.linkClass === LinkClass.PERMISSION &&
 353             resource.headUuid === allUsersGroupUuid &&
 354             resource.tailUuid === props.uuid
 355     )(state.resources);
 356
 357     if (user) {
 358         return user.isActive
 359             ? { status: UserAccountStatus.ACTIVE }
 360             : permissions.length > 0
 361             ? { status: UserAccountStatus.SETUP }
 362             : { status: UserAccountStatus.INACTIVE };
 363     } else {
 364         return { status: UserAccountStatus.UNKNOWN };
 365     }
 366 };
 367
 368 export const ResourceLinkTailAccountStatus = connect((state: RootState, props: { resource: LinkResource }) => {
 369     return props.resource && props.resource.tailKind === ResourceKind.USER ? getUserAccountStatus(state, { uuid: props.resource.tailUuid }) : { status: UserAccountStatus.UNKNOWN };
 370 })(renderAccountStatus);
 371
 372 export const UserResourceAccountStatus = connect(getUserAccountStatus)(renderAccountStatus);
 373
 374 const renderIsHidden = (props: {
 375     memberLinkUuid: string;
 376     permissionLinkUuid: string;
 377     visible: boolean;
 378     canManage: boolean;
 379     setMemberIsHidden: (memberLinkUuid: string, permissionLinkUuid: string, hide: boolean) => void;
 380 }) => {
 381     if (props.memberLinkUuid) {
 382         return (
 383             <Checkbox
 384                 data-cy="user-visible-checkbox"
 385                 color="primary"
 386                 checked={props.visible}
 387                 disabled={!props.canManage}
 388                 onClick={e => {
 389                     e.stopPropagation();
 390                     props.setMemberIsHidden(props.memberLinkUuid, props.permissionLinkUuid, !props.visible);
 391                 }}
 392             />
 393         );
 394     } else {
 395         return <Typography />;
 396     }
 397 };
 398
 399 export const ResourceLinkTailIsVisible = connect(
 400     (state: RootState, props: { resource: LinkResource }) => {
 401         const member = getResource<Resource>(props.resource?.tailUuid || "")(state.resources);
 402         const group = getResource<GroupResource>(props.resource?.headUuid || "")(state.resources);
 403         const permissions = filterResources((resource: LinkResource) => {
 404             return (
 405                 resource.linkClass === LinkClass.PERMISSION &&
 406                 resource.headUuid === props.resource?.tailUuid &&
 407                 resource.tailUuid === group?.uuid &&
 408                 resource.name === PermissionLevel.CAN_READ
 409             );
 410         })(state.resources);
 411
 412         const permissionLinkUuid = permissions.length > 0 ? permissions[0].uuid : "";
 413         const isVisible = props.resource && group && permissions.length > 0;
 414         // Consider whether the current user canManage this resurce in addition when it's possible
 415         const isBuiltin = isBuiltinGroup(props.resource?.headUuid || "");
 416
 417         return member?.kind === ResourceKind.USER
 418             ? { memberLinkUuid: props.resource?.uuid, permissionLinkUuid, visible: isVisible, canManage: !isBuiltin }
 419             : { memberLinkUuid: "", permissionLinkUuid: "", visible: false, canManage: false };
 420     },
 421     { setMemberIsHidden }
 422 )(renderIsHidden);
 423
 424 const renderIsAdmin = (props: { uuid: string; isAdmin: boolean; toggleIsAdmin: (uuid: string) => void }) => (
 425     <Checkbox
 426         color="primary"
 427         checked={props.isAdmin}
 428         onClick={e => {
 429             e.stopPropagation();
 430             props.toggleIsAdmin(props.uuid);
 431         }}
 432     />
 433 );
 434
 435 export const ResourceIsAdmin = connect(
 436     (state: RootState, props: { uuid: string }) => {
 437         const resource = getResource<UserResource>(props.uuid)(state.resources);
 438         return resource || { isAdmin: false };
 439     },
 440     { toggleIsAdmin }
 441 )(renderIsAdmin);
 442
 443 export const renderUsername = (item: { username: string; uuid: string }) => <Typography noWrap>{item.username || item.uuid}</Typography>;
 444
 445 // export const ResourceUsername = connect((state: RootState, props: { uuid: string }) => {
 446 //     const resource = getResource<UserResource>(props.uuid)(state.resources);
 447 //     return resource || { username: "", uuid: props.uuid };
 448 // })(renderUsername);
 449
 450 // Virtual machine resource
 451
 452 const renderHostname = (item: { hostname: string }) => <Typography noWrap>{item.hostname}</Typography>;
 453
 454 export const VirtualMachineHostname = connect((state: RootState, props: { uuid: string }) => {
 455     const resource = getResource<VirtualMachinesResource>(props.uuid)(state.resources);
 456     return resource || { hostname: "" };
 457 })(renderHostname);
 458
 459 const renderVirtualMachineLogin = (login: { user: string }) => <Typography noWrap>{login.user}</Typography>;
 460
 461 export const VirtualMachineLogin = connect((state: RootState, props: { linkUuid: string }) => {
 462     const permission = getResource<LinkResource>(props.linkUuid)(state.resources);
 463     const user = getResource<UserResource>(permission?.tailUuid || "")(state.resources);
 464
 465     return { user: user?.username || permission?.tailUuid || "" };
 466 })(renderVirtualMachineLogin);
 467
 468 // Common methods
 469 const renderCommonData = (data: string) => <Typography noWrap>{data}</Typography>;
 470
 471 const renderCommonDate = (date: string) => <Typography noWrap>{formatDate(date)}</Typography>;
 472
 473 export const CommonUuid = withResourceData("uuid", renderCommonData);
 474
 475 // Api Client Authorizations
 476 export const TokenApiToken = withResourceData("apiToken", renderCommonData);
 477
 478 export const TokenCreatedByIpAddress = withResourceData("createdByIpAddress", renderCommonDate);
 479
 480 export const TokenExpiresAt = withResourceData("expiresAt", renderCommonDate);
 481
 482 export const TokenLastUsedAt = withResourceData("lastUsedAt", renderCommonDate);
 483
 484 export const TokenLastUsedByIpAddress = withResourceData("lastUsedByIpAddress", renderCommonData);
 485
 486 export const TokenScopes = withResourceData("scopes", renderCommonData);
 487
 488 export const TokenUserId = withResourceData("userId", renderCommonData);
 489
 490 export const ResourceCluster = connect((state: RootState, props: { uuid: string }) => {
 491     const clusterId = props.uuid.slice(0, 5)
 492     const clusterBadge = getProperty<ClusterBadge[]>('clusterBadges')(state.properties)?.find(badge => badge.text === clusterId);
 493     // dark grey is default BG color
 494     return clusterBadge || { text: clusterId, color: '#fff', backgroundColor: '#696969' };
 495 })(renderClusterBadge);
 496
 497 function renderClusterBadge(badge: ClusterBadge) {
 498
 499     const style = {
 500         backgroundColor: badge.backgroundColor,
 501         color: badge.color,
 502         padding: "2px 7px",
 503         borderRadius: 3,
 504     };
 505
 506     return <span style={style}>{badge.text}</span>
 507 };
 508
 509 // Links Resources
 510 export const renderLinkName = (item: { name: string }) => <Typography noWrap>{item.name || "-"}</Typography>;
 511
 512 // export const ResourceLinkName = connect((state: RootState, props: { uuid: string }) => {
 513 //     const resource = getResource<LinkResource>(props.uuid)(state.resources);
 514 //     return resource || { name: "" };
 515 // })(renderLinkName);
 516
 517 export const renderLinkClass = (item: { linkClass: string }) => <Typography noWrap>{item.linkClass}</Typography>;
 518
 519 // export const ResourceLinkClass = connect((state: RootState, props: { uuid: string }) => {
 520 //     const resource = getResource<LinkResource>(props.uuid)(state.resources);
 521 //     return resource || { linkClass: "" };
 522 // })(renderLinkClass);
 523
 524 const getResourceDisplayName = (resource: Resource): string => {
 525     if ((resource as UserResource).kind === ResourceKind.USER && typeof (resource as UserResource).firstName !== "undefined") {
 526         // We can be sure the resource is UserResource
 527         return getUserDisplayName(resource as UserResource);
 528     } else {
 529         return (resource as GroupContentsResource).name;
 530     }
 531 };
 532
 533 const renderResourceLink = (item: Resource ) => {
 534     var displayName = getResourceDisplayName(item);
 535
 536     return (
 537         <Typography
 538             noWrap
 539             color="primary"
 540             style={{ cursor: "pointer" }}
 541             onClick={() => {
 542                 item.kind === ResourceKind.GROUP && (item as GroupResource).groupClass === "role"
 543                     ? dispatchAction<any>(navigateToGroupDetails, item.uuid)
 544                     : item.kind === ResourceKind.USER
 545                     ? dispatchAction<any>(navigateToUserProfile, item.uuid)
 546                     : dispatchAction<any>(navigateTo, item.uuid);
 547             }}
 548         >
 549             {resourceLabel(item.kind, item && item.kind === ResourceKind.GROUP ? (item as GroupResource).groupClass || "" : "")}:{" "}
 550             {displayName || item.uuid}
 551         </Typography>
 552     );
 553 };
 554
 555 export const ResourceLinkTail = connect((state: RootState, props: { resource: PermissionResource | LinkResource }) => {
 556     const tailResource = getResource<Resource>(props.resource?.tailUuid || "")(state.resources);
 557
 558     return {
 559         item: tailResource || { uuid: props.resource?.tailUuid || "", kind: props.resource?.tailKind || ResourceKind.NONE },
 560     };
 561 })((props: { item: Resource } & DispatchProp<any>) => renderResourceLink(props.item));
 562
 563 export const ResourceLinkHead = connect((state: RootState, props: { resource: PermissionResource | LinkResource }) => {
 564     const headResource = getResource<Resource>(props.resource?.headUuid || "")(state.resources);
 565     return {
 566         item: headResource || { uuid: props.resource?.headUuid || "", kind: props.resource?.headKind || ResourceKind.NONE },
 567     };
 568 })((props: { item: Resource } & DispatchProp<any>) => renderResourceLink(props.item));
 569
 570 // export const ResourceLinkUuid = connect((state: RootState, props: { uuid: string }) => {
 571 //     const resource = getResource<LinkResource>(props.uuid)(state.resources);
 572 //     return resource || { uuid: "" };
 573 // })(renderUuid);
 574
 575 export const ResourceLinkHeadUuid = connect((state: RootState, props: { resource: PermissionResource }) => {
 576     const { resource } = props;
 577     const headResource = getResource<Resource>(resource?.headUuid || "")(state.resources);
 578
 579     return headResource || { uuid: "" };
 580 })(renderUuid);
 581
 582 export const ResourceLinkTailUuid = connect((state: RootState, props: { uuid: string }) => {
 583     const link = getResource<LinkResource>(props.uuid)(state.resources);
 584     const tailResource = getResource<Resource>(link?.tailUuid || "")(state.resources);
 585
 586     return tailResource || { uuid: "" };
 587 })(renderUuid);
 588
 589 const renderLinkDelete = (item: LinkResource, canManage: boolean) => {
 590     if (item.uuid) {
 591         return canManage ? (
 592             <Typography noWrap>
 593                 <IconButton
 594                     data-cy="resource-delete-button"
 595                     onClick={() => dispatchAction<any>(openRemoveGroupMemberDialog, item.uuid)}
 596                     size="large">
 597                     <RemoveIcon />
 598                 </IconButton>
 599             </Typography>
 600         ) : (
 601             <Typography noWrap>
 602                 <IconButton disabled data-cy="resource-delete-button" size="large">
 603                     <RemoveIcon />
 604                 </IconButton>
 605             </Typography>
 606         );
 607     } else {
 608         return <Typography noWrap></Typography>;
 609     }
 610 };
 611
 612 export const ResourceLinkDelete = connect((state: RootState, props: { resource: PermissionResource }) => {
 613     const isBuiltin = isBuiltinGroup(props.resource?.headUuid || "") || isBuiltinGroup(props.resource?.tailUuid || "");
 614
 615     return {
 616         item: props.resource || { uuid: "", kind: ResourceKind.NONE },
 617         canManage: props.resource && getResourceLinkCanManage(state, props.resource) && !isBuiltin,
 618     };
 619 })((props: { item: LinkResource; canManage: boolean } & DispatchProp<any>) => renderLinkDelete(props.item, props.canManage));
 620
 621 export const ResourceLinkTailEmail = connect((state: RootState, props: { uuid: string }) => {
 622     const link = getResource<LinkResource>(props.uuid)(state.resources);
 623     const resource = getResource<UserResource>(link?.tailUuid || "")(state.resources);
 624
 625     return resource || { email: "" };
 626 })(renderEmail);
 627
 628 export const ResourceLinkTailUsername = connect((state: RootState, props: { resource: PermissionResource }) => {
 629     const resource = getResource<UserResource>(props.resource.tailUuid || "")(state.resources);
 630     return resource;
 631 })((user:UserResource) => <Typography noWrap>{user.username || user.uuid || "-"}</Typography>);
 632
 633 const renderPermissionLevel = (link: LinkResource, canManage: boolean) => {
 634     return (
 635         <Typography noWrap>
 636             {formatPermissionLevel(link.name as PermissionLevel)}
 637             {canManage ? (
 638                 <IconButton
 639                     data-cy="edit-permission-button"
 640                     onClick={event => dispatchAction<any>(openPermissionEditContextMenu, event, link)}
 641                     size="large">
 642                     <RenameIcon />
 643                 </IconButton>
 644             ) : (
 645                 ""
 646             )}
 647         </Typography>
 648     );
 649 };
 650
 651 export const ResourceLinkHeadPermissionLevel = connect((state: RootState, props: { resource: PermissionResource }) => {
 652     const { resource } = props;
 653     const isBuiltin = isBuiltinGroup(resource?.headUuid || "") || isBuiltinGroup(resource?.tailUuid || "");
 654
 655     return {
 656         link: resource || { uuid: "", name: "", kind: ResourceKind.NONE },
 657         canManage: resource && getResourceLinkCanManage(state, resource) && !isBuiltin,
 658     };
 659 })((props: { link: LinkResource; canManage: boolean } & DispatchProp<any>) => renderPermissionLevel(props.link, props.canManage));
 660
 661 export const ResourceLinkTailPermissionLevel = connect((state: RootState, props: { resource: PermissionResource }) => {
 662     const isBuiltin = isBuiltinGroup(props.resource?.headUuid || "") || isBuiltinGroup(props.resource?.tailUuid || "");
 663
 664     return {
 665         link: props.resource || { uuid: "", name: "", kind: ResourceKind.NONE },
 666         canManage: props.resource && getResourceLinkCanManage(state, props.resource) && !isBuiltin,
 667     };
 668 })((props: { link: LinkResource; canManage: boolean } & DispatchProp<any>) => renderPermissionLevel(props.link, props.canManage));
 669
 670 const getResourceLinkCanManage = (state: RootState, link: LinkResource) => {
 671     const headResource = getResource<Resource>(link.headUuid)(state.resources);
 672     if (headResource && headResource.kind === ResourceKind.GROUP) {
 673         return (headResource as GroupResource).canManage;
 674     } else {
 675         // true for now
 676         return true;
 677     }
 678 };
 679
 680 // Process Resources
 681 const resourceRunProcess = (dispatch: Dispatch, uuid: string) => {
 682     return (
 683         <div>
 684             {uuid && (
 685                 <Tooltip title="Run process">
 686                     <IconButton onClick={() => dispatch<any>(openRunProcess(uuid))} size="large">
 687                         <ProcessIcon />
 688                     </IconButton>
 689                 </Tooltip>
 690             )}
 691         </div>
 692     );
 693 };
 694
 695 export const ResourceRunProcess = connect((state: RootState, props: { uuid: string }) => {
 696     const resource = getResource<WorkflowResource>(props.uuid)(state.resources);
 697     return {
 698         uuid: resource ? resource.uuid : "",
 699     };
 700 })((props: { uuid: string } & DispatchProp<any>) => resourceRunProcess(props.dispatch, props.uuid));
 701
 702 const renderWorkflowStatus = (uuidPrefix: string, ownerUuid?: string) => {
 703     if (ownerUuid === getPublicUuid(uuidPrefix)) {
 704         return renderStatus(WorkflowStatus.PUBLIC);
 705     } else {
 706         return renderStatus(WorkflowStatus.PRIVATE);
 707     }
 708 };
 709
 710 const renderStatus = (status: string) => (
 711     <Typography
 712         noWrap
 713         style={{ width: "60px" }}
 714     >
 715         {status}
 716     </Typography>
 717 );
 718
 719 export const ResourceWorkflowStatus = connect((state: RootState, props: { uuid: string }) => {
 720     const resource = getResource<WorkflowResource>(props.uuid)(state.resources);
 721     const uuidPrefix = getUuidPrefix(state);
 722     return {
 723         ownerUuid: resource ? resource.ownerUuid : "",
 724         uuidPrefix,
 725     };
 726 })((props: { ownerUuid?: string; uuidPrefix: string }) => renderWorkflowStatus(props.uuidPrefix, props.ownerUuid));
 727
 728 export const renderContainerUuid = (resource: GroupContentsResource) => {
 729     if (resource.kind !== ResourceKind.PROCESS) {
 730         return <>-</>;
 731     }
 732     const containerUuid = resource.containerUuid || '';
 733     return renderUuid({ uuid: containerUuid });
 734 };
 735
 736 // export const ResourceContainerUuid = connect((state: RootState, props: { uuid: string }) => {
 737 //     const process = getProcess(props.uuid)(state.resources);
 738 //     return { uuid: process?.container?.uuid ? process?.container?.uuid : "" };
 739 // })((props: { uuid: string }) => renderUuid({ uuid: props.uuid }));
 740
 741 enum ColumnSelection {
 742     OUTPUT_UUID = "outputUuid",
 743     LOG_UUID = "logUuid",
 744 }
 745
 746 const renderUuidLinkWithCopyIcon = (item: ProcessResource, column: string) => {
 747     const selectedColumnUuid = item[column];
 748     return (
 749         <Grid
 750             container
 751             alignItems="center"
 752             wrap="nowrap"
 753         >
 754             <Grid item>
 755                 {selectedColumnUuid ? (
 756                     <Typography
 757                         color="primary"
 758                         style={{ width: "auto", cursor: "pointer" }}
 759                         noWrap
 760                         onClick={() => dispatchAction<any>(navigateTo(selectedColumnUuid))}
 761                     >
 762                         {selectedColumnUuid}
 763                     </Typography>
 764                 ) : (
 765                     "-"
 766                 )}
 767             </Grid>
 768             <Grid item>{selectedColumnUuid && renderUuidCopyIcon({ uuid: selectedColumnUuid })}</Grid>
 769         </Grid>
 770     );
 771 };
 772
 773 export const renderResourceOutputUuid = (resource: GroupContentsResource) => {
 774     return resource.kind === ResourceKind.CONTAINER_REQUEST ? renderUuidLinkWithCopyIcon(resource, ColumnSelection.OUTPUT_UUID) : <>-</>;
 775 }
 776
 777 // export const ResourceOutputUuid = connect((state: RootState, props: { uuid: string }) => {
 778 //     const resource = getResource<ProcessResource>(props.uuid)(state.resources);
 779 //     return resource;
 780 // })((process: ProcessResource & DispatchProp<any>) => renderUuidLinkWithCopyIcon(process, ColumnSelection.OUTPUT_UUID));
 781
 782 export const renderResourceLogUuid = (resource: GroupContentsResource) => {
 783     return resource.kind === ResourceKind.CONTAINER_REQUEST ? renderUuidLinkWithCopyIcon(resource, ColumnSelection.LOG_UUID) : <>-</>;
 784 }
 785
 786 // export const ResourceLogUuid = connect((state: RootState, props: { uuid: string }) => {
 787 //     const resource = getResource<ProcessResource>(props.uuid)(state.resources);
 788 //     return resource;
 789 // })((process: ProcessResource & DispatchProp<any>) => renderUuidLinkWithCopyIcon(process, ColumnSelection.LOG_UUID));
 790
 791 export const renderResourceParentProcess = (resource: GroupContentsResource) => {
 792     return resource.kind === ResourceKind.CONTAINER_REQUEST ? renderUuid({ uuid: (resource as ContainerRequestResource).requestingContainerUuid || "" }) : <>-</>;
 793 }
 794
 795 // export const ResourceParentProcess = connect((state: RootState, props: { uuid: string }) => {
 796 //     const process = getProcess(props.uuid)(state.resources);
 797 //     return { parentProcess: process?.containerRequest?.requestingContainerUuid || "" };
 798 // })((props: { parentProcess: string }) => renderUuid({ uuid: props.parentProcess }));
 799
 800 // export const ResourceModifiedByUserUuid = connect((state: RootState, props: { uuid: string }) => {
 801 //     const process = getProcess(props.uuid)(state.resources);
 802 //     return { userUuid: process?.containerRequest?.modifiedByUserUuid || "" };
 803 // })((props: { userUuid: string }) => renderUuid({ uuid: props.userUuid }));
 804
 805 export const renderModifiedByUserUuid = (resource: GroupContentsResource & {containerRequest?: any}) => {
 806     const modifiedByUserUuid = resource.containerRequest ? resource.containerRequest.modifiedByUserUuid : resource.modifiedByUserUuid;
 807     return renderUuid({uuid:modifiedByUserUuid});
 808 }
 809
 810 export const renderCreatedAtDate = (resource: GroupContentsResource) => {
 811     return renderDate(resource.createdAt);
 812 }
 813
 814 // export const ResourceCreatedAtDate = connect((state: RootState, props: { uuid: string }) => {
 815 //     const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
 816 //     return { date: resource ? resource.createdAt : "" };
 817 // })((props: { date: string }) => renderDate(props.date));
 818
 819 export const renderLastModifiedDate = (resource: GroupContentsResource) => {
 820     return renderDate(resource.modifiedAt);
 821 }
 822
 823 // export const ResourceLastModifiedDate = connect((state: RootState, props: { uuid: string }) => {
 824 //     const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
 825 //     return { date: resource ? resource.modifiedAt : "" };
 826 // })((props: { date: string }) => renderDate(props.date));
 827
 828 export const renderTrashDate = (resource: TrashableResource) => {
 829     return renderDate(resource.trashAt);
 830 }
 831
 832 // export const ResourceTrashDate = connect((state: RootState, props: { uuid: string }) => {
 833 //     const resource = getResource<TrashableResource>(props.uuid)(state.resources);
 834 //     return { date: resource ? resource.trashAt : "" };
 835 // })((props: { date: string }) => renderDate(props.date));
 836
 837 export const renderDeleteDate = (resource: TrashableResource) => {
 838     return renderDate(resource.deleteAt);
 839 }
 840
 841 // export const ResourceDeleteDate = connect((state: RootState, props: { uuid: string }) => {
 842 //     const resource = getResource<TrashableResource>(props.uuid)(state.resources);
 843 //     return { date: resource ? resource.deleteAt : "" };
 844 // })((props: { date: string }) => renderDate(props.date));
 845
 846 export const renderFileSize = (resource: GroupContentsResource & { fileSizeTotal?: number }) => (
 847     <Typography
 848         noWrap
 849         style={{ minWidth: "45px" }}
 850     >
 851         {formatFileSize(resource.fileSizeTotal)}
 852     </Typography>
 853 );
 854
 855 // export const ResourceFileSize = connect((state: RootState, props: { uuid: string }) => {
 856 //     const resource = getResource<CollectionResource>(props.uuid)(state.resources);
 857
 858 //     if (resource && resource.kind !== ResourceKind.COLLECTION) {
 859 //         return { fileSize: "" };
 860 //     }
 861
 862 //     return { fileSize: resource ? resource.fileSizeTotal : 0 };
 863 // })((props: { fileSize?: number }) => renderFileSize(props.fileSize));
 864
 865 const renderOwner = (owner: string) => <Typography noWrap>{owner || "-"}</Typography>;
 866
 867 export const ResourceOwner = connect((state: RootState, props: { uuid: string }) => {
 868     const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
 869     return { owner: resource ? resource.ownerUuid : "" };
 870 })((props: { owner: string }) => renderOwner(props.owner));
 871
 872 export const ResourceOwnerName = connect((state: RootState, props: { uuid: string }) => {
 873     const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
 874     const ownerNameState = state.ownerName;
 875     const ownerName = ownerNameState.find(it => it.uuid === resource!.ownerUuid);
 876     return { owner: ownerName ? ownerName!.name : resource!.ownerUuid };
 877 })((props: { owner: string }) => renderOwner(props.owner));
 878
 879 // export const ResourceUUID = connect((state: RootState, props: { uuid: string }) => {
 880 //     const resource = getResource<CollectionResource>(props.uuid)(state.resources);
 881 //     return { uuid: resource ? resource.uuid : "" };
 882 // })((props: { uuid: string }) => renderUuid({ uuid: props.uuid }));
 883
 884 export const renderVersion = (resource: CollectionResource) => {
 885     return <Typography>{resource.version ?? "-"}</Typography>;
 886 };
 887
 888 // export const ResourceVersion = connect((state: RootState, props: { uuid: string }) => {
 889 //     const resource = getResource<CollectionResource>(props.uuid)(state.resources);
 890 //     return { version: resource ? resource.version : "" };
 891 // })((props: { version: number }) => renderVersion(props.version));
 892
 893 export const renderPortableDataHash = (resource: GroupContentsResource) => (
 894     <Typography noWrap>
 895         {'portableDataHash' in resource ? (
 896             <>
 897                 {resource.portableDataHash}
 898                 <CopyToClipboardSnackbar value={resource.portableDataHash} />
 899             </>
 900         ) : (
 901             "-"
 902         )}
 903     </Typography>
 904 );
 905
 906 // export const ResourcePortableDataHash = connect((state: RootState, props: { uuid: string }) => {
 907 //     const resource = getResource<CollectionResource>(props.uuid)(state.resources);
 908 //     return { portableDataHash: resource ? resource.portableDataHash : "" };
 909 // })((props: { portableDataHash: string }) => renderPortableDataHash(props.portableDataHash));
 910
 911 export const renderFileCount = (resource: GroupContentsResource & { fileCount?: number }) => {
 912     return <Typography>{resource.fileCount ?? "-"}</Typography>;
 913 };
 914
 915 // export const ResourceFileCount = connect((state: RootState, props: { uuid: string }) => {
 916 //     const resource = getResource<CollectionResource>(props.uuid)(state.resources);
 917 //     return { fileCount: resource ? resource.fileCount : "" };
 918 // })((props: { fileCount: number }) => renderFileCount(props.fileCount));
 919
 920 const userFromID = connect((state: RootState, props: { uuid: string }) => {
 921     let userFullname = "";
 922     const resource = getResource<GroupContentsResource & UserResource>(props.uuid)(state.resources);
 923
 924     if (resource) {
 925         userFullname = getUserFullname(resource as User) || (resource as GroupContentsResource).name;
 926     }
 927
 928     return { uuid: props.uuid, userFullname };
 929 });
 930
 931 const ownerFromResourceId = compose(
 932     connect((state: RootState, props: { uuid: string }) => {
 933         const childResource = getResource<GroupContentsResource & UserResource>(props.uuid)(state.resources);
 934         return { uuid: childResource ? (childResource as Resource).ownerUuid : "" };
 935     }),
 936     userFromID
 937 );
 938
 939 const _resourceWithName = withStyles(
 940     {},
 941     { withTheme: true }
 942 )((props: { uuid: string; userFullname: string; dispatch: Dispatch; theme: ArvadosTheme }) => {
 943     const { uuid, userFullname, dispatch, theme } = props;
 944     if (userFullname === "") {
 945         dispatch<any>(loadResource(uuid, false));
 946         return (
 947             <Typography
 948                 style={{ color: theme.palette.primary.main }}
 949                 display="inline"
 950             >
 951                 {uuid}
 952             </Typography>
 953         );
 954     }
 955
 956     return (
 957         <Typography
 958             style={{ color: theme.palette.primary.main }}
 959             display="inline"
 960         >
 961             {userFullname} ({uuid})
 962         </Typography>
 963     );
 964 });
 965
 966 const _resourceWithNameLink = withStyles(
 967     {},
 968     { withTheme: true }
 969 )((props: { uuid: string; userFullname: string; dispatch: Dispatch; theme: ArvadosTheme }) => {
 970     const { uuid, userFullname, dispatch, theme } = props;
 971     if (!userFullname) {
 972         dispatch<any>(loadResource(uuid, false));
 973     }
 974
 975     return (
 976         <Typography
 977             style={{ color: theme.palette.primary.main, cursor: 'pointer' }}
 978             display="inline"
 979             noWrap
 980             onClick={() => dispatch<any>(navigateTo(uuid))}
 981         >
 982             {userFullname ? userFullname : uuid}
 983         </Typography>
 984     )
 985 });
 986
 987
 988 // export const ResourceOwnerWithNameLink = ownerFromResourceId(_resourceWithNameLink);
 989
 990 // export const ResourceOwnerWithName = ownerFromResourceId(_resourceWithName);
 991
 992 export const OwnerWithName = connect((state: RootState, props: { resource: GroupContentsResource; link?: boolean }) => {
 993     const owner = getResource<UserResource>(props.resource.ownerUuid)(state.resources);
 994     const ownerName = owner ? getUserDisplayName(owner) : props.resource.ownerUuid;
 995     return { ownerName, ownerUuid: props.resource.ownerUuid, link: props.link };
 996 })((props: { ownerName: string; ownerUuid: string; link?: boolean }) => {
 997     return props.link ? (
 998         <Typography
 999             style={{ color: CustomTheme.palette.primary.main, cursor: 'pointer' }}
1000             display='inline'
1001             noWrap
1002             onClick={() => dispatchAction<any>(navigateTo(props.ownerUuid))}
1003         >
1004             {props.ownerName ? props.ownerName : props.ownerUuid}
1005         </Typography>
1006     ) : (
1007         <Typography
1008             noWrap
1009             style={{ color: CustomTheme.palette.primary.main }}
1010             display='inline'
1011         >{`${props.ownerName} (${props.ownerUuid})`}</Typography>
1012     );
1013 });
1014
1015
1016 export const ResourceWithName = userFromID(_resourceWithName);
1017
1018 export const UserNameFromID = compose(userFromID)((props: { uuid: string; displayAsText?: string; userFullname: string; dispatch: Dispatch }) => {
1019     const { uuid, userFullname, dispatch } = props;
1020
1021     if (userFullname === "") {
1022         dispatch<any>(loadResource(uuid, false));
1023     }
1024     return <span>{userFullname ? userFullname : uuid}</span>;
1025 });
1026
1027 export const ResponsiblePerson = compose(
1028     connect((state: RootState, props: { uuid: string; parentRef: HTMLElement | null }) => {
1029         let responsiblePersonName: string = "";
1030         let responsiblePersonUUID: string = "";
1031         let responsiblePersonProperty: string = "";
1032
1033         if (state.auth.config.clusterConfig.Collections.ManagedProperties) {
1034             let index = 0;
1035             const keys = Object.keys(state.auth.config.clusterConfig.Collections.ManagedProperties);
1036
1037             while (!responsiblePersonProperty && keys[index]) {
1038                 const key = keys[index];
1039                 if (state.auth.config.clusterConfig.Collections.ManagedProperties[key].Function === "original_owner") {
1040                     responsiblePersonProperty = key;
1041                 }
1042                 index++;
1043             }
1044         }
1045
1046         let resource: Resource | undefined = getResource<GroupContentsResource & UserResource>(props.uuid)(state.resources);
1047
1048         while (resource && resource.kind !== ResourceKind.USER && responsiblePersonProperty) {
1049             responsiblePersonUUID = (resource as CollectionResource).properties[responsiblePersonProperty];
1050             resource = getResource<GroupContentsResource & UserResource>(responsiblePersonUUID)(state.resources);
1051         }
1052
1053         if (resource && resource.kind === ResourceKind.USER) {
1054             responsiblePersonName = getUserFullname(resource as UserResource) || (resource as GroupContentsResource).name;
1055         }
1056
1057         return { uuid: responsiblePersonUUID, responsiblePersonName, parentRef: props.parentRef };
1058     }),
1059     withStyles({}, { withTheme: true })
1060 )((props: { uuid: string | null; responsiblePersonName: string; parentRef: HTMLElement | null; theme: ArvadosTheme }) => {
1061     const { uuid, responsiblePersonName, parentRef, theme } = props;
1062
1063     if (!uuid && parentRef) {
1064         parentRef.style.display = "none";
1065         return null;
1066     } else if (parentRef) {
1067         parentRef.style.display = "block";
1068     }
1069
1070     if (!responsiblePersonName) {
1071         return (
1072             <Typography
1073                 style={{ color: theme.palette.primary.main }}
1074                 display="inline"
1075                 noWrap
1076             >
1077                 {uuid}
1078             </Typography>
1079         );
1080     }
1081
1082     return (
1083         <Typography
1084             style={{ color: theme.palette.primary.main }}
1085             display="inline"
1086             noWrap
1087         >
1088             {responsiblePersonName} ({uuid})
1089         </Typography>
1090     );
1091 });
1092
1093 export const renderType = (resource: GroupContentsResource | undefined) => {
1094     if(!resource) return <Typography noWrap>-</Typography>;
1095     const type = resource.kind;
1096     const subtype = resource.kind === ResourceKind.GROUP
1097                         ? resource.groupClass
1098                         : resource.kind === ResourceKind.PROCESS
1099                             ? resource.requestingContainerUuid
1100                                 ? ProcessTypeFilter.CHILD_PROCESS
1101                                 : ProcessTypeFilter.MAIN_PROCESS
1102                             : ""
1103     return<Typography noWrap>{resourceLabel(type, subtype)}</Typography>
1104 };
1105
1106 // export const ResourceType = connect((state: RootState, props: { uuid: string }) => {
1107 //     const resource = getResource<GroupContentsResource>(props.uuid)(state.resources);
1108 //     return resource
1109 //     // return {
1110 //     //     type: resource ? resource.kind : "",
1111 //     //     subtype: resource
1112 //     //         ? resource.kind === ResourceKind.GROUP
1113 //     //             ? resource.groupClass
1114 //     //             : resource.kind === ResourceKind.PROCESS
1115 //     //                 ? resource.requestingContainerUuid
1116 //     //                     ? ProcessTypeFilter.CHILD_PROCESS
1117 //     //                     : ProcessTypeFilter.MAIN_PROCESS
1118 //     //                 : ""
1119 //     //         : ""
1120 //     // };
1121 // })((props: { resource: any}) => renderType(props.resource || undefined));
1122
1123 export const renderResourceStatus = (resource: GroupContentsResource) => {
1124     return resource.kind === ResourceKind.COLLECTION ? <CollectionStatus collection={resource} /> : <ProcessStatus uuid={resource.uuid} />;
1125 }
1126
1127 // export const ResourceStatus = connect((state: RootState, props: { uuid: string }) => {
1128 //     return { resource: getResource<GroupContentsResource>(props.uuid)(state.resources) };
1129 // })((props: { resource: GroupContentsResource }) =>
1130 //     props.resource && props.resource.kind === ResourceKind.COLLECTION ? (
1131 //         <CollectionStatus uuid={props.resource.uuid} />
1132 //     ) : (
1133 //         <ProcessStatus uuid={props.resource.uuid} />
1134 //     )
1135 // );
1136
1137 export const CollectionStatus = (props: { collection: CollectionResource }) =>
1138     props.collection.uuid !== props.collection.currentVersionUuid ? (
1139         <Typography>version {props.collection.version}</Typography>
1140     ) : (
1141         <Typography>head version</Typography>
1142     );
1143
1144 export const CollectionName = connect((state: RootState, props: { uuid: string; className?: string }) => {
1145     return {
1146         collection: getResource<CollectionResource>(props.uuid)(state.resources),
1147         uuid: props.uuid,
1148         className: props.className,
1149     };
1150 })((props: { collection: CollectionResource; uuid: string; className?: string }) => (
1151     <Typography className={props.className}>{props.collection?.name || props.uuid}</Typography>
1152 ));
1153
1154 export const ProcessStatus = compose(
1155     connect((state: RootState, props: { uuid: string }) => {
1156         return { process: getProcess(props.uuid)(state.resources) };
1157     }),
1158     withStyles({}, { withTheme: true })
1159 )((props: { process?: Process; theme: ArvadosTheme }) =>
1160     props.process ? (
1161         <Chip
1162             data-cy="process-status-chip"
1163             label={getProcessStatus(props.process)}
1164             style={{
1165                 height: props.theme.spacing(3),
1166                 width: props.theme.spacing(12),
1167                 ...getProcessStatusStyles(getProcessStatus(props.process), props.theme),
1168                 fontSize: "0.875rem",
1169                 borderRadius: props.theme.spacing(0.625),
1170             }}
1171         />
1172     ) : (
1173         <Typography>-</Typography>
1174     )
1175 );
1176
1177 export const ProcessStartDate = connect((state: RootState, props: { uuid: string }) => {
1178     const process = getProcess(props.uuid)(state.resources);
1179     return { date: process && process.container ? process.container.startedAt : "" };
1180 })((props: { date: string }) => renderDate(props.date));
1181
1182 export const renderRunTime = (time: number) => (
1183     <Typography
1184         noWrap
1185         style={{ minWidth: "45px" }}
1186     >
1187         {formatTime(time, true)}
1188     </Typography>
1189 );
1190
1191 interface ContainerRunTimeProps {
1192     process: Process;
1193 }
1194
1195 interface ContainerRunTimeState {
1196     runtime: number;
1197 }
1198
1199 export const ContainerRunTime = connect((state: RootState, props: { uuid: string }) => {
1200     return { process: getProcess(props.uuid)(state.resources) };
1201 })(
1202     class extends React.Component<ContainerRunTimeProps, ContainerRunTimeState> {
1203         private timer: any;
1204
1205         constructor(props: ContainerRunTimeProps) {
1206             super(props);
1207             this.state = { runtime: this.getRuntime() };
1208         }
1209
1210         getRuntime() {
1211             return this.props.process ? getProcessRuntime(this.props.process) : 0;
1212         }
1213
1214         updateRuntime() {
1215             this.setState({ runtime: this.getRuntime() });
1216         }
1217
1218         componentDidMount() {
1219             this.timer = setInterval(this.updateRuntime.bind(this), 5000);
1220         }
1221
1222         componentWillUnmount() {
1223             clearInterval(this.timer);
1224         }
1225
1226         render() {
1227             return this.props.process ? renderRunTime(this.state.runtime) : <Typography>-</Typography>;
1228         }
1229     }
1230 );
1231
1232 // export const GroupMembersCount = connect(
1233 //     (state: RootState, props: { uuid: string }) => {
1234 //         const group = getResource<GroupResource>(props.uuid)(state.resources);
1235
1236 //         return {
1237 //             value: group?.memberCount,
1238 //         };
1239
1240 //     }
1241 // )(withTheme((props: {value: number | null | undefined, theme:ArvadosTheme}) => {
1242 //     if (props.value === undefined) {
1243 //         // Loading
1244 //         return <Typography component={"div"}>
1245 //             <InlinePulser />
1246 //         </Typography>;
1247 //     } else if (props.value === null) {
1248 //         // Error
1249 //         return <Typography>
1250 //             <Tooltip title="Failed to load member count">
1251 //                 <ErrorIcon style={{color: props.theme.customs.colors.greyL}}/>
1252 //             </Tooltip>
1253 //         </Typography>;
1254 //     } else {
1255 //         return <Typography children={props.value} />;
1256 //     }
1257 // }));
1258
1259 export const renderMembersCount = (resource: GroupResource) => {
1260     const value = resource.memberCount;
1261     if (value === undefined) {
1262         // Loading
1263         return <Typography component={"div"}>
1264             <InlinePulser />
1265         </Typography>;
1266     } else if (value === null) {
1267         // Error
1268         return <Typography>
1269             <Tooltip title="Failed to load member count">
1270                 <ErrorIcon style={{color: CustomTheme.palette.grey['600']}}/>
1271             </Tooltip>
1272         </Typography>;
1273     } else {
1274         return <Typography children={value} />;
1275     }
1276 };
1277
1278 export const renderRestoreFromTrash = (resource: TrashableResource) => {
1279     return (
1280         <Tooltip title="Restore">
1281             <IconButton
1282                 style={{ padding: '0' }}
1283                 onClick={() => {
1284                     if (resource) {
1285                         dispatchAction(toggleTrashed,
1286                             resource.kind,
1287                             resource.uuid,
1288                             resource.ownerUuid,
1289                             resource.isTrashed
1290                         );
1291                     }}}
1292                 size="large">
1293                 <RestoreFromTrashIcon />
1294             </IconButton>
1295         </Tooltip>
1296     );
1297 };