From: Michal Klobukowski Date: Mon, 17 Dec 2018 16:56:55 +0000 (+0100) Subject: Merge branch 'master' into 14603-add-controlled-vocabulary-to-advanced-search X-Git-Tag: 1.4.0~71^2~16^2~5 X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/3ddd45b007768a39591cd116b4a213cd39019e0c?hp=f4e410a5984226818301332c25ac178403c2e0e9 Merge branch 'master' into 14603-add-controlled-vocabulary-to-advanced-search refs #14603 Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski --- diff --git a/README.md b/README.md index e8d77701..425d1787 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,8 @@ Currently this configuration schema is supported: ``` { "API_HOST": "string", - "VOCABULARY_URL": "string" + "VOCABULARY_URL": "string", + "FILE_VIEWERS_CONFIG_URL": "string", } ``` @@ -49,6 +50,13 @@ Currently this configuration schema is supported: Local path, or any URL that allows cross-origin requests. See [Vocabulary JSON file example](public/vocabulary-example.json). +### FILE_VIEWERS_CONFIG_URL +Local path, or any URL that allows cross-origin requests. See: + +[File viewers config file example](public/file-viewers-example.json) + +[File viewers config scheme](src/models/file-viewers-config.ts) + ### Licensing Arvados is Free Software. See COPYING for information about Arvados Free diff --git a/public/file-viewers-example.json b/public/file-viewers-example.json new file mode 100644 index 00000000..27adb70b --- /dev/null +++ b/public/file-viewers-example.json @@ -0,0 +1,25 @@ +[ + { + "name": "File browser", + "extensions": [ + ".txt", + ".zip" + ], + "url": "https://doc.arvados.org", + "filePathParam": "filePath", + "iconUrl": "https://material.io/tools/icons/static/icons/baseline-next_week-24px.svg" + }, + { + "name": "Collection browser", + "extensions": [], + "collections": true, + "url": "https://doc.arvados.org", + "filePathParam": "collectionPath" + }, + { + "name": "Universal browser", + "collections": true, + "url": "https://doc.arvados.org", + "filePathParam": "filePath" + } +] \ No newline at end of file diff --git a/src/common/config.ts b/src/common/config.ts index b7b89bd9..db67ed8d 100644 --- a/src/common/config.ts +++ b/src/common/config.ts @@ -50,6 +50,7 @@ export interface Config { websocketUrl: string; workbenchUrl: string; vocabularyUrl: string; + fileViewersConfigUrl: string; } export const fetchConfig = () => { @@ -59,10 +60,15 @@ export const fetchConfig = () => { .catch(() => Promise.resolve(getDefaultConfig())) .then(config => Axios .get(getDiscoveryURL(config.API_HOST)) - .then(response => ({ + .then(response => ({ // TODO: After tests delete `|| '/vocabulary-example.json'` - config: {...response.data, vocabularyUrl: config.VOCABULARY_URL || '/vocabulary-example.json' }, - apiHost: config.API_HOST, + // TODO: After tests delete `|| '/file-viewers-example.json'` + config: { + ...response.data, + vocabularyUrl: config.VOCABULARY_URL || '/vocabulary-example.json', + fileViewersConfigUrl: config.FILE_VIEWERS_CONFIG_URL || '/file-viewers-example.json' + }, + apiHost: config.API_HOST, }))); }; @@ -111,17 +117,20 @@ export const mockConfig = (config: Partial): Config => ({ websocketUrl: '', workbenchUrl: '', vocabularyUrl: '', + fileViewersConfigUrl: '', ...config }); interface ConfigJSON { API_HOST: string; VOCABULARY_URL: string; + FILE_VIEWERS_CONFIG_URL: string; } const getDefaultConfig = (): ConfigJSON => ({ API_HOST: process.env.REACT_APP_ARVADOS_API_HOST || "", VOCABULARY_URL: "", + FILE_VIEWERS_CONFIG_URL: "", }); const getDiscoveryURL = (apiHost: string) => `${window.location.protocol}//${apiHost}/discovery/v1/apis/arvados/v1/rest`; diff --git a/src/common/formatters.ts b/src/common/formatters.ts index 5383c66e..ae50ee8a 100644 --- a/src/common/formatters.ts +++ b/src/common/formatters.ts @@ -8,9 +8,9 @@ export const formatDate = (isoDate?: string) => { if (isoDate) { const date = new Date(isoDate); const text = date.toLocaleString(); - return text === 'Invalid Date' ? "" : text; + return text === 'Invalid Date' ? "(none)" : text; } - return ""; + return "(none)"; }; export const formatFileSize = (size?: number) => { diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx index 57881f1a..52918c34 100644 --- a/src/components/autocomplete/autocomplete.tsx +++ b/src/components/autocomplete/autocomplete.tsx @@ -15,6 +15,7 @@ export interface AutocompleteProps { suggestions?: Suggestion[]; error?: boolean; helperText?: string; + autofocus?: boolean; onChange: (event: React.ChangeEvent) => void; onBlur?: (event: React.FocusEvent) => void; onFocus?: (event: React.FocusEvent) => void; @@ -29,6 +30,7 @@ export interface AutocompleteState { suggestionsOpen: boolean; selectedSuggestionIndex: number; } + export class Autocomplete extends React.Component, AutocompleteState> { state = { @@ -59,6 +61,7 @@ export class Autocomplete extends React.Component { {item.name} } )} - {groupIndex < items.length - 1 && } + { + items[groupIndex + 1] && + items[groupIndex + 1].length > 0 && + + } )} ; diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx index 4175fbc6..b6ca215d 100644 --- a/src/components/data-explorer/data-explorer.tsx +++ b/src/components/data-explorer/data-explorer.tsx @@ -49,6 +49,7 @@ interface DataExplorerDataProps { paperProps?: PaperProps; actions?: React.ReactNode; hideSearchInput?: boolean; + paperKey?: string; } interface DataExplorerActionProps { @@ -79,9 +80,10 @@ export const DataExplorer = withStyles(styles)( columns, onContextMenu, onFiltersChange, onSortToggle, working, extractKey, rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch, items, itemsAvailable, onRowClick, onRowDoubleClick, classes, - dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput + dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput, + paperKey } = this.props; - return + return {!hideSearchInput &&
@@ -105,8 +107,7 @@ export const DataExplorer = withStyles(styles)( onSortToggle={onSortToggle} extractKey={extractKey} working={working} - defaultView={dataTableDefaultView} - /> + defaultView={dataTableDefaultView} /> ; export const MoveToIcon: IconType = (props) => ; export const NewProjectIcon: IconType = (props) => ; export const NotificationIcon: IconType = (props) => ; +export const OpenIcon: IconType = (props) => ; export const OutputIcon: IconType = (props) => ; export const PaginationDownIcon: IconType = (props) => ; export const PaginationLeftArrowIcon: IconType = (props) => ; diff --git a/src/index.tsx b/src/index.tsx index e73f08c4..7cd4ae9a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -56,7 +56,10 @@ import { virtualMachineActionSet } from '~/views-components/context-menu/action- import { userActionSet } from '~/views-components/context-menu/action-sets/user-action-set'; import { computeNodeActionSet } from '~/views-components/context-menu/action-sets/compute-node-action-set'; import { apiClientAuthorizationActionSet } from '~/views-components/context-menu/action-sets/api-client-authorization-action-set'; +import { groupActionSet } from '~/views-components/context-menu/action-sets/group-action-set'; +import { groupMemberActionSet } from '~/views-components/context-menu/action-sets/group-member-action-set'; import { linkActionSet } from '~/views-components/context-menu/action-sets/link-action-set'; +import { loadFileViewersConfig } from '~/store/file-viewers/file-viewers-actions'; console.log(`Starting arvados [${getBuildInfo()}]`); @@ -81,6 +84,8 @@ addMenuActionSet(ContextMenuKind.USER, userActionSet); addMenuActionSet(ContextMenuKind.LINK, linkActionSet); addMenuActionSet(ContextMenuKind.NODE, computeNodeActionSet); addMenuActionSet(ContextMenuKind.API_CLIENT_AUTHORIZATION, apiClientAuthorizationActionSet); +addMenuActionSet(ContextMenuKind.GROUPS, groupActionSet); +addMenuActionSet(ContextMenuKind.GROUP_MEMBER, groupMemberActionSet); fetchConfig() .then(({ config, apiHost }) => { @@ -102,6 +107,7 @@ fetchConfig() store.dispatch(setCurrentTokenDialogApiHost(apiHost)); store.dispatch(setUuidPrefix(config.uuidPrefix)); store.dispatch(loadVocabulary); + store.dispatch(loadFileViewersConfig); const TokenComponent = (props: any) => ; const MainPanelComponent = (props: any) => ; diff --git a/src/models/file-viewers-config.ts b/src/models/file-viewers-config.ts new file mode 100644 index 00000000..e95116ba --- /dev/null +++ b/src/models/file-viewers-config.ts @@ -0,0 +1,47 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +export type FileViewerList = FileViewer[]; + +export interface FileViewer { + /** + * Name is used as a label in file's context menu + */ + name: string; + + /** + * Limits files for which viewer is enabled + * If not given, viewer will be enabled for all files + * Viewer is enabled if file name ends with an extension. + * + * Example: `['.zip', '.tar.gz', 'bam']` + */ + extensions?: string[]; + + /** + * Determines whether a viewer is enabled for collections. + */ + collections?: boolean; + + /** + * URL that redirects to a viewer + * Example: `https://bam-viewer.com` + */ + url: string; + + /** + * Name of a search param that will be used to send file's path to a viewer + * Example: + * + * `{ filePathParam: 'filePath' }` + * + * `https://bam-viewer.com?filePath=/path/to/file` + */ + filePathParam: string; + + /** + * Icon that will display next to a label + */ + iconUrl?: string; +} diff --git a/src/models/link.ts b/src/models/link.ts index d931f7f2..785d531c 100644 --- a/src/models/link.ts +++ b/src/models/link.ts @@ -2,9 +2,8 @@ // // SPDX-License-Identifier: AGPL-3.0 -import { Resource } from "./resource"; import { TagProperty } from "~/models/tag"; -import { ResourceKind } from '~/models/resource'; +import { Resource, ResourceKind } from '~/models/resource'; export interface LinkResource extends Resource { headUuid: string; @@ -14,6 +13,7 @@ export interface LinkResource extends Resource { linkClass: string; name: string; properties: TagProperty; + kind: ResourceKind.LINK; } export enum LinkClass { diff --git a/src/routes/route-change-handlers.ts b/src/routes/route-change-handlers.ts index 655c806f..03e2a38a 100644 --- a/src/routes/route-change-handlers.ts +++ b/src/routes/route-change-handlers.ts @@ -8,6 +8,8 @@ import * as Routes from '~/routes/routes'; import * as WorkbenchActions from '~/store/workbench/workbench-actions'; import { navigateToRootProject } from '~/store/navigation/navigation-action'; import { dialogActions } from '~/store/dialog/dialog-actions'; +import { contextMenuActions } from '~/store/context-menu/context-menu-actions'; +import { searchBarActions } from '~/store/search-bar/search-bar-actions'; export const addRouteChangeHandlers = (history: History, store: RootStore) => { const handler = handleLocationChange(store); @@ -37,9 +39,13 @@ const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => { const apiClientAuthorizationsMatch = Routes.matchApiClientAuthorizationsRoute(pathname); const myAccountMatch = Routes.matchMyAccountRoute(pathname); const userMatch = Routes.matchUsersRoute(pathname); + const groupsMatch = Routes.matchGroupsRoute(pathname); + const groupDetailsMatch = Routes.matchGroupDetailsRoute(pathname); const linksMatch = Routes.matchLinksRoute(pathname); store.dispatch(dialogActions.CLOSE_ALL_DIALOGS()); + store.dispatch(contextMenuActions.CLOSE_CONTEXT_MENU()); + store.dispatch(searchBarActions.CLOSE_SEARCH_VIEW()); if (projectMatch) { store.dispatch(WorkbenchActions.loadProject(projectMatch.params.id)); @@ -83,6 +89,10 @@ const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => { store.dispatch(WorkbenchActions.loadMyAccount); } else if (userMatch) { store.dispatch(WorkbenchActions.loadUsers); + } else if (groupsMatch) { + store.dispatch(WorkbenchActions.loadGroupsPanel); + } else if (groupDetailsMatch) { + store.dispatch(WorkbenchActions.loadGroupDetailsPanel(groupDetailsMatch.params.id)); } else if (linksMatch) { store.dispatch(WorkbenchActions.loadLinks); } diff --git a/src/routes/routes.ts b/src/routes/routes.ts index 05f6663f..661a065e 100644 --- a/src/routes/routes.ts +++ b/src/routes/routes.ts @@ -30,6 +30,8 @@ export const Routes = { COMPUTE_NODES: `/nodes`, USERS: '/users', API_CLIENT_AUTHORIZATIONS: `/api_client_authorizations`, + GROUPS: '/groups', + GROUP_DETAILS: `/group/:id(${RESOURCE_UUID_PATTERN})`, LINKS: '/links' }; @@ -51,6 +53,8 @@ export const getProcessUrl = (uuid: string) => `/processes/${uuid}`; export const getProcessLogUrl = (uuid: string) => `/process-logs/${uuid}`; +export const getGroupUrl = (uuid: string) => `/group/${uuid}`; + export interface ResourceRouteParams { id: string; } @@ -118,5 +122,11 @@ export const matchComputeNodesRoute = (route: string) => export const matchApiClientAuthorizationsRoute = (route: string) => matchPath(route, { path: Routes.API_CLIENT_AUTHORIZATIONS }); +export const matchGroupsRoute = (route: string) => + matchPath(route, { path: Routes.GROUPS }); + +export const matchGroupDetailsRoute = (route: string) => + matchPath(route, { path: Routes.GROUP_DETAILS }); + export const matchLinksRoute = (route: string) => - matchPath(route, { path: Routes.LINKS }); \ No newline at end of file + matchPath(route, { path: Routes.LINKS }); diff --git a/src/services/api/filter-builder.ts b/src/services/api/filter-builder.ts index 08746c81..4b3db9fa 100644 --- a/src/services/api/filter-builder.ts +++ b/src/services/api/filter-builder.ts @@ -11,8 +11,8 @@ export function joinFilters(filters0?: string, filters1?: string) { export class FilterBuilder { constructor(private filters = "") { } - public addEqual(field: string, value?: string | boolean, resourcePrefix?: string) { - return this.addCondition(field, "=", value, "", "", resourcePrefix ); + public addEqual(field: string, value?: string | boolean | null, resourcePrefix?: string) { + return this.addCondition(field, "=", value, "", "", resourcePrefix); } public addLike(field: string, value?: string, resourcePrefix?: string) { @@ -59,13 +59,13 @@ export class FilterBuilder { return this.filters; } - private addCondition(field: string, cond: string, value?: string | string[] | boolean, prefix: string = "", postfix: string = "", resourcePrefix?: string) { - if (value) { + private addCondition(field: string, cond: string, value?: string | string[] | boolean | null, prefix: string = "", postfix: string = "", resourcePrefix?: string) { + if (value !== undefined) { if (typeof value === "string") { value = `"${prefix}${value}${postfix}"`; } else if (Array.isArray(value)) { value = `["${value.join(`","`)}"]`; - } else { + } else if (value !== null) { value = value ? "true" : "false"; } diff --git a/src/services/collection-service/collection-service.ts b/src/services/collection-service/collection-service.ts index b0d5cb14..f0f25a2d 100644 --- a/src/services/collection-service/collection-service.ts +++ b/src/services/collection-service/collection-service.ts @@ -56,7 +56,7 @@ export class CollectionService extends TrashableResourceService(this.url) + .then(response => response.data); + } +} diff --git a/src/services/services.ts b/src/services/services.ts index 59fe2d47..78ea714b 100644 --- a/src/services/services.ts +++ b/src/services/services.ts @@ -30,6 +30,7 @@ import { RepositoriesService } from '~/services/repositories-service/repositorie import { AuthorizedKeysService } from '~/services/authorized-keys-service/authorized-keys-service'; import { VocabularyService } from '~/services/vocabulary-service/vocabulary-service'; import { NodeService } from '~/services/node-service/node-service'; +import { FileViewersConfigService } from '~/services/file-viewers-config-service/file-viewers-config-service'; export type ServiceRepository = ReturnType; @@ -64,6 +65,7 @@ export const createServices = (config: Config, actions: ApiActions) => { const tagService = new TagService(linkService); const searchService = new SearchService(); const vocabularyService = new VocabularyService(config.vocabularyUrl); + const fileViewersConfig = new FileViewersConfigService(config.fileViewersConfigUrl); return { ancestorsService, @@ -76,6 +78,7 @@ export const createServices = (config: Config, actions: ApiActions) => { containerRequestService, containerService, favoriteService, + fileViewersConfig, groupsService, keepService, linkService, diff --git a/src/store/advanced-tab/advanced-tab.ts b/src/store/advanced-tab/advanced-tab.ts index 659b6e49..0cb1c740 100644 --- a/src/store/advanced-tab/advanced-tab.ts +++ b/src/store/advanced-tab/advanced-tab.ts @@ -241,7 +241,8 @@ export const openAdvancedTabDialog = (uuid: string) => dispatch(initAdvancedTabDialog(advanceDataUser)); break; case ResourceKind.NODE: - const dataComputeNode = getState().computeNodes.find(node => node.uuid === uuid); + const computeNodeResources = getState().resources; + const dataComputeNode = getResource(uuid)(computeNodeResources); const advanceDataComputeNode = advancedTabData({ uuid, metadata: '', @@ -251,7 +252,7 @@ export const openAdvancedTabDialog = (uuid: string) => resourceKind: ComputeNodeData.COMPUTE_NODE, resourcePrefix: ResourcePrefix.COMPUTE_NODES, resourceKindProperty: ComputeNodeData.PROPERTIES, - property: dataComputeNode!.properties + property: dataComputeNode ? dataComputeNode.properties : {} }); dispatch(initAdvancedTabDialog(advanceDataComputeNode)); break; diff --git a/src/store/breadcrumbs/breadcrumbs-actions.ts b/src/store/breadcrumbs/breadcrumbs-actions.ts index 8b1eb2b0..71de5ce4 100644 --- a/src/store/breadcrumbs/breadcrumbs-actions.ts +++ b/src/store/breadcrumbs/breadcrumbs-actions.ts @@ -14,6 +14,7 @@ import { ServiceRepository } from '~/services/services'; import { SidePanelTreeCategory, activateSidePanelTreeItem } from '~/store/side-panel-tree/side-panel-tree-actions'; import { updateResources } from '../resources/resources-actions'; import { ResourceKind } from '~/models/resource'; +import { GroupResource } from '~/models/group'; export const BREADCRUMBS = 'breadcrumbs'; @@ -89,3 +90,22 @@ export const setProcessBreadcrumbs = (processUuid: string) => dispatch(setProjectBreadcrumbs(process.containerRequest.ownerUuid)); } }; + +export const GROUPS_PANEL_LABEL = 'Groups'; + +export const setGroupsBreadcrumbs = () => + setBreadcrumbs([{ label: GROUPS_PANEL_LABEL }]); + +export const setGroupDetailsBreadcrumbs = (groupUuid: string) => + (dispatch: Dispatch, getState: () => RootState) => { + + const group = getResource(groupUuid)(getState().resources); + + const breadcrumbs: ResourceBreadcrumb[] = [ + { label: GROUPS_PANEL_LABEL, uuid: GROUPS_PANEL_LABEL }, + { label: group ? group.name : groupUuid, uuid: groupUuid }, + ]; + + dispatch(setBreadcrumbs(breadcrumbs)); + + }; diff --git a/src/store/compute-nodes/compute-nodes-actions.ts b/src/store/compute-nodes/compute-nodes-actions.ts index 659b1e86..f2f6ad07 100644 --- a/src/store/compute-nodes/compute-nodes-actions.ts +++ b/src/store/compute-nodes/compute-nodes-actions.ts @@ -3,21 +3,18 @@ // SPDX-License-Identifier: AGPL-3.0 import { Dispatch } from "redux"; -import { unionize, ofType, UnionOf } from "~/common/unionize"; import { RootState } from '~/store/store'; import { setBreadcrumbs } from '~/store/breadcrumbs/breadcrumbs-actions'; -import { ServiceRepository } from "~/services/services"; -import { NodeResource } from '~/models/node'; import { dialogActions } from '~/store/dialog/dialog-actions'; import { snackbarActions } from '~/store/snackbar/snackbar-actions'; import { navigateToRootProject } from '~/store/navigation/navigation-action'; +import { bindDataExplorerActions } from '~/store/data-explorer/data-explorer-action'; +import { getResource } from '~/store/resources/resources'; +import { ServiceRepository } from "~/services/services"; +import { NodeResource } from '~/models/node'; -export const computeNodesActions = unionize({ - SET_COMPUTE_NODES: ofType(), - REMOVE_COMPUTE_NODE: ofType() -}); - -export type ComputeNodesActions = UnionOf; +export const COMPUTE_NODE_PANEL_ID = "computeNodeId"; +export const computeNodesActions = bindDataExplorerActions(COMPUTE_NODE_PANEL_ID); export const COMPUTE_NODE_REMOVE_DIALOG = 'computeNodeRemoveDialog'; export const COMPUTE_NODE_ATTRIBUTES_DIALOG = 'computeNodeAttributesDialog'; @@ -28,8 +25,7 @@ export const loadComputeNodesPanel = () => if (user && user.isAdmin) { try { dispatch(setBreadcrumbs([{ label: 'Compute Nodes' }])); - const response = await services.nodeService.list(); - dispatch(computeNodesActions.SET_COMPUTE_NODES(response.items)); + dispatch(computeNodesActions.REQUEST_ITEMS()); } catch (e) { return; } @@ -41,7 +37,8 @@ export const loadComputeNodesPanel = () => export const openComputeNodeAttributesDialog = (uuid: string) => (dispatch: Dispatch, getState: () => RootState) => { - const computeNode = getState().computeNodes.find(node => node.uuid === uuid); + const { resources } = getState(); + const computeNode = getResource(uuid)(resources); dispatch(dialogActions.OPEN_DIALOG({ id: COMPUTE_NODE_ATTRIBUTES_DIALOG, data: { computeNode } })); }; @@ -63,7 +60,7 @@ export const removeComputeNode = (uuid: string) => dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Removing ...' })); try { await services.nodeService.delete(uuid); - dispatch(computeNodesActions.REMOVE_COMPUTE_NODE(uuid)); + dispatch(computeNodesActions.REQUEST_ITEMS()); dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Compute node has been successfully removed.', hideDuration: 2000 })); } catch (e) { return; diff --git a/src/store/compute-nodes/compute-nodes-middleware-service.ts b/src/store/compute-nodes/compute-nodes-middleware-service.ts new file mode 100644 index 00000000..792da7a0 --- /dev/null +++ b/src/store/compute-nodes/compute-nodes-middleware-service.ts @@ -0,0 +1,70 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { ServiceRepository } from '~/services/services'; +import { MiddlewareAPI, Dispatch } from 'redux'; +import { DataExplorerMiddlewareService, dataExplorerToListParams, listResultsToDataExplorerItemsMeta } from '~/store/data-explorer/data-explorer-middleware-service'; +import { RootState } from '~/store/store'; +import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions'; +import { DataExplorer, getDataExplorer } from '~/store/data-explorer/data-explorer-reducer'; +import { updateResources } from '~/store/resources/resources-actions'; +import { getSortColumn } from "~/store/data-explorer/data-explorer-reducer"; +import { computeNodesActions } from '~/store/compute-nodes/compute-nodes-actions'; +import { OrderDirection, OrderBuilder } from '~/services/api/order-builder'; +import { ListResults } from '~/services/common-service/common-service'; +import { NodeResource } from '~/models/node'; +import { SortDirection } from '~/components/data-table/data-column'; +import { ComputeNodePanelColumnNames } from '~/views/compute-node-panel/compute-node-panel-root'; + +export class ComputeNodeMiddlewareService extends DataExplorerMiddlewareService { + constructor(private services: ServiceRepository, id: string) { + super(id); + } + + async requestItems(api: MiddlewareAPI) { + const state = api.getState(); + const dataExplorer = getDataExplorer(state.dataExplorer, this.getId()); + try { + const response = await this.services.nodeService.list(getParams(dataExplorer)); + api.dispatch(updateResources(response.items)); + api.dispatch(setItems(response)); + } catch { + api.dispatch(couldNotFetchLinks()); + } + } +} + +export const getParams = (dataExplorer: DataExplorer) => ({ + ...dataExplorerToListParams(dataExplorer), + order: getOrder(dataExplorer) +}); + +const getOrder = (dataExplorer: DataExplorer) => { + const sortColumn = getSortColumn(dataExplorer); + const order = new OrderBuilder(); + if (sortColumn) { + const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC + ? OrderDirection.ASC + : OrderDirection.DESC; + + const columnName = sortColumn && sortColumn.name === ComputeNodePanelColumnNames.UUID ? "uuid" : "modifiedAt"; + return order + .addOrder(sortDirection, columnName) + .getOrder(); + } else { + return order.getOrder(); + } +}; + +export const setItems = (listResults: ListResults) => + computeNodesActions.SET_ITEMS({ + ...listResultsToDataExplorerItemsMeta(listResults), + items: listResults.items.map(resource => resource.uuid), + }); + +const couldNotFetchLinks = () => + snackbarActions.OPEN_SNACKBAR({ + message: 'Could not fetch compute nodes.', + kind: SnackbarKind.ERROR + }); diff --git a/src/store/compute-nodes/compute-nodes-reducer.ts b/src/store/compute-nodes/compute-nodes-reducer.ts deleted file mode 100644 index 44a37807..00000000 --- a/src/store/compute-nodes/compute-nodes-reducer.ts +++ /dev/null @@ -1,17 +0,0 @@ -// Copyright (C) The Arvados Authors. All rights reserved. -// -// SPDX-License-Identifier: AGPL-3.0 - -import { computeNodesActions, ComputeNodesActions } from '~/store/compute-nodes/compute-nodes-actions'; -import { NodeResource } from '~/models/node'; - -export type ComputeNodesState = NodeResource[]; - -const initialState: ComputeNodesState = []; - -export const computeNodesReducer = (state: ComputeNodesState = initialState, action: ComputeNodesActions): ComputeNodesState => - computeNodesActions.match(action, { - SET_COMPUTE_NODES: nodes => nodes, - REMOVE_COMPUTE_NODE: (uuid: string) => state.filter((computeNode) => computeNode.uuid !== uuid), - default: () => state - }); \ No newline at end of file diff --git a/src/store/context-menu/context-menu-actions.ts b/src/store/context-menu/context-menu-actions.ts index e9b08a84..c43d5685 100644 --- a/src/store/context-menu/context-menu-actions.ts +++ b/src/store/context-menu/context-menu-actions.ts @@ -17,8 +17,8 @@ import { RepositoryResource } from '~/models/repositories'; import { SshKeyResource } from '~/models/ssh-key'; import { VirtualMachinesResource } from '~/models/virtual-machines'; import { KeepServiceResource } from '~/models/keep-services'; -import { NodeResource } from '~/models/node'; import { ApiClientAuthorization } from '~/models/api-client-authorization'; +import { ProcessResource } from '~/models/process'; export const contextMenuActions = unionize({ OPEN_CONTEXT_MENU: ofType<{ position: ContextMenuPosition, resource: ContextMenuResource }>(), @@ -35,7 +35,7 @@ export type ContextMenuResource = { kind: ResourceKind, menuKind: ContextMenuKind; isTrashed?: boolean; - index?: number + outputUuid?: string; }; export const isKeyboardClick = (event: React.MouseEvent) => event.nativeEvent.detail === 0; @@ -111,18 +111,18 @@ export const openKeepServiceContextMenu = (event: React.MouseEvent, })); }; -export const openComputeNodeContextMenu = (event: React.MouseEvent, computeNode: NodeResource) => +export const openComputeNodeContextMenu = (event: React.MouseEvent, resourceUuid: string) => (dispatch: Dispatch) => { dispatch(openContextMenu(event, { name: '', - uuid: computeNode.uuid, - ownerUuid: computeNode.ownerUuid, + uuid: resourceUuid, + ownerUuid: '', kind: ResourceKind.NODE, menuKind: ContextMenuKind.NODE })); }; -export const openApiClientAuthorizationContextMenu = +export const openApiClientAuthorizationContextMenu = (event: React.MouseEvent, apiClientAuthorization: ApiClientAuthorization) => (dispatch: Dispatch) => { dispatch(openContextMenu(event, { @@ -178,15 +178,18 @@ export const openSidePanelContextMenu = (event: React.MouseEvent, i export const openProcessContextMenu = (event: React.MouseEvent, process: Process) => (dispatch: Dispatch, getState: () => RootState) => { - const resource = { - uuid: process.containerRequest.uuid, - ownerUuid: process.containerRequest.ownerUuid, - kind: ResourceKind.PROCESS, - name: process.containerRequest.name, - description: process.containerRequest.description, - menuKind: ContextMenuKind.PROCESS - }; - dispatch(openContextMenu(event, resource)); + const res = getResource(process.containerRequest.uuid)(getState().resources); + if (res) { + dispatch(openContextMenu(event, { + uuid: res.uuid, + ownerUuid: res.ownerUuid, + kind: ResourceKind.PROCESS, + name: res.name, + description: res.description, + outputUuid: res.outputUuid || '', + menuKind: ContextMenuKind.PROCESS + })); + } }; export const resourceKindToContextMenuKind = (uuid: string) => { diff --git a/src/store/file-viewers/file-viewers-actions.ts b/src/store/file-viewers/file-viewers-actions.ts new file mode 100644 index 00000000..44bfd2fd --- /dev/null +++ b/src/store/file-viewers/file-viewers-actions.ts @@ -0,0 +1,25 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { Dispatch } from 'redux'; +import { ServiceRepository } from '~/services/services'; +import { propertiesActions } from '~/store/properties/properties-actions'; +import { FILE_VIEWERS_PROPERTY_NAME, DEFAULT_FILE_VIEWERS } from '~/store/file-viewers/file-viewers-selectors'; +import { FileViewerList } from '~/models/file-viewers-config'; + +export const loadFileViewersConfig = async (dispatch: Dispatch, _: {}, { fileViewersConfig }: ServiceRepository) => { + + let config: FileViewerList; + try{ + config = await fileViewersConfig.get(); + } catch (e){ + config = DEFAULT_FILE_VIEWERS; + } + + dispatch(propertiesActions.SET_PROPERTY({ + key: FILE_VIEWERS_PROPERTY_NAME, + value: config, + })); + +}; diff --git a/src/store/file-viewers/file-viewers-selectors.ts b/src/store/file-viewers/file-viewers-selectors.ts new file mode 100644 index 00000000..abc9d3d1 --- /dev/null +++ b/src/store/file-viewers/file-viewers-selectors.ts @@ -0,0 +1,12 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { PropertiesState, getProperty } from '~/store/properties/properties'; +import { FileViewerList } from '~/models/file-viewers-config'; + +export const FILE_VIEWERS_PROPERTY_NAME = 'fileViewers'; + +export const DEFAULT_FILE_VIEWERS: FileViewerList = []; +export const getFileViewers = (state: PropertiesState) => + getProperty(FILE_VIEWERS_PROPERTY_NAME)(state) || DEFAULT_FILE_VIEWERS; diff --git a/src/store/group-details-panel/group-details-panel-actions.ts b/src/store/group-details-panel/group-details-panel-actions.ts new file mode 100644 index 00000000..4ad01594 --- /dev/null +++ b/src/store/group-details-panel/group-details-panel-actions.ts @@ -0,0 +1,132 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { bindDataExplorerActions } from '~/store/data-explorer/data-explorer-action'; +import { Dispatch } from 'redux'; +import { propertiesActions } from '~/store/properties/properties-actions'; +import { getProperty } from '~/store/properties/properties'; +import { Person } from '~/views-components/sharing-dialog/people-select'; +import { dialogActions } from '~/store/dialog/dialog-actions'; +import { reset, startSubmit } from 'redux-form'; +import { addGroupMember, deleteGroupMember } from '~/store/groups-panel/groups-panel-actions'; +import { getResource } from '~/store/resources/resources'; +import { GroupResource } from '~/models/group'; +import { RootState } from '~/store/store'; +import { ServiceRepository } from '~/services/services'; +import { PermissionResource } from '~/models/permission'; +import { GroupDetailsPanel } from '~/views/group-details-panel/group-details-panel'; +import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions'; +import { UserResource, getUserFullname } from '~/models/user'; + +export const GROUP_DETAILS_PANEL_ID = 'groupDetailsPanel'; +export const ADD_GROUP_MEMBERS_DIALOG = 'addGrupMembers'; +export const ADD_GROUP_MEMBERS_FORM = 'addGrupMembers'; +export const ADD_GROUP_MEMBERS_USERS_FIELD_NAME = 'users'; +export const MEMBER_ATTRIBUTES_DIALOG = 'memberAttributesDialog'; +export const MEMBER_REMOVE_DIALOG = 'memberRemoveDialog'; + +export const GroupDetailsPanelActions = bindDataExplorerActions(GROUP_DETAILS_PANEL_ID); + +export const loadGroupDetailsPanel = (groupUuid: string) => + (dispatch: Dispatch) => { + dispatch(propertiesActions.SET_PROPERTY({ key: GROUP_DETAILS_PANEL_ID, value: groupUuid })); + dispatch(GroupDetailsPanelActions.REQUEST_ITEMS()); + }; + +export const getCurrentGroupDetailsPanelUuid = getProperty(GROUP_DETAILS_PANEL_ID); + +export interface AddGroupMembersFormData { + [ADD_GROUP_MEMBERS_USERS_FIELD_NAME]: Person[]; +} + +export const openAddGroupMembersDialog = () => + (dispatch: Dispatch) => { + dispatch(dialogActions.OPEN_DIALOG({ id: ADD_GROUP_MEMBERS_DIALOG, data: {} })); + dispatch(reset(ADD_GROUP_MEMBERS_FORM)); + }; + +export const addGroupMembers = ({ users }: AddGroupMembersFormData) => + + async (dispatch: Dispatch, getState: () => RootState, { permissionService }: ServiceRepository) => { + + const groupUuid = getCurrentGroupDetailsPanelUuid(getState().properties); + + if (groupUuid) { + + dispatch(startSubmit(ADD_GROUP_MEMBERS_FORM)); + + const group = getResource(groupUuid)(getState().resources); + + for (const user of users) { + + await addGroupMember({ + user, + group: { + uuid: groupUuid, + name: group ? group.name : groupUuid, + }, + dispatch, + permissionService, + }); + + } + + dispatch(dialogActions.CLOSE_DIALOG({ id: ADD_GROUP_MEMBERS_FORM })); + dispatch(GroupDetailsPanelActions.REQUEST_ITEMS()); + + } + }; + +export const openGroupMemberAttributes = (uuid: string) => + (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { + const { resources } = getState(); + const data = getResource(uuid)(resources); + dispatch(dialogActions.OPEN_DIALOG({ id: MEMBER_ATTRIBUTES_DIALOG, data })); + }; + +export const openRemoveGroupMemberDialog = (uuid: string) => + (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { + dispatch(dialogActions.OPEN_DIALOG({ + id: MEMBER_REMOVE_DIALOG, + data: { + title: 'Remove member', + text: 'Are you sure you want to remove this member from this group?', + confirmButtonLabel: 'Remove', + uuid + } + })); + }; + +export const removeGroupMember = (uuid: string) => + + async (dispatch: Dispatch, getState: () => RootState, { permissionService }: ServiceRepository) => { + + const groupUuid = getCurrentGroupDetailsPanelUuid(getState().properties); + + if (groupUuid) { + + const group = getResource(groupUuid)(getState().resources); + const user = getResource(groupUuid)(getState().resources); + + dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Removing ...' })); + + await deleteGroupMember({ + user: { + uuid, + name: user ? getUserFullname(user) : uuid, + }, + group: { + uuid: groupUuid, + name: group ? group.name : groupUuid, + }, + permissionService, + dispatch, + }); + + dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Removed.', hideDuration: 2000, kind: SnackbarKind.SUCCESS })); + dispatch(GroupDetailsPanelActions.REQUEST_ITEMS()); + + } + + }; diff --git a/src/store/group-details-panel/group-details-panel-middleware-service.ts b/src/store/group-details-panel/group-details-panel-middleware-service.ts new file mode 100644 index 00000000..bf424c54 --- /dev/null +++ b/src/store/group-details-panel/group-details-panel-middleware-service.ts @@ -0,0 +1,79 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { Dispatch, MiddlewareAPI } from "redux"; +import { DataExplorerMiddlewareService, listResultsToDataExplorerItemsMeta } from "~/store/data-explorer/data-explorer-middleware-service"; +import { RootState } from "~/store/store"; +import { ServiceRepository } from "~/services/services"; +import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions'; +import { getDataExplorer } from "~/store/data-explorer/data-explorer-reducer"; +import { FilterBuilder } from '~/services/api/filter-builder'; +import { updateResources } from '~/store/resources/resources-actions'; +import { getCurrentGroupDetailsPanelUuid, GroupDetailsPanelActions } from '~/store/group-details-panel/group-details-panel-actions'; +import { LinkClass } from '~/models/link'; + +export class GroupDetailsPanelMiddlewareService extends DataExplorerMiddlewareService { + + constructor(private services: ServiceRepository, id: string) { + super(id); + } + + async requestItems(api: MiddlewareAPI) { + + const dataExplorer = getDataExplorer(api.getState().dataExplorer, this.getId()); + const groupUuid = getCurrentGroupDetailsPanelUuid(api.getState().properties); + + if (!dataExplorer || !groupUuid) { + + api.dispatch(groupsDetailsPanelDataExplorerIsNotSet()); + + } else { + + try { + + const permissions = await this.services.permissionService.list({ + + filters: new FilterBuilder() + .addEqual('tailUuid', groupUuid) + .addEqual('linkClass', LinkClass.PERMISSION) + .getFilters() + + }); + + api.dispatch(updateResources(permissions.items)); + + const users = await this.services.userService.list({ + + filters: new FilterBuilder() + .addIn('uuid', permissions.items.map(item => item.headUuid)) + .getFilters() + + }); + + api.dispatch(GroupDetailsPanelActions.SET_ITEMS({ + ...listResultsToDataExplorerItemsMeta(permissions), + items: users.items.map(item => item.uuid), + })); + + api.dispatch(updateResources(users.items)); + + } catch (e) { + + api.dispatch(couldNotFetchGroupDetailsContents()); + + } + } + } +} + +const groupsDetailsPanelDataExplorerIsNotSet = () => + snackbarActions.OPEN_SNACKBAR({ + message: 'Group details panel is not ready.' + }); + +const couldNotFetchGroupDetailsContents = () => + snackbarActions.OPEN_SNACKBAR({ + message: 'Could not fetch group details.', + kind: SnackbarKind.ERROR + }); diff --git a/src/store/groups-panel/groups-panel-actions.ts b/src/store/groups-panel/groups-panel-actions.ts new file mode 100644 index 00000000..8632098e --- /dev/null +++ b/src/store/groups-panel/groups-panel-actions.ts @@ -0,0 +1,225 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { Dispatch } from 'redux'; +import { reset, startSubmit, stopSubmit, FormErrors } from 'redux-form'; +import { bindDataExplorerActions } from "~/store/data-explorer/data-explorer-action"; +import { dialogActions } from '~/store/dialog/dialog-actions'; +import { Person } from '~/views-components/sharing-dialog/people-select'; +import { RootState } from '~/store/store'; +import { ServiceRepository } from '~/services/services'; +import { getResource } from '~/store/resources/resources'; +import { GroupResource } from '~/models/group'; +import { getCommonResourceServiceError, CommonResourceServiceError } from '~/services/common-service/common-resource-service'; +import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions'; +import { PermissionLevel, PermissionResource } from '~/models/permission'; +import { PermissionService } from '~/services/permission-service/permission-service'; +import { FilterBuilder } from '~/services/api/filter-builder'; + +export const GROUPS_PANEL_ID = "groupsPanel"; +export const CREATE_GROUP_DIALOG = "createGroupDialog"; +export const CREATE_GROUP_FORM = "createGroupForm"; +export const CREATE_GROUP_NAME_FIELD_NAME = 'name'; +export const CREATE_GROUP_USERS_FIELD_NAME = 'users'; +export const GROUP_ATTRIBUTES_DIALOG = 'groupAttributesDialog'; +export const GROUP_REMOVE_DIALOG = 'groupRemoveDialog'; + +export const GroupsPanelActions = bindDataExplorerActions(GROUPS_PANEL_ID); + +export const loadGroupsPanel = () => GroupsPanelActions.REQUEST_ITEMS(); + +export const openCreateGroupDialog = () => + (dispatch: Dispatch) => { + dispatch(dialogActions.OPEN_DIALOG({ id: CREATE_GROUP_DIALOG, data: {} })); + dispatch(reset(CREATE_GROUP_FORM)); + }; + +export const openGroupAttributes = (uuid: string) => + (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { + const { resources } = getState(); + const data = getResource(uuid)(resources); + dispatch(dialogActions.OPEN_DIALOG({ id: GROUP_ATTRIBUTES_DIALOG, data })); + }; + +export const removeGroup = (uuid: string) => + async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { + dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Removing ...' })); + await services.groupsService.delete(uuid); + dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Removed.', hideDuration: 2000, kind: SnackbarKind.SUCCESS })); + dispatch(loadGroupsPanel()); + }; + +export const openRemoveGroupDialog = (uuid: string) => + (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { + dispatch(dialogActions.OPEN_DIALOG({ + id: GROUP_REMOVE_DIALOG, + data: { + title: 'Remove group', + text: 'Are you sure you want to remove this group?', + confirmButtonLabel: 'Remove', + uuid + } + })); + }; + +export interface CreateGroupFormData { + [CREATE_GROUP_NAME_FIELD_NAME]: string; + [CREATE_GROUP_USERS_FIELD_NAME]?: Person[]; +} + +export const createGroup = ({ name, users = [] }: CreateGroupFormData) => + async (dispatch: Dispatch, _: {}, { groupsService, permissionService }: ServiceRepository) => { + + dispatch(startSubmit(CREATE_GROUP_FORM)); + + try { + + const newGroup = await groupsService.create({ name }); + + for (const user of users) { + + await addGroupMember({ + user, + group: newGroup, + dispatch, + permissionService, + }); + + } + + dispatch(dialogActions.CLOSE_DIALOG({ id: CREATE_GROUP_DIALOG })); + dispatch(reset(CREATE_GROUP_FORM)); + dispatch(loadGroupsPanel()); + dispatch(snackbarActions.OPEN_SNACKBAR({ + message: `${newGroup.name} group has been created`, + kind: SnackbarKind.SUCCESS + })); + + return newGroup; + + } catch (e) { + + const error = getCommonResourceServiceError(e); + if (error === CommonResourceServiceError.UNIQUE_VIOLATION) { + dispatch(stopSubmit(CREATE_GROUP_FORM, { name: 'Group with the same name already exists.' } as FormErrors)); + } + + return; + + } + }; + +interface AddGroupMemberArgs { + user: { uuid: string, name: string }; + group: { uuid: string, name: string }; + dispatch: Dispatch; + permissionService: PermissionService; +} + +/** + * Group membership is determined by whether the group has can_read permission on an object. + * If a group G can_read an object A, then we say A is a member of G. + * + * [Permission model docs](https://doc.arvados.org/api/permission-model.html) + */ +export const addGroupMember = async ({ user, group, ...args }: AddGroupMemberArgs) => { + + await createPermission({ + head: { ...user }, + tail: { ...group }, + permissionLevel: PermissionLevel.CAN_READ, + ...args, + }); + +}; + +interface CreatePermissionLinkArgs { + head: { uuid: string, name: string }; + tail: { uuid: string, name: string }; + permissionLevel: PermissionLevel; + dispatch: Dispatch; + permissionService: PermissionService; +} + +const createPermission = async ({ head, tail, permissionLevel, dispatch, permissionService }: CreatePermissionLinkArgs) => { + + try { + + await permissionService.create({ + tailUuid: tail.uuid, + headUuid: head.uuid, + name: permissionLevel, + }); + + } catch (e) { + + dispatch(snackbarActions.OPEN_SNACKBAR({ + message: `Could not add ${tail.name} -> ${head.name} relation`, + kind: SnackbarKind.ERROR, + })); + + } + +}; + +interface DeleteGroupMemberArgs { + user: { uuid: string, name: string }; + group: { uuid: string, name: string }; + dispatch: Dispatch; + permissionService: PermissionService; +} + +export const deleteGroupMember = async ({ user, group, ...args }: DeleteGroupMemberArgs) => { + + await deletePermission({ + tail: group, + head: user, + ...args, + }); + +}; + +interface DeletePermissionLinkArgs { + head: { uuid: string, name: string }; + tail: { uuid: string, name: string }; + dispatch: Dispatch; + permissionService: PermissionService; +} + +export const deletePermission = async ({ head, tail, dispatch, permissionService }: DeletePermissionLinkArgs) => { + + try { + + const permissionsResponse = await permissionService.list({ + + filters: new FilterBuilder() + .addEqual('tailUuid', tail.uuid) + .addEqual('headUuid', head.uuid) + .getFilters() + + }); + + const [permission] = permissionsResponse.items; + + if (permission) { + + await permissionService.delete(permission.uuid); + + } else { + + throw new Error('Permission not found'); + + } + + + } catch (e) { + + dispatch(snackbarActions.OPEN_SNACKBAR({ + message: `Could not delete ${tail.name} -> ${head.name} relation`, + kind: SnackbarKind.ERROR, + })); + + } + +}; \ No newline at end of file diff --git a/src/store/groups-panel/groups-panel-middleware-service.ts b/src/store/groups-panel/groups-panel-middleware-service.ts new file mode 100644 index 00000000..7c70666e --- /dev/null +++ b/src/store/groups-panel/groups-panel-middleware-service.ts @@ -0,0 +1,97 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { Dispatch, MiddlewareAPI } from "redux"; +import { DataExplorerMiddlewareService, listResultsToDataExplorerItemsMeta, dataExplorerToListParams } from "~/store/data-explorer/data-explorer-middleware-service"; +import { RootState } from "~/store/store"; +import { ServiceRepository } from "~/services/services"; +import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions'; +import { getDataExplorer, DataExplorer, getSortColumn } from "~/store/data-explorer/data-explorer-reducer"; +import { GroupsPanelActions } from '~/store/groups-panel/groups-panel-actions'; +import { FilterBuilder } from '~/services/api/filter-builder'; +import { updateResources } from '~/store/resources/resources-actions'; +import { OrderBuilder, OrderDirection } from '~/services/api/order-builder'; +import { GroupResource, GroupClass } from '~/models/group'; +import { SortDirection } from '~/components/data-table/data-column'; +import { GroupsPanelColumnNames } from '~/views/groups-panel/groups-panel'; + +export class GroupsPanelMiddlewareService extends DataExplorerMiddlewareService { + + constructor(private services: ServiceRepository, id: string) { + super(id); + } + + async requestItems(api: MiddlewareAPI) { + + const dataExplorer = getDataExplorer(api.getState().dataExplorer, this.getId()); + + if (!dataExplorer) { + + api.dispatch(groupsPanelDataExplorerIsNotSet()); + + } else { + + try { + + const order = new OrderBuilder(); + const sortColumn = getSortColumn(dataExplorer); + if (sortColumn) { + const direction = + sortColumn.sortDirection === SortDirection.ASC && sortColumn.name === GroupsPanelColumnNames.GROUP + ? OrderDirection.ASC + : OrderDirection.DESC; + + order.addOrder(direction, 'name'); + } + + const filters = new FilterBuilder() + .addNotIn('groupClass', [GroupClass.PROJECT]) + .addILike('name', dataExplorer.searchValue) + .getFilters(); + + const response = await this.services.groupsService + .list({ + ...dataExplorerToListParams(dataExplorer), + filters, + order: order.getOrder(), + }); + + api.dispatch(updateResources(response.items)); + + api.dispatch(GroupsPanelActions.SET_ITEMS({ + ...listResultsToDataExplorerItemsMeta(response), + items: response.items.map(item => item.uuid), + })); + + const permissions = await this.services.permissionService.list({ + + filters: new FilterBuilder() + .addIn('tailUuid', response.items.map(item => item.uuid)) + .getFilters() + + }); + + api.dispatch(updateResources(permissions.items)); + + + } catch (e) { + + api.dispatch(couldNotFetchFavoritesContents()); + + } + } + } +} + +const groupsPanelDataExplorerIsNotSet = () => + snackbarActions.OPEN_SNACKBAR({ + message: 'Groups panel is not ready.' + }); + +const couldNotFetchFavoritesContents = () => + snackbarActions.OPEN_SNACKBAR({ + message: 'Could not fetch groups.', + kind: SnackbarKind.ERROR + }); + diff --git a/src/store/link-panel/link-panel-actions.ts b/src/store/link-panel/link-panel-actions.ts index 944c1bd1..7cbc5073 100644 --- a/src/store/link-panel/link-panel-actions.ts +++ b/src/store/link-panel/link-panel-actions.ts @@ -18,6 +18,12 @@ export const linkPanelActions = bindDataExplorerActions(LINK_PANEL_ID); export const LINK_REMOVE_DIALOG = 'linkRemoveDialog'; export const LINK_ATTRIBUTES_DIALOG = 'linkAttributesDialog'; +export const loadLinkPanel = () => + (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { + dispatch(setBreadcrumbs([{ label: 'Links' }])); + dispatch(linkPanelActions.REQUEST_ITEMS()); + }; + export const openLinkAttributesDialog = (uuid: string) => (dispatch: Dispatch, getState: () => RootState) => { const { resources } = getState(); @@ -38,12 +44,6 @@ export const openLinkRemoveDialog = (uuid: string) => })); }; -export const loadLinkPanel = () => - (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { - dispatch(setBreadcrumbs([{ label: 'Links' }])); - dispatch(linkPanelActions.REQUEST_ITEMS()); - }; - export const removeLink = (uuid: string) => async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => { dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Removing ...' })); diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts index 92443c02..c53c55e8 100644 --- a/src/store/navigation/navigation-action.ts +++ b/src/store/navigation/navigation-action.ts @@ -8,9 +8,10 @@ import { ResourceKind, extractUuidKind } from '~/models/resource'; import { getCollectionUrl } from "~/models/collection"; import { getProjectUrl } from "~/models/project"; import { SidePanelTreeCategory } from '../side-panel-tree/side-panel-tree-actions'; -import { Routes, getProcessUrl, getProcessLogUrl } from '~/routes/routes'; +import { Routes, getProcessUrl, getProcessLogUrl, getGroupUrl } from '~/routes/routes'; import { RootState } from '~/store/store'; import { ServiceRepository } from '~/services/services'; +import { GROUPS_PANEL_LABEL } from '~/store/breadcrumbs/breadcrumbs-actions'; export const navigateTo = (uuid: string) => async (dispatch: Dispatch) => { @@ -32,6 +33,8 @@ export const navigateTo = (uuid: string) => dispatch(navigateToWorkflows); } else if (uuid === SidePanelTreeCategory.TRASH) { dispatch(navigateToTrash); + } else if (uuid === GROUPS_PANEL_LABEL) { + dispatch(navigateToGroups); } }; @@ -84,4 +87,8 @@ export const navigateToUsers = push(Routes.USERS); export const navigateToApiClientAuthorizations = push(Routes.API_CLIENT_AUTHORIZATIONS); -export const navigateToLinks = push(Routes.LINKS); \ No newline at end of file +export const navigateToGroups = push(Routes.GROUPS); + +export const navigateToGroupDetails = compose(push, getGroupUrl); + +export const navigateToLinks = push(Routes.LINKS); diff --git a/src/store/store.ts b/src/store/store.ts index 792224d2..14a6ba11 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -48,10 +48,15 @@ import { repositoriesReducer } from '~/store/repositories/repositories-reducer'; import { keepServicesReducer } from '~/store/keep-services/keep-services-reducer'; import { UserMiddlewareService } from '~/store/users/user-panel-middleware-service'; import { USERS_PANEL_ID } from '~/store/users/users-actions'; -import { computeNodesReducer } from '~/store/compute-nodes/compute-nodes-reducer'; import { apiClientAuthorizationsReducer } from '~/store/api-client-authorizations/api-client-authorizations-reducer'; +import { GroupsPanelMiddlewareService } from '~/store/groups-panel/groups-panel-middleware-service'; +import { GROUPS_PANEL_ID } from '~/store/groups-panel/groups-panel-actions'; +import { GroupDetailsPanelMiddlewareService } from '~/store/group-details-panel/group-details-panel-middleware-service'; +import { GROUP_DETAILS_PANEL_ID } from '~/store/group-details-panel/group-details-panel-actions'; import { LINK_PANEL_ID } from '~/store/link-panel/link-panel-actions'; import { LinkMiddlewareService } from '~/store/link-panel/link-panel-middleware-service'; +import { COMPUTE_NODE_PANEL_ID } from '~/store/compute-nodes/compute-nodes-actions'; +import { ComputeNodeMiddlewareService } from '~/store/compute-nodes/compute-nodes-middleware-service'; const composeEnhancers = (process.env.NODE_ENV === 'development' && @@ -86,9 +91,19 @@ export function configureStore(history: History, services: ServiceRepository): R const userPanelMiddleware = dataExplorerMiddleware( new UserMiddlewareService(services, USERS_PANEL_ID) ); + const groupsPanelMiddleware = dataExplorerMiddleware( + new GroupsPanelMiddlewareService(services, GROUPS_PANEL_ID) + ); + const groupDetailsPanelMiddleware = dataExplorerMiddleware( + new GroupDetailsPanelMiddlewareService(services, GROUP_DETAILS_PANEL_ID) + ); + const linkPanelMiddleware = dataExplorerMiddleware( new LinkMiddlewareService(services, LINK_PANEL_ID) ); + const computeNodeMiddleware = dataExplorerMiddleware( + new ComputeNodeMiddlewareService(services, COMPUTE_NODE_PANEL_ID) + ); const middlewares: Middleware[] = [ routerMiddleware(history), thunkMiddleware.withExtraArgument(services), @@ -99,7 +114,10 @@ export function configureStore(history: History, services: ServiceRepository): R sharedWithMePanelMiddleware, workflowPanelMiddleware, userPanelMiddleware, - linkPanelMiddleware + groupsPanelMiddleware, + groupDetailsPanelMiddleware, + linkPanelMiddleware, + computeNodeMiddleware, ]; const enhancer = composeEnhancers(applyMiddleware(...middlewares)); return createStore(rootReducer, enhancer); @@ -131,6 +149,5 @@ const createRootReducer = (services: ServiceRepository) => combineReducers({ virtualMachines: virtualMachinesReducer, repositories: repositoriesReducer, keepServices: keepServicesReducer, - computeNodes: computeNodesReducer, apiClientAuthorizations: apiClientAuthorizationsReducer }); diff --git a/src/store/workbench/workbench-actions.ts b/src/store/workbench/workbench-actions.ts index 85540f0b..5e9dc285 100644 --- a/src/store/workbench/workbench-actions.ts +++ b/src/store/workbench/workbench-actions.ts @@ -14,7 +14,7 @@ import { favoritePanelActions } from '~/store/favorite-panel/favorite-panel-acti import { projectPanelColumns } from '~/views/project-panel/project-panel'; import { favoritePanelColumns } from '~/views/favorite-panel/favorite-panel'; import { matchRootRoute } from '~/routes/routes'; -import { setSidePanelBreadcrumbs, setProcessBreadcrumbs, setSharedWithMeBreadcrumbs, setTrashBreadcrumbs, setBreadcrumbs } from '~/store/breadcrumbs/breadcrumbs-actions'; +import { setSidePanelBreadcrumbs, setProcessBreadcrumbs, setSharedWithMeBreadcrumbs, setTrashBreadcrumbs, setBreadcrumbs, setGroupDetailsBreadcrumbs, setGroupsBreadcrumbs } from '~/store/breadcrumbs/breadcrumbs-actions'; import { navigateToProject } from '~/store/navigation/navigation-action'; import { MoveToFormDialogData } from '~/store/move-to-dialog/move-to-dialog'; import { ServiceRepository } from '~/services/services'; @@ -60,10 +60,15 @@ import { loadRepositoriesPanel } from '~/store/repositories/repositories-actions import { loadKeepServicesPanel } from '~/store/keep-services/keep-services-actions'; import { loadUsersPanel, userBindedActions } from '~/store/users/users-actions'; import { loadLinkPanel, linkPanelActions } from '~/store/link-panel/link-panel-actions'; +import { loadComputeNodesPanel, computeNodesActions } from '~/store/compute-nodes/compute-nodes-actions'; import { linkPanelColumns } from '~/views/link-panel/link-panel-root'; import { userPanelColumns } from '~/views/user-panel/user-panel'; -import { loadComputeNodesPanel } from '~/store/compute-nodes/compute-nodes-actions'; +import { computeNodePanelColumns } from '~/views/compute-node-panel/compute-node-panel-root'; import { loadApiClientAuthorizationsPanel } from '~/store/api-client-authorizations/api-client-authorizations-actions'; +import * as groupPanelActions from '~/store/groups-panel/groups-panel-actions'; +import { groupsPanelColumns } from '~/views/groups-panel/groups-panel'; +import * as groupDetailsPanelActions from '~/store/group-details-panel/group-details-panel-actions'; +import { groupDetailsPanelColumns } from '~/views/group-details-panel/group-details-panel'; export const WORKBENCH_LOADING_SCREEN = 'workbenchLoadingScreen'; @@ -98,7 +103,10 @@ export const loadWorkbench = () => dispatch(workflowPanelActions.SET_COLUMNS({ columns: workflowPanelColumns })); dispatch(searchResultsPanelActions.SET_COLUMNS({ columns: searchResultsPanelColumns })); dispatch(userBindedActions.SET_COLUMNS({ columns: userPanelColumns })); + dispatch(groupPanelActions.GroupsPanelActions.SET_COLUMNS({ columns: groupsPanelColumns })); + dispatch(groupDetailsPanelActions.GroupDetailsPanelActions.SET_COLUMNS({columns: groupDetailsPanelColumns})); dispatch(linkPanelActions.SET_COLUMNS({ columns: linkPanelColumns })); + dispatch(computeNodesActions.SET_COLUMNS({ columns: computeNodePanelColumns })); dispatch(initSidePanelTree()); if (router.location) { const match = matchRootRoute(router.location.pathname); @@ -453,6 +461,20 @@ export const loadApiClientAuthorizations = handleFirstTimeLoad( await dispatch(loadApiClientAuthorizationsPanel()); }); +export const loadGroupsPanel = handleFirstTimeLoad( + (dispatch: Dispatch) => { + dispatch(setGroupsBreadcrumbs()); + dispatch(groupPanelActions.loadGroupsPanel()); + }); + + +export const loadGroupDetailsPanel = (groupUuid: string) => + handleFirstTimeLoad( + (dispatch: Dispatch) => { + dispatch(setGroupDetailsBreadcrumbs(groupUuid)); + dispatch(groupDetailsPanelActions.loadGroupDetailsPanel(groupUuid)); + }); + const finishLoadingProject = (project: GroupContentsResource | string) => async (dispatch: Dispatch) => { const uuid = typeof project === 'string' ? project : project.uuid; diff --git a/src/validators/min-length.tsx b/src/validators/min-length.tsx new file mode 100644 index 00000000..9b269531 --- /dev/null +++ b/src/validators/min-length.tsx @@ -0,0 +1,10 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +export const ERROR_MESSAGE = (minLength: number) => `Min length is ${minLength}`; + +export const minLength = + (minLength: number, errorMessage = ERROR_MESSAGE) => + (value: { length: number }) => + value && value.length >= minLength ? undefined : errorMessage(minLength); diff --git a/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts b/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts index b5564891..94f702e8 100644 --- a/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts +++ b/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts @@ -6,6 +6,7 @@ import { ContextMenuActionSet } from "../context-menu-action-set"; import { RenameIcon, RemoveIcon } from "~/components/icon/icon"; import { DownloadCollectionFileAction } from "../actions/download-collection-file-action"; import { openFileRemoveDialog, openRenameFileDialog } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions'; +import { FileViewerActions } from '~/views-components/context-menu/actions/file-viewer-actions'; export const collectionFilesItemActionSet: ContextMenuActionSet = [[{ @@ -23,4 +24,7 @@ export const collectionFilesItemActionSet: ContextMenuActionSet = [[{ execute: (dispatch, resource) => { dispatch(openFileRemoveDialog(resource.uuid)); } +}], [{ + component: FileViewerActions, + execute: () => { return; }, }]]; diff --git a/src/views-components/context-menu/action-sets/group-action-set.ts b/src/views-components/context-menu/action-sets/group-action-set.ts new file mode 100644 index 00000000..8d718a33 --- /dev/null +++ b/src/views-components/context-menu/action-sets/group-action-set.ts @@ -0,0 +1,28 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { ContextMenuActionSet } from "~/views-components/context-menu/context-menu-action-set"; +import { AdvancedIcon, RemoveIcon, AttributesIcon } from "~/components/icon/icon"; +import { openAdvancedTabDialog } from "~/store/advanced-tab/advanced-tab"; +import { openGroupAttributes, openRemoveGroupDialog } from "~/store/groups-panel/groups-panel-actions"; + +export const groupActionSet: ContextMenuActionSet = [[{ + name: "Attributes", + icon: AttributesIcon, + execute: (dispatch, { uuid }) => { + dispatch(openGroupAttributes(uuid)); + } +}, { + name: "Advanced", + icon: AdvancedIcon, + execute: (dispatch, resource) => { + dispatch(openAdvancedTabDialog(resource.uuid)); + } +}, { + name: "Remove", + icon: RemoveIcon, + execute: (dispatch, { uuid }) => { + dispatch(openRemoveGroupDialog(uuid)); + } +}]]; \ No newline at end of file diff --git a/src/views-components/context-menu/action-sets/group-member-action-set.ts b/src/views-components/context-menu/action-sets/group-member-action-set.ts new file mode 100644 index 00000000..a8b3dd1f --- /dev/null +++ b/src/views-components/context-menu/action-sets/group-member-action-set.ts @@ -0,0 +1,28 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { ContextMenuActionSet } from "~/views-components/context-menu/context-menu-action-set"; +import { AdvancedIcon, RemoveIcon, AttributesIcon } from "~/components/icon/icon"; +import { openAdvancedTabDialog } from "~/store/advanced-tab/advanced-tab"; +import { openGroupMemberAttributes, openRemoveGroupMemberDialog } from '~/store/group-details-panel/group-details-panel-actions'; + +export const groupMemberActionSet: ContextMenuActionSet = [[{ + name: "Attributes", + icon: AttributesIcon, + execute: (dispatch, { uuid }) => { + dispatch(openGroupMemberAttributes(uuid)); + } +}, { + name: "Advanced", + icon: AdvancedIcon, + execute: (dispatch, resource) => { + dispatch(openAdvancedTabDialog(resource.uuid)); + } +}, { + name: "Remove", + icon: RemoveIcon, + execute: (dispatch, { uuid }) => { + dispatch(openRemoveGroupMemberDialog(uuid)); + } +}]]; \ No newline at end of file diff --git a/src/views-components/context-menu/action-sets/process-action-set.ts b/src/views-components/context-menu/action-sets/process-action-set.ts index 2d152543..05242fbc 100644 --- a/src/views-components/context-menu/action-sets/process-action-set.ts +++ b/src/views-components/context-menu/action-sets/process-action-set.ts @@ -15,11 +15,12 @@ import { openMoveProcessDialog } from '~/store/processes/process-move-actions'; import { openProcessUpdateDialog } from "~/store/processes/process-update-actions"; import { openCopyProcessDialog } from '~/store/processes/process-copy-actions'; import { openProcessCommandDialog } from '~/store/processes/process-command-actions'; -import { detailsPanelActions } from '~/store/details-panel/details-panel-action'; import { openSharingDialog } from "~/store/sharing-dialog/sharing-dialog-actions"; import { openAdvancedTabDialog } from "~/store/advanced-tab/advanced-tab"; import { openProcessInputDialog } from "~/store/processes/process-input-actions"; import { toggleDetailsPanel } from '~/store/details-panel/details-panel-action'; +import { openRemoveProcessDialog } from "~/store/processes/processes-actions"; +import { navigateToOutput } from "~/store/process-panel/process-panel-actions"; export const processActionSet: ContextMenuActionSet = [[ { @@ -76,7 +77,9 @@ export const processActionSet: ContextMenuActionSet = [[ icon: OutputIcon, name: "Outputs", execute: (dispatch, resource) => { - // add code + if(resource.outputUuid){ + dispatch(navigateToOutput(resource.outputUuid)); + } } }, { @@ -113,12 +116,12 @@ export const processActionSet: ContextMenuActionSet = [[ execute: (dispatch, resource) => { dispatch(openAdvancedTabDialog(resource.uuid)); } + }, + { + name: "Remove", + icon: RemoveIcon, + execute: (dispatch, resource) => { + dispatch(openRemoveProcessDialog(resource.uuid)); + } } - // { - // icon: RemoveIcon, - // name: "Remove", - // execute: (dispatch, resource) => { - // // add code - // } - // } ]]; diff --git a/src/views-components/context-menu/actions/file-viewer-actions.tsx b/src/views-components/context-menu/actions/file-viewer-actions.tsx new file mode 100644 index 00000000..961e1828 --- /dev/null +++ b/src/views-components/context-menu/actions/file-viewer-actions.tsx @@ -0,0 +1,81 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from "react"; +import { ListItemText, ListItem, ListItemIcon, Icon } from "@material-ui/core"; +import { RootState } from '~/store/store'; +import { getNodeValue } from '~/models/tree'; +import { CollectionDirectory, CollectionFile, CollectionFileType } from '~/models/collection-file'; +import { FileViewerList, FileViewer } from '~/models/file-viewers-config'; +import { getFileViewers } from '~/store/file-viewers/file-viewers-selectors'; +import { connect } from 'react-redux'; +import { OpenIcon } from '~/components/icon/icon'; + +interface FileViewerActionProps { + fileUrl: string; + viewers: FileViewerList; +} + +const mapStateToProps = (state: RootState): FileViewerActionProps => { + const { resource } = state.contextMenu; + if (resource) { + const file = getNodeValue(resource.uuid)(state.collectionPanelFiles); + if (file) { + const fileViewers = getFileViewers(state.properties); + return { + fileUrl: file.url, + viewers: fileViewers.filter(enabledViewers(file)), + }; + } + } + return { + fileUrl: '', + viewers: [], + }; +}; + +const enabledViewers = (file: CollectionFile | CollectionDirectory) => + ({ extensions, collections }: FileViewer) => { + if (collections && file.type === CollectionFileType.DIRECTORY) { + return true; + } else if (extensions) { + return extensions.some(extension => file.name.endsWith(extension)); + } else { + return true; + } + }; + +const fillViewerUrl = (fileUrl: string, { url, filePathParam }: FileViewer) => { + const viewerUrl = new URL(url); + viewerUrl.searchParams.append(filePathParam, fileUrl); + return viewerUrl.href; +}; + +export const FileViewerActions = connect(mapStateToProps)( + ({ fileUrl, viewers, onClick }: FileViewerActionProps & { onClick: () => void }) => + <> + {viewers.map(viewer => + + + { + viewer.iconUrl + ? + + + : + } + + + {viewer.name} + + + )} + ); diff --git a/src/views-components/context-menu/context-menu.tsx b/src/views-components/context-menu/context-menu.tsx index a9200ebb..4ce2f521 100644 --- a/src/views-components/context-menu/context-menu.tsx +++ b/src/views-components/context-menu/context-menu.tsx @@ -75,6 +75,8 @@ export enum ContextMenuKind { VIRTUAL_MACHINE = "VirtualMachine", KEEP_SERVICE = "KeepService", USER = "User", + NODE = "Node", + GROUPS = "Group", + GROUP_MEMBER = "GroupMember", LINK = "Link", - NODE = "Node" } diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx index 710d202d..8cddf3ba 100644 --- a/src/views-components/data-explorer/data-explorer.tsx +++ b/src/views-components/data-explorer/data-explorer.tsx @@ -23,7 +23,8 @@ interface Props { const mapStateToProps = (state: RootState, { id }: Props) => { const progress = state.progressIndicator.find(p => p.id === id); const working = progress && progress.working; - return { ...getDataExplorer(state.dataExplorer, id), working }; + const currentRoute = state.router.location ? state.router.location.pathname : ''; + return { ...getDataExplorer(state.dataExplorer, id), working, paperKey: currentRoute }; }; const mapDispatchToProps = () => { diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx index a4713c8d..ce4d430f 100644 --- a/src/views-components/data-explorer/renderers.tsx +++ b/src/views-components/data-explorer/renderers.tsx @@ -25,7 +25,7 @@ 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 { withResource, getDataFromResource, withResourceData } from '~/views-components/data-explorer/with-resources'; const renderName = (item: { name: string; uuid: string, kind: string }) => @@ -191,6 +191,34 @@ export const ResourceUsername = connect( return resource || { username: '' }; })(renderUsername); +// Compute Node Resources +const renderNodeDate = (date: string) => + {formatDate(date)}; + +const renderNodeData = (data: string) => { + return {data}; +}; + +const renderNodeInfo = (data: string) => { + return {JSON.stringify(data, null, 4)}; +}; + +export const ComputeNodeInfo = withResourceData('info', renderNodeInfo); + +export const ComputeNodeUuid = withResourceData('uuid', renderNodeData); + +export const ComputeNodeDomain = withResourceData('domain', renderNodeData); + +export const ComputeNodeFirstPingAt = withResourceData('firstPingAt', renderNodeDate); + +export const ComputeNodeHostname = withResourceData('hostname', renderNodeData); + +export const ComputeNodeIpAddress = withResourceData('ipAddress', renderNodeData); + +export const ComputeNodeJobUuid = withResourceData('jobUuid', renderNodeData); + +export const ComputeNodeLastPingAt = withResourceData('lastPingAt', renderNodeDate); + // Links Resources const renderLinkName = (item: { name: string }) => {item.name || '(none)'}; diff --git a/src/views-components/data-explorer/with-resources.tsx b/src/views-components/data-explorer/with-resources.tsx new file mode 100644 index 00000000..54c9396c --- /dev/null +++ b/src/views-components/data-explorer/with-resources.tsx @@ -0,0 +1,27 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from 'react'; +import { connect } from 'react-redux'; +import { RootState } from '~/store/store'; +import { getResource } from '~/store/resources/resources'; +import { Resource } from '~/models/resource'; + +interface WithResourceProps { + resource?: Resource; +} + +export const withResource = (component: React.ComponentType) => + connect( + (state: RootState, props: { uuid: string }): WithResourceProps => ({ + resource: getResource(props.uuid)(state.resources) + }) + )(component); + +export const getDataFromResource = (property: string, resource?: Resource) => { + return resource && resource[property] ? resource[property] : '(none)'; +}; + +export const withResourceData = (property: string, render: (data: any) => React.ReactElement) => + withResource(({ resource }) => render(getDataFromResource(property, resource))); diff --git a/src/views-components/dialog-forms/add-group-member-dialog.tsx b/src/views-components/dialog-forms/add-group-member-dialog.tsx new file mode 100644 index 00000000..f4a5c2cf --- /dev/null +++ b/src/views-components/dialog-forms/add-group-member-dialog.tsx @@ -0,0 +1,48 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from 'react'; +import { compose } from "redux"; +import { reduxForm, InjectedFormProps, WrappedFieldArrayProps, FieldArray } from 'redux-form'; +import { withDialog, WithDialogProps } from "~/store/dialog/with-dialog"; +import { FormDialog } from '~/components/form-dialog/form-dialog'; +import { PeopleSelect, Person } from '~/views-components/sharing-dialog/people-select'; +import { ADD_GROUP_MEMBERS_DIALOG, ADD_GROUP_MEMBERS_FORM, AddGroupMembersFormData, ADD_GROUP_MEMBERS_USERS_FIELD_NAME, addGroupMembers } from '~/store/group-details-panel/group-details-panel-actions'; +import { minLength } from '~/validators/min-length'; + +export const AddGroupMembersDialog = compose( + withDialog(ADD_GROUP_MEMBERS_DIALOG), + reduxForm({ + form: ADD_GROUP_MEMBERS_FORM, + onSubmit: (data, dispatch) => { + dispatch(addGroupMembers(data)); + }, + }) +)( + (props: AddGroupMembersDialogProps) => + +); + +type AddGroupMembersDialogProps = WithDialogProps<{}> & InjectedFormProps; + +const UsersField = () => + ; + +const UsersFieldValidation = [minLength(1, () => 'Select at least one user')]; + +const UsersSelect = ({ fields }: WrappedFieldArrayProps) => + ; diff --git a/src/views-components/dialog-forms/create-group-dialog.tsx b/src/views-components/dialog-forms/create-group-dialog.tsx new file mode 100644 index 00000000..554ad790 --- /dev/null +++ b/src/views-components/dialog-forms/create-group-dialog.tsx @@ -0,0 +1,62 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from 'react'; +import { compose } from "redux"; +import { reduxForm, InjectedFormProps, Field, WrappedFieldArrayProps, FieldArray } from 'redux-form'; +import { withDialog, WithDialogProps } from "~/store/dialog/with-dialog"; +import { FormDialog } from '~/components/form-dialog/form-dialog'; +import { CREATE_GROUP_DIALOG, CREATE_GROUP_FORM, createGroup, CreateGroupFormData, CREATE_GROUP_NAME_FIELD_NAME, CREATE_GROUP_USERS_FIELD_NAME } from '~/store/groups-panel/groups-panel-actions'; +import { TextField } from '~/components/text-field/text-field'; +import { maxLength } from '~/validators/max-length'; +import { require } from '~/validators/require'; +import { PeopleSelect, Person } from '~/views-components/sharing-dialog/people-select'; + +export const CreateGroupDialog = compose( + withDialog(CREATE_GROUP_DIALOG), + reduxForm({ + form: CREATE_GROUP_FORM, + onSubmit: (data, dispatch) => { + dispatch(createGroup(data)); + } + }) +)( + (props: CreateGroupDialogComponentProps) => + +); + +type CreateGroupDialogComponentProps = WithDialogProps<{}> & InjectedFormProps; + +const CreateGroupFormFields = () => + <> + + + ; + +const GroupNameField = () => + ; + +const GROUP_NAME_VALIDATION = [require, maxLength(255)]; + +const UsersField = () => + ; + +const UsersSelect = ({ fields }: WrappedFieldArrayProps) => + ; diff --git a/src/views-components/groups-dialog/attributes-dialog.tsx b/src/views-components/groups-dialog/attributes-dialog.tsx new file mode 100644 index 00000000..f6ab8c13 --- /dev/null +++ b/src/views-components/groups-dialog/attributes-dialog.tsx @@ -0,0 +1,101 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from "react"; +import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography, Grid } from "@material-ui/core"; +import { WithDialogProps } from "~/store/dialog/with-dialog"; +import { withDialog } from '~/store/dialog/with-dialog'; +import { WithStyles, withStyles } from '@material-ui/core/styles'; +import { ArvadosTheme } from '~/common/custom-theme'; +import { compose } from "redux"; +import { GroupResource } from "~/models/group"; +import { GROUP_ATTRIBUTES_DIALOG } from "~/store/groups-panel/groups-panel-actions"; + +type CssRules = 'rightContainer' | 'leftContainer' | 'spacing'; + +const styles = withStyles((theme: ArvadosTheme) => ({ + rightContainer: { + textAlign: 'right', + paddingRight: theme.spacing.unit * 2, + color: theme.palette.grey["500"] + }, + leftContainer: { + textAlign: 'left', + paddingLeft: theme.spacing.unit * 2 + }, + spacing: { + paddingTop: theme.spacing.unit * 2 + }, +})); + +interface GroupAttributesDataProps { + data: GroupResource; +} + +type GroupAttributesProps = GroupAttributesDataProps & WithStyles; + +export const GroupAttributesDialog = compose( + withDialog(GROUP_ATTRIBUTES_DIALOG), + styles)( + (props: WithDialogProps & GroupAttributesProps) => + + Attributes + + + {props.data && attributes(props.data, props.classes)} + + + + + + + ); + +const attributes = (group: GroupResource, classes: any) => { + const { uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid, name, deleteAt, description, etag, href, isTrashed, trashAt} = group; + return ( + + + + {name && Name} + {ownerUuid && Owner uuid} + {createdAt && Created at} + {modifiedAt && Modified at} + {modifiedByUserUuid && Modified by user uuid} + {modifiedByClientUuid && Modified by client uuid} + {uuid && uuid} + {deleteAt && Delete at} + {description && Description} + {etag && Etag} + {href && Href} + {isTrashed && Is trashed} + {trashAt && Trashed at} + + + {name} + {ownerUuid} + {createdAt} + {modifiedAt} + {modifiedByUserUuid} + {modifiedByClientUuid} + {uuid} + {deleteAt} + {description} + {etag} + {href} + {isTrashed} + {trashAt} + + + + ); +}; diff --git a/src/views-components/groups-dialog/member-attributes-dialog.tsx b/src/views-components/groups-dialog/member-attributes-dialog.tsx new file mode 100644 index 00000000..7aa8653d --- /dev/null +++ b/src/views-components/groups-dialog/member-attributes-dialog.tsx @@ -0,0 +1,95 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from "react"; +import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Typography, Grid } from "@material-ui/core"; +import { WithDialogProps } from "~/store/dialog/with-dialog"; +import { withDialog } from '~/store/dialog/with-dialog'; +import { WithStyles, withStyles } from '@material-ui/core/styles'; +import { ArvadosTheme } from '~/common/custom-theme'; +import { compose } from "redux"; +import { PermissionResource } from "~/models/permission"; +import { MEMBER_ATTRIBUTES_DIALOG } from '~/store/group-details-panel/group-details-panel-actions'; + +type CssRules = 'rightContainer' | 'leftContainer' | 'spacing'; + +const styles = withStyles((theme: ArvadosTheme) => ({ + rightContainer: { + textAlign: 'right', + paddingRight: theme.spacing.unit * 2, + color: theme.palette.grey["500"] + }, + leftContainer: { + textAlign: 'left', + paddingLeft: theme.spacing.unit * 2 + }, + spacing: { + paddingTop: theme.spacing.unit * 2 + }, +})); + +interface GroupAttributesDataProps { + data: PermissionResource; +} + +type GroupAttributesProps = GroupAttributesDataProps & WithStyles; + +export const GroupMemberAttributesDialog = compose( + withDialog(MEMBER_ATTRIBUTES_DIALOG), + styles)( + (props: WithDialogProps & GroupAttributesProps) => + + Attributes + + + {props.data && attributes(props.data, props.classes)} + + + + + + + ); + +const attributes = (memberGroup: PermissionResource, classes: any) => { + const { uuid, ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid, name, etag, href, linkClass } = memberGroup; + return ( + + + + {name && Name} + {ownerUuid && Owner uuid} + {createdAt && Created at} + {modifiedAt && Modified at} + {modifiedByUserUuid && Modified by user uuid} + {modifiedByClientUuid && Modified by client uuid} + {uuid && uuid} + {linkClass && Link Class} + {etag && Etag} + {href && Href} + + + {name} + {ownerUuid} + {createdAt} + {modifiedAt} + {modifiedByUserUuid} + {modifiedByClientUuid} + {uuid} + {linkClass} + {etag} + {href} + + + + ); +}; diff --git a/src/views-components/groups-dialog/member-remove-dialog.ts b/src/views-components/groups-dialog/member-remove-dialog.ts new file mode 100644 index 00000000..bb5c3a2d --- /dev/null +++ b/src/views-components/groups-dialog/member-remove-dialog.ts @@ -0,0 +1,21 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { Dispatch, compose } from 'redux'; +import { connect } from "react-redux"; +import { ConfirmationDialog } from "~/components/confirmation-dialog/confirmation-dialog"; +import { withDialog, WithDialogProps } from "~/store/dialog/with-dialog"; +import { removeGroupMember, MEMBER_REMOVE_DIALOG } from '~/store/group-details-panel/group-details-panel-actions'; + +const mapDispatchToProps = (dispatch: Dispatch, props: WithDialogProps) => ({ + onConfirm: () => { + props.closeDialog(); + dispatch(removeGroupMember(props.data.uuid)); + } +}); + +export const RemoveGroupMemberDialog = compose( + withDialog(MEMBER_REMOVE_DIALOG), + connect(null, mapDispatchToProps) +)(ConfirmationDialog); \ No newline at end of file diff --git a/src/views-components/groups-dialog/remove-dialog.ts b/src/views-components/groups-dialog/remove-dialog.ts new file mode 100644 index 00000000..8220198e --- /dev/null +++ b/src/views-components/groups-dialog/remove-dialog.ts @@ -0,0 +1,21 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import { Dispatch, compose } from 'redux'; +import { connect } from "react-redux"; +import { ConfirmationDialog } from "~/components/confirmation-dialog/confirmation-dialog"; +import { withDialog, WithDialogProps } from "~/store/dialog/with-dialog"; +import { removeGroup, GROUP_REMOVE_DIALOG } from '~/store/groups-panel/groups-panel-actions'; + +const mapDispatchToProps = (dispatch: Dispatch, props: WithDialogProps) => ({ + onConfirm: () => { + props.closeDialog(); + dispatch(removeGroup(props.data.uuid)); + } +}); + +export const RemoveGroupDialog = compose( + withDialog(GROUP_REMOVE_DIALOG), + connect(null, mapDispatchToProps) +)(ConfirmationDialog); \ No newline at end of file diff --git a/src/views-components/main-app-bar/account-menu.tsx b/src/views-components/main-app-bar/account-menu.tsx index 1609aafa..53a5753d 100644 --- a/src/views-components/main-app-bar/account-menu.tsx +++ b/src/views-components/main-app-bar/account-menu.tsx @@ -11,25 +11,28 @@ import { DispatchProp, connect } from 'react-redux'; import { logout } from '~/store/auth/auth-action'; import { RootState } from "~/store/store"; import { openCurrentTokenDialog } from '~/store/current-token-dialog/current-token-dialog-actions'; -import { openRepositoriesPanel } from "~/store/repositories/repositories-actions"; import { navigateToSshKeysUser, navigateToMyAccount } from '~/store/navigation/navigation-action'; import { openUserVirtualMachines } from "~/store/virtual-machines/virtual-machines-actions"; +import { openRepositoriesPanel } from '~/store/repositories/repositories-actions'; interface AccountMenuProps { user?: User; + currentRoute: string; } const mapStateToProps = (state: RootState): AccountMenuProps => ({ - user: state.auth.user + user: state.auth.user, + currentRoute: state.router.location ? state.router.location.pathname : '' }); export const AccountMenu = connect(mapStateToProps)( - ({ user, dispatch }: AccountMenuProps & DispatchProp) => + ({ user, dispatch, currentRoute }: AccountMenuProps & DispatchProp) => user ? } id="account-menu" - title="Account Management"> + title="Account Management" + key={currentRoute}> {getUserFullname(user)} diff --git a/src/views-components/main-app-bar/admin-menu.tsx b/src/views-components/main-app-bar/admin-menu.tsx index 88aafbae..9b94c064 100644 --- a/src/views-components/main-app-bar/admin-menu.tsx +++ b/src/views-components/main-app-bar/admin-menu.tsx @@ -17,27 +17,30 @@ import { openUserPanel } from "~/store/users/users-actions"; interface AdminMenuProps { user?: User; + currentRoute: string; } const mapStateToProps = (state: RootState): AdminMenuProps => ({ - user: state.auth.user + user: state.auth.user, + currentRoute: state.router.location ? state.router.location.pathname : '' }); export const AdminMenu = connect(mapStateToProps)( - ({ user, dispatch }: AdminMenuProps & DispatchProp) => + ({ user, dispatch, currentRoute }: AdminMenuProps & DispatchProp) => user ? } id="admin-menu" - title="Admin Panel"> + title="Admin Panel" + key={currentRoute}> dispatch(openRepositoriesPanel())}>Repositories dispatch(openAdminVirtualMachines())}>Virtual Machines dispatch(NavigationAction.navigateToSshKeysAdmin)}>Ssh Keys dispatch(NavigationAction.navigateToApiClientAuthorizations)}>Api Tokens dispatch(openUserPanel())}>Users + dispatch(NavigationAction.navigateToGroups)}>Groups} dispatch(NavigationAction.navigateToComputeNodes)}>Compute Nodes dispatch(NavigationAction.navigateToKeepServices)}>Keep Services dispatch(NavigationAction.navigateToLinks)}>Links - dispatch(logout())}>Logout : null); diff --git a/src/views-components/main-app-bar/help-menu.tsx b/src/views-components/main-app-bar/help-menu.tsx index 26604228..94da69e7 100644 --- a/src/views-components/main-app-bar/help-menu.tsx +++ b/src/views-components/main-app-bar/help-menu.tsx @@ -3,11 +3,14 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from "react"; -import { MenuItem, Typography, ListSubheader } from "@material-ui/core"; +import { MenuItem, Typography } from "@material-ui/core"; import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu"; import { ImportContactsIcon, HelpIcon } from "~/components/icon/icon"; import { ArvadosTheme } from '~/common/custom-theme'; import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'; +import { RootState } from "~/store/store"; +import { compose } from "redux"; +import { connect } from "react-redux"; type CssRules = 'link' | 'icon' | 'title' | 'linkTitle'; @@ -52,22 +55,33 @@ const links = [ }, ]; -export const HelpMenu = withStyles(styles)( - ({ classes }: WithStyles) => - } - id="help-menu" - title="Help"> - Help - { - links.map(link => - - - - {link.title} - - - ) - } - -); +interface HelpMenuProps { + currentRoute: string; +} + +const mapStateToProps = ({ router }: RootState) => ({ + currentRoute: router.location ? router.location.pathname : '', +}); + +export const HelpMenu = compose( + connect(mapStateToProps), + withStyles(styles))( + ({ classes, currentRoute }: HelpMenuProps & WithStyles) => + } + id="help-menu" + title="Help" + key={currentRoute}> + Help + { + links.map(link => + + + + {link.title} + + + ) + } + + ); diff --git a/src/views-components/sharing-dialog/people-select.tsx b/src/views-components/sharing-dialog/people-select.tsx index 2aada00e..f62e6f55 100644 --- a/src/views-components/sharing-dialog/people-select.tsx +++ b/src/views-components/sharing-dialog/people-select.tsx @@ -17,9 +17,12 @@ export interface Person { email: string; uuid: string; } + export interface PeopleSelectProps { items: Person[]; + label?: string; + autofocus?: boolean; onBlur?: (event: React.FocusEvent) => void; onFocus?: (event: React.FocusEvent) => void; @@ -43,12 +46,16 @@ export const PeopleSelect = connect()( }; render() { + + const { label = 'Invite people' } = this.props; + return ( ({ } }); -const mapStateToProps = (state: RootState) => ({ +const mapStateToProps = ({ router }: RootState) => ({ + currentRoute: router.location ? router.location.pathname : '', }); export const SidePanel = withStyles(styles)( connect(mapStateToProps, mapDispatchToProps)( - ({ classes, ...props }: WithStyles & SidePanelTreeProps) => - - - - -)); + ({ classes, ...props }: WithStyles & SidePanelTreeProps & { currentRoute: string }) => + + + + + )); diff --git a/src/views/compute-node-panel/compute-node-panel-root.tsx b/src/views/compute-node-panel/compute-node-panel-root.tsx index 2d325b51..feaadb5e 100644 --- a/src/views/compute-node-panel/compute-node-panel-root.tsx +++ b/src/views/compute-node-panel/compute-node-panel-root.tsx @@ -3,83 +3,116 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; +import { ShareMeIcon } from '~/components/icon/icon'; +import { DataExplorer } from '~/views-components/data-explorer/data-explorer'; +import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view'; +import { COMPUTE_NODE_PANEL_ID } from '~/store/compute-nodes/compute-nodes-actions'; +import { DataColumns } from '~/components/data-table/data-table'; +import { SortDirection } from '~/components/data-table/data-column'; +import { createTree } from '~/models/tree'; import { - StyleRulesCallback, WithStyles, withStyles, Card, CardContent, Grid, Table, - TableHead, TableRow, TableCell, TableBody, Tooltip, IconButton -} from '@material-ui/core'; -import { ArvadosTheme } from '~/common/custom-theme'; -import { MoreOptionsIcon } from '~/components/icon/icon'; -import { NodeResource } from '~/models/node'; -import { formatDate } from '~/common/formatters'; + ComputeNodeUuid, ComputeNodeInfo, ComputeNodeDomain, ComputeNodeHostname, ComputeNodeJobUuid, + ComputeNodeFirstPingAt, ComputeNodeLastPingAt, ComputeNodeIpAddress +} from '~/views-components/data-explorer/renderers'; +import { ResourcesState } from '~/store/resources/resources'; -type CssRules = 'root' | 'tableRow'; +export enum ComputeNodePanelColumnNames { + INFO = 'Info', + UUID = 'UUID', + DOMAIN = 'Domain', + FIRST_PING_AT = 'First ping at', + HOSTNAME = 'Hostname', + IP_ADDRESS = 'IP Address', + JOB = 'Job', + LAST_PING_AT = 'Last ping at' +} -const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ - root: { - width: '100%', - overflow: 'auto' +export const computeNodePanelColumns: DataColumns = [ + { + name: ComputeNodePanelColumnNames.INFO, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => + }, + { + name: ComputeNodePanelColumnNames.UUID, + selected: true, + configurable: true, + sortDirection: SortDirection.NONE, + filters: createTree(), + render: uuid => + }, + { + name: ComputeNodePanelColumnNames.DOMAIN, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => + }, + { + name: ComputeNodePanelColumnNames.FIRST_PING_AT, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => }, - tableRow: { - '& th': { - whiteSpace: 'nowrap' - } + { + name: ComputeNodePanelColumnNames.HOSTNAME, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => + }, + { + name: ComputeNodePanelColumnNames.IP_ADDRESS, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => + }, + { + name: ComputeNodePanelColumnNames.JOB, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => + }, + { + name: ComputeNodePanelColumnNames.LAST_PING_AT, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => } -}); +]; + +const DEFAULT_MESSAGE = 'Your compute node list is empty.'; export interface ComputeNodePanelRootActionProps { - openRowOptions: (event: React.MouseEvent, computeNode: NodeResource) => void; + onItemClick: (item: string) => void; + onContextMenu: (event: React.MouseEvent, item: string) => void; + onItemDoubleClick: (item: string) => void; } export interface ComputeNodePanelRootDataProps { - computeNodes: NodeResource[]; - hasComputeNodes: boolean; + resources: ResourcesState; } -type ComputeNodePanelRootProps = ComputeNodePanelRootActionProps & ComputeNodePanelRootDataProps & WithStyles; +type ComputeNodePanelRootProps = ComputeNodePanelRootActionProps & ComputeNodePanelRootDataProps; -export const ComputeNodePanelRoot = withStyles(styles)( - ({ classes, hasComputeNodes, computeNodes, openRowOptions }: ComputeNodePanelRootProps) => - - - {hasComputeNodes && - - - - - Info - UUID - Domain - First ping at - Hostname - IP Address - Job - Last ping at - - - - - {computeNodes.map((computeNode, index) => - - {JSON.stringify(computeNode.info, null, 4)} - {computeNode.uuid} - {computeNode.domain} - {formatDate(computeNode.firstPingAt) || '(none)'} - {computeNode.hostname || '(none)'} - {computeNode.ipAddress || '(none)'} - {computeNode.jobUuid || '(none)'} - {formatDate(computeNode.lastPingAt) || '(none)'} - - - openRowOptions(event, computeNode)}> - - - - - )} - -
- - } - - -); \ No newline at end of file +export const ComputeNodePanelRoot = (props: ComputeNodePanelRootProps) => { + return + } />; +}; \ No newline at end of file diff --git a/src/views/compute-node-panel/compute-node-panel.tsx b/src/views/compute-node-panel/compute-node-panel.tsx index a4f22c80..a531b2d0 100644 --- a/src/views/compute-node-panel/compute-node-panel.tsx +++ b/src/views/compute-node-panel/compute-node-panel.tsx @@ -5,7 +5,6 @@ import { RootState } from '~/store/store'; import { Dispatch } from 'redux'; import { connect } from 'react-redux'; -import { } from '~/store/compute-nodes/compute-nodes-actions'; import { ComputeNodePanelRoot, ComputeNodePanelRootDataProps, @@ -15,15 +14,16 @@ import { openComputeNodeContextMenu } from '~/store/context-menu/context-menu-ac const mapStateToProps = (state: RootState): ComputeNodePanelRootDataProps => { return { - computeNodes: state.computeNodes, - hasComputeNodes: state.computeNodes.length > 0 + resources: state.resources }; }; const mapDispatchToProps = (dispatch: Dispatch): ComputeNodePanelRootActionProps => ({ - openRowOptions: (event, computeNode) => { - dispatch(openComputeNodeContextMenu(event, computeNode)); - } + onContextMenu: (event, resourceUuid) => { + dispatch(openComputeNodeContextMenu(event, resourceUuid)); + }, + onItemClick: (resourceUuid: string) => { return; }, + onItemDoubleClick: uuid => { return; } }); export const ComputeNodePanel = connect(mapStateToProps, mapDispatchToProps)(ComputeNodePanelRoot); \ No newline at end of file diff --git a/src/views/group-details-panel/group-details-panel.tsx b/src/views/group-details-panel/group-details-panel.tsx new file mode 100644 index 00000000..f81c2404 --- /dev/null +++ b/src/views/group-details-panel/group-details-panel.tsx @@ -0,0 +1,126 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from 'react'; +import { connect } from 'react-redux'; + +import { DataExplorer } from "~/views-components/data-explorer/data-explorer"; +import { DataColumns } from '~/components/data-table/data-table'; +import { ResourceUuid, ResourceFirstName, ResourceLastName, ResourceEmail, ResourceUsername } from '~/views-components/data-explorer/renderers'; +import { createTree } from '~/models/tree'; +import { noop } from 'lodash/fp'; +import { RootState } from '~/store/store'; +import { GROUP_DETAILS_PANEL_ID, openAddGroupMembersDialog } from '~/store/group-details-panel/group-details-panel-actions'; +import { openContextMenu } from '~/store/context-menu/context-menu-actions'; +import { ResourcesState, getResource } from '~/store/resources/resources'; +import { ContextMenuKind } from '~/views-components/context-menu/context-menu'; +import { PermissionResource } from '~/models/permission'; +import { Grid, Button } from '@material-ui/core'; +import { AddIcon } from '~/components/icon/icon'; + +export enum GroupDetailsPanelColumnNames { + FIRST_NAME = "First name", + LAST_NAME = "Last name", + UUID = "UUID", + EMAIL = "Email", + USERNAME = "Username", +} + +export const groupDetailsPanelColumns: DataColumns = [ + { + name: GroupDetailsPanelColumnNames.FIRST_NAME, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => + }, + { + name: GroupDetailsPanelColumnNames.LAST_NAME, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => + }, + { + name: GroupDetailsPanelColumnNames.UUID, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => + }, + { + name: GroupDetailsPanelColumnNames.EMAIL, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => + }, + { + name: GroupDetailsPanelColumnNames.USERNAME, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => + }, +]; + +const mapStateToProps = (state: RootState) => { + return { + resources: state.resources + }; +}; + +const mapDispatchToProps = { + onContextMenu: openContextMenu, + onAddUser: openAddGroupMembersDialog, +}; + +export interface GroupDetailsPanelProps { + onContextMenu: (event: React.MouseEvent, item: any) => void; + onAddUser: () => void; + resources: ResourcesState; +} + +export const GroupDetailsPanel = connect( + mapStateToProps, mapDispatchToProps +)( + class GroupDetailsPanel extends React.Component { + + render() { + return ( + + + + } /> + ); + } + + handleContextMenu = (event: React.MouseEvent, resourceUuid: string) => { + const resource = getResource(resourceUuid)(this.props.resources); + if (resource) { + this.props.onContextMenu(event, { + name: '', + uuid: resource.uuid, + ownerUuid: resource.ownerUuid, + kind: resource.kind, + menuKind: ContextMenuKind.GROUP_MEMBER + }); + } + } + }); + diff --git a/src/views/groups-panel/groups-panel.tsx b/src/views/groups-panel/groups-panel.tsx new file mode 100644 index 00000000..f50a344b --- /dev/null +++ b/src/views/groups-panel/groups-panel.tsx @@ -0,0 +1,133 @@ +// Copyright (C) The Arvados Authors. All rights reserved. +// +// SPDX-License-Identifier: AGPL-3.0 + +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Grid, Button, Typography } from "@material-ui/core"; +import { DataExplorer } from "~/views-components/data-explorer/data-explorer"; +import { DataColumns } from '~/components/data-table/data-table'; +import { SortDirection } from '~/components/data-table/data-column'; +import { ResourceOwner } from '~/views-components/data-explorer/renderers'; +import { AddIcon } from '~/components/icon/icon'; +import { ResourceName } from '~/views-components/data-explorer/renderers'; +import { createTree } from '~/models/tree'; +import { GROUPS_PANEL_ID, openCreateGroupDialog } from '~/store/groups-panel/groups-panel-actions'; +import { noop } from 'lodash/fp'; +import { ContextMenuKind } from '~/views-components/context-menu/context-menu'; +import { getResource, ResourcesState, filterResources } from '~/store/resources/resources'; +import { GroupResource } from '~/models/group'; +import { RootState } from '~/store/store'; +import { openContextMenu } from '~/store/context-menu/context-menu-actions'; +import { ResourceKind } from '~/models/resource'; +import { LinkClass, LinkResource } from '~/models/link'; +import { navigateToGroupDetails } from '~/store/navigation/navigation-action'; + +export enum GroupsPanelColumnNames { + GROUP = "Name", + OWNER = "Owner", + MEMBERS = "Members", +} + +export const groupsPanelColumns: DataColumns = [ + { + name: GroupsPanelColumnNames.GROUP, + selected: true, + configurable: true, + sortDirection: SortDirection.ASC, + filters: createTree(), + render: uuid => + }, + { + name: GroupsPanelColumnNames.OWNER, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => , + }, + { + name: GroupsPanelColumnNames.MEMBERS, + selected: true, + configurable: true, + filters: createTree(), + render: uuid => , + }, +]; + +const mapStateToProps = (state: RootState) => { + return { + resources: state.resources + }; +}; + +const mapDispatchToProps = { + onContextMenu: openContextMenu, + onRowDoubleClick: (uuid: string) => + navigateToGroupDetails(uuid), + onNewGroup: openCreateGroupDialog, +}; + +export interface GroupsPanelProps { + onNewGroup: () => void; + onContextMenu: (event: React.MouseEvent, item: any) => void; + onRowDoubleClick: (item: string) => void; + resources: ResourcesState; +} + +export const GroupsPanel = connect( + mapStateToProps, mapDispatchToProps +)( + class GroupsPanel extends React.Component { + + render() { + return ( + + + + } /> + ); + } + + handleContextMenu = (event: React.MouseEvent, resourceUuid: string) => { + const resource = getResource(resourceUuid)(this.props.resources); + if (resource) { + this.props.onContextMenu(event, { + name: '', + uuid: resource.uuid, + ownerUuid: resource.ownerUuid, + kind: resource.kind, + menuKind: ContextMenuKind.GROUPS + }); + } + } + }); + + +const GroupMembersCount = connect( + (state: RootState, props: { uuid: string }) => { + + const permissions = filterResources((resource: LinkResource) => + resource.kind === ResourceKind.LINK && + resource.linkClass === LinkClass.PERMISSION && + resource.tailUuid === props.uuid + )(state.resources); + + return { + children: permissions.length, + }; + + } +)(Typography); diff --git a/src/views/link-panel/link-panel-root.tsx b/src/views/link-panel/link-panel-root.tsx index d5ba79b3..a4c8e010 100644 --- a/src/views/link-panel/link-panel-root.tsx +++ b/src/views/link-panel/link-panel-root.tsx @@ -63,19 +63,19 @@ export const linkPanelColumns: DataColumns = [ } ]; -export interface LinkPanelDataProps { +export interface LinkPanelRootDataProps { resources: ResourcesState; } -export interface LinkPanelActionProps { +export interface LinkPanelRootActionProps { onItemClick: (item: string) => void; onContextMenu: (event: React.MouseEvent, item: string) => void; onItemDoubleClick: (item: string) => void; } -export type LinkPanelProps = LinkPanelDataProps & LinkPanelActionProps; +export type LinkPanelRootProps = LinkPanelRootDataProps & LinkPanelRootActionProps; -export const LinkPanelRoot = (props: LinkPanelProps) => { +export const LinkPanelRoot = (props: LinkPanelRootProps) => { return { +const mapStateToProps = (state: RootState): LinkPanelRootDataProps => { return { resources: state.resources }; }; -const mapDispatchToProps = (dispatch: Dispatch): LinkPanelActionProps => ({ +const mapDispatchToProps = (dispatch: Dispatch): LinkPanelRootActionProps => ({ onContextMenu: (event, resourceUuid) => { const kind = resourceKindToContextMenuKind(resourceUuid); if (kind) { diff --git a/src/views/run-process-panel/run-process-first-step.tsx b/src/views/run-process-panel/run-process-first-step.tsx index fe93ef85..18f5561d 100644 --- a/src/views/run-process-panel/run-process-first-step.tsx +++ b/src/views/run-process-panel/run-process-first-step.tsx @@ -3,11 +3,11 @@ // SPDX-License-Identifier: AGPL-3.0 import * as React from 'react'; -import { StyleRulesCallback, withStyles, Grid, Button, WithStyles, List, ListItem, ListItemText, ListItemIcon, Tabs, Tab } from '@material-ui/core'; +import { StyleRulesCallback, withStyles, Grid, Button, WithStyles, List, ListItem, ListItemText, ListItemIcon } from '@material-ui/core'; import { ArvadosTheme } from '~/common/custom-theme'; import { WorkflowResource } from '~/models/workflow'; import { WorkflowIcon } from '~/components/icon/icon'; -import { WorkflowDetailsCard } from '../workflow-panel/workflow-description-card'; +import { WorkflowDetailsCard } from '~/views/workflow-panel/workflow-description-card'; import { SearchInput } from '~/components/search-input/search-input'; type CssRules = 'root' | 'searchGrid' | 'workflowDetailsGrid' | 'list' | 'listItem' | 'itemSelected' | 'listItemText' | 'listItemIcon'; diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index 025540e2..bff328e8 100644 --- a/src/views/workbench/workbench.tsx +++ b/src/views/workbench/workbench.tsx @@ -79,6 +79,14 @@ import { UserPanel } from '~/views/user-panel/user-panel'; import { UserAttributesDialog } from '~/views-components/user-dialog/attributes-dialog'; import { CreateUserDialog } from '~/views-components/dialog-forms/create-user-dialog'; import { HelpApiClientAuthorizationDialog } from '~/views-components/api-client-authorizations-dialog/help-dialog'; +import { GroupsPanel } from '~/views/groups-panel/groups-panel'; +import { CreateGroupDialog } from '~/views-components/dialog-forms/create-group-dialog'; +import { RemoveGroupDialog } from '~/views-components/groups-dialog/remove-dialog'; +import { GroupAttributesDialog } from '~/views-components/groups-dialog/attributes-dialog'; +import { GroupDetailsPanel } from '~/views/group-details-panel/group-details-panel'; +import { RemoveGroupMemberDialog } from '~/views-components/groups-dialog/member-remove-dialog'; +import { GroupMemberAttributesDialog } from '~/views-components/groups-dialog/member-attributes-dialog'; +import { AddGroupMembersDialog } from '~/views-components/dialog-forms/add-group-member-dialog'; type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content'; @@ -158,6 +166,8 @@ export const WorkbenchPanel = + + @@ -167,6 +177,7 @@ export const WorkbenchPanel = + @@ -178,6 +189,7 @@ export const WorkbenchPanel = + @@ -185,6 +197,8 @@ export const WorkbenchPanel = + + @@ -197,6 +211,8 @@ export const WorkbenchPanel = + + diff --git a/src/views/workflow-panel/workflow-description-card.tsx b/src/views/workflow-panel/workflow-description-card.tsx index 02408b06..936c3485 100644 --- a/src/views/workflow-panel/workflow-description-card.tsx +++ b/src/views/workflow-panel/workflow-description-card.tsx @@ -22,7 +22,7 @@ import { DataTableDefaultView } from '~/components/data-table-default-view/data- import { WorkflowResource, parseWorkflowDefinition, getWorkflowInputs, getInputLabel, stringifyInputType } from '~/models/workflow'; import { WorkflowGraph } from "~/views/workflow-panel/workflow-graph"; -export type CssRules = 'root' | 'tab' | 'inputTab' | 'graphTab' | 'descriptionTab' | 'inputsTable'; +export type CssRules = 'root' | 'tab' | 'inputTab' | 'graphTab' | 'graphTabWithChosenWorkflow' | 'descriptionTab' | 'inputsTable'; const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ root: { @@ -34,12 +34,12 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ inputTab: { overflow: 'auto', maxHeight: '300px', - marginTop: theme.spacing.unit, - '&:last-child': { - paddingBottom: theme.spacing.unit / 2, - } + marginTop: theme.spacing.unit }, graphTab: { + marginTop: theme.spacing.unit, + }, + graphTabWithChosenWorkflow: { overflow: 'auto', height: '450px', marginTop: theme.spacing.unit, @@ -99,7 +99,7 @@ export const WorkflowDetailsCard = withStyles(styles)( messages={['Please select a workflow to see its inputs.']} /> } } - {value === 2 && + {value === 2 && {workflow ? :