UX menu redesign (#1415)

Co-authored-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

portal-ui/src/common/Copyright.tsx

@@ -22,7 +22,7 @@ export default function Copyright() {
   return (
     <Typography variant="body2" color="textSecondary" align="center">
       {"Copyright © "}
-      <Link color="inherit" href="https://min.io/">
+      <Link color="inherit" href="https://min.io/?ref=con">
         MinIO
       </Link>{" "}
       {new Date().getFullYear()}

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:::*";

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const AccessMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 11.749 16"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-access-menu-icon">
+        <rect
+          id="Rectángulo_1586"
+          data-name="Rectángulo 1586"
+          width="11.749"
+          height="16"
+          fill="#8399ab"
+        />
+      </clipPath>
+    </defs>
+    <g
+      id="Grupo_2439"
+      data-name="Grupo 2439"
+      clipPath="url(#clip-path-access-menu-icon)"
+    >
+      <path
+        id="Trazado_7102"
+        data-name="Trazado 7102"
+        d="M11.018,3.348h-2.1c.009-.1.014-.194.014-.293a3.057,3.057,0,0,0-6.113,0c0,.1.005.2.015.3H.744A1.019,1.019,0,0,0,0,4.343v5.913A2.814,2.814,0,0,0,.4,11.7c1,1.676,2.625,2.648,4.955,4.143A.965.965,0,0,0,5.88,16h0a.956.956,0,0,0,.5-.145c2.264-1.4,3.8-2.315,4.984-4.234a2.665,2.665,0,0,0,.381-1.4V4.337a1.024,1.024,0,0,0-.731-.989M5.875,1.05a2,2,0,0,1,1.983,2.3l-3.966,0a2,2,0,0,1,1.983-2.3m0,4.073a2.189,2.189,0,1,1,0,4.377h0a2.189,2.189,0,1,1,0-4.377m2.786,7.212a1,1,0,0,1-.162.233.984.984,0,0,1-.216.175,1.028,1.028,0,0,1-.26.109,1.127,1.127,0,0,1-.29.038H4.023a1.123,1.123,0,0,1-.29-.037,1.04,1.04,0,0,1-.259-.108,1,1,0,0,1-.218-.172,1.019,1.019,0,0,1-.164-.23,1.112,1.112,0,0,1,.086-1.15c.017-.026.036-.05.055-.074A3.376,3.376,0,0,1,5.346,9.88,3.182,3.182,0,0,1,5.7,9.841h.017c.048,0,.1,0,.145,0a3.348,3.348,0,0,1,.72.079,3.506,3.506,0,0,1,.7.234,3.33,3.33,0,0,1,1.262.992h0a1.136,1.136,0,0,1,.123,1.193"
+        transform="translate(0 0.001)"
+        fill="#8399ab"
+      />
+    </g>
+  </svg>
+);
+
+export default AccessMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const AccountsMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 256 256"
+    {...props}
+  >
+    <defs>
+      <clipPath id="prefix__a">
+        <path d="M0 0h256v256H0z" />
+      </clipPath>
+    </defs>
+    <g clipPath="url(#prefix__a)">
+      <path fill="none" d="M0 0h256v256H0z" />
+      <g data-name="account">
+        <path
+          data-name="Trazado 463"
+          d="M32.291 232.53a32.336 32.336 0 0 1-32.289-32.3V76.935a32.33 32.33 0 0 1 32.289-32.3 8.837 8.837 0 0 1 8.832 8.822 8.845 8.845 0 0 1-8.832 8.831 14.663 14.663 0 0 0-14.648 14.648v123.295a14.661 14.661 0 0 0 14.648 14.64h191.4a14.66 14.66 0 0 0 14.641-14.64V76.936a14.661 14.661 0 0 0-14.641-14.648h-54.07a8.845 8.845 0 0 1-8.832-8.831 8.762 8.762 0 0 1 2.586-6.236 8.735 8.735 0 0 1 6.246-2.586h54.07a32.345 32.345 0 0 1 32.313 32.3V200.23a32.351 32.351 0 0 1-32.312 32.3Zm140.445-33.006a3.078 3.078 0 0 1-3.082-3.07V179.02a3.08 3.08 0 0 1 3.082-3.08h47.18a3.077 3.077 0 0 1 3.07 3.08v17.434a3.075 3.075 0 0 1-3.07 3.07Zm-113.141 0a22.643 22.643 0 0 1-20.648-12.767 26.835 26.835 0 0 1 1.891-26.579l.02-.019c.094-.143.2-.285.3-.428.273-.409.559-.827.871-1.245a70.651 70.651 0 0 1 52.277-28.5 62.967 62.967 0 0 1 3.543-.095 67.043 67.043 0 0 1 15.211 1.777 71.594 71.594 0 0 1 14.734 5.219 71.248 71.248 0 0 1 26.73 22.149 27.371 27.371 0 0 1 2.672 27.53 22.363 22.363 0 0 1-20.629 12.956Zm-3.719-30.372v.01l-.047.058c-.191.256-.371.5-.531.741v.028l-.258.371a8.365 8.365 0 0 0-.715 8.261 5.526 5.526 0 0 0 5.27 3.1h76.969a6.062 6.062 0 0 0 3.156-.761 4.988 4.988 0 0 0 1.949-2.243 8.485 8.485 0 0 0 .715-4.524 9.18 9.18 0 0 0-1.7-4.468 54.088 54.088 0 0 0-42.969-22.007c-.93 0-1.75.019-2.508.066h-.012a53.055 53.055 0 0 0-39.318 21.368Zm116.859-5.01a3.08 3.08 0 0 1-3.082-3.079v-17.425a3.08 3.08 0 0 1 3.082-3.08h47.18a3.077 3.077 0 0 1 3.07 3.08v17.425a3.077 3.077 0 0 1-3.07 3.079Zm-.59-38.7a2.5 2.5 0 0 1-2.492-2.5V82.066a2.5 2.5 0 0 1 2.492-2.5h48.348a2.5 2.5 0 0 1 2.492 2.5v40.876a2.5 2.5 0 0 1-2.492 2.5ZM50.981 74.213c0-28.233 22.09-51.209 49.242-51.209s49.258 22.976 49.258 51.209a52.579 52.579 0 0 1-3.867 19.906 51.257 51.257 0 0 1-10.551 16.274 49.07 49.07 0 0 1-15.656 11 47.257 47.257 0 0 1-19.184 4.041c-27.151 0-49.241-22.976-49.241-51.22Zm17.977 0c0 18.033 14.031 32.711 31.266 32.711 17.262 0 31.3-14.678 31.3-32.711s-14.039-32.7-31.3-32.7c-17.234 0-31.265 14.668-31.265 32.701Z"
+        />
+        <path data-name="Rect\xE1ngulo 883" fill="none" d="M0 0h256v256H0z" />
+      </g>
+    </g>
+  </svg>
+);
+
+export default AccountsMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const AuditLogsMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 14.117 13"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-audit-log-menu-icon">
+        <rect
+          id="Rectángulo_1591"
+          data-name="Rectángulo 1591"
+          width="14.117"
+          height="13"
+          fill="#fff"
+        />
+      </clipPath>
+    </defs>
+    <g
+      id="Grupo_2463"
+      data-name="Grupo 2463"
+      clipPath="url(#clip-path-audit-log-menu-icon)"
+    >
+      <path
+        id="Trazado_7111"
+        data-name="Trazado 7111"
+        d="M10.518,108.483a5.376,5.376,0,0,1-2.413.561H8.093a5.47,5.47,0,0,1-4.394-2.2H1.142a.3.3,0,0,1-.29-.3h0v-.694a.3.3,0,0,1,.29-.3H2.987a5.318,5.318,0,0,1-.248-.857H0v6.482a.732.732,0,0,0,.731.726h9.415a.732.732,0,0,0,.731-.726v-2.333Z"
+        transform="translate(0 -98.898)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7112"
+        data-name="Trazado 7112"
+        d="M2.636,41.038a5.331,5.331,0,0,1,.683-2.616H.731A.732.732,0,0,0,0,39.154v2.125H2.641c0-.08-.006-.16-.006-.241"
+        transform="translate(0 -36.296)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7114"
+        data-name="Trazado 7114"
+        d="M70.167,9.1h0L68.422,7.37a4.685,4.685,0,0,0,.809-2.629,4.795,4.795,0,0,0-9.589,0,4.773,4.773,0,0,0,4.793,4.741h.014a4.754,4.754,0,0,0,2.524-.719l1.779,1.757a1.008,1.008,0,0,0,.7.3h.011a1.005,1.005,0,0,0,.7-1.714M64.394,7.53a2.8,2.8,0,0,1-2.819-2.777,2.819,2.819,0,0,1,5.637,0A2.8,2.8,0,0,1,64.394,7.53"
+        transform="translate(-56.343)"
+        fill="#fff"
+      />
+    </g>
+  </svg>
+);
+
+export default AuditLogsMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const BucketsMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 16 16"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-buckets">
+        <rect
+          id="Rectángulo_928"
+          data-name="Rectángulo 928"
+          width="15.957"
+          height="15.928"
+          fill="#8399ab"
+        />
+      </clipPath>
+    </defs>
+    <g id="BucketsIcons-Full" transform="translate(0.283)">
+      <g id="BucketsIcon-full" transform="translate(-0.283)">
+        <rect
+          id="Rectángulo_884"
+          data-name="Rectángulo 884"
+          width="15.939"
+          height="15.911"
+          transform="translate(0.061)"
+          fill="none"
+        />
+        <g
+          id="Grupo_2272"
+          data-name="Grupo 2272"
+          transform="translate(0 0.072)"
+        >
+          <g
+            id="Grupo_2271"
+            data-name="Grupo 2271"
+            clipPath="url(#clip-path-buckets)"
+          >
+            <path
+              id="Trazado_7002"
+              data-name="Trazado 7002"
+              d="M15.619.545A1.341,1.341,0,0,0,14.553,0H1.386A1.34,1.34,0,0,0,.32.545a1.606,1.606,0,0,0-.3,1.242c.325,1.888,1.009,5.869,1.557,9.045v.006c.277,1.616.519,3.023.661,3.84A1.422,1.422,0,0,0,3.6,15.911h8.733A1.423,1.423,0,0,0,13.7,14.679l.659-3.836,0-.023.893-5.2,0-.015.658-3.821a1.6,1.6,0,0,0-.3-1.242M13.187,11.3l-10.426,0-.2-1.189H13.383Zm.89-5.216-12.221,0L1.651,4.9H14.273Z"
+              transform="translate(0.061 -0.072)"
+              fill="#8399ab"
+            />
+          </g>
+        </g>
+      </g>
+      <rect
+        id="Rectángulo_929"
+        data-name="Rectángulo 929"
+        width="15.957"
+        height="15.928"
+        transform="translate(-0.283 0.072)"
+        fill="none"
+      />
+    </g>
+  </svg>
+);
+
+export default BucketsMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const CallHomeMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 13.754 14.047"
+    {...props}
+  >
+    <path
+      id="call-home-icon"
+      d="M-2188.145,31.22l-5.076-5.082a2.671,2.671,0,0,1-.779-1.885,2.671,2.671,0,0,1,.779-1.885l1.453-1.453a.312.312,0,0,1,.439,0l2.334,2.336a.31.31,0,0,1,0,.439l-.717.718a.285.285,0,0,0,0,.4l2.9,2.9a.285.285,0,0,0,.4,0l.717-.718a.311.311,0,0,1,.44,0l2.327,2.332a.311.311,0,0,1,0,.44l-1.453,1.452a2.664,2.664,0,0,1-1.885.779A2.667,2.667,0,0,1-2188.145,31.22Zm2.6-6.814a.561.561,0,0,1-.562-.562V22.09h-.209a.561.561,0,0,1-.53-.362.56.56,0,0,1,.156-.622l2.245-1.964a.56.56,0,0,1,.748,0l2.245,1.964a.56.56,0,0,1,.156.622.561.561,0,0,1-.53.362h-.21v1.754a.56.56,0,0,1-.561.562Z"
+      transform="translate(2194.5 -18.452)"
+      fill="#fff"
+      stroke="rgba(0,0,0,0)"
+      strokeWidth="1"
+    />
+  </svg>
+);
+
+export default CallHomeMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const DiagnosticsMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 12 12"
+    {...props}
+  >
+    <g id="diagnostic-icn-full" transform="translate(0 -0.131)">
+      <path
+        id="Unión_17"
+        data-name="Unión 17"
+        d="M0,5.962A5.956,5.956,0,0,1,5.935,0h.491V2.461a3.512,3.512,0,1,1-.981,0V1.009a4.893,4.893,0,0,0-1.752.515A4.981,4.981,0,0,0,2.276,2.611a4.994,4.994,0,0,0-.949,1.524,4.96,4.96,0,1,0,9.564,1.827.49.49,0,0,1,.144-.348.485.485,0,0,1,.346-.144.492.492,0,0,1,.491.493A5.936,5.936,0,1,1,0,5.962ZM4.634,3.771a2.553,2.553,0,0,0-.806,3.618,2.568,2.568,0,0,0,.687.69,2.541,2.541,0,0,0,.432.236,2.51,2.51,0,0,0,.989.2,2.555,2.555,0,0,0,1.3-4.745,2.522,2.522,0,0,0-.811-.313V4.878a1.2,1.2,0,0,1,.5.431,1.188,1.188,0,1,1-1.986,0,1.2,1.2,0,0,1,.5-.431V3.458A2.521,2.521,0,0,0,4.634,3.771Z"
+        transform="translate(0.129 0.131)"
+        fill="#fff"
+      />
+      <rect
+        id="Rectángulo_878"
+        data-name="Rectángulo 878"
+        width="11.92"
+        height="11.975"
+        transform="translate(0 0.156)"
+        fill="none"
+      />
+    </g>
+  </svg>
+);
+
+export default DiagnosticsMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const DrivesMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 12 12"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-drives-menu-icon">
+        <rect
+          id="Rectángulo_989"
+          data-name="Rectángulo 989"
+          width="12"
+          height="12"
+          fill="#fff"
+        />
+      </clipPath>
+    </defs>
+    <g
+      id="Grupo_2361"
+      data-name="Grupo 2361"
+      clipPath="url(#clip-path-drives-menu-icon)"
+    >
+      <path
+        id="Trazado_7083"
+        data-name="Trazado 7083"
+        d="M6,2.839H6c3.882,0,6-.938,6-1.42S9.882,0,6,0,0,.938,0,1.42s2.118,1.42,6,1.42"
+        transform="translate(0)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7084"
+        data-name="Trazado 7084"
+        d="M6,135.08a15.409,15.409,0,0,1-6-1v3.228c0,.482,2.118,1.42,6,1.42s6-.93,6-1.42v-3.233a15.245,15.245,0,0,1-6,1m-3.939,2.063a.915.915,0,0,1-1.234-.281.849.849,0,0,1,.291-1.192.915.915,0,0,1,1.234.281.849.849,0,0,1-.291,1.192"
+        transform="translate(0 -126.731)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7085"
+        data-name="Trazado 7085"
+        d="M6,53.034a15.306,15.306,0,0,1-6-1V55.1c0,.482,2.118,1.42,6,1.42s6-.938,6-1.42V52.032a15.244,15.244,0,0,1-6,1M2.061,55.19a.915.915,0,0,1-1.234-.281.849.849,0,0,1,.291-1.192A.915.915,0,0,1,2.353,54a.849.849,0,0,1-.291,1.192"
+        transform="translate(0 -49.181)"
+        fill="#fff"
+      />
+    </g>
+  </svg>
+);
+
+export default DrivesMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const GroupsMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 12 10.087"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-groups-menu-icon">
+        <rect
+          id="Rectángulo_992"
+          data-name="Rectángulo 992"
+          width="12"
+          height="10.087"
+          fill="#fff"
+        />
+      </clipPath>
+    </defs>
+    <g
+      id="Grupo_2367"
+      data-name="Grupo 2367"
+      clipPath="url(#clip-path-groups-menu-icon)"
+    >
+      <path
+        id="Trazado_7090"
+        data-name="Trazado 7090"
+        d="M204.925,3.5a2.963,2.963,0,0,1-.177,1.011c.042,0,.084,0,.127,0a2.274,2.274,0,0,0,2.284-2.258,2.288,2.288,0,0,0-4-1.486A3.005,3.005,0,0,1,204.925,3.5"
+        transform="translate(-195.887 0)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7091"
+        data-name="Trazado 7091"
+        d="M207.3,137.346a3.458,3.458,0,0,0-1.31-1.03,3.642,3.642,0,0,0-.725-.242,3.479,3.479,0,0,0-.748-.082c-.05,0-.1,0-.151,0h-.017l-.1.007a3.039,3.039,0,0,1-1.442,1.357,4.587,4.587,0,0,1,.583.219,4.389,4.389,0,0,1,1.656,1.3,1.775,1.775,0,0,1,.177.28h1.242a1.169,1.169,0,0,0,.3-.039,1.066,1.066,0,0,0,.27-.113,1.02,1.02,0,0,0,.225-.181,1.036,1.036,0,0,0,.168-.242,1.179,1.179,0,0,0-.128-1.239"
+        transform="translate(-195.543 -131.125)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7092"
+        data-name="Trazado 7092"
+        d="M22.838,4.516c.043,0,.086,0,.129,0A2.962,2.962,0,0,1,22.789,3.5,3.005,3.005,0,0,1,24.556.773a2.288,2.288,0,0,0-4,1.485,2.274,2.274,0,0,0,2.284,2.258"
+        transform="translate(-19.819 -0.001)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7093"
+        data-name="Trazado 7093"
+        d="M3.757,137.784a4.577,4.577,0,0,1,.986-.428,3.039,3.039,0,0,1-1.431-1.35c-.1-.009-.206-.014-.31-.014-.05,0-.1,0-.151,0H2.834a3.293,3.293,0,0,0-.367.039,3.506,3.506,0,0,0-2.194,1.286l-.057.077h0a1.154,1.154,0,0,0-.089,1.194,1.058,1.058,0,0,0,.171.239,1.042,1.042,0,0,0,.226.179,1.079,1.079,0,0,0,.269.112,1.169,1.169,0,0,0,.3.039H2.331a1.764,1.764,0,0,1,.126-.2v0l0,0,.071-.1a4.235,4.235,0,0,1,1.225-1.071"
+        transform="translate(-0.001 -131.126)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7094"
+        data-name="Trazado 7094"
+        d="M95.021,28.466a2.6,2.6,0,1,0,2.6-2.574,2.592,2.592,0,0,0-2.6,2.574"
+        transform="translate(-91.621 -24.965)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7095"
+        data-name="Trazado 7095"
+        d="M76.691,181.3a4.152,4.152,0,0,0-.827-.276,3.966,3.966,0,0,0-.853-.094c-.057,0-.115,0-.172,0h-.02a3.753,3.753,0,0,0-.419.045,4,4,0,0,0-2.5,1.466l-.065.088h0a1.315,1.315,0,0,0-.1,1.362,1.208,1.208,0,0,0,.195.272,1.189,1.189,0,0,0,.257.2,1.233,1.233,0,0,0,.307.127,1.333,1.333,0,0,0,.342.044h4.4a1.331,1.331,0,0,0,.345-.045,1.216,1.216,0,0,0,.307-.129,1.164,1.164,0,0,0,.256-.207,1.183,1.183,0,0,0,.191-.276,1.344,1.344,0,0,0-.146-1.412,3.943,3.943,0,0,0-1.494-1.174"
+        transform="translate(-69.028 -174.452)"
+        fill="#fff"
+      />
+    </g>
+  </svg>
+);
+
+export default GroupsMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const HealthMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 16 13.597"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-health-menu">
+        <rect
+          id="Rectángulo_1588"
+          data-name="Rectángulo 1588"
+          width="16"
+          height="13.597"
+          fill="#8399ab"
+        />
+      </clipPath>
+    </defs>
+    <g
+      id="Grupo_2444"
+      data-name="Grupo 2444"
+      clipPath="url(#clip-path-health-menu)"
+    >
+      <path
+        id="Trazado_7105"
+        data-name="Trazado 7105"
+        d="M271.044,465.92"
+        transform="translate(-263.134 -452.323)"
+        fill="#8399ab"
+      />
+      <path
+        id="Trazado_7106"
+        data-name="Trazado 7106"
+        d="M16,4.462A4.35,4.35,0,0,0,11.768,0,4.2,4.2,0,0,0,7.992,2.484,4.2,4.2,0,0,0,4.217,0,4.326,4.326,0,0,0,0,4.462c0,5.9,7.91,9.136,7.91,9.136S16,10.329,16,4.462M10.886,8.084a.653.653,0,0,1-.653.653H9.146V9.824a.653.653,0,0,1-.653.653H7.508a.653.653,0,0,1-.653-.653V8.737H5.768a.653.653,0,0,1-.653-.653V7.1a.653.653,0,0,1,.653-.653H6.855V5.359a.653.653,0,0,1,.653-.653h.986a.653.653,0,0,1,.653.653V6.446h1.087a.653.653,0,0,1,.653.653Z"
+        transform="translate(0 0)"
+        fill="#8399ab"
+      />
+    </g>
+  </svg>
+);
+
+export default HealthMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const IdentityMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 17 12.782"
+    {...props}
+  >
+    <path
+      id="Sustracción_4"
+      data-name="Sustracción 4"
+      d="M14.01,11.782H1.99a2,2,0,0,1-1.99-2V2A2,2,0,0,1,1.99,0H14.01A2,2,0,0,1,16,2V9.786A2,2,0,0,1,14.01,11.782ZM2.793,10.4H6.814a1.166,1.166,0,0,0,1.055-.676A1.434,1.434,0,0,0,7.73,8.29,3.755,3.755,0,0,0,5.573,6.862a3.448,3.448,0,0,0-.791-.093c-.056,0-.116,0-.184,0A3.665,3.665,0,0,0,1.879,8.261q-.024.032-.046.065l-.015.023a1.411,1.411,0,0,0-.1,1.388,1.183,1.183,0,0,0,1.06.666ZM9.627,9.093a.627.627,0,1,0,0,1.254H14a.627.627,0,1,0,0-1.254Zm0-2.383a.627.627,0,1,0,0,1.255H14A.627.627,0,1,0,14,6.71ZM4.906.941A2.621,2.621,0,0,0,2.345,3.613,2.622,2.622,0,0,0,4.906,6.286a2.441,2.441,0,0,0,1-.211A2.538,2.538,0,0,0,6.718,5.5a2.677,2.677,0,0,0,.549-.85,2.739,2.739,0,0,0,.2-1.039A2.621,2.621,0,0,0,4.906.941ZM9.627,4.264a.627.627,0,1,0,0,1.254H14a.627.627,0,1,0,0-1.254Z"
+      transform="translate(0.5 0.5)"
+      fill="#8399ab"
+      stroke="rgba(0,0,0,0)"
+      strokeWidth="1"
+    />
+  </svg>
+);
+
+export default IdentityMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const InspectMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 12 12.001"
+    {...props}
+  >
+    <path
+      id="InspectIcon"
+      d="M-2191.428,31a1.876,1.876,0,0,1-1.715-2V27.5h1.285V29a.47.47,0,0,0,.429.5h6.857a.47.47,0,0,0,.428-.5V27.5h1.286V29a1.877,1.877,0,0,1-1.715,2ZM-2194,26V24h12v2Zm2.142-3.5h-1.284V21a1.876,1.876,0,0,1,1.715-2h6.857a1.876,1.876,0,0,1,1.715,2v1.5h-1.286V21a.469.469,0,0,0-.428-.5h-6.857a.469.469,0,0,0-.429.5v1.5h0Z"
+      transform="translate(2194 -19)"
+      fill="#fff"
+    />
+  </svg>
+);
+
+export default InspectMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const LogsMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 12 12"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-logs-menu">
+        <rect
+          id="Rectángulo_982"
+          data-name="Rectángulo 982"
+          width="12"
+          height="12"
+          transform="translate(0 0)"
+          fill="#fff"
+        />
+      </clipPath>
+    </defs>
+    <g id="logs-icon" transform="translate(-0.245 0.078)">
+      <g
+        id="Grupo_2346"
+        data-name="Grupo 2346"
+        transform="translate(0.245 -0.078)"
+        clipPath="url(#clip-path-logs-menu)"
+      >
+        <path
+          id="Trazado_7070"
+          data-name="Trazado 7070"
+          d="M.1,86.274v7.138a.806.806,0,0,0,.805.8H11.273a.806.806,0,0,0,.805-.8V86.274Zm4.482,1.274v.764a.324.324,0,0,1-.318.331H1.358a.325.325,0,0,1-.319-.331v-.764a.325.325,0,0,1,.319-.33H4.264a.324.324,0,0,1,.318.33Z"
+          transform="translate(-0.135 -82.221)"
+          fill="#fff"
+        />
+        <path
+          id="Trazado_7071"
+          data-name="Trazado 7071"
+          d="M11.273.1H.905A.806.806,0,0,0,.1.906v2.34H12.078V.906A.806.806,0,0,0,11.273.1"
+          transform="translate(-0.135 -0.084)"
+          fill="#fff"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default LogsMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const MenuCollapsedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 15 15"
+    {...props}
+  >
+    <g id="Grupo_2449" data-name="Grupo 2449" transform="translate(-140 -181)">
+      <rect
+        id="Rectángulo_1589"
+        data-name="Rectángulo 1589"
+        width="15"
+        height="15"
+        rx="2"
+        transform="translate(140 181)"
+        fill="#08193a"
+        opacity="0.601"
+      />
+      <g id="OpenListIcon-full" transform="translate(144 250.612)">
+        <g
+          id="noun_chevron_2320228"
+          transform="translate(6.827 -63.612) rotate(90)"
+        >
+          <path
+            id="Trazado_6842"
+            data-name="Trazado 6842"
+            d="M.422,6.661a.433.433,0,0,1-.3-.117.37.37,0,0,1,0-.557L2.983,3.335.126.675a.37.37,0,0,1,0-.557.443.443,0,0,1,.6,0L3.889,3.052a.373.373,0,0,1,.126.274.344.344,0,0,1-.126.274L.727,6.533a.443.443,0,0,1-.306.127Z"
+            transform="translate(0 0)"
+            fill="#fff"
+          />
+        </g>
+        <rect
+          id="Rectángulo_896"
+          data-name="Rectángulo 896"
+          width="0.462"
+          height="0.462"
+          transform="translate(0 -61.808)"
+          fill="none"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default MenuCollapsedIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const MenuCollapsedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 15 15"
+    {...props}
+  >
+    <rect
+      id="Rectángulo_1589"
+      data-name="Rectángulo 1589"
+      width="15"
+      height="15"
+      rx="2"
+      fill="#081836"
+      opacity="0.601"
+    />
+    <g id="OpenListIcon-full" transform="translate(4 4.984)">
+      <g
+        id="noun_chevron_2320228"
+        transform="translate(0.167 4.016) rotate(-90)"
+      >
+        <path
+          id="Trazado_6842"
+          data-name="Trazado 6842"
+          d="M.422,0a.433.433,0,0,0-.3.117.37.37,0,0,0,0,.557L2.983,3.325.126,5.986a.37.37,0,0,0,0,.557.443.443,0,0,0,.6,0L3.889,3.609a.373.373,0,0,0,.126-.274.344.344,0,0,0-.126-.274L.727.127A.443.443,0,0,0,.422,0Z"
+          transform="translate(0 0)"
+          fill="#8399ab"
+        />
+      </g>
+      <rect
+        id="Rectángulo_896"
+        data-name="Rectángulo 896"
+        width="0.462"
+        height="0.462"
+        transform="translate(0 1.75)"
+        fill="none"
+      />
+    </g>
+  </svg>
+);
+
+export default MenuCollapsedIcon;

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";

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const MetricsMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 12 12"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-metrics-menu-icon">
+        <rect
+          id="Rectángulo_946"
+          data-name="Rectángulo 946"
+          width="12"
+          height="12"
+          transform="translate(0 0)"
+          fill="#fff"
+        />
+      </clipPath>
+    </defs>
+    <g id="DashboardIcon-Full" transform="translate(0.037 0.021)">
+      <g
+        id="Grupo_2300"
+        data-name="Grupo 2300"
+        transform="translate(-0.037 -0.021)"
+        clipPath="url(#clip-path-metrics-menu-icon)"
+      >
+        <path
+          id="Trazado_7036"
+          data-name="Trazado 7036"
+          d="M11.722.239A.805.805,0,0,0,11.15,0H.809A.811.811,0,0,0,0,.81V11.151a.811.811,0,0,0,.809.809H11.15a.811.811,0,0,0,.809-.809V.811a.805.805,0,0,0-.237-.572M1.935,2.544a.724.724,0,0,1,.724-.724H4.94a.724.724,0,0,1,.724.724V3.613a.724.724,0,0,1-.724.724H2.659a.724.724,0,0,1-.724-.724Zm3.73,6.932a.7.7,0,0,1-.724.664H2.659a.7.7,0,0,1-.724-.664V6.01a.7.7,0,0,1,.724-.664H4.94a.7.7,0,0,1,.724.664Zm4.627-.059a.724.724,0,0,1-.724.724H7.286a.724.724,0,0,1-.724-.724V8.349a.724.724,0,0,1,.724-.724H9.568a.724.724,0,0,1,.724.724Zm0-3.466a.7.7,0,0,1-.724.664H7.286a.7.7,0,0,1-.724-.664V2.484a.7.7,0,0,1,.724-.664H9.567a.7.7,0,0,1,.724.664Z"
+          transform="translate(0.006 0.002)"
+          fill="#fff"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default MetricsMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const MonitoringMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 16 16"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-monitoring-icon">
+        <rect
+          id="Rectángulo_1587"
+          data-name="Rectángulo 1587"
+          width="16"
+          height="16"
+          fill="#8399ab"
+        />
+      </clipPath>
+    </defs>
+    <g
+      id="Grupo_2441"
+      data-name="Grupo 2441"
+      clipPath="url(#clip-path-monitoring-icon)"
+    >
+      <path
+        id="Trazado_7103"
+        data-name="Trazado 7103"
+        d="M15.551,13.464,12.973,10.9a6.932,6.932,0,0,0,.846-1.72H10.813A4.386,4.386,0,0,1,2.646,7.03a4.377,4.377,0,0,1,8.744-.222h2.776A7.086,7.086,0,0,0,0,7.013a7.056,7.056,0,0,0,7.083,7.012H7.1a7.019,7.019,0,0,0,3.73-1.063l2.629,2.6A1.489,1.489,0,0,0,14.5,16h.016a1.487,1.487,0,0,0,1.038-2.536Z"
+        fill="#8399ab"
+      />
+      <path
+        id="Trazado_7104"
+        data-name="Trazado 7104"
+        d="M164.692,167.057a.271.271,0,0,0-.264-.213h0a.271.271,0,0,0-.264.211l-.218.966-.187-.572a.271.271,0,0,0-.526.051l-.249,2.03-.859-4.085a.271.271,0,0,0-.527-.011l-.765,3a.713.713,0,1,0,.512.183l.489-1.919.955,4.54a.271.271,0,0,0,.265.215h.012a.271.271,0,0,0,.257-.238l.3-2.437.114.351a.271.271,0,0,0,.521-.025l.167-.741.156.71a.271.271,0,0,0,.264.213h6.909a.271.271,0,0,0,0-.542h-6.692Z"
+        transform="translate(-156.025 -160.967)"
+        fill="#8399ab"
+      />
+    </g>
+  </svg>
+);
+
+export default MonitoringMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const PerformanceMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 12 12"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-performance-menu-icon">
+        <rect
+          id="Rectángulo_985"
+          data-name="Rectángulo 985"
+          width="12"
+          height="12"
+          fill="#fff"
+        />
+      </clipPath>
+    </defs>
+    <g
+      id="Grupo_2352"
+      data-name="Grupo 2352"
+      clipPath="url(#clip-path-performance-menu-icon)"
+    >
+      <path
+        id="Trazado_7077"
+        data-name="Trazado 7077"
+        d="M120.417,129.741a.387.387,0,1,0,.387.387h0a.387.387,0,0,0-.387-.387"
+        transform="translate(-114.404 -123.659)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7078"
+        data-name="Trazado 7078"
+        d="M6,0a6,6,0,1,0,6,6A6,6,0,0,0,6,0M5.974,1.662h.02a.366.366,0,1,1-.006.733H5.974a.366.366,0,0,1,0-.733m-4.1,4.026v0a.139.139,0,0,1-.139.12H1.717a.139.139,0,0,1-.12-.156v0h0a.139.139,0,0,1,.156-.119h0a.139.139,0,0,1,.118.157M2.2,4.447h0a.2.2,0,0,1-.179-.3v0h0a.2.2,0,1,1,.178.3M3.323,3.238l-.015.013,0,0a.249.249,0,0,1-.165.064v0a.25.25,0,0,1-.164-.438l0,0h0l0,0a.25.25,0,0,1,.341.366M4.555,2.6l0,0-.008,0a.329.329,0,0,1-.119.025v0a.331.331,0,0,1-.117-.642l.01,0h0a.331.331,0,1,1,.238.619m2.1,6.622h0a.176.176,0,0,1-.176.176H5.531a.176.176,0,1,1,0-.353h.952a.177.177,0,0,1,.178.175Zm.781-3.493-.652.556a.016.016,0,0,0,0,.015.8.8,0,1,1-.489-.57.016.016,0,0,0,.016,0l.649-.556h0a.366.366,0,0,1,.476.556m-.05-3.025v0a.4.4,0,0,1-.143-.026l-.012,0a.406.406,0,1,1,.284-.76l.014.005a.408.408,0,0,1-.143.789m1.292.827a.46.46,0,0,1-.3-.114L8.37,3.41a.46.46,0,0,1,.6-.694l.013.011a.46.46,0,0,1-.3.806m.47.964-.009-.016a.529.529,0,1,1,.916-.529l.013.023.009.017h0a.529.529,0,0,1-.213.717h0A.529.529,0,0,1,9.154,4.5m1.014,1.772a.6.6,0,0,1-.675-.512v-.02a.6.6,0,0,1,.592-.679.6.6,0,0,1,.591.516l0,.023a.6.6,0,0,1-.512.672"
+        fill="#fff"
+      />
+    </g>
+  </svg>
+);
+
+export default PerformanceMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const ProfileMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 12 10.456"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-profile-menu-icon">
+        <rect
+          id="Rectángulo_1599"
+          data-name="Rectángulo 1599"
+          width="12"
+          height="10.456"
+          fill="#fff"
+        />
+      </clipPath>
+    </defs>
+    <g
+      id="Grupo_2475"
+      data-name="Grupo 2475"
+      clipPath="url(#clip-path-profile-menu-icon)"
+    >
+      <path
+        id="Trazado_7122"
+        data-name="Trazado 7122"
+        d="M33.036,1.016H43.058L43.3.207A.161.161,0,0,0,43.145,0h-10.2a.161.161,0,0,0-.154.207Z"
+        transform="translate(-32.063)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7123"
+        data-name="Trazado 7123"
+        d="M11.551,67.822H.449A.449.449,0,0,0,0,68.333l.644,4.659a.451.451,0,0,0,.018.078H11.334a.451.451,0,0,0,.018-.078L12,68.333a.449.449,0,0,0-.445-.511"
+        transform="translate(0 -66.323)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7124"
+        data-name="Trazado 7124"
+        d="M16.471,328.2H5.652a.476.476,0,0,0-.452.624l.845,2.576H16.078l.845-2.576a.476.476,0,0,0-.452-.624"
+        transform="translate(-5.062 -320.942)"
+        fill="#fff"
+      />
+    </g>
+  </svg>
+);
+
+export default ProfileMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const RegisterMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 12 12"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-reg-menu-icon">
+        <rect
+          id="Rectángulo_1593"
+          data-name="Rectángulo 1593"
+          width="12"
+          height="12"
+          fill="#fff"
+        />
+      </clipPath>
+    </defs>
+    <g
+      id="Grupo_2469"
+      data-name="Grupo 2469"
+      clipPath="url(#clip-path-reg-menu-icon)"
+    >
+      <path
+        id="Trazado_7117"
+        data-name="Trazado 7117"
+        d="M11.4,7.564a1.848,1.848,0,0,0,.6-1.17,1.848,1.848,0,0,0-.6-1.17,1.866,1.866,0,0,1-.377-.532,2.022,2.022,0,0,1,0-.693,1.858,1.858,0,0,0-.17-1.282,1.7,1.7,0,0,0-1.126-.567A1.8,1.8,0,0,1,9.1,1.94a1.924,1.924,0,0,1-.374-.546A1.775,1.775,0,0,0,7.854.442,1.649,1.649,0,0,0,6.646.671,1.833,1.833,0,0,1,6,.89,1.833,1.833,0,0,1,5.354.671,1.649,1.649,0,0,0,4.146.442a1.78,1.78,0,0,0-.872.952,1.926,1.926,0,0,1-.377.549,1.806,1.806,0,0,1-.625.209,1.7,1.7,0,0,0-1.126.567A1.865,1.865,0,0,0,.977,3.994a2.053,2.053,0,0,1,0,.693A1.915,1.915,0,0,1,.6,5.223,1.844,1.844,0,0,0,0,6.394a1.843,1.843,0,0,0,.6,1.17,1.932,1.932,0,0,1,.377.53,2.061,2.061,0,0,1,0,.694,1.865,1.865,0,0,0,.169,1.282,1.7,1.7,0,0,0,1.126.567,1.806,1.806,0,0,1,.625.209,1.925,1.925,0,0,1,.377.548,1.775,1.775,0,0,0,.872.948,1.649,1.649,0,0,0,1.208-.228A1.831,1.831,0,0,1,6,11.894a1.832,1.832,0,0,1,.646.219,2.244,2.244,0,0,0,.908.281.929.929,0,0,0,.3-.049,1.773,1.773,0,0,0,.872-.951,1.934,1.934,0,0,1,.377-.548,1.8,1.8,0,0,1,.625-.209,1.7,1.7,0,0,0,1.126-.567,1.853,1.853,0,0,0,.169-1.284,2.051,2.051,0,0,1,0-.693,1.881,1.881,0,0,1,.377-.529M5.367,8.69,3.051,6.269l.821-.855L5.367,6.973,8.128,4.1l.821.858Z"
+        transform="translate(0 -0.394)"
+        fill="#fff"
+      />
+    </g>
+  </svg>
+);
+
+export default RegisterMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const SupportMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 13.264 16"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-support-menu-icon">
+        <rect
+          id="Rectángulo_1590"
+          data-name="Rectángulo 1590"
+          width="13.264"
+          height="16"
+          fill="#8399ab"
+        />
+      </clipPath>
+    </defs>
+    <g
+      id="Grupo_2451"
+      data-name="Grupo 2451"
+      clipPath="url(#clip-path-support-menu-icon)"
+    >
+      <path
+        id="Trazado_7107"
+        data-name="Trazado 7107"
+        d="M141.4,175.257a1.765,1.765,0,1,0,1.765-1.763,1.758,1.758,0,0,0-1.765,1.763"
+        transform="translate(-136.66 -167.676)"
+        fill="#8399ab"
+      />
+      <path
+        id="Trazado_7108"
+        data-name="Trazado 7108"
+        d="M13.256,11.233l-.791-3.756.064-1.906a.373.373,0,0,0,0-.052A6.285,6.285,0,0,0,9.25.642h0L9.185.608c-.153-.08-.31-.155-.471-.223a.375.375,0,0,0-.13-.031A7.2,7.2,0,0,0,7.731.106v5.28a2.51,2.51,0,0,1,.343,4.16l.876,1.516a.376.376,0,0,1-.275.564.373.373,0,0,1-.147-.01.376.376,0,0,1-.228-.178L7.424,9.923A2.514,2.514,0,0,1,5.282,5.385V0a6.15,6.15,0,0,0-1.141.28A.377.377,0,0,0,4.065.3q-.231.087-.453.192A6.281,6.281,0,0,0,1.869,10.647l-.5,3.2a.376.376,0,0,0,.152.363.379.379,0,0,0,.124.058l6.6,1.722a.376.376,0,0,0,.467-.315l.283-2.165,1.738.4a.376.376,0,0,0,.454-.306l.313-1.912h1.39a.376.376,0,0,0,.368-.453"
+        transform="translate(0 0.001)"
+        fill="#8399ab"
+      />
+    </g>
+  </svg>
+);
+
+export default SupportMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const TraceMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 12 12"
+    {...props}
+  >
+    <g id="trace-icon" transform="translate(0 0)">
+      <path
+        id="trace-icn"
+        d="M-4327.66-381.522l2.667,2.932v5.186a.377.377,0,0,1-.383.368h-.566a.379.379,0,0,1-.384-.368v-4.614l-2.666-3.135v-3.477a.376.376,0,0,1,.382-.368h.567a.376.376,0,0,1,.383.368Zm2.667-3.109a.377.377,0,0,0-.383-.368h-.566a.378.378,0,0,0-.384.368v3.332l2.668,3.135v4.758a.377.377,0,0,0,.383.368h.567a.377.377,0,0,0,.382-.368v-5.33l-2.667-2.931Zm2.284-.368h-.567a.377.377,0,0,0-.383.368v1.827a.377.377,0,0,0,.383.368h.567a.377.377,0,0,0,.382-.368v-1.827A.377.377,0,0,0-4322.709-385Zm2.1,5.554h.568a.377.377,0,0,0,.383-.368v-4.817a.377.377,0,0,0-.383-.368h-.568a.377.377,0,0,0-.383.368v4.817A.377.377,0,0,0-4320.61-379.445Zm3.233-5.554h-.567a.377.377,0,0,0-.383.368v1.827a.377.377,0,0,0,.383.368h.567a.377.377,0,0,0,.384-.368v-1.827A.377.377,0,0,0-4317.376-385Zm0,8.117h-.567a.377.377,0,0,0-.383.368v3.108a.377.377,0,0,0,.383.368h.567a.377.377,0,0,0,.384-.368v-3.108A.377.377,0,0,0-4317.376-376.882Zm0-3.845h-.567a.377.377,0,0,0-.383.368v.828l-2.667,2.648v3.477a.377.377,0,0,0,.383.368h.568a.377.377,0,0,0,.383-.368v-2.622l2.667-3.135v-1.2A.377.377,0,0,0-4317.376-380.727Zm-10.667,2.136h-.567a.376.376,0,0,0-.382.368v4.817a.376.376,0,0,0,.382.368h.567a.376.376,0,0,0,.383-.368v-4.817A.376.376,0,0,0-4328.043-378.591Z"
+        transform="translate(4328.993 384.999)"
+        fill="#fff"
+      />
+      <rect
+        id="Rectángulo_880"
+        data-name="Rectángulo 880"
+        width="11.078"
+        height="11.844"
+        transform="translate(0.472 0.156)"
+        fill="none"
+      />
+    </g>
+  </svg>
+);
+
+export default TraceMenuIcon;

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 <http://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const UsersMenuIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`min-icon`}
+    fill={"currentcolor"}
+    viewBox="0 0 9.008 12"
+    {...props}
+  >
+    <defs>
+      <clipPath id="clip-path-users-menu">
+        <rect
+          id="Rectángulo_991"
+          data-name="Rectángulo 991"
+          width="9.008"
+          height="12"
+          fill="#fff"
+        />
+      </clipPath>
+    </defs>
+    <g id="users-icon" clipPath="url(#clip-path-users-menu)">
+      <path
+        id="Trazado_7088"
+        data-name="Trazado 7088"
+        d="M26.843,6.743a3.4,3.4,0,0,0,3.411-3.372,3.411,3.411,0,0,0-6.822,0,3.4,3.4,0,0,0,3.411,3.372"
+        transform="translate(-22.334)"
+        fill="#fff"
+      />
+      <path
+        id="Trazado_7089"
+        data-name="Trazado 7089"
+        d="M8.639,157.056a5.164,5.164,0,0,0-1.957-1.538,5.439,5.439,0,0,0-1.083-.362,5.2,5.2,0,0,0-1.117-.123c-.075,0-.151,0-.225.005H4.231a4.928,4.928,0,0,0-.549.059,5.236,5.236,0,0,0-3.276,1.92c-.029.039-.059.078-.086.116h0a1.723,1.723,0,0,0-.134,1.784,1.581,1.581,0,0,0,.255.356,1.559,1.559,0,0,0,.337.267,1.614,1.614,0,0,0,.4.167,1.743,1.743,0,0,0,.449.058H7.389a1.748,1.748,0,0,0,.452-.058,1.594,1.594,0,0,0,.4-.169,1.525,1.525,0,0,0,.335-.271,1.548,1.548,0,0,0,.251-.361,1.761,1.761,0,0,0-.191-1.85"
+        transform="translate(0.001 -147.766)"
+        fill="#fff"
+      />
+    </g>
+  </svg>
+);
+
+export default UsersMenuIcon;

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}`);
       },
     },
   ];

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 <http://www.gnu.org/licenses/>.
+
+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 (
+    <Grid container alignItems={"center"}>
+      <Grid item xs={12}>
+        <HelpBox
+          title={title}
+          iconComponent={iconComponent}
+          help={
+            <Box
+              sx={{
+                fontSize: "14px",
+                display: "flex",
+                border: "none",
+                flexFlow: {
+                  xs: "column",
+                  md: "row",
+                },
+                "& a": {
+                  color: (theme) => theme.colors.link,
+                  textDecoration: "underline",
+                },
+              }}
+            >
+              {message}
+            </Box>
+          }
+        />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default FeatureNotAvailable;

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 (
+    <React.Fragment>
+      <PageHeader label={pageHeaderText} />
+      <PageLayout>
+        <FeatureNotAvailable
+          iconComponent={icon}
+          title={title}
+          message={message}
+        />
+      </PageLayout>
+    </React.Fragment>
+  );
+};
+
+export default FeatureNotAvailablePage;

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 = ({
     <Fragment>
       <PageHeader label="Tiers" />
 
-      <BackLink to="/tiers/add" label="Back To Tier Type Selection" />
+      <BackLink to={IAM_PAGES.TIERS_ADD} label="Back To Tier Type Selection" />
 
       <PageLayout>
         <Grid

portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx

@@ -49,6 +49,7 @@ import { AppState } from "../../../../store";
 import DistributedOnly from "../../Common/DistributedOnly/DistributedOnly";
 import {
   CONSOLE_UI_RESOURCE,
+  IAM_PAGES,
   IAM_SCOPES,
 } from "../../../../common/SecureComponent/permissions";
 import SecureComponent from "../../../../common/SecureComponent/SecureComponent";
@@ -142,7 +143,7 @@ const ListTiersConfiguration = ({
   });
 
   const addTier = () => {
-    history.push("/tiers/add");
+    history.push(IAM_PAGES.TIERS_ADD);
   };
 
   const renderTierName = (item: ITierElement) => {

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 (
     <Fragment>
       <PageHeader label="Tier Configuration" />
-      <BackLink to="/tiers" label="Return to Configured Tiers" />
+      <BackLink to={IAM_PAGES.TIERS} label="Return to Configured Tiers" />
 
       <PageLayout>
         <Box

portal-ui/src/screens/Console/Console.tsx

@@ -90,7 +90,7 @@ const LogsSearchMain = React.lazy(
 const GroupsDetails = React.lazy(() => 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;

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) => {
     <PageHeader
       label={
         <Fragment>
-          <Link to={"/groups"} className={classes.breadcrumLink}>
+          <Link to={IAM_PAGES.GROUPS} className={classes.breadcrumLink}>
             Groups
           </Link>
         </Fragment>

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) => {

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 (
     <React.Fragment>
       <GroupDetailsHeader />
-      <BackLink to={"/groups"} label={"Return to Groups"} />
+      <BackLink to={IAM_PAGES.GROUPS} label={"Return to Groups"} />
 
       <PageLayout className={classes.pageContainer}>
         <Grid item xs={12}>
@@ -385,7 +386,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
           closeDeleteModalAndRefresh={(isDelSuccess: boolean) => {
             setDeleteOpen(false);
             if (isDelSuccess) {
-              history.push("/groups");
+              history.push(IAM_PAGES.GROUPS);
             }
           }}
         />

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 (
     <Fragment>
       <PageHeader label="Heal" />
-      <BackLink to="/tools" label="Return to Tools" />
       <PageLayout>
         {!distributedSetup ? (
           <DistributedOnly entity={"Heal"} iconComponent={<HealIcon />} />

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 (
+    <FeatureNotAvailablePage
+      icon={<HealthMenuIcon />}
+      pageHeaderText={"Health"}
+      title={"Health"}
+      message={<div>This feature is currently not available</div>}
+    />
+  );
+};
+
+export default Health;

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 (
     <Fragment>
       <PageHeader label="Diagnostic" />
-      <BackLink to="/tools" label="Return to Tools" />
+      <BackLink to={IAM_PAGES.TOOLS} label="Return to Support" />
 
       <PageLayout>
         <Grid item xs={12} className={classes.boxy}>

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 (
     <Fragment>
       <PageHeader label="Logs" />
-      <BackLink to="/tools" label="Return to Tools" />
       <PageLayout>
         <Grid xs={12}>
           <Grid item xs={12} className={classes.actionsTray}>

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 = ({
       )}
 
       <PageHeader label="Audit Logs" />
-      <BackLink to="/tools" label="Return to Tools" />
       <PageLayout>
         {!logSearchEnabled ? (
           <MissingIntegration

portal-ui/src/screens/Console/Menu/ConsoleMenuList.tsx

@@ -0,0 +1,220 @@
+// 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 <http://www.gnu.org/licenses/>.
+
+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<any>(expandedGroup);
+
+  useEffect(() => {
+    //in case of redirects.
+    setOpenGroup(expandedGroup);
+  }, [expandedGroup]);
+
+  return (
+    <Box
+      className={`${stateClsName} wrapper`}
+      sx={{
+        display: "flex",
+        flexFlow: "column",
+        justifyContent: "space-between",
+        height: "100%",
+        flex: 1,
+        marginTop: "35px",
+        paddingRight: "8px",
+
+        "&.wide": {
+          marginLeft: "30px",
+        },
+
+        "&.mini": {
+          marginLeft: "10px",
+          marginTop: "30px",
+          xs: {
+            marginTop: "30px",
+          },
+        },
+      }}
+    >
+      <List
+        sx={{
+          flex: 1,
+          paddingTop: 0,
+
+          "&.mini": {
+            padding: 0,
+            display: "flex",
+            alignItems: "center",
+            flexFlow: "column",
+
+            "& .main-menu-item": {
+              marginBottom: "20px",
+            },
+          },
+        }}
+        className={`${stateClsName} group-wrapper main-list`}
+      >
+        <React.Fragment>
+          {(menuItems || []).map((menuGroup: any) => {
+            if (menuGroup) {
+              return (
+                <MenuItem
+                  stateClsName={stateClsName}
+                  page={menuGroup}
+                  key={menuGroup.id}
+                  onExpand={setOpenGroup}
+                  expandedValue={openGroup}
+                  pathValue={pathname}
+                />
+              );
+            }
+            return null;
+          })}
+        </React.Fragment>
+      </List>
+      {/* List of Bottom anchored menus */}
+      <List
+        sx={{
+          paddingTop: 0,
+          "&.mini": {
+            padding: 0,
+            margin: "auto",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexFlow: "column",
+          },
+        }}
+        className={`${stateClsName} group-wrapper bottom-list`}
+      >
+        <ListItem
+          key={IAM_PAGES.SETTINGS}
+          button
+          to={IAM_PAGES.SETTINGS}
+          disableRipple
+          component={NavLink}
+          className={`$ ${stateClsName} bottom-menu-item`}
+          sx={{
+            ...menuItemContainerStyles,
+            ...menuItemMiniStyles,
+            marginBottom: "3px",
+          }}
+        >
+          <ListItemIcon
+            sx={{
+              ...menuItemIconStyles,
+            }}
+          >
+            <SettingsIcon />
+          </ListItemIcon>
+          <ListItemText
+            primary="Settings"
+            sx={{
+              ...menuItemTextStyles,
+            }}
+            className={stateClsName}
+          />
+        </ListItem>
+
+        <ListItem
+          button
+          onClick={(
+            e:
+              | React.MouseEvent<HTMLLIElement>
+              | React.MouseEvent<HTMLAnchorElement>
+              | React.MouseEvent<HTMLDivElement>
+          ) => {
+            e.preventDefault();
+            window.open("https://docs.min.io/?ref=con", "_blank");
+          }}
+          disableRipple
+          className={`$ ${stateClsName} bottom-menu-item`}
+          sx={{
+            ...menuItemContainerStyles,
+            ...menuItemMiniStyles,
+            marginBottom: "3px",
+          }}
+        >
+          <ListItemIcon sx={{ ...menuItemIconStyles }}>
+            <DocumentationIcon />
+          </ListItemIcon>
+          <ListItemText
+            primary="Documentation"
+            sx={{ ...menuItemTextStyles }}
+            className={stateClsName}
+          />
+        </ListItem>
+
+        <ListItem
+          button
+          onClick={onLogoutClick}
+          disableRipple
+          sx={{
+            ...menuItemContainerStyles,
+            ...menuItemMiniStyles,
+            marginBottom: "3px",
+          }}
+          className={`$ ${stateClsName} bottom-menu-item`}
+        >
+          <ListItemIcon
+            sx={{
+              ...menuItemIconStyles,
+            }}
+          >
+            <LogoutIcon />
+          </ListItemIcon>
+          <ListItemText
+            primary="Logout"
+            sx={{ ...menuItemTextStyles }}
+            className={stateClsName}
+          />
+        </ListItem>
+      </List>
+    </Box>
+  );
+};
+export default ConsoleMenuList;

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<HTMLLIElement>
-          | React.MouseEvent<HTMLAnchorElement>
-          | React.MouseEvent<HTMLDivElement>
-      ) => {
-        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 (
     <Drawer
       variant="permanent"
@@ -330,8 +393,8 @@ const Menu = ({
         isOpen={sidebarOpen}
       />
 
-      <MenuList
-        menuItems={allowedItems}
+      <ConsoleMenuList
+        menuItems={operatorMode ? operatorMenus : consoleMenus}
         isOpen={sidebarOpen}
         onLogoutClick={logout}
       />

portal-ui/src/screens/Console/Menu/MenuItem.tsx

@@ -15,47 +15,204 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 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 (
-    <ListItem
-      key={page.to}
-      button
-      onClick={page.onClick}
-      component={page.component}
-      to={page.to}
-      disableRipple
-      sx={{ ...menuItemContainerStyles }}
-    >
-      {page.icon && (
-        <Tooltip title={`${page.name}`} placement="right">
-          <ListItemIcon sx={{ ...menuItemIconStyles }}>
-            <Suspense fallback={<div>...</div>}>
-              <page.icon />
-            </Suspense>
-          </ListItemIcon>
-        </Tooltip>
-      )}
-      {page.name && (
-        <ListItemText
-          className={stateClsName}
-          sx={{ ...menuItemTextStyles }}
-          primary={page.name}
-        />
-      )}
-    </ListItem>
+    <React.Fragment>
+      <ListItem
+        key={page.to}
+        button
+        onClick={onClickHandler}
+        component={page.component}
+        to={page.to}
+        className={`${activeClsName} ${stateClsName} main-menu-item `}
+        disableRipple
+        sx={{
+          ...menuItemContainerStyles,
+          marginTop: "5px",
+          ...menuItemMiniStyles,
+
+          "& .expanded-icon": {
+            border: "1px solid #35393c",
+          },
+        }}
+      >
+        {page.icon && (
+          <Tooltip title={`${page.name}`} placement="right">
+            <ListItemIcon
+              sx={{ ...menuItemIconStyles }}
+              className={`${
+                isActiveGroup && hasChildren ? "expanded-icon" : ""
+              }`}
+            >
+              <Suspense fallback={<div>...</div>}>
+                <page.icon />
+              </Suspense>
+            </ListItemIcon>
+          </Tooltip>
+        )}
+        {page.name && (
+          <ListItemText
+            className={stateClsName}
+            sx={{ ...menuItemTextStyles }}
+            primary={page.name}
+          />
+        )}
+
+        {hasChildren ? (
+          isActiveGroup ? (
+            <MenuCollapsedIcon height={15} width={15} className="group-icon" />
+          ) : (
+            <MenuExpandedIcon height={15} width={15} className="group-icon" />
+          )
+        ) : null}
+      </ListItem>
+
+      {hasChildren ? (
+        <Collapse key={page.id} in={isActiveGroup} timeout="auto" unmountOnExit>
+          <List
+            component="div"
+            disablePadding
+            key={page.id}
+            sx={{
+              marginLeft: "15px",
+              "&.mini": {
+                marginLeft: "0px",
+              },
+            }}
+            className={`${stateClsName}`}
+          >
+            {childrenMenuList.map((item: any) => {
+              return (
+                <ListItem
+                  key={item.to}
+                  button
+                  component={item.component}
+                  to={item.to}
+                  disableRipple
+                  sx={{
+                    paddingLeft: "8px",
+                    paddingRight: "5px",
+                    paddingBottom: "8px",
+                    "&.active div:nth-of-type(1)": {
+                      border: "none",
+                    },
+                    "& .menu-icon": {
+                      padding: "5px",
+                      maxWidth: "28px",
+                      minWidth: "28px",
+                      height: "28px",
+                      background: "none",
+                    },
+                    "&:hover, &:focus": {
+                      background: "none",
+
+                      "& .menu-icon svg": {
+                        fill: "#c7c3c3",
+                      },
+                    },
+                  }}
+                >
+                  {item.icon && (
+                    <Tooltip title={`${item.name}`} placement="right">
+                      <ListItemIcon
+                        sx={{
+                          background: "#00274D",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+
+                          "& svg": {
+                            fill: "#fff",
+                            minWidth: "12px",
+                            maxWidth: "12px",
+                          },
+                        }}
+                        className="menu-icon"
+                      >
+                        <Suspense fallback={<div>...</div>}>
+                          <item.icon />
+                        </Suspense>
+                      </ListItemIcon>
+                    </Tooltip>
+                  )}
+                  {item.name && (
+                    <ListItemText
+                      className={stateClsName}
+                      sx={{ ...menuItemTextStyles, marginLeft: "16px" }}
+                      primary={item.name}
+                    />
+                  )}
+                </ListItem>
+              );
+            })}
+          </List>
+        </Collapse>
+      ) : null}
+    </React.Fragment>
   );
 };
 

portal-ui/src/screens/Console/Menu/MenuList.tsx

@@ -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 <http://www.gnu.org/licenses/>.
-
-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 (
-    <Box
-      className={`${stateClsName}`}
-      sx={{
-        display: "flex",
-        flexFlow: "column",
-        justifyContent: "space-between",
-        height: "100%",
-        flex: 1,
-        marginLeft: "26px",
-        marginTop: "35px",
-        paddingRight: "8px",
-
-        "&.mini": {
-          marginLeft: "18px",
-          marginTop: "10px",
-          xs: {
-            marginTop: "30px",
-          },
-        },
-      }}
-    >
-      <List
-        sx={{
-          flex: 1,
-          paddingTop: 0,
-        }}
-      >
-        <React.Fragment>
-          {(menuItems || []).map((page: IMenuItem) => {
-            switch (page.type) {
-              case "item": {
-                return (
-                  <MenuItem
-                    stateClsName={stateClsName}
-                    page={page}
-                    key={page.to}
-                  />
-                );
-              }
-              default:
-                return null;
-            }
-          })}
-        </React.Fragment>
-      </List>
-      <List
-        sx={{
-          paddingTop: 0,
-        }}
-      >
-        <ListItem
-          button
-          onClick={onLogoutClick}
-          disableRipple
-          sx={{ ...menuItemContainerStyles }}
-        >
-          <ListItemIcon sx={{ ...menuItemIconStyles }}>
-            <LogoutIcon />
-          </ListItemIcon>
-          <ListItemText
-            primary="Logout"
-            sx={{ ...menuItemTextStyles }}
-            className={stateClsName}
-          />
-        </ListItem>
-      </List>
-    </Box>
-  );
-};
-
-export default MenuList;

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",
+  },
+};

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);

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={<AddIcon />}
               onClick={() => {
-                history.push("/notification-endpoints/add");
+                history.push(IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD);
               }}
             />
           </div>
@@ -246,7 +247,7 @@ const ListNotificationEndpoints = ({
                         To get started,{" "}
                         <AButton
                           onClick={() => {
-                            history.push("/notification-endpoints/add");
+                            history.push(IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD);
                           }}
                         >
                           Add a Notification Target

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}`
                   );
                 }}
               >

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 = [

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 (
     <Router history={history}>
       <Switch>
-        <Route path="/policies/" exact={true} component={ListPolicies} />
-        <Route path="/policies/*" component={PolicyDetails} />
+        <Route
+          path={IAM_PAGES.POLICIES}
+          exact={true}
+          component={ListPolicies}
+        />
+        <Route path={`"${IAM_PAGES.POLICIES}/*"`} component={PolicyDetails} />
         <Route path="/" component={ListPolicies} />
         <Route component={NotFoundPage} />
       </Switch>

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 = ({
       <PageHeader
         label={
           <Fragment>
-            <Link to={"/policies"} className={classes.breadcrumLink}>
+            <Link to={IAM_PAGES.POLICIES} className={classes.breadcrumLink}>
               Policy
             </Link>
           </Fragment>
         }
       />
-      <BackLink to={"/policies"} label={"Return to Policies"} />
+      <BackLink to={IAM_PAGES.POLICIES} label={"Return to Policies"} />
       <PageLayout className={classes.pageContainer}>
         <Grid item xs={12}>
           <ScreenTitle

portal-ui/src/screens/Console/Speedtest/Speedtest.tsx

@@ -36,6 +36,7 @@ import { AppState } from "../../../store";
 import { SpeedtestIcon } from "../../../icons";
 import {
   CONSOLE_UI_RESOURCE,
+  IAM_PAGES,
   IAM_SCOPES,
 } from "../../../common/SecureComponent/permissions";
 import STResults from "./STResults";
@@ -195,7 +196,7 @@ const Speedtest = ({ classes, distributedSetup }: ISpeedtest) => {
   return (
     <Fragment>
       <PageHeader label="Speedtest" />
-      <BackLink to="/tools" label="Return to Tools" />
+      <BackLink to={IAM_PAGES.TOOLS} label="Return to Support" />
       <PageLayout>
         {!distributedSetup ? (
           <DistributedOnly

portal-ui/src/screens/Console/Tools/Tools.tsx

@@ -19,12 +19,71 @@ import { Route, Router, Switch } from "react-router-dom";
 import history from "../../../history";
 import NotFoundPage from "../../NotFoundPage";
 import ToolsList from "./ToolsPanel/ToolsList";
+import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
+import FeatureNotAvailablePage from "../Common/Components/FeatureNotAvailablePage";
+import { SupportMenuIcon } from "../../../icons/SidebarMenus/MenuIcons";
 
 const Tools = () => {
   return (
     <Router history={history}>
       <Switch>
-        <Route path="/tools" exact component={ToolsList} />
+        <Route path={IAM_PAGES.TOOLS} exact component={ToolsList} />
+        <Route
+          path={IAM_PAGES.REGISTER_SUPPORT}
+          exact
+          render={() => {
+            return (
+              <FeatureNotAvailablePage
+                icon={<SupportMenuIcon />}
+                pageHeaderText={"Register"}
+                title={"Product registration"}
+                message={<div>This feature is currently not available.</div>}
+              />
+            );
+          }}
+        />
+        <Route
+          path={IAM_PAGES.CALL_HOME}
+          exact
+          render={() => {
+            return (
+              <FeatureNotAvailablePage
+                icon={<SupportMenuIcon />}
+                pageHeaderText={"Support"}
+                title={"Call Home"}
+                message={<div>This feature is currently not available.</div>}
+              />
+            );
+          }}
+        />
+        <Route
+          path={IAM_PAGES.INSPECT}
+          exact
+          render={() => {
+            return (
+              <FeatureNotAvailablePage
+                icon={<SupportMenuIcon />}
+                pageHeaderText={"Support"}
+                title={"Inspect"}
+                message={<div>This feature is currently not available.</div>}
+              />
+            );
+          }}
+        />
+        <Route
+          path={IAM_PAGES.PROFILE}
+          exact
+          render={() => {
+            return (
+              <FeatureNotAvailablePage
+                icon={<SupportMenuIcon />}
+                pageHeaderText={"Support"}
+                title={"Profile"}
+                message={<div>This feature is currently not available.</div>}
+              />
+            );
+          }}
+        />
         <Route component={NotFoundPage} />
       </Switch>
     </Router>

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 (
     <Fragment>
       <PageHeader label={"Trace"} />
-      <BackLink to="/tools" label="Return to Tools" />
       <PageLayout>
         <Grid xs={12} className={classes.formBox}>
           <Grid item xs={12} className={classes.actionsTray}>

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);

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 => {

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)}
         />
       )}
-      <BackLink label={"Return to Users"} to={"/users"} />
+      <BackLink label={"Return to Users"} to={IAM_PAGES.USERS} />
       <PageLayout className={classes.pageContainer}>
         <Grid item xs={12}>
           <ScreenTitle
@@ -354,7 +355,9 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
                         {
                           type: "view",
                           onClick: (policy: IPolicyItem) => {
-                            history.push(`/policies/${policy.policy}`);
+                            history.push(
+                              `${IAM_PAGES.POLICIES}/${policy.policy}`
+                            );
                           },
                         },
                       ]}

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 (
     <Router history={history}>
       <Switch>
-        <Route path="/users/:userName+" component={UserDetails} />
-        <Route path="/" component={ListUsers} />
+        <Route path={IAM_PAGES.USERS_VIEW} component={UserDetails} />
+        <Route path={IAM_PAGES.USERS} component={ListUsers} />
         <Route component={NotFoundPage} />
       </Switch>
     </Router>

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 (
     <React.Fragment>
       <PageHeader label="Watch" />
-      <BackLink to="/tools" label="Return to Tools" />
+      <BackLink to={IAM_PAGES.TOOLS} label="Return to Support" />
       <PageLayout>
         <Grid item xs={12}>
           <Grid item xs={12} className={classes.actionsTray}>

portal-ui/src/screens/NotFoundPage.tsx

@@ -15,25 +15,47 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 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 (
-    <Container component="main">
-      <CssBaseline />
-      <div>
-        <Typography variant="h1" component="h1">
-          404 Not Found
-        </Typography>
-      </div>
-      <Box mt={5}>
-        <Copyright />
+    <PageLayout>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          textAlign: "center",
+          margin: "auto",
+          flexFlow: "column",
+        }}
+      >
+        <Box
+          sx={{
+            fontSize: "110%",
+            margin: "0 0 0.25rem",
+            color: "#909090",
+          }}
+        >
+          404 Error
+        </Box>
+        <Box
+          sx={{
+            fontStyle: "normal",
+            fontSize: "clamp(2rem,calc(2rem + 1.2vw),3rem)",
+            fontWeight: 700,
+          }}
+        >
+          Sorry, the page could not be found.
+        </Box>
+        <Box mt={5}>
+          <Copyright />
+        </Box>
       </Box>
-    </Container>
+    </PageLayout>
   );
 };