diff --git a/frontend/src/components/pages/admin/AdminPage.tsx b/frontend/src/components/pages/admin/AdminPage.tsx index 9e5af69bd..1847d602a 100644 --- a/frontend/src/components/pages/admin/AdminPage.tsx +++ b/frontend/src/components/pages/admin/AdminPage.tsx @@ -24,11 +24,19 @@ import { Alert, AlertIcon, Tabs } from '@redpanda-data/ui'; import { AdminDebugBundle } from './Admin.DebugBundle'; import { AdminLicenses } from './Admin.Licenses'; import { Features } from '../../../state/supportedFeatures'; +import { makeObservable, observable } from 'mobx'; +export type AdminPageTab = 'users' | 'roles' | 'permissions-debug' | 'debug-bundle' | 'licenses' @observer -export default class AdminPage extends PageComponent { +export default class AdminPage extends PageComponent<{ tab: AdminPageTab }> { + @observable x = ''; + + constructor(p: any) { + super(p); + makeObservable(this); + } initPage(p: PageInitHelper): void { p.title = 'Admin'; @@ -36,7 +44,6 @@ export default class AdminPage extends PageComponent { this.refreshData(true); appGlobal.onRefresh = () => this.refreshData(true); - } refreshData(force: boolean) { @@ -48,7 +55,7 @@ export default class AdminPage extends PageComponent { if (api.adminInfo === undefined) return DefaultSkeleton; const hasAdminPermissions = api.adminInfo !== null; - const items = [ + const tabs = [ { key: 'users', name: 'Users', @@ -60,30 +67,43 @@ export default class AdminPage extends PageComponent { component: }, { - key: 'permissionsDebug', + key: 'permissions-debug', name: 'Permissions debug', component:
{toJson(api.adminInfo, 4)}
}, ] if(api.userData?.canViewDebugBundle && Features.debugBundle) { - items.push({ - key: 'debugBundle', + tabs.push({ + key: 'debug-bundle', name: 'Debug bundle', component: }); } - items.push({ + tabs.push({ key: 'licenses', name: 'License details', component: }) + const activeTab = tabs.findIndex(x => x.key === this.props.tab); + if (activeTab === -1) { + // No tab selected, default to users + appGlobal.history.replace('/admin/users') + } + return
{hasAdminPermissions ? - + = 0 ? activeTab : 0} + onChange={(_, key) => { + appGlobal.history.push(`/admin/${key}`); + }} + /> :
diff --git a/frontend/src/components/routes.tsx b/frontend/src/components/routes.tsx index 3226fe020..cc90a6cd4 100644 --- a/frontend/src/components/routes.tsx +++ b/frontend/src/components/routes.tsx @@ -333,9 +333,10 @@ export const APP_ROUTES: IRouteEntry[] = [ MakeRoute<{}>('/admin/debug-bundle/progress/:jobId', AdminPageDebugBundleProgress, 'Debug Bundle Progress'), - MakeRoute<{}>('/admin', AdminPage, 'Admin', CogIcon, false, + MakeRoute<{}>('/admin', AdminPage, 'Admin', CogIcon, true, routeVisibility(() => api.userData?.canViewConsoleUsers ?? false) ), + MakeRoute<{}>('/admin/:tab?', AdminPage, 'Admin'), ].filterNull();