feat(routes): allow setting a basepath via an environment variable (#…

…1534)

src/app/AppLayout/AppLayout.tsx

@@ -33,7 +33,7 @@ import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { useTheme } from '@app/utils/hooks/useTheme';
 import { saveToLocalStorage } from '@app/utils/LocalStorage';
-import { cleanDataId, isAssetNew, openTabForUrl, portalRoot } from '@app/utils/utils';
+import { cleanDataId, isAssetNew, openTabForUrl, portalRoot, toPath } from '@app/utils/utils';
 import { useCryostatTranslation } from '@i18n/i18nextUtil';
 import {
   Alert,
@@ -272,7 +272,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
     if (location.pathname === '/settings') {
       selectTab(SettingTab.GENERAL);
     } else {
-      navigate(`/settings?${new URLSearchParams({ tab: tabAsParam(SettingTab.GENERAL) })}`);
+      navigate(toPath(`/settings?${new URLSearchParams({ tab: tabAsParam(SettingTab.GENERAL) })}`));
     }
   }, [location, navigate]);
 

src/app/AppLayout/SslErrorModal.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { portalRoot } from '@app/utils/utils';
+import { portalRoot, toPath } from '@app/utils/utils';
 import { Button, Modal, ModalVariant, Text } from '@patternfly/react-core';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
@@ -27,7 +27,7 @@ export const SslErrorModal: React.FC<SslErrorModalProps> = ({ visible, onDismiss
   const navigate = useNavigate();
 
   const handleClick = React.useCallback(() => {
-    navigate('/security');
+    navigate(toPath('/security'));
     onDismiss();
   }, [navigate, onDismiss]);
 

src/app/CreateRecording/CreateRecording.tsx

@@ -15,6 +15,7 @@
  */
 
 import { TargetView } from '@app/TargetView/TargetView';
+import { toPath } from '@app/utils/utils';
 import { Card, CardBody, Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 import * as React from 'react';
 import { CustomRecordingForm } from './CustomRecordingForm';
@@ -29,7 +30,7 @@ export const CreateRecording: React.FC = () => {
   );
 
   return (
-    <TargetView pageTitle="Create Recording" breadcrumbs={[{ title: 'Recordings', path: '/recordings' }]}>
+    <TargetView pageTitle="Create Recording" breadcrumbs={[{ title: 'Recordings', path: toPath('/recordings') }]}>
       <Card>
         <CardBody>
           <Tabs activeKey={activeTab} onSelect={onTabSelect}>

src/app/Dashboard/Charts/jfr/JFRMetricsChartCard.tsx

@@ -25,6 +25,7 @@ import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { useTheme } from '@app/utils/hooks/useTheme';
+import { toPath } from '@app/utils/utils';
 import { useCryostatTranslation } from '@i18n/i18nextUtil';
 import {
   Bullseye,
@@ -213,7 +214,7 @@ export const JFRMetricsChartCard: DashboardCardFC<JFRMetricsChartCardProps> = (p
   }, [props.actions, props.chartKind, props.duration, props.period, t, controllerState, actions]);
 
   const handleCreateRecording = React.useCallback(() => {
-    navigate('/recordings/create', {
+    navigate(toPath('/recordings/create'), {
       state: {
         name: RECORDING_NAME,
         template: {

src/app/Dashboard/Dashboard.tsx

@@ -26,6 +26,7 @@ import { FeatureLevel } from '@app/Shared/Services/service.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { TargetView } from '@app/TargetView/TargetView';
 import { getFromLocalStorage } from '@app/utils/LocalStorage';
+import { toPath } from '@app/utils/utils';
 import { useCryostatTranslation } from '@i18n/i18nextUtil';
 import { Grid, GridItem } from '@patternfly/react-core';
 import * as React from 'react';
@@ -130,7 +131,7 @@ export const Dashboard: React.FC<DashboardComponentProps> = (_) => {
                       key={`${cfg.name}-actions`}
                       onRemove={() => handleRemove(idx)}
                       onResetSize={() => handleResetSize(idx)}
-                      onView={() => navigate(`/d-solo?layout=${currLayout.name}&cardId=${cfg.id}`)}
+                      onView={() => navigate(toPath(`/d-solo?layout=${currLayout.name}&cardId=${cfg.id}`))}
                     />,
                   ],
                 })

src/app/Dashboard/DashboardSolo.tsx

@@ -15,6 +15,7 @@
  */
 import { RootState } from '@app/Shared/Redux/ReduxStore';
 import { TargetView } from '@app/TargetView/TargetView';
+import { toPath } from '@app/utils/utils';
 import {
   Bullseye,
   Button,
@@ -69,7 +70,7 @@ const DashboardSolo: React.FC<DashboardSoloProps> = () => {
               Provide valid <code>layout</code> and <code>cardId</code> query parameters and try again.
             </EmptyStateBody>
             <EmptyStateFooter>
-              <Button variant="primary" onClick={() => navigate('/')}>
+              <Button variant="primary" onClick={() => navigate(toPath('/'))}>
                 Back to Dashboard
               </Button>
             </EmptyStateFooter>
@@ -80,7 +81,7 @@ const DashboardSolo: React.FC<DashboardSoloProps> = () => {
       const { name, span, props } = cardConfig;
       return (
         // Use default chart controller
-        <TargetView pageTitle={cardConfig.id} breadcrumbs={[{ path: '/', title: 'Dashboard' }]}>
+        <TargetView pageTitle={cardConfig.id} breadcrumbs={[{ path: toPath('/'), title: 'Dashboard' }]}>
           <div data-full-height style={{ height: '100%' }}>
             {React.createElement(getCardDescriptorByName(name).component, {
               span: span,

src/app/Events/EventTemplates.tsx

@@ -25,7 +25,7 @@ import { LoadingProps } from '@app/Shared/Components/types';
 import { EventTemplate, NotificationCategory, Target } from '@app/Shared/Services/api.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
-import { portalRoot, sortResources, TableColumn } from '@app/utils/utils';
+import { portalRoot, sortResources, TableColumn, toPath } from '@app/utils/utils';
 import { useCryostatTranslation } from '@i18n/i18nextUtil';
 import {
   ActionGroup,
@@ -255,7 +255,7 @@ export const EventTemplates: React.FC<EventTemplatesProps> = () => {
         {
           title: 'Create Recording...',
           onClick: () =>
-            navigate('/recordings/create', {
+            navigate(toPath('/recordings/create'), {
               state: { template: { name: t.name, type: t.type } } as Partial<CustomRecordingFormData>,
             }),
         },

src/app/Rules/CreateRule.tsx

@@ -27,7 +27,7 @@ import { SearchExprServiceContext } from '@app/Shared/Services/service.utils';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import { useMatchExpressionSvc } from '@app/utils/hooks/useMatchExpressionSvc';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
-import { portalRoot } from '@app/utils/utils';
+import { portalRoot, toPath } from '@app/utils/utils';
 import { useCryostatTranslation } from '@i18n/i18nextUtil';
 import {
   ActionGroup,
@@ -656,7 +656,7 @@ export const CreateRule: React.FC = () => {
     () => [
       {
         title: t('AUTOMATED_RULES'),
-        path: '/rules',
+        path: toPath('/rules'),
       },
     ],
     [t],

src/app/Topology/Actions/CreateTarget.tsx

@@ -22,7 +22,7 @@ import { Target } from '@app/Shared/Services/api.types';
 import { ServiceContext } from '@app/Shared/Services/Services';
 import '@app/Topology/styles/base.css';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
-import { getAnnotation, portalRoot } from '@app/utils/utils';
+import { getAnnotation, portalRoot, toPath } from '@app/utils/utils';
 import { useCryostatTranslation } from '@i18n/i18nextUtil';
 import {
   Accordion,
@@ -286,7 +286,7 @@ export const CreateTarget: React.FC<CreateTargetProps> = ({ prefilled }) => {
   }, [validConnectUrl, example]);
 
   return (
-    <BreadcrumbPage pageTitle={'Create Custom Target'} breadcrumbs={[{ title: 'Topology', path: '/topology' }]}>
+    <BreadcrumbPage pageTitle={'Create Custom Target'} breadcrumbs={[{ title: 'Topology', path: toPath('/topology') }]}>
       <Card isFullHeight>
         <CardTitle>Create Custom Target</CardTitle>
         <CardBody>

src/app/Topology/Actions/quicksearches/custom-target.tsx

@@ -15,6 +15,7 @@
  */
 import openjdkSvg from '@app/assets/openjdk.svg';
 import { FeatureLevel } from '@app/Shared/Services/service.types';
+import { toPath } from '@app/utils/utils';
 import { QuickSearchItem } from '../types';
 
 const _CustomTargetSearchItem: QuickSearchItem = {
@@ -31,7 +32,7 @@ const _CustomTargetSearchItem: QuickSearchItem = {
   descriptionFull: 'Provide a JMX Service URL along with necessary credentials to point to a Target JVM.',
   featureLevel: FeatureLevel.PRODUCTION,
   createAction: ({ navigate }) => {
-    navigate('/topology/create-custom-target');
+    navigate(toPath('/topology/create-custom-target'));
   },
 };
 

src/app/Topology/Actions/utils.tsx

@@ -24,6 +24,7 @@ import {
 } from '@app/Shared/Services/api.types';
 import { getAllLeaves, isTargetNode } from '@app/Shared/Services/api.utils';
 import { NotificationService } from '@app/Shared/Services/Notifications.service';
+import { toPath } from '@app/utils/utils';
 import { ContextMenuSeparator } from '@patternfly/react-topology';
 import { merge, filter, map, debounceTime } from 'rxjs';
 import { getJvmIdFromEvent } from '../Entity/utils';
@@ -68,7 +69,7 @@ export const nodeActions: NodeAction[] = [
       const targetNode: TargetNode = element.getData();
 
       services.target.setTarget(targetNode.target);
-      navigate('/');
+      navigate(toPath('/'));
     },
     title: 'View Dashboard',
   },
@@ -78,7 +79,7 @@ export const nodeActions: NodeAction[] = [
       const targetNode: TargetNode = element.getData();
 
       services.target.setTarget(targetNode.target);
-      navigate('/recordings');
+      navigate(toPath('/recordings'));
     },
     title: 'View Recordings',
   },
@@ -89,7 +90,7 @@ export const nodeActions: NodeAction[] = [
       const targetNode: TargetNode = element.getData();
 
       services.target.setTarget(targetNode.target);
-      navigate('/recordings/create');
+      navigate(toPath('/recordings/create'));
     },
     title: 'Create Recordings',
   },
@@ -99,7 +100,7 @@ export const nodeActions: NodeAction[] = [
       const targetNode: TargetNode = element.getData();
 
       services.target.setTarget(targetNode.target);
-      navigate('/rules/create');
+      navigate(toPath('/rules/create'));
     },
     title: 'Create Automated Rules',
   },

src/app/routes.tsx

@@ -35,7 +35,7 @@ import CreateTarget from './Topology/Actions/CreateTarget';
 import Topology from './Topology/Topology';
 import { useDocumentTitle } from './utils/hooks/useDocumentTitle';
 import { useFeatureLevel } from './utils/hooks/useFeatureLevel';
-import { accessibleRouteChangeHandler } from './utils/utils';
+import { accessibleRouteChangeHandler, BASEPATH, toPath } from './utils/utils';
 
 let routeFocusTimer: number;
 const OVERVIEW = 'Overview';
@@ -57,126 +57,117 @@ const routes: IAppRoute[] = [
   {
     component: About,
     label: 'About',
-    path: '/about',
+    path: toPath('/about'),
     title: 'About',
     description: 'Get information, help, or support for Cryostat.',
     navGroup: OVERVIEW,
   },
   {
     component: Dashboard,
-
     label: 'Dashboard',
-    path: '/',
+    path: toPath('/'),
     title: 'Dashboard',
     navGroup: OVERVIEW,
     children: [
       {
         component: DashboardSolo,
 
-        path: '/d-solo',
+        path: toPath('/d-solo'),
         title: 'Dashboard',
       },
     ],
   },
   {
     component: QuickStarts,
-
     label: 'Quick starts',
-    path: '/quickstarts',
+    path: toPath('/quickstarts'),
     title: 'Quick starts',
     description: 'Get started with Cryostat.',
   },
   {
     component: Topology,
-
     label: 'Topology',
-    path: '/topology',
+    path: toPath('/topology'),
     title: 'Topology',
     navGroup: OVERVIEW,
     children: [
       {
         component: CreateTarget,
-
-        path: '/topology/create-custom-target',
+        path: toPath('/topology/create-custom-target'),
         title: 'Create Custom Target',
       },
     ],
   },
   {
     component: RulesTable,
-
     label: 'Automated Rules',
-    path: '/rules',
+    path: toPath('/rules'),
     title: 'Automated Rules',
     description:
       'Create Recordings on multiple target JVMs at once using Automated Rules consisting of a name, Match Expression, template, archival period, and more.',
     navGroup: CONSOLE,
     children: [
       {
         component: CreateRule,
-
-        path: '/rules/create',
+        path: toPath('/rules/create'),
         title: 'Create Automated Rule',
       },
     ],
   },
   {
     component: Recordings,
-
     label: 'Recordings',
-    path: '/recordings',
+    path: toPath('/recordings'),
     title: 'Recordings',
     description: 'Create, view and archive JFR Recordings on single target JVMs.',
     navGroup: CONSOLE,
     children: [
       {
         component: CreateRecording,
-
-        path: '/recordings/create',
+        path: toPath('/recordings/create'),
         title: 'Create Recording',
       },
     ],
   },
   {
     component: Archives,
-
     label: 'Archives',
-    path: '/archives',
+    path: toPath('/archives'),
     title: 'Archives',
     description:
       'View Archived Recordings across all target JVMs, as well as upload Recordings directly to the archive.',
     navGroup: CONSOLE,
   },
   {
     component: Events,
-
     label: 'Events',
-    path: '/events',
+    path: toPath('/events'),
     title: 'Events',
     description: 'View available JFR Event Templates and types for target JVMs, as well as upload custom templates.',
     navGroup: CONSOLE,
   },
   {
     component: SecurityPanel,
-
     label: 'Security',
-    path: '/security',
+    path: toPath('/security'),
     title: 'Security',
     description: 'Upload SSL/TLS certificates for Cryostat to trust when communicating with target applications.',
     navGroup: CONSOLE,
   },
   {
     component: Settings,
-
-    path: '/settings',
+    path: toPath('/settings'),
     title: 'Settings',
     description: 'View or modify Cryostat web-client application settings.',
   },
 ];
 
 const flatten = (routes: IAppRoute[]): IAppRoute[] => {
   const ret: IAppRoute[] = [];
-  for (const r of routes) {
+  for (var r of routes) {
+    if (BASEPATH) {
+      r.path = `/${BASEPATH}/${r.path}`;
+    }
     ret.push(r);
     if (r.children) {
       ret.push(...flatten(r.children));