From 18c14cc452684844e623d6bf06ed30a88a4c5aae Mon Sep 17 00:00:00 2001 From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com> Date: Thu, 20 Jan 2022 18:08:00 +0000 Subject: [PATCH] UX menu redesign (#1415) Co-authored-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> --- portal-ui/src/common/Copyright.tsx | 2 +- .../src/common/SecureComponent/permissions.ts | 68 +++-- .../src/icons/SidebarMenus/AccessMenuIcon.tsx | 55 ++++ .../icons/SidebarMenus/AccountsMenuIcon.tsx | 46 +++ .../icons/SidebarMenus/AuditLogsMenuIcon.tsx | 69 +++++ .../icons/SidebarMenus/BucketsMenuIcon.tsx | 81 +++++ .../icons/SidebarMenus/CallHomeMenuIcon.tsx | 39 +++ .../SidebarMenus/DiagnosticsMenuIcon.tsx | 48 +++ .../src/icons/SidebarMenus/DrivesMenuIcon.tsx | 69 +++++ .../src/icons/SidebarMenus/GroupsMenuIcon.tsx | 90 ++++++ .../src/icons/SidebarMenus/HealthMenuIcon.tsx | 62 ++++ .../icons/SidebarMenus/IdentityMenuIcon.tsx | 40 +++ .../icons/SidebarMenus/InspectMenuIcon.tsx | 37 +++ .../src/icons/SidebarMenus/LogsMenuIcon.tsx | 66 +++++ .../icons/SidebarMenus/MenuCollapsedIcon.tsx | 65 ++++ .../icons/SidebarMenus/MenuExpandedIcon.tsx | 62 ++++ .../src/icons/SidebarMenus/MenuIcons.tsx | 22 ++ .../icons/SidebarMenus/MetricsMenuIcon.tsx | 59 ++++ .../icons/SidebarMenus/MonitoringMenuIcon.tsx | 61 ++++ .../SidebarMenus/PerformanceMenuIcon.tsx | 61 ++++ .../icons/SidebarMenus/ProfileMenuIcon.tsx | 69 +++++ .../icons/SidebarMenus/RegisterMenuIcon.tsx | 55 ++++ .../icons/SidebarMenus/SupportMenuIcon.tsx | 62 ++++ .../src/icons/SidebarMenus/TraceMenuIcon.tsx | 47 +++ .../src/icons/SidebarMenus/UsersMenuIcon.tsx | 58 ++++ .../BucketDetails/AccessDetailsPanel.tsx | 5 +- .../Common/Components/FeatureNotAvailable.tsx | 64 ++++ .../Components/FeatureNotAvailablePage.tsx | 31 ++ .../AddTierConfiguration.tsx | 5 +- .../ListTiersConfiguration.tsx | 3 +- .../TiersConfiguration/TierTypeSelector.tsx | 5 +- portal-ui/src/screens/Console/Console.tsx | 32 +- .../Console/Groups/GroupDetailsHeader.tsx | 3 +- .../src/screens/Console/Groups/Groups.tsx | 3 +- .../screens/Console/Groups/GroupsDetails.tsx | 9 +- portal-ui/src/screens/Console/Heal/Heal.tsx | 2 - portal-ui/src/screens/Console/Health.tsx | 16 + .../screens/Console/HealthInfo/HealthInfo.tsx | 3 +- .../Console/Logs/ErrorLogs/ErrorLogs.tsx | 2 - .../Console/Logs/LogSearch/LogsSearchMain.tsx | 2 - .../screens/Console/Menu/ConsoleMenuList.tsx | 220 ++++++++++++++ portal-ui/src/screens/Console/Menu/Menu.tsx | 277 +++++++++++------- .../src/screens/Console/Menu/MenuItem.tsx | 211 +++++++++++-- .../src/screens/Console/Menu/MenuList.tsx | 114 ------- .../screens/Console/Menu/MenuStyleUtils.tsx | 22 +- .../AddNotificationEndpoint.tsx | 3 +- .../ListNotificationEndpoints.tsx | 5 +- .../NotificationTypeSelector.tsx | 3 +- .../screens/Console/Policies/ListPolicies.tsx | 3 +- .../src/screens/Console/Policies/Policies.tsx | 9 +- .../Console/Policies/PolicyDetails.tsx | 11 +- .../screens/Console/Speedtest/Speedtest.tsx | 3 +- portal-ui/src/screens/Console/Tools/Tools.tsx | 61 +++- portal-ui/src/screens/Console/Trace/Trace.tsx | 2 - .../Console/Users/DeleteUserString.tsx | 3 +- .../src/screens/Console/Users/ListUsers.tsx | 3 +- .../src/screens/Console/Users/UserDetails.tsx | 7 +- portal-ui/src/screens/Console/Users/Users.tsx | 5 +- portal-ui/src/screens/Console/Watch/Watch.tsx | 3 +- portal-ui/src/screens/NotFoundPage.tsx | 48 ++- 60 files changed, 2255 insertions(+), 336 deletions(-) create mode 100644 portal-ui/src/icons/SidebarMenus/AccessMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/AccountsMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/AuditLogsMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/BucketsMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/CallHomeMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/DiagnosticsMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/DrivesMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/GroupsMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/HealthMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/IdentityMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/InspectMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/LogsMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/MenuCollapsedIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/MenuExpandedIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/MenuIcons.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/MetricsMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/MonitoringMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/PerformanceMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/ProfileMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/RegisterMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/SupportMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/TraceMenuIcon.tsx create mode 100644 portal-ui/src/icons/SidebarMenus/UsersMenuIcon.tsx create mode 100644 portal-ui/src/screens/Console/Common/Components/FeatureNotAvailable.tsx create mode 100644 portal-ui/src/screens/Console/Common/Components/FeatureNotAvailablePage.tsx create mode 100644 portal-ui/src/screens/Console/Health.tsx create mode 100644 portal-ui/src/screens/Console/Menu/ConsoleMenuList.tsx delete mode 100644 portal-ui/src/screens/Console/Menu/MenuList.tsx diff --git a/portal-ui/src/common/Copyright.tsx b/portal-ui/src/common/Copyright.tsx index 08706ad68..561ad1143 100644 --- a/portal-ui/src/common/Copyright.tsx +++ b/portal-ui/src/common/Copyright.tsx @@ -22,7 +22,7 @@ export default function Copyright() { return ( {"Copyright © "} - + MinIO {" "} {new Date().getFullYear()} diff --git a/portal-ui/src/common/SecureComponent/permissions.ts b/portal-ui/src/common/SecureComponent/permissions.ts index b784b350b..39d30fba2 100644 --- a/portal-ui/src/common/SecureComponent/permissions.ts +++ b/portal-ui/src/common/SecureComponent/permissions.ts @@ -139,35 +139,58 @@ export const IAM_SCOPES = { }; export const IAM_PAGES = { - POLICIES: "/policies", - POLICIES_VIEW: "/policies/*", - DASHBOARD: "/dashboard", - METRICS: "/metrics", - ADD_BUCKETS: "/add-bucket", + /* Buckets */ BUCKETS: "/buckets", + ADD_BUCKETS: "/add-bucket", BUCKETS_ADMIN_VIEW: "/buckets/:bucketName/admin*", BUCKETS_BROWSE_VIEW: "/buckets/:bucketName/browse*", - TOOLS_WATCH: "/tools/watch", - TOOLS_SPEEDTEST: "/tools/speedtest", - USERS: "/users", - USERS_VIEW: "/users/:userName+", - GROUPS: "/groups", - GROUPS_VIEW: "/groups/:groupName+", - TOOLS_HEAL: "/tools/heal", - TOOLS_TRACE: "/tools/trace", - TOOLS_DIAGNOSTICS: "/tools/diagnostics", + /* Identity */ + IDENTITY: "/identity", + USERS: "/identity/users", + USERS_VIEW: "/identity/users/:userName+", + GROUPS: "/identity/groups", + GROUPS_VIEW: "/identity/groups/:groupName+", + ACCOUNT: "/identity/account", + /* Access */ + POLICIES: "/access/policies", + POLICIES_VIEW: "/access/policies/*", + /* Monitoring */ TOOLS_LOGS: "/tools/logs", TOOLS_AUDITLOGS: "/tools/audit-logs", - TOOLS: "/tools", + TOOLS_TRACE: "/tools/trace", + METRICS: "/tools/metrics", + DASHBOARD: "/tools/dashboard", + TOOLS_HEAL: "/tools/heal", + /* Health */ + HEALTH: "/health", + + /* Support */ + TOOLS: "/support", + REGISTER_SUPPORT: "/support/register", + TOOLS_DIAGNOSTICS: "/support/diagnostics", + TOOLS_SPEEDTEST: "/support/speedtest", + CALL_HOME: "/support/call-home", + INSPECT: "/support/inspect", + PROFILE: "/support/profile", + TOOLS_WATCH: "/support/watch", + + /** License **/ + LICENSE: "/license", + /* Settings **/ SETTINGS: "/settings", SETTINGS_VIEW: "/settings/:option", - NOTIFICATIONS_ENDPOINTS_ADD: "/notification-endpoints/add", - NOTIFICATIONS_ENDPOINTS_ADD_SERVICE: "/notification-endpoints/add/:service", - NOTIFICATIONS_ENDPOINTS: "/notification-endpoints", + /* Documentation **/ + DOCUMENTATION: "/documentation", + /* TBD ? */ + NOTIFICATIONS_ENDPOINTS: "/lambda/notification-endpoints", + NOTIFICATIONS_ENDPOINTS_ADD: "/lambda/notification-endpoints/add", + NOTIFICATIONS_ENDPOINTS_ADD_SERVICE: + "/lambda/notification-endpoints/add/:service", TIERS: "/tiers", TIERS_ADD: "/tiers/add", TIERS_ADD_SERVICE: "/tiers/add/:service", - ACCOUNT: "/account", + + /* Operator */ TENANTS: "/tenants", TENANTS_ADD: "/tenants/add", STORAGE: "/storage", @@ -195,8 +218,6 @@ export const IAM_PAGES = { "/namespaces/:tenantNamespace/tenants/:tenantName/monitoring", NAMESPACE_TENANT_LOGGING: "/namespaces/:tenantNamespace/tenants/:tenantName/logging", - LICENSE: "/license", - DOCUMENTATION: "/documentation", }; // roles @@ -366,6 +387,11 @@ export const IAM_PAGES_PERMISSIONS = { IAM_SCOPES.ADMIN_SERVER_INFO, ], [IAM_PAGES.TOOLS_SPEEDTEST]: [IAM_SCOPES.ADMIN_HEALTH_INFO], + [IAM_PAGES.REGISTER_SUPPORT]: [IAM_SCOPES.ADMIN_HEALTH_INFO], + [IAM_PAGES.CALL_HOME]: [IAM_SCOPES.ADMIN_HEALTH_INFO], + [IAM_PAGES.INSPECT]: [IAM_SCOPES.ADMIN_HEALTH_INFO], + [IAM_PAGES.PROFILE]: [IAM_SCOPES.ADMIN_HEALTH_INFO], + [IAM_PAGES.HEALTH]: [IAM_SCOPES.ADMIN_HEALTH_INFO], }; export const S3_ALL_RESOURCES = "arn:aws:s3:::*"; diff --git a/portal-ui/src/icons/SidebarMenus/AccessMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/AccessMenuIcon.tsx new file mode 100644 index 000000000..03d19d70d --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/AccessMenuIcon.tsx @@ -0,0 +1,55 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const AccessMenuIcon = (props: SVGProps) => ( + + + + + + + + + + +); + +export default AccessMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/AccountsMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/AccountsMenuIcon.tsx new file mode 100644 index 000000000..e3809c38a --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/AccountsMenuIcon.tsx @@ -0,0 +1,46 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const AccountsMenuIcon = (props: SVGProps) => ( + + + + + + + + + + + + + + +); + +export default AccountsMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/AuditLogsMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/AuditLogsMenuIcon.tsx new file mode 100644 index 000000000..485837184 --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/AuditLogsMenuIcon.tsx @@ -0,0 +1,69 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const AuditLogsMenuIcon = (props: SVGProps) => ( + + + + + + + + + + + + +); + +export default AuditLogsMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/BucketsMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/BucketsMenuIcon.tsx new file mode 100644 index 000000000..8a6c78257 --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/BucketsMenuIcon.tsx @@ -0,0 +1,81 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const BucketsMenuIcon = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + +); + +export default BucketsMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/CallHomeMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/CallHomeMenuIcon.tsx new file mode 100644 index 000000000..dc9c18ecc --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/CallHomeMenuIcon.tsx @@ -0,0 +1,39 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const CallHomeMenuIcon = (props: SVGProps) => ( + + + +); + +export default CallHomeMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/DiagnosticsMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/DiagnosticsMenuIcon.tsx new file mode 100644 index 000000000..317dbec5e --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/DiagnosticsMenuIcon.tsx @@ -0,0 +1,48 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const DiagnosticsMenuIcon = (props: SVGProps) => ( + + + + + + +); + +export default DiagnosticsMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/DrivesMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/DrivesMenuIcon.tsx new file mode 100644 index 000000000..c764065c5 --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/DrivesMenuIcon.tsx @@ -0,0 +1,69 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const DrivesMenuIcon = (props: SVGProps) => ( + + + + + + + + + + + + +); + +export default DrivesMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/GroupsMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/GroupsMenuIcon.tsx new file mode 100644 index 000000000..fc296bad0 --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/GroupsMenuIcon.tsx @@ -0,0 +1,90 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const GroupsMenuIcon = (props: SVGProps) => ( + + + + + + + + + + + + + + + +); + +export default GroupsMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/HealthMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/HealthMenuIcon.tsx new file mode 100644 index 000000000..b677b7291 --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/HealthMenuIcon.tsx @@ -0,0 +1,62 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const HealthMenuIcon = (props: SVGProps) => ( + + + + + + + + + + + +); + +export default HealthMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/IdentityMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/IdentityMenuIcon.tsx new file mode 100644 index 000000000..68f0c481b --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/IdentityMenuIcon.tsx @@ -0,0 +1,40 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const IdentityMenuIcon = (props: SVGProps) => ( + + + +); + +export default IdentityMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/InspectMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/InspectMenuIcon.tsx new file mode 100644 index 000000000..dc480e657 --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/InspectMenuIcon.tsx @@ -0,0 +1,37 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const InspectMenuIcon = (props: SVGProps) => ( + + + +); + +export default InspectMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/LogsMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/LogsMenuIcon.tsx new file mode 100644 index 000000000..167517bc4 --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/LogsMenuIcon.tsx @@ -0,0 +1,66 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const LogsMenuIcon = (props: SVGProps) => ( + + + + + + + + + + + + + +); + +export default LogsMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/MenuCollapsedIcon.tsx b/portal-ui/src/icons/SidebarMenus/MenuCollapsedIcon.tsx new file mode 100644 index 000000000..9fa537c0f --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/MenuCollapsedIcon.tsx @@ -0,0 +1,65 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const MenuCollapsedIcon = (props: SVGProps) => ( + + + + + + + + + + + +); + +export default MenuCollapsedIcon; diff --git a/portal-ui/src/icons/SidebarMenus/MenuExpandedIcon.tsx b/portal-ui/src/icons/SidebarMenus/MenuExpandedIcon.tsx new file mode 100644 index 000000000..240d09a9e --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/MenuExpandedIcon.tsx @@ -0,0 +1,62 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const MenuCollapsedIcon = (props: SVGProps) => ( + + + + + + + + + +); + +export default MenuCollapsedIcon; diff --git a/portal-ui/src/icons/SidebarMenus/MenuIcons.tsx b/portal-ui/src/icons/SidebarMenus/MenuIcons.tsx new file mode 100644 index 000000000..dd55d7169 --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/MenuIcons.tsx @@ -0,0 +1,22 @@ +export { default as UsersMenuIcon } from "./UsersMenuIcon"; +export { default as MenuCollapsedIcon } from "./MenuCollapsedIcon"; +export { default as MenuExpandedIcon } from "./MenuExpandedIcon"; +export { default as BucketsMenuIcon } from "./BucketsMenuIcon"; +export { default as IdentityMenuIcon } from "./IdentityMenuIcon"; +export { default as MonitoringMenuIcon } from "./MonitoringMenuIcon"; +export { default as HealthMenuIcon } from "./HealthMenuIcon"; +export { default as GroupsMenuIcon } from "./GroupsMenuIcon"; +export { default as AccountsMenuIcon } from "./AccountsMenuIcon"; +export { default as LogsMenuIcon } from "./LogsMenuIcon"; +export { default as MetricsMenuIcon } from "./MetricsMenuIcon"; +export { default as AuditLogsMenuIcon } from "./AuditLogsMenuIcon"; +export { default as TraceMenuIcon } from "./TraceMenuIcon"; +export { default as DrivesMenuIcon } from "./DrivesMenuIcon"; +export { default as AccessMenuIcon } from "./AccessMenuIcon"; +export { default as SupportMenuIcon } from "./SupportMenuIcon"; +export { default as RegisterMenuIcon } from "./RegisterMenuIcon"; +export { default as DiagnosticsMenuIcon } from "./DiagnosticsMenuIcon"; +export { default as PerformanceMenuIcon } from "./PerformanceMenuIcon"; +export { default as CallHomeMenuIcon } from "./CallHomeMenuIcon"; +export { default as InspectMenuIcon } from "./InspectMenuIcon"; +export { default as ProfileMenuIcon } from "./ProfileMenuIcon"; diff --git a/portal-ui/src/icons/SidebarMenus/MetricsMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/MetricsMenuIcon.tsx new file mode 100644 index 000000000..5a6ca2e12 --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/MetricsMenuIcon.tsx @@ -0,0 +1,59 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const MetricsMenuIcon = (props: SVGProps) => ( + + + + + + + + + + + + +); + +export default MetricsMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/MonitoringMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/MonitoringMenuIcon.tsx new file mode 100644 index 000000000..82f396d8a --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/MonitoringMenuIcon.tsx @@ -0,0 +1,61 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const MonitoringMenuIcon = (props: SVGProps) => ( + + + + + + + + + + + +); + +export default MonitoringMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/PerformanceMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/PerformanceMenuIcon.tsx new file mode 100644 index 000000000..a7e56b1dd --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/PerformanceMenuIcon.tsx @@ -0,0 +1,61 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const PerformanceMenuIcon = (props: SVGProps) => ( + + + + + + + + + + + +); + +export default PerformanceMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/ProfileMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/ProfileMenuIcon.tsx new file mode 100644 index 000000000..12a169001 --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/ProfileMenuIcon.tsx @@ -0,0 +1,69 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const ProfileMenuIcon = (props: SVGProps) => ( + + + + + + + + + + + + +); + +export default ProfileMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/RegisterMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/RegisterMenuIcon.tsx new file mode 100644 index 000000000..2a8983a59 --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/RegisterMenuIcon.tsx @@ -0,0 +1,55 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const RegisterMenuIcon = (props: SVGProps) => ( + + + + + + + + + + +); + +export default RegisterMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/SupportMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/SupportMenuIcon.tsx new file mode 100644 index 000000000..288788b87 --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/SupportMenuIcon.tsx @@ -0,0 +1,62 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const SupportMenuIcon = (props: SVGProps) => ( + + + + + + + + + + + +); + +export default SupportMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/TraceMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/TraceMenuIcon.tsx new file mode 100644 index 000000000..494af0495 --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/TraceMenuIcon.tsx @@ -0,0 +1,47 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const TraceMenuIcon = (props: SVGProps) => ( + + + + + + +); + +export default TraceMenuIcon; diff --git a/portal-ui/src/icons/SidebarMenus/UsersMenuIcon.tsx b/portal-ui/src/icons/SidebarMenus/UsersMenuIcon.tsx new file mode 100644 index 000000000..4fb7857ce --- /dev/null +++ b/portal-ui/src/icons/SidebarMenus/UsersMenuIcon.tsx @@ -0,0 +1,58 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2022 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import * as React from "react"; +import { SVGProps } from "react"; + +const UsersMenuIcon = (props: SVGProps) => ( + + + + + + + + + + + +); + +export default UsersMenuIcon; diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx index be5a058f6..e910d8610 100644 --- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx +++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx @@ -32,6 +32,7 @@ import history from "../../../../history"; import { BucketInfo } from "../types"; import { CONSOLE_UI_RESOURCE, + IAM_PAGES, IAM_SCOPES, } from "../../../../common/SecureComponent/permissions"; import PanelTitle from "../../Common/PanelTitle/PanelTitle"; @@ -120,7 +121,7 @@ const AccessDetails = ({ type: "view", disableButtonFunction: () => !viewPolicy, onClick: (policy: any) => { - history.push(`/policies/${policy.name}`); + history.push(`${IAM_PAGES.POLICIES}/${policy.name}`); }, }, ]; @@ -130,7 +131,7 @@ const AccessDetails = ({ type: "view", disableButtonFunction: () => !viewUser, onClick: (user: any) => { - history.push(`/users/${user}`); + history.push(`${IAM_PAGES.USERS}/${user}`); }, }, ]; diff --git a/portal-ui/src/screens/Console/Common/Components/FeatureNotAvailable.tsx b/portal-ui/src/screens/Console/Common/Components/FeatureNotAvailable.tsx new file mode 100644 index 000000000..5806b73bf --- /dev/null +++ b/portal-ui/src/screens/Console/Common/Components/FeatureNotAvailable.tsx @@ -0,0 +1,64 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2021 MinIO, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + +import React from "react"; +import { Box, Grid } from "@mui/material"; +import HelpBox from "../../../../common/HelpBox"; + +interface IFeatureNotAvailable { + iconComponent?: any; + title?: string; + helpCls?: any; + message?: any; +} + +const FeatureNotAvailable = ({ + iconComponent = null, + title = "", + message = "", +}: IFeatureNotAvailable) => { + return ( + + + theme.colors.link, + textDecoration: "underline", + }, + }} + > + {message} + + } + /> + + + ); +}; + +export default FeatureNotAvailable; diff --git a/portal-ui/src/screens/Console/Common/Components/FeatureNotAvailablePage.tsx b/portal-ui/src/screens/Console/Common/Components/FeatureNotAvailablePage.tsx new file mode 100644 index 000000000..75a596b97 --- /dev/null +++ b/portal-ui/src/screens/Console/Common/Components/FeatureNotAvailablePage.tsx @@ -0,0 +1,31 @@ +import PageHeader from "../PageHeader/PageHeader"; +import React from "react"; +import FeatureNotAvailable from "./FeatureNotAvailable"; +import PageLayout from "../Layout/PageLayout"; + +const FeatureNotAvailablePage = ({ + pageHeaderText = "", + icon = null, + title = "", + message = null, +}: { + pageHeaderText?: string; + icon?: any; + title?: string; + message?: any; +}) => { + return ( + + + + + + + ); +}; + +export default FeatureNotAvailablePage; diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx index b0f5d8397..36c70f4ef 100644 --- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/AddTierConfiguration.tsx @@ -43,6 +43,7 @@ import { } from "./utils"; import BackLink from "../../../../common/BackLink"; import PageLayout from "../../Common/Layout/PageLayout"; +import { IAM_PAGES } from "../../../../common/SecureComponent/permissions"; const styles = (theme: Theme) => createStyles({ @@ -184,7 +185,7 @@ const AddTierConfiguration = ({ .then(() => { setSaving(false); - history.push("/tiers"); + history.push(IAM_PAGES.TIERS_ADD); }) .catch((err: ErrorResponseHandler) => { setSaving(false); @@ -309,7 +310,7 @@ const AddTierConfiguration = ({ - + { - history.push("/tiers/add"); + history.push(IAM_PAGES.TIERS_ADD); }; const renderTierName = (item: ITierElement) => { diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx index 483faf227..87df42dab 100644 --- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx @@ -22,6 +22,7 @@ import BackLink from "../../../../common/BackLink"; import PageLayout from "../../Common/Layout/PageLayout"; import { Box } from "@mui/material"; import TierTypeCard from "./TierTypeCard"; +import { IAM_PAGES } from "../../../../common/SecureComponent/permissions"; interface ITypeTiersConfig { history: any; @@ -29,13 +30,13 @@ interface ITypeTiersConfig { const TierTypeSelector = ({ history }: ITypeTiersConfig) => { const typeSelect = (selectName: string) => { - history.push(`/tiers/add/${selectName}`); + history.push(`${IAM_PAGES.TIERS_ADD}/${selectName}`); }; return ( - + import("./Groups/GroupsDetails")); const Tools = React.lazy(() => import("./Tools/Tools")); - +const Health = React.lazy(() => import("./Health")); const IconsScreen = React.lazy(() => import("./Common/IconsScreen")); const Speedtest = React.lazy(() => import("./Speedtest/Speedtest")); @@ -202,6 +202,11 @@ const Console = ({ }; const consoleAdminRoutes: IRouteRule[] = [ + { + component: Buckets, + path: IAM_PAGES.BUCKETS, + forceDisplay: true, + }, { component: Dashboard, path: IAM_PAGES.DASHBOARD, @@ -214,11 +219,6 @@ const Console = ({ component: Buckets, path: IAM_PAGES.ADD_BUCKETS, }, - { - component: Buckets, - path: IAM_PAGES.BUCKETS, - forceDisplay: true, - }, { component: Buckets, path: IAM_PAGES.BUCKETS_ADMIN_VIEW, @@ -308,9 +308,25 @@ const Console = ({ component: LogsSearchMain, path: IAM_PAGES.TOOLS_AUDITLOGS, }, + { + component: Health, + path: IAM_PAGES.HEALTH, + }, { component: Tools, - path: IAM_PAGES.TOOLS, + path: IAM_PAGES.REGISTER_SUPPORT, + }, + { + component: Tools, + path: IAM_PAGES.CALL_HOME, + }, + { + component: Tools, + path: IAM_PAGES.INSPECT, + }, + { + component: Tools, + path: IAM_PAGES.PROFILE, }, { component: ConfigurationOptions, @@ -484,7 +500,7 @@ const Console = ({ const location = useLocation(); let hideMenu = false; - if (location.pathname === "/metrics") { + if (location.pathname === IAM_PAGES.METRICS) { hideMenu = true; } else if (location.pathname.endsWith("/hop")) { hideMenu = true; diff --git a/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx b/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx index f2d405f44..fafc33383 100644 --- a/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx +++ b/portal-ui/src/screens/Console/Groups/GroupDetailsHeader.tsx @@ -4,6 +4,7 @@ import { Link } from "react-router-dom"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; +import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; const styles = (theme: Theme) => createStyles({ @@ -22,7 +23,7 @@ const GroupDetailsHeader = ({ classes }: DetailsHeaderProps) => { - + Groups diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx index 6026ec790..084003053 100644 --- a/portal-ui/src/screens/Console/Groups/Groups.tsx +++ b/portal-ui/src/screens/Console/Groups/Groups.tsx @@ -42,6 +42,7 @@ import PageLayout from "../Common/Layout/PageLayout"; import SearchBox from "../Common/SearchBox"; import { CONSOLE_UI_RESOURCE, + IAM_PAGES, IAM_SCOPES, } from "../../../common/SecureComponent/permissions"; import SecureComponent, { @@ -150,7 +151,7 @@ const Groups = ({ classes, setErrorSnackMessage }: IGroupsProps) => { ); const viewAction = (group: any) => { - history.push(`/groups/${group}`); + history.push(`${IAM_PAGES.GROUPS}/${group}`); }; const deleteAction = (group: any) => { diff --git a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx index 4f5681138..8c9a0da01 100644 --- a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx +++ b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx @@ -38,6 +38,7 @@ import PanelTitle from "../Common/PanelTitle/PanelTitle"; import SearchBox from "../Common/SearchBox"; import { CONSOLE_UI_RESOURCE, + IAM_PAGES, IAM_SCOPES, } from "../../../common/SecureComponent/permissions"; import SecureComponent, { @@ -220,7 +221,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => { { type: "view", onClick: (userName) => { - history.push(`/users/${userName}`); + history.push(`${IAM_PAGES.USERS_VIEW}/${userName}`); }, }, ]} @@ -258,7 +259,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => { { type: "view", onClick: (policy) => { - history.push(`/policies/${policy}`); + history.push(`${IAM_PAGES.POLICIES}/${policy}`); }, }, ]} @@ -274,7 +275,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => { return ( - + @@ -385,7 +386,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => { closeDeleteModalAndRefresh={(isDelSuccess: boolean) => { setDeleteOpen(false); if (isDelSuccess) { - history.push("/groups"); + history.push(IAM_PAGES.GROUPS); } }} /> diff --git a/portal-ui/src/screens/Console/Heal/Heal.tsx b/portal-ui/src/screens/Console/Heal/Heal.tsx index a03869d87..27ba45bcb 100644 --- a/portal-ui/src/screens/Console/Heal/Heal.tsx +++ b/portal-ui/src/screens/Console/Heal/Heal.tsx @@ -50,7 +50,6 @@ import { HealIcon } from "../../../icons"; import CheckboxWrapper from "../Common/FormComponents/CheckboxWrapper/CheckboxWrapper"; import PageHeader from "../Common/PageHeader/PageHeader"; import api from "../../../common/api"; -import BackLink from "../../../common/BackLink"; import PageLayout from "../Common/Layout/PageLayout"; import SecureComponent from "../../../common/SecureComponent/SecureComponent"; import DistributedOnly from "../Common/DistributedOnly/DistributedOnly"; @@ -257,7 +256,6 @@ const Heal = ({ classes, distributedSetup }: IHeal) => { return ( - {!distributedSetup ? ( } /> diff --git a/portal-ui/src/screens/Console/Health.tsx b/portal-ui/src/screens/Console/Health.tsx new file mode 100644 index 000000000..f4fa45597 --- /dev/null +++ b/portal-ui/src/screens/Console/Health.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { HealthMenuIcon } from "../../icons/SidebarMenus/MenuIcons"; +import FeatureNotAvailablePage from "./Common/Components/FeatureNotAvailablePage"; + +const Health = () => { + return ( + } + pageHeaderText={"Health"} + title={"Health"} + message={
This feature is currently not available
} + /> + ); +}; + +export default Health; diff --git a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx index cdc88b819..c4f1d0277 100644 --- a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx +++ b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx @@ -48,6 +48,7 @@ import CircularProgress from "@mui/material/CircularProgress"; import BackLink from "../../../common/BackLink"; import TestWrapper from "../Common/TestWrapper/TestWrapper"; import PageLayout from "../Common/Layout/PageLayout"; +import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; const styles = (theme: Theme) => createStyles({ @@ -233,7 +234,7 @@ const HealthInfo = ({ return ( - + diff --git a/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx b/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx index ce60d5fc0..581acb2d4 100644 --- a/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx +++ b/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx @@ -33,7 +33,6 @@ import { searchField, } from "../../Common/FormComponents/common/styleLibrary"; import PageHeader from "../../Common/PageHeader/PageHeader"; -import BackLink from "../../../../common/BackLink"; import PageLayout from "../../Common/Layout/PageLayout"; import SearchBox from "../../Common/SearchBox"; @@ -329,7 +328,6 @@ const ErrorLogs = ({ return ( - diff --git a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx index ac875e12e..66171ceb9 100644 --- a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx +++ b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx @@ -39,7 +39,6 @@ import LogSearchFullModal from "./LogSearchFullModal"; import { LogSearchColumnLabels } from "./utils"; import DateRangeSelector from "../../Common/FormComponents/DateRangeSelector/DateRangeSelector"; import PageHeader from "../../Common/PageHeader/PageHeader"; -import BackLink from "../../../../common/BackLink"; import PageLayout from "../../Common/Layout/PageLayout"; import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos"; import { @@ -287,7 +286,6 @@ const LogsSearchMain = ({ )} - {!logSearchEnabled ? ( . + +import React, { useEffect, useState } from "react"; +import { Box } from "@mui/material"; +import ListItem from "@mui/material/ListItem"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import LogoutIcon from "../../../icons/LogoutIcon"; +import ListItemText from "@mui/material/ListItemText"; +import List from "@mui/material/List"; +import { + menuItemContainerStyles, + menuItemIconStyles, + menuItemMiniStyles, + menuItemTextStyles, +} from "./MenuStyleUtils"; +import { DocumentationIcon, SettingsIcon } from "../../../icons"; +import MenuItem from "./MenuItem"; +import { NavLink, useLocation } from "react-router-dom"; +import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; + +const ConsoleMenuList = ({ + menuItems, + onLogoutClick, + isOpen, +}: { + menuItems: any[]; + isOpen: boolean; + onLogoutClick: () => void; +}) => { + const stateClsName = isOpen ? "wide" : "mini"; + const { pathname = "" } = useLocation(); + let expandedGroup = pathname.slice(1, pathname.length); //single path + if (expandedGroup.indexOf("/") !== -1) { + expandedGroup = expandedGroup.slice(0, expandedGroup.indexOf("/")); //nested path + } + + const [openGroup, setOpenGroup] = useState(expandedGroup); + + useEffect(() => { + //in case of redirects. + setOpenGroup(expandedGroup); + }, [expandedGroup]); + + return ( + + + + {(menuItems || []).map((menuGroup: any) => { + if (menuGroup) { + return ( + + ); + } + return null; + })} + + + {/* List of Bottom anchored menus */} + + + + + + + + + + | React.MouseEvent + | React.MouseEvent + ) => { + e.preventDefault(); + window.open("https://docs.min.io/?ref=con", "_blank"); + }} + disableRipple + className={`$ ${stateClsName} bottom-menu-item`} + sx={{ + ...menuItemContainerStyles, + ...menuItemMiniStyles, + marginBottom: "3px", + }} + > + + + + + + + + + + + + + + + ); +}; +export default ConsoleMenuList; diff --git a/portal-ui/src/screens/Console/Menu/Menu.tsx b/portal-ui/src/screens/Console/Menu/Menu.tsx index 46c5e217f..924035f5f 100644 --- a/portal-ui/src/screens/Console/Menu/Menu.tsx +++ b/portal-ui/src/screens/Console/Menu/Menu.tsx @@ -34,31 +34,45 @@ import api from "../../../common/api"; import { resetSession } from "../actions"; import { - AccountIcon, - BucketsIcon, - DashboardIcon, DocumentationIcon, - GroupsIcon, - IAMPoliciesIcon, LambdaIcon, LicenseIcon, - SettingsIcon, StorageIcon, TenantsOutlineIcon, TiersIcon, - ToolsIcon, - UsersIcon, } from "../../../icons"; + +import { + UsersMenuIcon, + BucketsMenuIcon, + IdentityMenuIcon, + MonitoringMenuIcon, + HealthMenuIcon, + GroupsMenuIcon, + AccountsMenuIcon, + MetricsMenuIcon, + LogsMenuIcon, + AuditLogsMenuIcon, + TraceMenuIcon, + DrivesMenuIcon, + AccessMenuIcon, + SupportMenuIcon, + PerformanceMenuIcon, + InspectMenuIcon, + ProfileMenuIcon, +} from "../../../icons/SidebarMenus/MenuIcons"; import { CONSOLE_UI_RESOURCE, - IAM_PAGES_PERMISSIONS, IAM_PAGES, S3_ALL_RESOURCES, IAM_SCOPES, } from "../../../common/SecureComponent/permissions"; import { hasPermission } from "../../../common/SecureComponent/SecureComponent"; -import MenuList from "./MenuList"; import MenuToggle from "./MenuToggle"; +import ConsoleMenuList from "./ConsoleMenuList"; +import RegisterMenuIcon from "../../../icons/SidebarMenus/RegisterMenuIcon"; +import DiagnosticsMenuIcon from "../../../icons/SidebarMenus/DiagnosticsMenuIcon"; +import CallHomeMenuIcon from "../../../icons/SidebarMenus/CallHomeMenuIcon"; const drawerWidth = 245; @@ -131,124 +145,185 @@ const Menu = ({ }; const ldapIsEnabled = (features && features.includes("ldap-idp")) || false; - let menuConsoleAdmin: IMenuItem[] = [ + + let consoleMenus = [ { - group: "common", - type: "item", - component: NavLink, - to: IAM_PAGES.DASHBOARD, - name: "Dashboard", - icon: DashboardIcon, - }, - { - group: "common", - type: "item", + name: "Buckets", + id: "buckets", component: NavLink, to: IAM_PAGES.BUCKETS, - name: "Buckets", - icon: BucketsIcon, + icon: BucketsMenuIcon, forceDisplay: true, + children: [], }, { - group: "common", - type: "item", - component: NavLink, - to: IAM_PAGES.USERS, - customPermissionFnc: () => - hasPermission(CONSOLE_UI_RESOURCE, [IAM_SCOPES.ADMIN_LIST_USERS]) || - hasPermission(S3_ALL_RESOURCES, [IAM_SCOPES.ADMIN_CREATE_USER]), - name: "Users", - icon: UsersIcon, - fsHidden: ldapIsEnabled, + name: "Identity", + id: "identity", + icon: IdentityMenuIcon, + children: [ + { + component: NavLink, + id: "users", + to: IAM_PAGES.USERS, + customPermissionFnc: () => + hasPermission(CONSOLE_UI_RESOURCE, [IAM_SCOPES.ADMIN_LIST_USERS]) || + hasPermission(S3_ALL_RESOURCES, [IAM_SCOPES.ADMIN_CREATE_USER]), + name: "Users", + icon: UsersMenuIcon, + fsHidden: ldapIsEnabled, + }, + { + component: NavLink, + id: "groups", + to: IAM_PAGES.GROUPS, + name: "Groups", + icon: GroupsMenuIcon, + fsHidden: ldapIsEnabled, + }, + { + component: NavLink, + id: "serviceaccounts", + to: IAM_PAGES.ACCOUNT, + name: "Service Accounts", + icon: AccountsMenuIcon, + forceDisplay: true, + }, + ], }, { - group: "common", - type: "item", - component: NavLink, - to: IAM_PAGES.GROUPS, - name: "Groups", - icon: GroupsIcon, - fsHidden: ldapIsEnabled, - }, - { - group: "common", - type: "item", - component: NavLink, - to: IAM_PAGES.ACCOUNT, - name: "Service Accounts", - icon: AccountIcon, - forceDisplay: true, - }, - { - group: "common", - type: "item", + name: "Access", component: NavLink, + id: "access", to: IAM_PAGES.POLICIES, - name: "IAM Policies", - icon: IAMPoliciesIcon, + icon: AccessMenuIcon, + forceDisplay: true, + children: [], }, { - group: "common", - type: "item", - component: NavLink, - to: IAM_PAGES.SETTINGS, - name: "Settings", - icon: SettingsIcon, - }, - { - group: "common", - type: "item", component: NavLink, to: IAM_PAGES.NOTIFICATIONS_ENDPOINTS, name: "Notification Endpoints", icon: LambdaIcon, + id: "lambda", }, { - group: "common", - type: "item", component: NavLink, to: IAM_PAGES.TIERS, name: "Tiers", icon: TiersIcon, + id: "tiers", }, { - group: "common", - type: "item", + name: "Monitoring", + id: "tools", + icon: MonitoringMenuIcon, + children: [ + { + name: "Metrics", + id: "monitorMetrics", + to: IAM_PAGES.DASHBOARD, + icon: MetricsMenuIcon, + component: NavLink, + }, + { + name: "Logs ", + id: "monitorLogs", + to: IAM_PAGES.TOOLS_LOGS, + icon: LogsMenuIcon, + component: NavLink, + }, + { + name: "Audit", + id: "monitorAudit", + to: IAM_PAGES.TOOLS_AUDITLOGS, + icon: AuditLogsMenuIcon, + component: NavLink, + }, + { + name: "Trace", + id: "monitorTrace", + to: IAM_PAGES.TOOLS_TRACE, + icon: TraceMenuIcon, + component: NavLink, + }, + + { + name: "Drives", + id: "monitorDrives", + to: IAM_PAGES.TOOLS_HEAL, + icon: DrivesMenuIcon, + component: NavLink, + }, + ], + }, + { + name: "Health", + id: "health", component: NavLink, - to: IAM_PAGES.TOOLS, - name: "Tools", - icon: ToolsIcon, + icon: HealthMenuIcon, + to: IAM_PAGES.HEALTH, + children: [], + }, + { + name: "Support", + id: "support", + icon: SupportMenuIcon, + children: [ + { + name: "Register", + id: "register", + component: NavLink, + icon: RegisterMenuIcon, + to: IAM_PAGES.REGISTER_SUPPORT, + }, + { + name: "Diagnostic", + id: "diagnostics", + component: NavLink, + icon: DiagnosticsMenuIcon, + to: IAM_PAGES.TOOLS_DIAGNOSTICS, + }, + { + name: "Performance", + id: "diagnostics", + component: NavLink, + icon: PerformanceMenuIcon, + to: IAM_PAGES.TOOLS_SPEEDTEST, + }, + { + name: "Call Home", + id: "callhome", + component: NavLink, + icon: CallHomeMenuIcon, + to: IAM_PAGES.CALL_HOME, + }, + { + name: "Inspect", + id: "inspsect", + component: NavLink, + icon: InspectMenuIcon, + to: IAM_PAGES.INSPECT, + }, + { + name: "Profile", + id: "profile", + component: NavLink, + icon: ProfileMenuIcon, + to: IAM_PAGES.PROFILE, + }, + ], }, { - group: "License", - type: "item", component: NavLink, to: IAM_PAGES.LICENSE, name: "License", + id: "license", icon: LicenseIcon, forceDisplay: true, }, - { - group: "License", - type: "item", - component: NavLink, - to: IAM_PAGES.DOCUMENTATION, - name: "Documentation", - icon: DocumentationIcon, - forceDisplay: true, - onClick: ( - e: - | React.MouseEvent - | React.MouseEvent - | React.MouseEvent - ) => { - e.preventDefault(); - window.open("https://docs.min.io/?ref=con", "_blank"); - }, - }, ]; - let menuOperatorConsole: IMenuItem[] = [ + let operatorMenus: IMenuItem[] = [ { group: "Operator", type: "item", @@ -296,18 +371,6 @@ const Menu = ({ }, ]; - const allowedItems = ( - operatorMode ? menuOperatorConsole : menuConsoleAdmin - ).filter( - (item: any) => - ((item.customPermissionFnc - ? item.customPermissionFnc() - : hasPermission(CONSOLE_UI_RESOURCE, IAM_PAGES_PERMISSIONS[item.to])) || - item.forceDisplay || - item.type !== "item") && - !item.fsHidden - ); - return ( - diff --git a/portal-ui/src/screens/Console/Menu/MenuItem.tsx b/portal-ui/src/screens/Console/Menu/MenuItem.tsx index 5d4f03097..a3bdba363 100644 --- a/portal-ui/src/screens/Console/Menu/MenuItem.tsx +++ b/portal-ui/src/screens/Console/Menu/MenuItem.tsx @@ -15,47 +15,204 @@ // along with this program. If not, see . import React, { Suspense } from "react"; -import { ListItem, ListItemIcon, ListItemText, Tooltip } from "@mui/material"; +import { + Collapse, + ListItem, + ListItemIcon, + ListItemText, + Tooltip, +} from "@mui/material"; import { menuItemContainerStyles, menuItemIconStyles, + menuItemMiniStyles, menuItemTextStyles, } from "./MenuStyleUtils"; +import List from "@mui/material/List"; +import { + MenuCollapsedIcon, + MenuExpandedIcon, +} from "../../../icons/SidebarMenus/MenuIcons"; +import { hasPermission } from "../../../common/SecureComponent/SecureComponent"; +import { + CONSOLE_UI_RESOURCE, + IAM_PAGES_PERMISSIONS, +} from "../../../common/SecureComponent/permissions"; const MenuItem = ({ page, stateClsName = "", + onExpand, + expandedValue, + pathValue = "", }: { page: any; stateClsName?: string; + onExpand?: (id: any) => void; + expandedValue?: any; + pathValue?: string; }) => { + const childrenMenuList = page?.children?.filter( + (item: any) => + ((item.customPermissionFnc + ? item.customPermissionFnc() + : hasPermission(CONSOLE_UI_RESOURCE, IAM_PAGES_PERMISSIONS[item.to])) || + item.forceDisplay) && + !item.fsHidden + ); + + let hasChildren = childrenMenuList?.length; + + const expandCollapseHandler = (e: any) => { + e.preventDefault(); + if (expandedValue === page.id) { + onExpand && onExpand(null); + } else { + onExpand && onExpand(page.id); + } + }; + + const onClickHandler = hasChildren ? expandCollapseHandler : page.onClick; + + const activeClsName = + pathValue.includes(expandedValue) && page.id === expandedValue + ? "active" + : ""; + + const isActiveGroup = expandedValue === page.id; return ( - - {page.icon && ( - - - ...}> - - - - - )} - {page.name && ( - - )} - + + + {page.icon && ( + + + ...}> + + + + + )} + {page.name && ( + + )} + + {hasChildren ? ( + isActiveGroup ? ( + + ) : ( + + ) + ) : null} + + + {hasChildren ? ( + + + {childrenMenuList.map((item: any) => { + return ( + + {item.icon && ( + + + ...}> + + + + + )} + {item.name && ( + + )} + + ); + })} + + + ) : null} + ); }; diff --git a/portal-ui/src/screens/Console/Menu/MenuList.tsx b/portal-ui/src/screens/Console/Menu/MenuList.tsx deleted file mode 100644 index 824948cac..000000000 --- a/portal-ui/src/screens/Console/Menu/MenuList.tsx +++ /dev/null @@ -1,114 +0,0 @@ -// This file is part of MinIO Console Server -// Copyright (c) 2021 MinIO, Inc. -// -// This program is free software: you can redistribute it and/or modify -// it under the terms of the GNU Affero General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. -// -// This program is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU Affero General Public License for more details. -// -// You should have received a copy of the GNU Affero General Public License -// along with this program. If not, see . - -import React from "react"; -import MenuItem from "./MenuItem"; -import { Box } from "@mui/material"; -import ListItem from "@mui/material/ListItem"; -import ListItemIcon from "@mui/material/ListItemIcon"; -import LogoutIcon from "../../../icons/LogoutIcon"; -import ListItemText from "@mui/material/ListItemText"; -import List from "@mui/material/List"; -import { IMenuItem } from "./types"; -import { - menuItemContainerStyles, - menuItemIconStyles, - menuItemTextStyles, -} from "./MenuStyleUtils"; - -const MenuList = ({ - menuItems, - onLogoutClick, - isOpen, -}: { - menuItems: IMenuItem[]; - isOpen: boolean; - onLogoutClick: () => void; -}) => { - const stateClsName = isOpen ? "wide" : "mini"; - - return ( - - - - {(menuItems || []).map((page: IMenuItem) => { - switch (page.type) { - case "item": { - return ( - - ); - } - default: - return null; - } - })} - - - - - - - - - - - - ); -}; - -export default MenuList; diff --git a/portal-ui/src/screens/Console/Menu/MenuStyleUtils.tsx b/portal-ui/src/screens/Console/Menu/MenuStyleUtils.tsx index 09253d480..a9e3ad8e9 100644 --- a/portal-ui/src/screens/Console/Menu/MenuStyleUtils.tsx +++ b/portal-ui/src/screens/Console/Menu/MenuStyleUtils.tsx @@ -20,10 +20,10 @@ export const menuItemContainerStyles: any = { "&.active div:nth-of-type(1)": { border: "2px solid #ffffff", }, - "&:hover": { + "&:hover, &:focus": { background: "none", "& div:nth-of-type(1)": { - background: "#073052", + background: "none", "& svg": { fill: "#ffffff", }, @@ -59,3 +59,21 @@ export const menuItemTextStyles: any = { display: "none", }, }; + +export const menuItemMiniStyles: any = { + "&.mini": { + padding: 0, + //margin: "auto", + display: "flex", + alignItems: "center", + justifyContent: "center", + + "& .group-icon": { + display: "none", + }, + }, + + "&.bottom-menu-item": { + marginBottom: "5px", + }, +}; diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx index 8179f9d4b..02ddafce3 100644 --- a/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx +++ b/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx @@ -45,6 +45,7 @@ import history from "../../../history"; import withSuspense from "../Common/Components/withSuspense"; import BackLink from "../../../common/BackLink"; import PageLayout from "../Common/Layout/PageLayout"; +import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; const ConfMySql = withSuspense( React.lazy(() => import("./CustomForms/ConfMySql")) @@ -132,7 +133,7 @@ const AddNotificationEndpoint = ({ .then(() => { setSaving(false); serverNeedsRestart(true); - history.push("/notification-endpoints"); + history.push(IAM_PAGES.NOTIFICATIONS_ENDPOINTS); }) .catch((err: ErrorResponseHandler) => { setSaving(false); diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx index 073c79f43..8b8e09718 100644 --- a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx +++ b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx @@ -48,6 +48,7 @@ import AButton from "../Common/AButton/AButton"; import PageLayout from "../Common/Layout/PageLayout"; import SearchBox from "../Common/SearchBox"; import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton"; +import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; interface IListNotificationEndpoints { classes: any; @@ -166,7 +167,7 @@ const ListNotificationEndpoints = ({ color="primary" icon={} onClick={() => { - history.push("/notification-endpoints/add"); + history.push(IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD); }} /> @@ -246,7 +247,7 @@ const ListNotificationEndpoints = ({ To get started,{" "} { - history.push("/notification-endpoints/add"); + history.push(IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD); }} > Add a Notification Target diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx index ff9cf35e8..a71312138 100644 --- a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx +++ b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx @@ -27,6 +27,7 @@ import PageHeader from "../Common/PageHeader/PageHeader"; import history from "../../../history"; import BackLink from "../../../common/BackLink"; import PageLayout from "../Common/Layout/PageLayout"; +import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; interface INotificationTypeSelector { classes: any; @@ -58,7 +59,7 @@ const NotificationTypeSelector = ({ classes }: INotificationTypeSelector) => { className={classes.lambdaNotif} onClick={() => { history.push( - `/notification-endpoints/add/${item.actionTrigger}` + `${IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD}/${item.actionTrigger}` ); }} > diff --git a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx index 8fa276bb7..dbaa4a8e4 100644 --- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx +++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx @@ -40,6 +40,7 @@ import HelpBox from "../../../common/HelpBox"; import PageLayout from "../Common/Layout/PageLayout"; import { CONSOLE_UI_RESOURCE, + IAM_PAGES, IAM_SCOPES, } from "../../../common/SecureComponent/permissions"; import SecureComponent, { @@ -157,7 +158,7 @@ const ListPolicies = ({ classes, setErrorSnackMessage }: IPoliciesProps) => { }; const viewAction = (policy: any) => { - history.push(`/policies/${policy.name}`); + history.push(`${IAM_PAGES.POLICIES}/${policy.name}`); }; const tableActions = [ diff --git a/portal-ui/src/screens/Console/Policies/Policies.tsx b/portal-ui/src/screens/Console/Policies/Policies.tsx index a6f9add63..b36a27f6a 100644 --- a/portal-ui/src/screens/Console/Policies/Policies.tsx +++ b/portal-ui/src/screens/Console/Policies/Policies.tsx @@ -9,6 +9,7 @@ import { AppState } from "../../../store"; import { setMenuOpen } from "../../../actions"; import NotFoundPage from "../../NotFoundPage"; import withSuspense from "../Common/Components/withSuspense"; +import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; const ListPolicies = withSuspense(React.lazy(() => import("./ListPolicies"))); const PolicyDetails = withSuspense(React.lazy(() => import("./PolicyDetails"))); @@ -22,8 +23,12 @@ const Users = () => { return ( - - + + diff --git a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx index 4c175351a..d6051031d 100644 --- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx +++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx @@ -48,6 +48,7 @@ import VerticalTabs from "../Common/VerticalTabs/VerticalTabs"; import BackLink from "../../../common/BackLink"; import { CONSOLE_UI_RESOURCE, + IAM_PAGES, IAM_SCOPES, } from "../../../common/SecureComponent/permissions"; import SecureComponent, { @@ -285,11 +286,11 @@ const PolicyDetails = ({ const closeDeleteModalAndRefresh = (refresh: boolean) => { setDeleteOpen(false); - history.push(`/policies`); + history.push(IAM_PAGES.POLICIES); }; const userViewAction = (user: any) => { - history.push(`/users/${user}`); + history.push(`${IAM_PAGES.USERS}/${user}`); }; const userTableActions = [ { @@ -304,7 +305,7 @@ const PolicyDetails = ({ ); const groupViewAction = (group: any) => { - history.push(`/groups/${group}`); + history.push(`${IAM_PAGES.GROUPS}/${group}`); }; const groupTableActions = [ @@ -331,13 +332,13 @@ const PolicyDetails = ({ - + Policy } /> - + { return ( - + {!distributedSetup ? ( { return ( - + + { + return ( + } + pageHeaderText={"Register"} + title={"Product registration"} + message={
This feature is currently not available.
} + /> + ); + }} + /> + { + return ( + } + pageHeaderText={"Support"} + title={"Call Home"} + message={
This feature is currently not available.
} + /> + ); + }} + /> + { + return ( + } + pageHeaderText={"Support"} + title={"Inspect"} + message={
This feature is currently not available.
} + /> + ); + }} + /> + { + return ( + } + pageHeaderText={"Support"} + title={"Profile"} + message={
This feature is currently not available.
} + /> + ); + }} + /> diff --git a/portal-ui/src/screens/Console/Trace/Trace.tsx b/portal-ui/src/screens/Console/Trace/Trace.tsx index d6b8f69a8..8c0341ad8 100644 --- a/portal-ui/src/screens/Console/Trace/Trace.tsx +++ b/portal-ui/src/screens/Console/Trace/Trace.tsx @@ -42,7 +42,6 @@ import TableWrapper from "../Common/TableWrapper/TableWrapper"; import PageHeader from "../Common/PageHeader/PageHeader"; import CheckboxWrapper from "../Common/FormComponents/CheckboxWrapper/CheckboxWrapper"; import moment from "moment/moment"; -import BackLink from "../../../common/BackLink"; import PageLayout from "../Common/Layout/PageLayout"; const styles = (theme: Theme) => @@ -201,7 +200,6 @@ const Trace = ({ return ( - diff --git a/portal-ui/src/screens/Console/Users/DeleteUserString.tsx b/portal-ui/src/screens/Console/Users/DeleteUserString.tsx index c503e878b..bc186f2bc 100644 --- a/portal-ui/src/screens/Console/Users/DeleteUserString.tsx +++ b/portal-ui/src/screens/Console/Users/DeleteUserString.tsx @@ -23,6 +23,7 @@ import history from "../../../history"; import useApi from "../Common/Hooks/useApi"; import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog"; import { ConfirmDeleteIcon } from "../../../icons"; +import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; interface IDeleteUserProps { closeDeleteModalAndRefresh: (refresh: boolean) => void; @@ -38,7 +39,7 @@ const DeleteUserString = ({ setErrorSnackMessage, }: IDeleteUserProps) => { const onDelSuccess = () => { - history.push(`/users/`); + history.push(IAM_PAGES.USERS); }; const onDelError = (err: ErrorResponseHandler) => setErrorSnackMessage(err); const onClose = () => closeDeleteModalAndRefresh(false); diff --git a/portal-ui/src/screens/Console/Users/ListUsers.tsx b/portal-ui/src/screens/Console/Users/ListUsers.tsx index 22d0c0bcd..01023dfbb 100644 --- a/portal-ui/src/screens/Console/Users/ListUsers.tsx +++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx @@ -43,6 +43,7 @@ import SearchBox from "../Common/SearchBox"; import withSuspense from "../Common/Components/withSuspense"; import { CONSOLE_UI_RESOURCE, + IAM_PAGES, IAM_SCOPES, S3_ALL_RESOURCES, } from "../../../common/SecureComponent/permissions"; @@ -170,7 +171,7 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => { }; const viewAction = (selectionElement: any): void => { - history.push(`/users/${encodeURI(selectionElement.accessKey)}`); + history.push(`${IAM_PAGES.USERS}/${encodeURI(selectionElement.accessKey)}`); }; const deleteAction = (selectionElement: any): void => { diff --git a/portal-ui/src/screens/Console/Users/UserDetails.tsx b/portal-ui/src/screens/Console/Users/UserDetails.tsx index db87ccd75..389d3b339 100644 --- a/portal-ui/src/screens/Console/Users/UserDetails.tsx +++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx @@ -57,6 +57,7 @@ import VerticalTabs from "../Common/VerticalTabs/VerticalTabs"; import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper"; import BackLink from "../../../common/BackLink"; import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton"; +import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; const styles = (theme: Theme) => createStyles({ @@ -232,7 +233,7 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => { closeModal={() => setChangeUserPasswordModalOpen(false)} /> )} - + { { type: "view", onClick: (policy: IPolicyItem) => { - history.push(`/policies/${policy.policy}`); + history.push( + `${IAM_PAGES.POLICIES}/${policy.policy}` + ); }, }, ]} diff --git a/portal-ui/src/screens/Console/Users/Users.tsx b/portal-ui/src/screens/Console/Users/Users.tsx index 558c52709..1749a861e 100644 --- a/portal-ui/src/screens/Console/Users/Users.tsx +++ b/portal-ui/src/screens/Console/Users/Users.tsx @@ -24,6 +24,7 @@ import NotFoundPage from "../../NotFoundPage"; import ListUsers from "./ListUsers"; import UserDetails from "./UserDetails"; +import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; const mapState = (state: AppState) => ({ open: state.system.sidebarOpen, @@ -35,8 +36,8 @@ const Users = () => { return ( - - + + diff --git a/portal-ui/src/screens/Console/Watch/Watch.tsx b/portal-ui/src/screens/Console/Watch/Watch.tsx index b6fa65d48..81c77f578 100644 --- a/portal-ui/src/screens/Console/Watch/Watch.tsx +++ b/portal-ui/src/screens/Console/Watch/Watch.tsx @@ -45,6 +45,7 @@ import PageHeader from "../Common/PageHeader/PageHeader"; import api from "../../../common/api"; import BackLink from "../../../common/BackLink"; import PageLayout from "../Common/Layout/PageLayout"; +import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; const styles = (theme: Theme) => createStyles({ @@ -184,7 +185,7 @@ const Watch = ({ return ( - + diff --git a/portal-ui/src/screens/NotFoundPage.tsx b/portal-ui/src/screens/NotFoundPage.tsx index 1774b09bf..ec7cc2489 100644 --- a/portal-ui/src/screens/NotFoundPage.tsx +++ b/portal-ui/src/screens/NotFoundPage.tsx @@ -15,25 +15,47 @@ // along with this program. If not, see . import React from "react"; -import CssBaseline from "@mui/material/CssBaseline"; import Box from "@mui/material/Box"; -import Typography from "@mui/material/Typography"; -import Container from "@mui/material/Container"; import Copyright from "../common/Copyright"; +import PageLayout from "./Console/Common/Layout/PageLayout"; const NotFound: React.FC = () => { return ( - - -
- - 404 Not Found - -
- - + + + + 404 Error + + + Sorry, the page could not be found. + + + + - + ); };