[ARVADOS-WORKBENCH2] created: 1.3.0-78-g090f482
Git user
git at public.curoverse.com
Wed Dec 12 04:48:45 EST 2018
at 090f4825bdd30925a10c6df1b9493df0c2e8f541 (commit)
commit 090f4825bdd30925a10c6df1b9493df0c2e8f541
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Wed Dec 12 10:48:23 2018 +0100
add admin links feature - model, service, dialogs and panel
Feature #14512_admin_links
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/common/labels.ts b/src/common/labels.ts
index 0e3131d..133a0e4 100644
--- a/src/common/labels.ts
+++ b/src/common/labels.ts
@@ -12,6 +12,10 @@ export const resourceLabel = (type: string) => {
return "Project";
case ResourceKind.PROCESS:
return "Process";
+ case ResourceKind.USER:
+ return "User";
+ case ResourceKind.GROUP:
+ return "Group";
default:
return "Unknown";
}
diff --git a/src/index.tsx b/src/index.tsx
index 8f702af..e73f08c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -56,6 +56,7 @@ 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 { linkActionSet } from '~/views-components/context-menu/action-sets/link-action-set';
console.log(`Starting arvados [${getBuildInfo()}]`);
@@ -77,6 +78,7 @@ addMenuActionSet(ContextMenuKind.SSH_KEY, sshKeyActionSet);
addMenuActionSet(ContextMenuKind.VIRTUAL_MACHINE, virtualMachineActionSet);
addMenuActionSet(ContextMenuKind.KEEP_SERVICE, keepServiceActionSet);
addMenuActionSet(ContextMenuKind.USER, userActionSet);
+addMenuActionSet(ContextMenuKind.LINK, linkActionSet);
addMenuActionSet(ContextMenuKind.NODE, computeNodeActionSet);
addMenuActionSet(ContextMenuKind.API_CLIENT_AUTHORIZATION, apiClientAuthorizationActionSet);
diff --git a/src/models/link.ts b/src/models/link.ts
index baaff65..acaf139 100644
--- a/src/models/link.ts
+++ b/src/models/link.ts
@@ -4,10 +4,13 @@
import { Resource } from "./resource";
import { TagProperty } from "~/models/tag";
+import { ResourceKind } from '~/models/resource';
export interface LinkResource extends Resource {
headUuid: string;
+ headKind: ResourceKind;
tailUuid: string;
+ tailKind: string;
linkClass: string;
name: string;
properties: TagProperty;
diff --git a/src/models/resource.ts b/src/models/resource.ts
index eddcd5a..31f3eb8 100644
--- a/src/models/resource.ts
+++ b/src/models/resource.ts
@@ -26,6 +26,7 @@ export enum ResourceKind {
CONTAINER = "arvados#container",
CONTAINER_REQUEST = "arvados#containerRequest",
GROUP = "arvados#group",
+ LINK = "arvados#link",
LOG = "arvados#log",
NODE = "arvados#node",
PROCESS = "arvados#containerRequest",
@@ -45,6 +46,7 @@ export enum ResourceObjectType {
CONTAINER = 'dz642',
CONTAINER_REQUEST = 'xvhdp',
GROUP = 'j7d0g',
+ LINK = 'o0j2j',
LOG = '57u5n',
REPOSITORY = 's0uqq',
USER = 'tpzed',
@@ -97,6 +99,8 @@ export const extractUuidKind = (uuid: string = '') => {
return ResourceKind.NODE;
case ResourceObjectType.API_CLIENT_AUTHORIZATION:
return ResourceKind.API_CLIENT_AUTHORIZATION;
+ case ResourceObjectType.LINK:
+ return ResourceKind.LINK;
default:
return undefined;
}
diff --git a/src/routes/route-change-handlers.ts b/src/routes/route-change-handlers.ts
index e2454d6..34b488d 100644
--- a/src/routes/route-change-handlers.ts
+++ b/src/routes/route-change-handlers.ts
@@ -34,6 +34,7 @@ const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => {
const apiClientAuthorizationsMatch = Routes.matchApiClientAuthorizationsRoute(pathname);
const myAccountMatch = Routes.matchMyAccountRoute(pathname);
const userMatch = Routes.matchUsersRoute(pathname);
+ const linksMatch = Routes.matchLinksRoute(pathname);
if (projectMatch) {
store.dispatch(WorkbenchActions.loadProject(projectMatch.params.id));
@@ -71,7 +72,9 @@ const handleLocationChange = (store: RootStore) => ({ pathname }: Location) => {
store.dispatch(WorkbenchActions.loadApiClientAuthorizations);
} else if (myAccountMatch) {
store.dispatch(WorkbenchActions.loadMyAccount);
- }else if (userMatch) {
+ } else if (userMatch) {
store.dispatch(WorkbenchActions.loadUsers);
+ } else if (linksMatch) {
+ store.dispatch(WorkbenchActions.loadLinks);
}
};
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
index 88dfd46..8286e10 100644
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@@ -27,7 +27,8 @@ export const Routes = {
KEEP_SERVICES: `/keep-services`,
COMPUTE_NODES: `/nodes`,
USERS: '/users',
- API_CLIENT_AUTHORIZATIONS: `/api_client_authorizations`
+ API_CLIENT_AUTHORIZATIONS: `/api_client_authorizations`,
+ LINKS: '/links'
};
export const getResourceUrl = (uuid: string) => {
@@ -108,3 +109,6 @@ export const matchComputeNodesRoute = (route: string) =>
export const matchApiClientAuthorizationsRoute = (route: string) =>
matchPath(route, { path: Routes.API_CLIENT_AUTHORIZATIONS });
+
+export const matchLinksRoute = (route: string) =>
+ matchPath(route, { path: Routes.LINKS });
\ No newline at end of file
diff --git a/src/store/advanced-tab/advanced-tab.ts b/src/store/advanced-tab/advanced-tab.ts
index 851eb94..659b6e4 100644
--- a/src/store/advanced-tab/advanced-tab.ts
+++ b/src/store/advanced-tab/advanced-tab.ts
@@ -77,7 +77,8 @@ enum ResourcePrefix {
KEEP_SERVICES = 'keep_services',
COMPUTE_NODES = 'nodes',
USERS = 'users',
- API_CLIENT_AUTHORIZATIONS = 'api_client_authorizations'
+ API_CLIENT_AUTHORIZATIONS = 'api_client_authorizations',
+ LINKS = 'links'
}
enum KeepServiceData {
@@ -100,9 +101,14 @@ enum ApiClientAuthorizationsData {
DEFAULT_OWNER_UUID = 'default_owner_uuid'
}
-type AdvanceResourceKind = CollectionData | ProcessData | ProjectData | RepositoryData | SshKeyData | VirtualMachineData | KeepServiceData | ComputeNodeData | ApiClientAuthorizationsData | UserData;
+enum LinkData {
+ LINK = 'link',
+ PROPERTIES = 'properties'
+}
+
+type AdvanceResourceKind = CollectionData | ProcessData | ProjectData | RepositoryData | SshKeyData | VirtualMachineData | KeepServiceData | ComputeNodeData | ApiClientAuthorizationsData | UserData | LinkData;
type AdvanceResourcePrefix = GroupContentsResourcePrefix | ResourcePrefix;
-type AdvanceResponseData = ContainerRequestResource | ProjectResource | CollectionResource | RepositoryResource | SshKeyResource | VirtualMachinesResource | KeepServiceResource | NodeResource | ApiClientAuthorization | UserResource | undefined;
+type AdvanceResponseData = ContainerRequestResource | ProjectResource | CollectionResource | RepositoryResource | SshKeyResource | VirtualMachinesResource | KeepServiceResource | NodeResource | ApiClientAuthorization | UserResource | LinkResource | undefined;
export const openAdvancedTabDialog = (uuid: string) =>
async (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
@@ -264,6 +270,22 @@ export const openAdvancedTabDialog = (uuid: string) =>
});
dispatch<any>(initAdvancedTabDialog(advanceDataApiClientAuthorization));
break;
+ case ResourceKind.LINK:
+ const linkResources = getState().resources;
+ const dataLink = getResource<LinkResource>(uuid)(linkResources);
+ const advanceDataLink = advancedTabData({
+ uuid,
+ metadata: '',
+ user: '',
+ apiResponseKind: linkApiResponse,
+ data: dataLink,
+ resourceKind: LinkData.LINK,
+ resourcePrefix: ResourcePrefix.LINKS,
+ resourceKindProperty: LinkData.PROPERTIES,
+ property: dataLink!.properties
+ });
+ dispatch<any>(initAdvancedTabDialog(advanceDataLink));
+ break;
default:
dispatch(snackbarActions.OPEN_SNACKBAR({ message: "Could not open advanced tab for this resource.", hideDuration: 2000, kind: SnackbarKind.ERROR }));
}
@@ -583,4 +605,26 @@ const apiClientAuthorizationApiResponse = (apiResponse: ApiClientAuthorization)
"scopes": "${JSON.stringify(scopes, null, 4)}"`;
return response;
+};
+
+const linkApiResponse = (apiResponse: LinkResource) => {
+ const {
+ uuid, name, headUuid, properties, headKind, tailUuid, tailKind, linkClass,
+ ownerUuid, createdAt, modifiedAt, modifiedByClientUuid, modifiedByUserUuid
+ } = apiResponse;
+ const response = `"uuid": "${uuid}",
+"name": "${name}",
+"head_uuid": "${headUuid}",
+"head_kind": "${headKind}",
+"tail_uuid": "${tailUuid}",
+"tail_kind": "${tailKind}",
+"link_class": "${linkClass}",
+"owner_uuid": "${ownerUuid}",
+"created_at": "${stringify(createdAt)}",
+"modified_at": ${stringify(modifiedAt)},
+"modified_by_client_uuid": ${stringify(modifiedByClientUuid)},
+"modified_by_user_uuid": ${stringify(modifiedByUserUuid)},
+"properties": "${JSON.stringify(properties, null, 4)}"`;
+
+ return response;
};
\ 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 b7d6cb2..e9b08a8 100644
--- a/src/store/context-menu/context-menu-actions.ts
+++ b/src/store/context-menu/context-menu-actions.ts
@@ -200,6 +200,8 @@ export const resourceKindToContextMenuKind = (uuid: string) => {
return ContextMenuKind.PROCESS_RESOURCE;
case ResourceKind.USER:
return ContextMenuKind.ROOT_PROJECT;
+ case ResourceKind.LINK:
+ return ContextMenuKind.LINK;
default:
return;
}
diff --git a/src/store/link-panel/link-panel-actions.ts b/src/store/link-panel/link-panel-actions.ts
new file mode 100644
index 0000000..944c1bd
--- /dev/null
+++ b/src/store/link-panel/link-panel-actions.ts
@@ -0,0 +1,57 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { Dispatch } from 'redux';
+import { RootState } from '~/store/store';
+import { ServiceRepository } from '~/services/services';
+import { bindDataExplorerActions } from '~/store/data-explorer/data-explorer-action';
+import { setBreadcrumbs } from '~/store/breadcrumbs/breadcrumbs-actions';
+import { dialogActions } from '~/store/dialog/dialog-actions';
+import { LinkResource } from '~/models/link';
+import { getResource } from '~/store/resources/resources';
+import { snackbarActions } from '~/store/snackbar/snackbar-actions';
+
+export const LINK_PANEL_ID = "linkPanelId";
+export const linkPanelActions = bindDataExplorerActions(LINK_PANEL_ID);
+
+export const LINK_REMOVE_DIALOG = 'linkRemoveDialog';
+export const LINK_ATTRIBUTES_DIALOG = 'linkAttributesDialog';
+
+export const openLinkAttributesDialog = (uuid: string) =>
+ (dispatch: Dispatch, getState: () => RootState) => {
+ const { resources } = getState();
+ const link = getResource<LinkResource>(uuid)(resources);
+ dispatch(dialogActions.OPEN_DIALOG({ id: LINK_ATTRIBUTES_DIALOG, data: { link } }));
+ };
+
+export const openLinkRemoveDialog = (uuid: string) =>
+ (dispatch: Dispatch, getState: () => RootState) => {
+ dispatch(dialogActions.OPEN_DIALOG({
+ id: LINK_REMOVE_DIALOG,
+ data: {
+ title: 'Remove link',
+ text: 'Are you sure you want to remove this link?',
+ confirmButtonLabel: 'Remove',
+ uuid
+ }
+ }));
+ };
+
+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 ...' }));
+ try {
+ await services.linkService.delete(uuid);
+ dispatch(linkPanelActions.REQUEST_ITEMS());
+ dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Link has been successfully removed.', hideDuration: 2000 }));
+ } catch (e) {
+ return;
+ }
+ };
\ No newline at end of file
diff --git a/src/store/link-panel/link-panel-middleware-service.ts b/src/store/link-panel/link-panel-middleware-service.ts
new file mode 100644
index 0000000..b4d342c
--- /dev/null
+++ b/src/store/link-panel/link-panel-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 { SortDirection } from '~/components/data-table/data-column';
+import { OrderDirection, OrderBuilder } from '~/services/api/order-builder';
+import { ListResults } from '~/services/common-service/common-service';
+import { getSortColumn } from "~/store/data-explorer/data-explorer-reducer";
+import { LinkResource } from '~/models/link';
+import { linkPanelActions } from '~/store/link-panel/link-panel-actions';
+import { LinkPanelColumnNames } from '~/views/link-panel/link-panel-root';
+
+export class LinkMiddlewareService extends DataExplorerMiddlewareService {
+ constructor(private services: ServiceRepository, id: string) {
+ super(id);
+ }
+
+ async requestItems(api: MiddlewareAPI<Dispatch, RootState>) {
+ const state = api.getState();
+ const dataExplorer = getDataExplorer(state.dataExplorer, this.getId());
+ try {
+ const response = await this.services.linkService.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<LinkResource>();
+ if (sortColumn) {
+ const sortDirection = sortColumn && sortColumn.sortDirection === SortDirection.ASC
+ ? OrderDirection.ASC
+ : OrderDirection.DESC;
+
+ const columnName = sortColumn && sortColumn.name === LinkPanelColumnNames.NAME ? "name" : "modifiedAt";
+ return order
+ .addOrder(sortDirection, columnName)
+ .getOrder();
+ } else {
+ return order.getOrder();
+ }
+};
+
+export const setItems = (listResults: ListResults<LinkResource>) =>
+ linkPanelActions.SET_ITEMS({
+ ...listResultsToDataExplorerItemsMeta(listResults),
+ items: listResults.items.map(resource => resource.uuid),
+ });
+
+const couldNotFetchLinks = () =>
+ snackbarActions.OPEN_SNACKBAR({
+ message: 'Could not fetch links.',
+ kind: SnackbarKind.ERROR
+ });
diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts
index 8d68a4b..0221fa9 100644
--- a/src/store/navigation/navigation-action.ts
+++ b/src/store/navigation/navigation-action.ts
@@ -77,3 +77,5 @@ export const navigateToComputeNodes = push(Routes.COMPUTE_NODES);
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
diff --git a/src/store/store.ts b/src/store/store.ts
index 2b0ada8..792224d 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -50,6 +50,8 @@ import { UserMiddlewareService } from '~/store/users/user-panel-middleware-servi
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 { LINK_PANEL_ID } from '~/store/link-panel/link-panel-actions';
+import { LinkMiddlewareService } from '~/store/link-panel/link-panel-middleware-service';
const composeEnhancers =
(process.env.NODE_ENV === 'development' &&
@@ -84,7 +86,9 @@ export function configureStore(history: History, services: ServiceRepository): R
const userPanelMiddleware = dataExplorerMiddleware(
new UserMiddlewareService(services, USERS_PANEL_ID)
);
-
+ const linkPanelMiddleware = dataExplorerMiddleware(
+ new LinkMiddlewareService(services, LINK_PANEL_ID)
+ );
const middlewares: Middleware[] = [
routerMiddleware(history),
thunkMiddleware.withExtraArgument(services),
@@ -94,7 +98,8 @@ export function configureStore(history: History, services: ServiceRepository): R
searchResultsPanelMiddleware,
sharedWithMePanelMiddleware,
workflowPanelMiddleware,
- userPanelMiddleware
+ userPanelMiddleware,
+ linkPanelMiddleware
];
const enhancer = composeEnhancers(applyMiddleware(...middlewares));
return createStore(rootReducer, enhancer);
diff --git a/src/store/workbench/workbench-actions.ts b/src/store/workbench/workbench-actions.ts
index bc5eac6..85540f0 100644
--- a/src/store/workbench/workbench-actions.ts
+++ b/src/store/workbench/workbench-actions.ts
@@ -59,6 +59,8 @@ import { loadVirtualMachinesPanel } from '~/store/virtual-machines/virtual-machi
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 { 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 { loadApiClientAuthorizationsPanel } from '~/store/api-client-authorizations/api-client-authorizations-actions';
@@ -96,6 +98,7 @@ export const loadWorkbench = () =>
dispatch(workflowPanelActions.SET_COLUMNS({ columns: workflowPanelColumns }));
dispatch(searchResultsPanelActions.SET_COLUMNS({ columns: searchResultsPanelColumns }));
dispatch(userBindedActions.SET_COLUMNS({ columns: userPanelColumns }));
+ dispatch(linkPanelActions.SET_COLUMNS({ columns: linkPanelColumns }));
dispatch<any>(initSidePanelTree());
if (router.location) {
const match = matchRootRoute(router.location.pathname);
@@ -402,6 +405,11 @@ export const loadSearchResults = handleFirstTimeLoad(
await dispatch(loadSearchResultsPanel());
});
+export const loadLinks = handleFirstTimeLoad(
+ async (dispatch: Dispatch<any>) => {
+ await dispatch(loadLinkPanel());
+ });
+
export const loadVirtualMachines = handleFirstTimeLoad(
async (dispatch: Dispatch<any>) => {
await dispatch(loadVirtualMachinesPanel());
diff --git a/src/views-components/context-menu/action-sets/link-action-set.ts b/src/views-components/context-menu/action-sets/link-action-set.ts
new file mode 100644
index 0000000..326741a
--- /dev/null
+++ b/src/views-components/context-menu/action-sets/link-action-set.ts
@@ -0,0 +1,28 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { openLinkAttributesDialog, openLinkRemoveDialog } from '~/store/link-panel/link-panel-actions';
+import { openAdvancedTabDialog } from '~/store/advanced-tab/advanced-tab';
+import { ContextMenuActionSet } from "~/views-components/context-menu/context-menu-action-set";
+import { AdvancedIcon, RemoveIcon, AttributesIcon } from "~/components/icon/icon";
+
+export const linkActionSet: ContextMenuActionSet = [[{
+ name: "Attributes",
+ icon: AttributesIcon,
+ execute: (dispatch, { uuid }) => {
+ dispatch<any>(openLinkAttributesDialog(uuid));
+ }
+}, {
+ name: "Advanced",
+ icon: AdvancedIcon,
+ execute: (dispatch, { uuid }) => {
+ dispatch<any>(openAdvancedTabDialog(uuid));
+ }
+}, {
+ name: "Remove",
+ icon: RemoveIcon,
+ execute: (dispatch, { uuid }) => {
+ dispatch<any>(openLinkRemoveDialog(uuid));
+ }
+}]];
diff --git a/src/views-components/context-menu/context-menu.tsx b/src/views-components/context-menu/context-menu.tsx
index 95a4a83..a9200eb 100644
--- a/src/views-components/context-menu/context-menu.tsx
+++ b/src/views-components/context-menu/context-menu.tsx
@@ -75,5 +75,6 @@ export enum ContextMenuKind {
VIRTUAL_MACHINE = "VirtualMachine",
KEEP_SERVICE = "KeepService",
USER = "User",
+ LINK = "Link",
NODE = "Node"
}
diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx
index 16ea7a9..1be47be 100644
--- a/src/views-components/data-explorer/renderers.tsx
+++ b/src/views-components/data-explorer/renderers.tsx
@@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Grid, Typography, withStyles, Tooltip, IconButton, Checkbox } from '@material-ui/core';
+import { Grid, Typography, withStyles, Tooltip, IconButton, Checkbox, Button } from '@material-ui/core';
import { FavoriteStar } from '../favorite-star/favorite-star';
import { ResourceKind, TrashableResource } from '~/models/resource';
import { ProjectIcon, CollectionIcon, ProcessIcon, DefaultIcon, WorkflowIcon, ShareIcon } from '~/components/icon/icon';
@@ -23,6 +23,9 @@ import { getResourceData } from "~/store/resources-data/resources-data";
import { openSharingDialog } from '~/store/sharing-dialog/sharing-dialog-actions';
import { UserResource } from '~/models/user';
import { toggleIsActive, toggleIsAdmin } from '~/store/users/users-actions';
+import { LinkResource } from '~/models/link';
+import { navigateTo } from '~/store/navigation/navigation-action';
+import { Link } from 'react-router-dom';
const renderName = (item: { name: string; uuid: string, kind: string }) =>
<Grid container alignItems="center" wrap="nowrap" spacing={16}>
@@ -119,6 +122,7 @@ const renderFirstName = (item: { firstName: string }) => {
return <Typography noWrap>{item.firstName}</Typography>;
};
+// User Resources
export const ResourceFirstName = connect(
(state: RootState, props: { uuid: string }) => {
const resource = getResource<UserResource>(props.uuid)(state.resources);
@@ -187,6 +191,60 @@ export const ResourceUsername = connect(
return resource || { username: '' };
})(renderUsername);
+// Links Resources
+const renderLinkName = (item: { name: string }) =>
+ <Typography noWrap>{item.name || '(none)'}</Typography>;
+
+export const ResourceLinkName = connect(
+ (state: RootState, props: { uuid: string }) => {
+ const resource = getResource<LinkResource>(props.uuid)(state.resources);
+ return resource || { name: '' };
+ })(renderLinkName);
+
+const renderLinkClass = (item: { linkClass: string }) =>
+ <Typography noWrap>{item.linkClass}</Typography>;
+
+export const ResourceLinkClass = connect(
+ (state: RootState, props: { uuid: string }) => {
+ const resource = getResource<LinkResource>(props.uuid)(state.resources);
+ return resource || { linkClass: '' };
+ })(renderLinkClass);
+
+const renderLinkTail = (dispatch: Dispatch, item: { uuid: string, tailUuid: string, tailKind: string }) =>
+ <Typography noWrap color="primary" onClick={() => dispatch<any>(navigateTo(item.uuid))}>
+ {resourceLabel(item.tailKind)}: {item.tailUuid}
+ </Typography>;
+
+export const ResourceLinkTail = connect(
+ (state: RootState, props: { uuid: string }) => {
+ const resource = getResource<LinkResource>(props.uuid)(state.resources);
+ return {
+ item: resource || { uuid: '', tailUuid: '', tailKind: ResourceKind.NONE }
+ };
+ })((props: { item: any } & DispatchProp<any>) =>
+ renderLinkTail(props.dispatch, props.item));
+
+const renderLinkHead = (dispatch: Dispatch, item: { uuid: string, headUuid: string, headKind: ResourceKind }) =>
+ <Typography noWrap color="primary" onClick={() => dispatch<any>(navigateTo(item.uuid))}>
+ {resourceLabel(item.headKind)}: {item.headUuid}
+ </Typography>;
+
+export const ResourceLinkHead = connect(
+ (state: RootState, props: { uuid: string }) => {
+ const resource = getResource<LinkResource>(props.uuid)(state.resources);
+ return {
+ item: resource || { uuid: '', headUuid: '', headKind: ResourceKind.NONE }
+ };
+ })((props: { item: any } & DispatchProp<any>) =>
+ renderLinkHead(props.dispatch, props.item));
+
+export const ResourceLinkUuid = connect(
+ (state: RootState, props: { uuid: string }) => {
+ const resource = getResource<LinkResource>(props.uuid)(state.resources);
+ return resource || { uuid: '' };
+ })(renderUuid);
+
+// Process Resources
const resourceRunProcess = (dispatch: Dispatch, uuid: string) => {
return (
<div>
diff --git a/src/views-components/links-dialog/attributes-dialog.tsx b/src/views-components/links-dialog/attributes-dialog.tsx
new file mode 100644
index 0000000..8226c62
--- /dev/null
+++ b/src/views-components/links-dialog/attributes-dialog.tsx
@@ -0,0 +1,73 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { compose } from 'redux';
+import { withStyles, Dialog, DialogTitle, DialogContent, DialogActions, Button, StyleRulesCallback, WithStyles, Grid } from '@material-ui/core';
+import { WithDialogProps, withDialog } from "~/store/dialog/with-dialog";
+import { LINK_ATTRIBUTES_DIALOG } from '~/store/link-panel/link-panel-actions';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { LinkResource } from '~/models/link';
+
+type CssRules = 'root';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ root: {
+ fontSize: '0.875rem',
+ '& div:nth-child(odd)': {
+ textAlign: 'right',
+ color: theme.palette.grey["500"]
+ }
+ }
+});
+
+interface AttributesLinkDialogDataProps {
+ link: LinkResource;
+}
+
+export const AttributesLinkDialog = compose(
+ withDialog(LINK_ATTRIBUTES_DIALOG),
+ withStyles(styles))(
+ ({ open, closeDialog, data, classes }: WithDialogProps<AttributesLinkDialogDataProps> & WithStyles<CssRules>) =>
+ <Dialog open={open}
+ onClose={closeDialog}
+ fullWidth
+ maxWidth='sm'>
+ <DialogTitle>Attributes</DialogTitle>
+ <DialogContent>
+ {data.link && <Grid container direction="row" spacing={16} className={classes.root}>
+ <Grid item xs={5}>Uuid</Grid>
+ <Grid item xs={7}>{data.link.uuid}</Grid>
+ <Grid item xs={5}>Name</Grid>
+ <Grid item xs={7}>{data.link.name}</Grid>
+ <Grid item xs={5}>Head uuid</Grid>
+ <Grid item xs={7}>{data.link.headUuid}</Grid>
+ <Grid item xs={5}>Head kind</Grid>
+ <Grid item xs={7}>{data.link.headKind}</Grid>
+ <Grid item xs={5}>Tail uuid</Grid>
+ <Grid item xs={7}>{data.link.tailUuid}</Grid>
+ <Grid item xs={5}>Link class</Grid>
+ <Grid item xs={7}>{data.link.linkClass}</Grid>
+ <Grid item xs={5}>Owner uuid</Grid>
+ <Grid item xs={7}>{data.link.ownerUuid}</Grid>
+ <Grid item xs={5}>Created at</Grid>
+ <Grid item xs={7}>{data.link.createdAt}</Grid>
+ <Grid item xs={5}>Modified at</Grid>
+ <Grid item xs={7}>{data.link.modifiedAt}</Grid>
+ <Grid item xs={5}>Modified by user uuid</Grid>
+ <Grid item xs={7}>{data.link.modifiedByUserUuid}</Grid>
+ <Grid item xs={5}>Modified by client uuid</Grid>
+ <Grid item xs={7}>{data.link.modifiedByClientUuid}</Grid>
+ </Grid>}
+ </DialogContent>
+ <DialogActions>
+ <Button
+ variant='flat'
+ color='primary'
+ onClick={closeDialog}>
+ Close
+ </Button>
+ </DialogActions>
+ </Dialog>
+ );
\ No newline at end of file
diff --git a/src/views-components/links-dialog/remove-dialog.tsx b/src/views-components/links-dialog/remove-dialog.tsx
new file mode 100644
index 0000000..22660c6
--- /dev/null
+++ b/src/views-components/links-dialog/remove-dialog.tsx
@@ -0,0 +1,20 @@
+// 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 { LINK_REMOVE_DIALOG, removeLink } from '~/store/link-panel/link-panel-actions';
+
+const mapDispatchToProps = (dispatch: Dispatch, props: WithDialogProps<any>) => ({
+ onConfirm: () => {
+ props.closeDialog();
+ dispatch<any>(removeLink(props.data.uuid));
+ }
+});
+
+export const RemoveLinkDialog = compose(
+ withDialog(LINK_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 44b113d..f765a60 100644
--- a/src/views-components/main-app-bar/account-menu.tsx
+++ b/src/views-components/main-app-bar/account-menu.tsx
@@ -12,12 +12,8 @@ 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 {
- navigateToSshKeys, navigateToKeepServices, navigateToComputeNodes,
- navigateToApiClientAuthorizations, navigateToMyAccount
-} from '~/store/navigation/navigation-action';
+import * as NavigationAction from '~/store/navigation/navigation-action';
import { openVirtualMachines } from "~/store/virtual-machines/virtual-machines-actions";
-import { navigateToUsers } from '~/store/navigation/navigation-action';
interface AccountMenuProps {
user?: User;
@@ -40,12 +36,13 @@ export const AccountMenu = connect(mapStateToProps)(
<MenuItem onClick={() => dispatch(openVirtualMachines())}>Virtual Machines</MenuItem>
<MenuItem onClick={() => dispatch(openRepositoriesPanel())}>Repositories</MenuItem>
<MenuItem onClick={() => dispatch(openCurrentTokenDialog)}>Current token</MenuItem>
- <MenuItem onClick={() => dispatch(navigateToSshKeys)}>Ssh Keys</MenuItem>
- <MenuItem onClick={() => dispatch(navigateToUsers)}>Users</MenuItem>
- { user.isAdmin && <MenuItem onClick={() => dispatch(navigateToApiClientAuthorizations)}>Api Tokens</MenuItem> }
- { user.isAdmin && <MenuItem onClick={() => dispatch(navigateToKeepServices)}>Keep Services</MenuItem> }
- { user.isAdmin && <MenuItem onClick={() => dispatch(navigateToComputeNodes)}>Compute Nodes</MenuItem> }
- <MenuItem onClick={() => dispatch(navigateToMyAccount)}>My account</MenuItem>
+ <MenuItem onClick={() => dispatch(NavigationAction.navigateToSshKeys)}>Ssh Keys</MenuItem>
+ <MenuItem onClick={() => dispatch(NavigationAction.navigateToUsers)}>Users</MenuItem>
+ { user.isAdmin && <MenuItem onClick={() => dispatch(NavigationAction.navigateToApiClientAuthorizations)}>Api Tokens</MenuItem> }
+ { user.isAdmin && <MenuItem onClick={() => dispatch(NavigationAction.navigateToKeepServices)}>Keep Services</MenuItem> }
+ { user.isAdmin && <MenuItem onClick={() => dispatch(NavigationAction.navigateToComputeNodes)}>Compute Nodes</MenuItem> }
+ { user.isAdmin && <MenuItem onClick={() => dispatch(NavigationAction.navigateToLinks)}>Links</MenuItem> }
+ <MenuItem onClick={() => dispatch(NavigationAction.navigateToMyAccount)}>My account</MenuItem>
<MenuItem onClick={() => dispatch(logout())}>Logout</MenuItem>
</DropdownMenu>
: null);
diff --git a/src/views-components/main-content-bar/main-content-bar.tsx b/src/views-components/main-content-bar/main-content-bar.tsx
index 8c2e4ce..0336217 100644
--- a/src/views-components/main-content-bar/main-content-bar.tsx
+++ b/src/views-components/main-content-bar/main-content-bar.tsx
@@ -21,7 +21,8 @@ const isButtonVisible = ({ router }: RootState) => {
return !Routes.matchWorkflowRoute(pathname) && !Routes.matchVirtualMachineRoute(pathname) &&
!Routes.matchRepositoriesRoute(pathname) && !Routes.matchSshKeysRoute(pathname) &&
!Routes.matchKeepServicesRoute(pathname) && !Routes.matchComputeNodesRoute(pathname) &&
- !Routes.matchApiClientAuthorizationsRoute(pathname) && !Routes.matchUsersRoute(pathname);
+ !Routes.matchApiClientAuthorizationsRoute(pathname) && !Routes.matchUsersRoute(pathname) &&
+ !Routes.matchLinksRoute(pathname);
};
export const MainContentBar = connect((state: RootState) => ({
diff --git a/src/views/link-panel/link-panel-root.tsx b/src/views/link-panel/link-panel-root.tsx
new file mode 100644
index 0000000..73b53fc
--- /dev/null
+++ b/src/views/link-panel/link-panel-root.tsx
@@ -0,0 +1,96 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { LINK_PANEL_ID } from '~/store/link-panel/link-panel-actions';
+import { DataExplorer } from '~/views-components/data-explorer/data-explorer';
+import { SortDirection } from '~/components/data-table/data-column';
+import { DataColumns } from '~/components/data-table/data-table';
+import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
+import { ResourcesState } from '~/store/resources/resources';
+import { ShareMeIcon } from '~/components/icon/icon';
+import { createTree } from '~/models/tree';
+import {
+ ResourceLinkUuid, ResourceLinkHead, ResourceLinkTail,
+ ResourceLinkClass, ResourceLinkName }
+from '~/views-components/data-explorer/renderers';
+
+export enum LinkPanelColumnNames {
+ NAME = "Name",
+ LINK_CLASS = "Link Class",
+ TAIL = "Tail",
+ HEAD = 'Head',
+ UUID = "UUID"
+}
+
+export const linkPanelColumns: DataColumns<string> = [
+ {
+ name: LinkPanelColumnNames.NAME,
+ selected: true,
+ configurable: true,
+ sortDirection: SortDirection.NONE,
+ filters: createTree(),
+ render: uuid => <ResourceLinkName uuid={uuid} />
+ },
+ {
+ name: LinkPanelColumnNames.LINK_CLASS,
+ selected: true,
+ configurable: true,
+ // sortDirection: SortDirection.NONE,
+ filters: createTree(),
+ render: uuid => <ResourceLinkClass uuid={uuid} />
+ },
+ {
+ name: LinkPanelColumnNames.TAIL,
+ selected: true,
+ configurable: true,
+ // sortDirection: SortDirection.NONE,
+ filters: createTree(),
+ render: uuid => <ResourceLinkTail uuid={uuid} />
+ },
+ {
+ name: LinkPanelColumnNames.HEAD,
+ selected: true,
+ configurable: true,
+ // sortDirection: SortDirection.NONE,
+ filters: createTree(),
+ render: uuid => <ResourceLinkHead uuid={uuid} />
+ },
+ {
+ name: LinkPanelColumnNames.UUID,
+ selected: true,
+ configurable: true,
+ // sortDirection: SortDirection.NONE,
+ filters: createTree(),
+ render: uuid => <ResourceLinkUuid uuid={uuid} />
+ }
+];
+
+export interface LinkPanelDataProps {
+ resources: ResourcesState;
+}
+
+export interface LinkPanelActionProps {
+ onItemClick: (item: string) => void;
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, item: string) => void;
+ onItemDoubleClick: (item: string) => void;
+}
+
+export type LinkPanelProps = LinkPanelDataProps & LinkPanelActionProps;
+
+export const LinkPanelRoot = (props: LinkPanelProps) => {
+ return <DataExplorer
+ id={LINK_PANEL_ID}
+ onRowClick={props.onItemClick}
+ onRowDoubleClick={props.onItemDoubleClick}
+ onContextMenu={props.onContextMenu}
+ contextMenuColumn={true}
+ hideColumnSelector
+ hideSearchInput
+ dataTableDefaultView={
+ <DataTableDefaultView
+ icon={ShareMeIcon}
+ messages={['Your link list is empty.']} />
+ }/>;
+};
\ No newline at end of file
diff --git a/src/views/link-panel/link-panel.tsx b/src/views/link-panel/link-panel.tsx
new file mode 100644
index 0000000..2c3bf75
--- /dev/null
+++ b/src/views/link-panel/link-panel.tsx
@@ -0,0 +1,35 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { Dispatch } from "redux";
+import { connect } from "react-redux";
+import { RootState } from '~/store/store';
+import { openContextMenu, resourceKindToContextMenuKind } from '~/store/context-menu/context-menu-actions';
+import { LinkPanelRoot, LinkPanelActionProps } from '~/views/link-panel/link-panel-root';
+import { ResourceKind } from '~/models/resource';
+
+const mapStateToProps = (state: RootState) => {
+ return {
+ resources: state.resources
+ };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch): LinkPanelActionProps => ({
+ onContextMenu: (event, resourceUuid) => {
+ const kind = resourceKindToContextMenuKind(resourceUuid);
+ if (kind) {
+ dispatch<any>(openContextMenu(event, {
+ name: '',
+ uuid: resourceUuid,
+ ownerUuid: '',
+ kind: ResourceKind.LINK,
+ menuKind: kind
+ }));
+ }
+ },
+ onItemClick: (resourceUuid: string) => { return; },
+ onItemDoubleClick: uuid => { return; }
+});
+
+export const LinkPanel = connect(mapStateToProps, mapDispatchToProps)(LinkPanelRoot);
\ No newline at end of file
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 70f2a2d..8181cdf 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -55,6 +55,7 @@ import { RepositoriesPanel } from '~/views/repositories-panel/repositories-panel
import { KeepServicePanel } from '~/views/keep-service-panel/keep-service-panel';
import { ComputeNodePanel } from '~/views/compute-node-panel/compute-node-panel';
import { ApiClientAuthorizationPanel } from '~/views/api-client-authorization-panel/api-client-authorization-panel';
+import { LinkPanel } from '~/views/link-panel/link-panel';
import { RepositoriesSampleGitDialog } from '~/views-components/repositories-sample-git-dialog/repositories-sample-git-dialog';
import { RepositoryAttributesDialog } from '~/views-components/repository-attributes-dialog/repository-attributes-dialog';
import { CreateRepositoryDialog } from '~/views-components/dialog-forms/create-repository-dialog';
@@ -64,11 +65,13 @@ import { PublicKeyDialog } from '~/views-components/ssh-keys-dialog/public-key-d
import { RemoveApiClientAuthorizationDialog } from '~/views-components/api-client-authorizations-dialog/remove-dialog';
import { RemoveComputeNodeDialog } from '~/views-components/compute-nodes-dialog/remove-dialog';
import { RemoveKeepServiceDialog } from '~/views-components/keep-services-dialog/remove-dialog';
+import { RemoveLinkDialog } from '~/views-components/links-dialog/remove-dialog';
import { RemoveSshKeyDialog } from '~/views-components/ssh-keys-dialog/remove-dialog';
import { RemoveVirtualMachineDialog } from '~/views-components/virtual-machines-dialog/remove-dialog';
import { AttributesApiClientAuthorizationDialog } from '~/views-components/api-client-authorizations-dialog/attributes-dialog';
import { AttributesComputeNodeDialog } from '~/views-components/compute-nodes-dialog/attributes-dialog';
import { AttributesKeepServiceDialog } from '~/views-components/keep-services-dialog/attributes-dialog';
+import { AttributesLinkDialog } from '~/views-components/links-dialog/attributes-dialog';
import { AttributesSshKeyDialog } from '~/views-components/ssh-keys-dialog/attributes-dialog';
import { VirtualMachineAttributesDialog } from '~/views-components/virtual-machines-dialog/attributes-dialog';
import { UserPanel } from '~/views/user-panel/user-panel';
@@ -152,6 +155,7 @@ export const WorkbenchPanel =
<Route path={Routes.COMPUTE_NODES} component={ComputeNodePanel} />
<Route path={Routes.API_CLIENT_AUTHORIZATIONS} component={ApiClientAuthorizationPanel} />
<Route path={Routes.MY_ACCOUNT} component={MyAccountPanel} />
+ <Route path={Routes.LINKS} component={LinkPanel} />
</Switch>
</Grid>
</Grid>
@@ -164,6 +168,7 @@ export const WorkbenchPanel =
<AttributesApiClientAuthorizationDialog />
<AttributesComputeNodeDialog />
<AttributesKeepServiceDialog />
+ <AttributesLinkDialog />
<AttributesSshKeyDialog />
<ChangeWorkflowDialog />
<ContextMenu />
@@ -190,6 +195,7 @@ export const WorkbenchPanel =
<RemoveApiClientAuthorizationDialog />
<RemoveComputeNodeDialog />
<RemoveKeepServiceDialog />
+ <RemoveLinkDialog />
<RemoveProcessDialog />
<RemoveRepositoryDialog />
<RemoveSshKeyDialog />
commit 183874da8b5eb84617e3c81a586c0f7c09946d89
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Wed Dec 12 10:46:02 2018 +0100
add new option for data-explorer - hide search input
Feature #14512_admin_links
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index b6b9a83..4175fbc 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -48,6 +48,7 @@ interface DataExplorerDataProps<T> {
hideColumnSelector?: boolean;
paperProps?: PaperProps;
actions?: React.ReactNode;
+ hideSearchInput?: boolean;
}
interface DataExplorerActionProps<T> {
@@ -78,16 +79,16 @@ 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,
+ dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput
} = this.props;
return <Paper className={classes.root} {...paperProps}>
<Toolbar className={classes.toolbar}>
<Grid container justify="space-between" wrap="nowrap" alignItems="center">
- <div className={classes.searchBox}>
+ {!hideSearchInput && <div className={classes.searchBox}>
<SearchInput
value={searchValue}
onSearch={onSearch} />
- </div>
+ </div>}
{actions}
{!hideColumnSelector && <ColumnSelector
columns={columns}
commit 877a089738b525098e5e6e63179b6826408f9b5d
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Mon Dec 10 23:44:21 2018 +0100
Refactor data-explorer to make it background more customizable, add slot for custom actions
Feature #14505
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index d906a32..b6b9a83 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, WithStyles, TablePagination, IconButton, Tooltip } from '@material-ui/core';
+import { Grid, Paper, Toolbar, StyleRulesCallback, withStyles, WithStyles, TablePagination, IconButton, Tooltip, Button } from '@material-ui/core';
import { ColumnSelector } from "~/components/column-selector/column-selector";
import { DataTable, DataColumns } from "~/components/data-table/data-table";
import { DataColumn, SortDirection } from "~/components/data-table/data-column";
@@ -12,8 +12,9 @@ import { ArvadosTheme } from "~/common/custom-theme";
import { createTree } from '~/models/tree';
import { DataTableFilters } from '~/components/data-table-filters/data-table-filters-tree';
import { MoreOptionsIcon } from '~/components/icon/icon';
+import { PaperProps } from '@material-ui/core/Paper';
-type CssRules = 'searchBox' | "toolbar" | "footer" | "root" | 'moreOptionsButton' | 'rootUserPanel';
+type CssRules = 'searchBox' | "toolbar" | "footer" | "root" | 'moreOptionsButton';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
searchBox: {
@@ -28,10 +29,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
height: '100%'
},
- rootUserPanel: {
- height: '100%',
- boxShadow: 'none'
- },
moreOptionsButton: {
padding: 0
}
@@ -48,7 +45,9 @@ interface DataExplorerDataProps<T> {
contextMenuColumn: boolean;
dataTableDefaultView?: React.ReactNode;
working?: boolean;
- isUserPanel?: boolean;
+ hideColumnSelector?: boolean;
+ paperProps?: PaperProps;
+ actions?: React.ReactNode;
}
interface DataExplorerActionProps<T> {
@@ -79,17 +78,18 @@ export const DataExplorer = withStyles(styles)(
columns, onContextMenu, onFiltersChange, onSortToggle, working, extractKey,
rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch,
items, itemsAvailable, onRowClick, onRowDoubleClick, classes,
- dataTableDefaultView, isUserPanel
+ dataTableDefaultView, hideColumnSelector, actions, paperProps,
} = this.props;
- return <Paper className={!isUserPanel ? classes.root : classes.rootUserPanel}>
- <Toolbar className={!isUserPanel ? classes.toolbar : ''}>
+ return <Paper className={classes.root} {...paperProps}>
+ <Toolbar className={classes.toolbar}>
<Grid container justify="space-between" wrap="nowrap" alignItems="center">
<div className={classes.searchBox}>
<SearchInput
value={searchValue}
onSearch={onSearch} />
</div>
- {!isUserPanel && <ColumnSelector
+ {actions}
+ {!hideColumnSelector && <ColumnSelector
columns={columns}
onColumnToggle={onColumnToggle} />}
</Grid>
diff --git a/src/views/user-panel/user-panel.tsx b/src/views/user-panel/user-panel.tsx
index f28cca3..b152896 100644
--- a/src/views/user-panel/user-panel.tsx
+++ b/src/views/user-panel/user-panel.tsx
@@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { WithStyles, withStyles, Typography, Tabs, Tab, Paper, Button } from '@material-ui/core';
+import { WithStyles, withStyles, Typography, Tabs, Tab, Paper, Button, Grid } from '@material-ui/core';
import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
import { connect, DispatchProp } from 'react-redux';
import { DataColumns } from '~/components/data-table/data-table';
@@ -163,18 +163,23 @@ export const UserPanel = compose(
</Tabs>
{value === 0 &&
<span>
- <div className={this.props.classes.button}>
- <Button variant="contained" color="primary" onClick={this.props.openUserCreateDialog}>
- <AddIcon /> NEW USER
- </Button>
- </div>
<DataExplorer
id={USERS_PANEL_ID}
onRowClick={this.handleRowClick}
onRowDoubleClick={this.handleRowDoubleClick}
onContextMenu={this.handleContextMenu}
contextMenuColumn={true}
- isUserPanel={true}
+ hideColumnSelector
+ actions={
+ <Grid container justify='flex-end'>
+ <Button variant="contained" color="primary" onClick={this.props.openUserCreateDialog}>
+ <AddIcon /> NEW USER
+ </Button>
+ </Grid>
+ }
+ paperProps={{
+ elevation: 0,
+ }}
dataTableDefaultView={
<DataTableDefaultView
icon={ShareMeIcon}
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list