paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 30 Packages Projects Releases Wiki Activity

Merge branch 'master' into devtools-bui-config

Browse Source
This commit is contained in:
Aditya Kumar
2026-04-01 08:30:32 +05:30
parent 9e88f0ce40 5407b5dd0a
commit 4e265fec15
2246 changed files with 88302 additions and 19645 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/devtools/CHANGELOG.md
+55
View File
@@ -1,5 +1,60 @@
# @backstage/plugin-devtools
## 0.1.38-next.1
### Patch Changes
- Updated dependencies
- @backstage/ui@0.14.0-next.1
- @backstage/frontend-plugin-api@0.16.0-next.1
- @backstage/core-compat-api@0.5.10-next.1
- @backstage/core-components@0.18.9-next.0
- @backstage/core-plugin-api@1.12.5-next.1
## 0.1.38-next.0
### Patch Changes
- Updated dependencies
- @backstage/ui@0.14.0-next.0
- @backstage/core-components@0.18.9-next.0
- @backstage/frontend-plugin-api@0.15.2-next.0
- @backstage/core-compat-api@0.5.10-next.0
- @backstage/core-plugin-api@1.12.5-next.0
- @backstage/errors@1.2.7
- @backstage/plugin-devtools-common@0.1.23
- @backstage/plugin-permission-react@0.4.42-next.0
## 0.1.37
### Patch Changes
- afabb37: Fixed URL encoding of task IDs for the trigger feature (tasks that contained a "/" in their ID were not triggered)
- f80195e: Added `cancelScheduledTask` to the DevTools API and a cancel button to the scheduled tasks UI.
- 538c985: Updated installation documentation to use feature discovery as the default.
- aa29b50: New frontend system pages now use the default plugin header together with `HeaderPage` instead of the legacy core page header pattern.
- 3f36ce1: Updated alpha plugin icons to follow the new frontend icon sizing rules when rendered in plugin and navigation surfaces.
- f4a1edd: Removed the deprecated `DevToolsContentBlueprint` from `@backstage/plugin-devtools-react`. DevTools pages in the new frontend system now use `SubPageBlueprint` tabs instead, and the catalog unprocessed entities alpha extension now attaches to DevTools as a subpage.
- Updated dependencies
- @backstage/ui@0.13.0
- @backstage/core-compat-api@0.5.9
- @backstage/core-plugin-api@1.12.4
- @backstage/core-components@0.18.8
- @backstage/frontend-plugin-api@0.15.0
- @backstage/plugin-devtools-common@0.1.23
- @backstage/plugin-permission-react@0.4.41
## 0.1.37-next.2
### Patch Changes
- Updated dependencies
- @backstage/core-compat-api@0.5.9-next.2
- @backstage/frontend-plugin-api@0.15.0-next.1
- @backstage/core-plugin-api@1.12.4-next.1
- @backstage/core-components@0.18.8-next.1
- @backstage/plugin-devtools-react@0.1.2-next.1
## 0.1.37-next.1
### Patch Changes
plugins/devtools/README.md
+39 -37
View File
@@ -66,42 +66,14 @@ You need to setup the [DevTools backend plugin](../devtools-backend/README.md) b
### Frontend
To setup the DevTools frontend you'll need to do the following steps:
Install the `@backstage/plugin-devtools` package in your frontend app:
1. First we need to add the `@backstage/plugin-devtools` package to your frontend app:
```sh
# From your Backstage root directory
yarn --cwd packages/app add @backstage/plugin-devtools
```
```sh
# From your Backstage root directory
yarn --cwd packages/app add @backstage/plugin-devtools
```
2. Now open the `packages/app/src/App.tsx` file
3. Then after all the import statements add the following line:
```ts
import { DevToolsPage } from '@backstage/plugin-devtools';
```
4. In this same file just before the closing `</ FlatRoutes>`, this will be near the bottom of the file, add this line:
```ts
<Route path="/devtools" element={<DevToolsPage />} />
```
5. Next open the `packages/app/src/components/Root/Root.tsx` file
6. We want to add this icon import after all the existing import statements:
```ts
import BuildIcon from '@material-ui/icons/Build';
```
7. Then add this line just after the `<SidebarSettings />` line:
```ts
<SidebarItem icon={BuildIcon} to="devtools" text="DevTools" />
```
8. Now run `yarn start` from the root of your project and you should see the DevTools option show up just below Settings in your sidebar and clicking on it will get you to the [Info tab](#info)
Once installed, the plugin is automatically available in your app through the default feature discovery. For more details and alternative installation methods, see [installing plugins](https://backstage.io/docs/frontend-system/building-apps/installing-plugins).
## Customizing
@@ -166,8 +138,6 @@ You can also add tabs to show content from other plugins that fit well with the
#### Catalog Unprocessed Entities Tab
##### New Frontend System
Create an extension and/or load a 3rd party extension to add additional tabs.
```shell
@@ -197,7 +167,7 @@ const appFeature = createFrontendModule({
});
```
##### Old System
##### Old Frontend System
Here's how to add the Catalog Unprocessed Entities tab:
@@ -230,6 +200,38 @@ Here's how to add the Catalog Unprocessed Entities tab:
4. Now run `yarn start` and navigate to the DevTools you'll see a new tab for Unprocessed Entities
## Old Frontend System
If your Backstage app uses the old frontend system, you need to manually wire the plugin into your app as outlined in this section. If you are on the new frontend system, you can skip this.
1. Open the `packages/app/src/App.tsx` file
2. Then after all the import statements add the following line:
```ts
import { DevToolsPage } from '@backstage/plugin-devtools';
```
3. In this same file just before the closing `</FlatRoutes>`, this will be near the bottom of the file, add this line:
```ts
<Route path="/devtools" element={<DevToolsPage />} />
```
4. Next open the `packages/app/src/components/Root/Root.tsx` file
5. We want to add this icon import after all the existing import statements:
```ts
import BuildIcon from '@material-ui/icons/Build';
```
6. Then add this line just after the `<SidebarSettings />` line:
```ts
<SidebarItem icon={BuildIcon} to="devtools" text="DevTools" />
```
7. Now run `yarn start` from the root of your project and you should see the DevTools option show up just below Settings in your sidebar and clicking on it will get you to the [Info tab](#info)
## Permissions
The DevTools plugin supports the [permissions framework](https://backstage.io/docs/permissions/overview), the following sections outline how you can use them with the assumption that you have the permissions framework setup and working.
plugins/devtools/package.json
+1 -2
View File
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-devtools",
"version": "0.1.37-next.1",
"version": "0.1.38-next.1",
"backstage": {
"role": "frontend-plugin",
"pluginId": "devtools",
@@ -59,7 +59,6 @@
"@backstage/errors": "workspace:^",
"@backstage/frontend-plugin-api": "workspace:^",
"@backstage/plugin-devtools-common": "workspace:^",
"@backstage/plugin-devtools-react": "workspace:^",
"@backstage/plugin-permission-react": "workspace:^",
"@backstage/ui": "workspace:^",
"@material-ui/core": "^4.9.13",
plugins/devtools/report-alpha.api.md
+114 -17
View File
@@ -125,23 +125,6 @@ const _default: OverridableFrontendPlugin<
internal: false;
}
>;
contents: ExtensionInput<
| ConfigurableExtensionDataRef<string, 'core.title', {}>
| ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
| ConfigurableExtensionDataRef<string, 'core.routing.path', {}>
| ConfigurableExtensionDataRef<
RouteRef_2<AnyRouteRefParams>,
'core.routing.ref',
{
optional: true;
}
>,
{
singleton: false;
optional: true;
internal: false;
}
>;
};
kind: 'page';
name: undefined;
@@ -154,6 +137,120 @@ const _default: OverridableFrontendPlugin<
noHeader?: boolean;
};
}>;
'sub-page:devtools/config': OverridableExtensionDefinition<{
kind: 'sub-page';
name: 'config';
config: {
path: string | undefined;
title: string | undefined;
};
configInput: {
title?: string | undefined;
path?: string | undefined;
};
output:
| ExtensionDataRef<string, 'core.routing.path', {}>
| ExtensionDataRef<
RouteRef_2<AnyRouteRefParams>,
'core.routing.ref',
{
optional: true;
}
>
| ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
| ExtensionDataRef<string, 'core.title', {}>
| ExtensionDataRef<
IconElement,
'core.icon',
{
optional: true;
}
>;
inputs: {};
params: {
path: string;
title: string;
icon?: IconElement;
loader: () => Promise<JSX.Element>;
routeRef?: RouteRef_2;
};
}>;
'sub-page:devtools/info': OverridableExtensionDefinition<{
kind: 'sub-page';
name: 'info';
config: {
path: string | undefined;
title: string | undefined;
};
configInput: {
title?: string | undefined;
path?: string | undefined;
};
output:
| ExtensionDataRef<string, 'core.routing.path', {}>
| ExtensionDataRef<
RouteRef_2<AnyRouteRefParams>,
'core.routing.ref',
{
optional: true;
}
>
| ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
| ExtensionDataRef<string, 'core.title', {}>
| ExtensionDataRef<
IconElement,
'core.icon',
{
optional: true;
}
>;
inputs: {};
params: {
path: string;
title: string;
icon?: IconElement;
loader: () => Promise<JSX.Element>;
routeRef?: RouteRef_2;
};
}>;
'sub-page:devtools/scheduled-tasks': OverridableExtensionDefinition<{
kind: 'sub-page';
name: 'scheduled-tasks';
config: {
path: string | undefined;
title: string | undefined;
};
configInput: {
title?: string | undefined;
path?: string | undefined;
};
output:
| ExtensionDataRef<string, 'core.routing.path', {}>
| ExtensionDataRef<
RouteRef_2<AnyRouteRefParams>,
'core.routing.ref',
{
optional: true;
}
>
| ExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
| ExtensionDataRef<string, 'core.title', {}>
| ExtensionDataRef<
IconElement,
'core.icon',
{
optional: true;
}
>;
inputs: {};
params: {
path: string;
title: string;
icon?: IconElement;
loader: () => Promise<JSX.Element>;
routeRef?: RouteRef_2;
};
}>;
}
>;
export default _default;
plugins/devtools/src/alpha/plugin.tsx
+94 -30
View File
@@ -16,18 +16,25 @@
import {
createFrontendPlugin,
coreExtensionData,
discoveryApiRef,
fetchApiRef,
ApiBlueprint,
PageBlueprint,
NavItemBlueprint,
createExtensionInput,
coreExtensionData,
SubPageBlueprint,
} from '@backstage/frontend-plugin-api';
import { devToolsApiRef, DevToolsClient } from '../api';
import BuildIcon from '@material-ui/icons/Build';
import { Content } from '@backstage/core-components';
import { rootRouteRef } from '../routes';
import {
devToolsConfigReadPermission,
devToolsInfoReadPermission,
} from '@backstage/plugin-devtools-common';
import { devToolsTaskSchedulerReadPermission } from '@backstage/plugin-devtools-common/alpha';
import { RequirePermission } from '@backstage/plugin-permission-react';
/** @alpha */
export const devToolsApi = ApiBlueprint.make({
@@ -45,34 +52,84 @@ export const devToolsApi = ApiBlueprint.make({
/** @alpha */
export const devToolsPage = PageBlueprint.makeWithOverrides({
inputs: {
contents: createExtensionInput(
[
coreExtensionData.reactElement,
coreExtensionData.routePath,
coreExtensionData.routeRef.optional(),
coreExtensionData.title,
],
{
optional: true,
},
),
},
factory(originalFactory, { inputs }) {
return originalFactory({
path: '/devtools',
routeRef: rootRouteRef,
loader: () => {
const contents = inputs.contents.map(content => ({
path: content.get(coreExtensionData.routePath),
title: content.get(coreExtensionData.title),
children: content.get(coreExtensionData.reactElement),
}));
return import('../components/DevToolsPage').then(m => (
<m.DevToolsPage contents={contents} />
));
},
const pages = [...inputs.pages].sort((left, right) => {
const leftPath = left.get(coreExtensionData.routePath);
const rightPath = right.get(coreExtensionData.routePath);
if (leftPath === 'info' && rightPath !== 'info') {
return -1;
}
if (leftPath !== 'info' && rightPath === 'info') {
return 1;
}
return 0;
});
return originalFactory(
{
path: '/devtools',
routeRef: rootRouteRef,
title: 'DevTools',
},
{
inputs: {
pages,
},
},
);
},
});
/** @alpha */
export const devToolsInfoPage = SubPageBlueprint.make({
name: 'info',
params: {
path: 'info',
title: 'Info',
loader: () =>
import('../components/Content').then(m => (
<Content>
<RequirePermission permission={devToolsInfoReadPermission}>
<m.InfoContent />
</RequirePermission>
</Content>
)),
},
});
/** @alpha */
export const devToolsConfigPage = SubPageBlueprint.make({
name: 'config',
params: {
path: 'config',
title: 'Config',
loader: () =>
import('../components/Content').then(m => (
<Content>
<RequirePermission permission={devToolsConfigReadPermission}>
<m.ConfigContent />
</RequirePermission>
</Content>
)),
},
});
/** @alpha */
export const devToolsScheduledTasksPage = SubPageBlueprint.make({
name: 'scheduled-tasks',
params: {
path: 'scheduled-tasks',
title: 'Scheduled Tasks',
loader: () =>
import('../components/Content').then(m => (
<Content>
<RequirePermission permission={devToolsTaskSchedulerReadPermission}>
<m.ScheduledTasksContent />
</RequirePermission>
</Content>
)),
},
});
@@ -89,10 +146,17 @@ export const devToolsNavItem = NavItemBlueprint.make({
export default createFrontendPlugin({
pluginId: 'devtools',
title: 'DevTools',
icon: <BuildIcon />,
icon: <BuildIcon fontSize="inherit" />,
info: { packageJson: () => import('../../package.json') },
routes: {
root: rootRouteRef,
},
extensions: [devToolsApi, devToolsPage, devToolsNavItem],
extensions: [
devToolsApi,
devToolsPage,
devToolsInfoPage,
devToolsConfigPage,
devToolsScheduledTasksPage,
devToolsNavItem,
],
});
plugins/devtools/src/api/DevToolsApi.ts
+1
View File
@@ -38,4 +38,5 @@ export interface DevToolsApi {
plugin: string,
taskId: string,
): Promise<TriggerScheduledTask>;
cancelScheduledTask(plugin: string, taskId: string): Promise<void>;
}
plugins/devtools/src/api/DevToolsClient.ts
+26 -2
View File
@@ -24,7 +24,7 @@ import {
ScheduledTasks,
TriggerScheduledTask,
} from '@backstage/plugin-devtools-common/alpha';
import { ResponseError } from '@backstage/errors';
import { ResponseError, NotFoundError, ConflictError } from '@backstage/errors';
import { DevToolsApi } from './DevToolsApi';
export class DevToolsClient implements DevToolsApi {
@@ -82,7 +82,31 @@ export class DevToolsClient implements DevToolsApi {
throw await ResponseError.fromResponse(response);
}
return response.json() as Promise<TriggerScheduledTask>;
return {};
}
public async cancelScheduledTask(
plugin: string,
taskId: string,
): Promise<void> {
const baseUrl = `${await this.discoveryApi.getBaseUrl(plugin)}/`;
const url = new URL(
`.backstage/scheduler/v1/tasks/${encodeURIComponent(taskId)}/cancel`,
baseUrl,
);
const response = await this.fetchApi.fetch(url.toString(), {
method: 'POST',
});
if (!response.ok) {
if (response.status === 404) {
throw new NotFoundError(`Task ${taskId} not found`);
} else if (response.status === 409) {
throw new ConflictError(`Task ${taskId} is not running`);
}
throw await ResponseError.fromResponse(response);
}
}
public async getExternalDependencies(): Promise<
plugins/devtools/src/components/Content/ScheduledTasksContent/ScheduledTasksContent.tsx
+52 -26
View File
@@ -29,10 +29,11 @@ import {
TableColumn,
} from '@backstage/core-components';
import Alert from '@material-ui/lab/Alert';
import { useScheduledTasks, useTriggerScheduledTask } from '../../../hooks';
import { useScheduledTasks, useScheduledTasksOperations } from '../../../hooks';
import { TaskApiTasksResponse } from '@backstage/plugin-devtools-common/alpha';
import { alertApiRef, configApiRef, useApi } from '@backstage/core-plugin-api';
import RefreshIcon from '@material-ui/icons/Refresh';
import StopIcon from '@material-ui/icons/Stop';
import NightsStay from '@material-ui/icons/NightsStay';
import ErrorIcon from '@material-ui/icons/Error';
import BlockIcon from '@material-ui/icons/Block';
@@ -105,7 +106,7 @@ export const ScheduledTasksContent = () => {
configApi.getOptionalStringArray('devTools.scheduledTasks.plugins') || [];
const [selectedPlugin, setSelectedPlugin] = useState(plugins[0] || '');
const { scheduledTasks, loading, error } = useScheduledTasks(selectedPlugin);
const { triggerTask, isTriggering, triggerError } = useTriggerScheduledTask();
const { triggerTask, cancelTask, isLoading } = useScheduledTasksOperations();
const [inputValue, setInputValue] = useState('');
@@ -209,28 +210,52 @@ export const ScheduledTasksContent = () => {
permission={devToolsTaskSchedulerCreatePermission}
errorPage={<CreateNotAllowed />}
>
<Tooltip title="Run Task">
<IconButton
aria-label="Trigger"
disabled={isTriggering}
onClick={() => {
triggerTask(selectedPlugin, rowData.taskId);
if (triggerError) {
alertApi.post({
message: `Error triggering task ${rowData.taskId}: ${error}`,
severity: 'error',
});
} else {
alertApi.post({
message: `Successfully triggered task ${rowData.taskId}`,
severity: 'success',
});
}
}}
>
<RefreshIcon />
</IconButton>
</Tooltip>
<Box display="flex" justifyContent="center">
<Tooltip title="Run Task">
<IconButton
aria-label="Trigger"
disabled={isLoading}
onClick={async () => {
try {
await triggerTask(selectedPlugin, rowData.taskId);
alertApi.post({
message: `Successfully triggered task ${rowData.taskId}`,
severity: 'success',
});
} catch (e) {
alertApi.post({
message: `Error triggering task ${rowData.taskId}: ${e.message}`,
severity: 'error',
});
}
}}
>
<RefreshIcon />
</IconButton>
</Tooltip>
<Tooltip title="Cancel Task">
<IconButton
aria-label="Cancel"
disabled={isLoading}
onClick={async () => {
try {
await cancelTask(selectedPlugin, rowData.taskId);
alertApi.post({
message: `Successfully cancelled task ${rowData.taskId}`,
severity: 'success',
});
} catch (e) {
alertApi.post({
message: `Error cancelling task ${rowData.taskId}: ${e.message}`,
severity: 'error',
});
}
}}
>
<StopIcon />
</IconButton>
</Tooltip>
</Box>
</RequirePermission>
),
sorting: false,
@@ -263,7 +288,7 @@ export const ScheduledTasksContent = () => {
)}
/>
{loading && <Progress />}
{loading && !scheduledTasks && <Progress />}
{error && (
<ErrorPanel
@@ -292,7 +317,7 @@ export const ScheduledTasksContent = () => {
</ErrorPanel>
)}
{!loading && !error && (
{scheduledTasks && (
<Table
title={`Scheduled Tasks (${selectedPlugin})`}
options={{
@@ -300,6 +325,7 @@ export const ScheduledTasksContent = () => {
search: true,
sorting: true,
searchFieldAlignment: 'right',
padding: 'dense',
}}
columns={columns}
data={scheduledTasks || []}
plugins/devtools/src/components/DefaultDevToolsPage/DefaultDevToolsPage.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ import {
import { ConfigContent } from '../Content';
import { devToolsTaskSchedulerReadPermission } from '@backstage/plugin-devtools-common/alpha';
import { DevToolsLayout } from '../DevToolsLayout';
import { DevToolsLayout } from '../DevToolsLayout/DevToolsLayout';
import { InfoContent } from '../Content';
import { RequirePermission } from '@backstage/plugin-permission-react';
import { ScheduledTasksContent } from '../Content/ScheduledTasksContent';
plugins/devtools/src/hooks/index.ts
+1 -1
View File
@@ -18,4 +18,4 @@ export { useConfig } from './useConfig';
export { useExternalDependencies } from './useExternalDependencies';
export { useInfo } from './useInfo';
export { useScheduledTasks } from './useScheduledTasks';
export { useTriggerScheduledTask } from './useTriggerScheduledTask';
export { useScheduledTasksOperations } from './useScheduledTasksOperations';
plugins/devtools/src/hooks/useTriggerScheduledTask.ts → plugins/devtools/src/hooks/useScheduledTasksOperations.ts
+25 -6
View File
@@ -17,22 +17,40 @@ import { useState, useCallback } from 'react';
import { devToolsApiRef } from '../api';
import { useApi } from '@backstage/core-plugin-api';
export const useTriggerScheduledTask = () => {
export const useScheduledTasksOperations = () => {
const api = useApi(devToolsApiRef);
const [isTriggering, setIsTriggering] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<Error | undefined>();
const triggerTask = useCallback(
async (plugin: string, taskId: string) => {
setIsTriggering(true);
setIsLoading(true);
setError(undefined);
try {
await api.triggerScheduledTask(plugin, taskId);
} catch (e) {
setError(e);
throw e;
} finally {
setIsTriggering(false);
setIsLoading(false);
}
},
[api],
);
const cancelTask = useCallback(
async (plugin: string, taskId: string) => {
setIsLoading(true);
setError(undefined);
try {
await api.cancelScheduledTask(plugin, taskId);
} catch (e) {
setError(e);
throw e;
} finally {
setIsLoading(false);
}
},
[api],
@@ -40,7 +58,8 @@ export const useTriggerScheduledTask = () => {
return {
triggerTask,
isTriggering,
triggerError: error?.message,
cancelTask,
isLoading,
error: error?.message,
};
};