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

plugins: add visualizer

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2023-11-01 18:18:42 +01:00
parent 59d60e853b
commit 899530efb5
15 changed files with 100 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/visualizer/.eslintrc.js
+1
View File
@@ -0,0 +1 @@
module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
plugins/visualizer/README.md
+3
View File
@@ -0,0 +1,3 @@
# @backstage/plugin-visualizer
A plugin to help visualize the structure of your Backstage app.
plugins/visualizer/api-report.md
+13
View File
@@ -0,0 +1,13 @@
## API Report File for "@backstage/plugin-visualizer"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
import { BackstagePlugin } from '@backstage/frontend-plugin-api';
// @public (undocumented)
const visualizerPlugin: BackstagePlugin<{}, {}>;
export default visualizerPlugin;
// (No @packageDocumentation comment for this package)
```
plugins/visualizer/catalog-info.yaml
+10
View File
@@ -0,0 +1,10 @@
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
name: backstage-plugin-visualizer
title: '@backstage/plugin-visualizer'
description: Visualizes the Backstage app structure
spec:
lifecycle: experimental
type: backstage-frontend-plugin
owner: maintainers
plugins/visualizer/package.json
+47
View File
@@ -0,0 +1,47 @@
{
"name": "@backstage/plugin-visualizer",
"description": "Visualizes the Backstage app structure",
"private": true,
"version": "0.0.0",
"publishConfig": {
"access": "public"
},
"backstage": {
"role": "frontend-plugin"
},
"license": "Apache-2.0",
"main": "src/index.ts",
"types": "src/index.ts",
"sideEffects": false,
"scripts": {
"build": "backstage-cli package build",
"start": "backstage-cli package start",
"lint": "backstage-cli package lint",
"test": "backstage-cli package test",
"prepack": "backstage-cli package prepack",
"postpack": "backstage-cli package postpack",
"clean": "backstage-cli package clean"
},
"dependencies": {
"@backstage/core-components": "workspace:^",
"@backstage/core-plugin-api": "workspace:^",
"@backstage/frontend-plugin-api": "workspace:^",
"@backstage/theme": "workspace:^",
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.61",
"@types/react": "^16.13.1 || ^17.0.0",
"react-use": "^17.2.4"
},
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0",
"react-router-dom": "6.0.0-beta.0 || ^6.3.0"
},
"devDependencies": {
"@backstage/cli": "workspace:^"
},
"files": [
"dist"
]
}
plugins/visualizer/src/components/AppVisualizerPage/AppVisualizerPage.tsx
+46
View File
@@ -0,0 +1,46 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Content, Header, HeaderTabs, Page } from '@backstage/core-components';
import { useApi } from '@backstage/core-plugin-api';
import { appTreeApiRef } from '@backstage/frontend-plugin-api';
import Box from '@material-ui/core/Box';
import React, { useState } from 'react';
import { GraphVisualizer } from './GraphVisualizer';
import { TextVisualizer } from './TextVisualizer';
export function AppVisualizerPage() {
const appTreeApi = useApi(appTreeApiRef);
const { tree } = appTreeApi.getTree();
const [tab, setTab] = useState(0);
const tabs = [
{ id: 'graph', label: 'Graph', element: <GraphVisualizer tree={tree} /> },
{ id: 'text', label: 'Text', element: <TextVisualizer tree={tree} /> },
];
return (
<Page themeId="tool">
<Header title="App Visualizer" />
<Content noPadding stretch>
<Box display="flex" flexDirection="column" height="100%">
<HeaderTabs tabs={tabs} selectedIndex={tab} onChange={setTab} />
{tabs[tab].element}
</Box>
</Content>
</Page>
);
}
plugins/visualizer/src/components/AppVisualizerPage/GraphVisualizer.tsx
+246
View File
@@ -0,0 +1,246 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { AppNode, AppTree } from '@backstage/frontend-plugin-api';
import Box from '@material-ui/core/Box';
import Tooltip from '@material-ui/core/Tooltip';
import Typography from '@material-ui/core/Typography';
import * as colors from '@material-ui/core/colors';
import { Theme, makeStyles } from '@material-ui/core/styles';
import InputIcon from '@material-ui/icons/InputSharp';
import DisabledIcon from '@material-ui/icons/NotInterestedSharp';
import React from 'react';
function createOutputColorGenerator(availableColors: string[]) {
const map = new Map<string, string>();
let i = 0;
return function getOutputColor(id: string) {
let color = map.get(id);
if (color) {
return color;
}
color = availableColors[i];
i += 1;
if (i >= availableColors.length) {
i = 0;
}
map.set(id, color);
return color;
};
}
const getOutputColor = createOutputColorGenerator([
colors.green[500],
colors.blue[500],
colors.yellow[500],
colors.purple[500],
colors.orange[500],
colors.red[500],
colors.lime[500],
colors.green[200],
colors.blue[200],
colors.yellow[200],
colors.purple[200],
colors.orange[200],
colors.red[200],
colors.lime[200],
]);
interface StyleProps {
enabled: boolean;
}
function borderColor(theme: Theme) {
return ({ enabled }: StyleProps) =>
enabled ? theme.palette.primary.main : theme.palette.divider;
}
const config = {
borderWidth: 0.75,
};
const useStyles = makeStyles(theme => ({
extension: {
borderLeftWidth: theme.spacing(config.borderWidth),
borderLeftStyle: 'solid',
borderLeftColor: borderColor(theme),
cursor: 'pointer',
'&:hover $extensionHeader': {
color: ({ enabled }: StyleProps) =>
enabled ? theme.palette.primary.main : theme.palette.text.secondary,
},
},
extensionHeader: {
display: 'flex',
flexFlow: 'row nowrap',
alignItems: 'center',
width: 'fit-content',
padding: theme.spacing(0.5, 1),
color: ({ enabled }: StyleProps) =>
enabled ? theme.palette.text.primary : theme.palette.text.disabled,
background: theme.palette.background.paper,
borderTopRightRadius: theme.shape.borderRadius,
borderBottomRightRadius: theme.shape.borderRadius,
},
extensionHeaderOutputs: {
display: 'flex',
flexFlow: 'row nowrap',
alignItems: 'center',
marginLeft: theme.spacing(1),
gap: theme.spacing(1),
},
attachments: {},
attachmentsInput: {
'&:first-child $attachmentsInputTitle': {
borderTop: 0,
},
},
attachmentsInputTitle: {
display: 'flex',
flexFlow: 'row nowrap',
alignItems: 'center',
width: 'fit-content',
padding: theme.spacing(1),
borderTopWidth: theme.spacing(config.borderWidth),
borderTopStyle: 'solid',
borderTopColor: borderColor(theme),
},
attachmentsInputName: {
marginLeft: theme.spacing(1),
},
attachmentsInputChildren: {
display: 'flex',
flexFlow: 'column nowrap',
alignItems: 'flex-start',
gap: theme.spacing(0.5),
marginLeft: theme.spacing(1),
marginBottom: theme.spacing(1),
},
}));
function Output(props: { id: string }) {
const { id } = props;
return (
<Tooltip title={<Typography>{id}</Typography>}>
<Box
width={18}
height={18}
borderRadius="50%"
bgcolor={getOutputColor(id)}
/>
</Tooltip>
);
}
function Attachments(props: {
attachments: ReadonlyMap<string, AppNode[]>;
enabled: boolean;
}) {
const { attachments, enabled } = props;
const classes = useStyles({ enabled });
if (attachments.size === 0) {
return null;
}
return (
<Box className={classes.attachments}>
{[...attachments.entries()]
.sort(([a], [b]) => a.localeCompare(b))
.map(([key, v]) => {
const children = v.sort((a, b) => a.spec.id.localeCompare(b.spec.id));
return (
<Box key={key} className={classes.attachmentsInput}>
<Box className={classes.attachmentsInputTitle}>
<InputIcon />
<Typography className={classes.attachmentsInputName}>
{key}
</Typography>
</Box>
<Box className={classes.attachmentsInputChildren}>
{children.map(node => (
<Extension key={node.spec.id} node={node} />
))}
</Box>
</Box>
);
})}
</Box>
);
}
function ExtensionTooltip(props: { node: AppNode }) {
const parts = [];
let node = props.node;
parts.push(node.spec.id);
while (node.edges.attachedTo) {
const input = node.edges.attachedTo.input;
node = node.edges.attachedTo.node;
parts.push(`${node.spec.id} [${input}]`);
}
parts.reverse();
return (
<>
{parts.map(part => (
<Typography key={part}>{part}</Typography>
))}
</>
);
}
function Extension(props: { node: AppNode }) {
const { node } = props;
const enabled = Boolean(node.instance);
const classes = useStyles({ enabled });
const dataRefIds =
node.instance && [...node.instance.getDataRefs()].map(r => r.id);
return (
<Box key={node.spec.id} className={classes.extension}>
<Box className={classes.extensionHeader}>
<Tooltip title={<ExtensionTooltip node={node} />}>
<Typography>{node.spec.id}</Typography>
</Tooltip>
<Box className={classes.extensionHeaderOutputs}>
{dataRefIds &&
dataRefIds.length > 0 &&
[...dataRefIds].sort().map(id => <Output key={id} id={id} />)}
{!enabled && <DisabledIcon fontSize="small" />}
</Box>
</Box>
<Attachments attachments={node.edges.attachments} enabled={enabled} />
</Box>
);
}
export function GraphVisualizer({ tree }: { tree: AppTree }) {
return (
<Box margin={3}>
<Extension node={tree.root} />
</Box>
);
}
plugins/visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx
+116
View File
@@ -0,0 +1,116 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { AppNode, AppTree } from '@backstage/frontend-plugin-api';
import Box from '@material-ui/core/Box';
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Paper from '@material-ui/core/Paper';
import React, { ReactNode, useState } from 'react';
function mkDiv(
children: ReactNode,
options?: { indent?: boolean; key?: string | number; color?: string },
) {
return (
<div
key={options?.key}
style={{
color: options?.color,
marginLeft: options?.indent ? 16 : undefined,
}}
>
{children}
</div>
);
}
function nodeToText(
node: AppNode,
options?: { showOutputs?: boolean; showDisabled?: boolean },
): ReactNode {
const dataRefIds =
node.instance && [...node.instance.getDataRefs()].map(r => r.id);
const out =
options?.showOutputs && dataRefIds && dataRefIds.length > 0
? ` out="${[...dataRefIds].sort().join(', ')}"`
: '';
const color = node.instance ? undefined : 'gray';
if (node.edges.attachments.size === 0) {
return mkDiv(`<${node.spec.id}${out}/>`, { color });
}
return mkDiv([
mkDiv(`<${node.spec.id}${out}>`, { key: 'start', color }),
...[...node.edges.attachments.entries()]
.sort(([a], [b]) => a.localeCompare(b))
.map(([key, v]) => {
const children = v
.filter(e => options?.showDisabled || e.instance)
.sort((a, b) => a.spec.id.localeCompare(b.spec.id));
if (children.length === 0) {
return mkDiv(`${key} []`, { indent: true });
}
return mkDiv(
[
mkDiv(`${key} [`),
...children.map(e =>
mkDiv(nodeToText(e, options), { indent: true }),
),
mkDiv(']'),
],
{ key, indent: true },
);
}),
mkDiv(`</${node.spec.id}>`, { key: 'end', color }),
]);
}
export function TextVisualizer({ tree }: { tree: AppTree }) {
const [showOutputs, setShowOutputs] = useState(false);
const [showDisabled, setShowDisabled] = useState(false);
return (
<>
<Box style={{ overflow: 'auto', flex: '1 0 0' }}>
<div style={{ margin: 16, width: 'max-content' }}>
{nodeToText(tree.root, { showOutputs, showDisabled })}
</div>
</Box>
<Paper style={{ padding: '8px 16px' }}>
<FormControlLabel
control={
<Checkbox
checked={showOutputs}
onChange={(_, value) => setShowOutputs(value)}
/>
}
label="Show Outputs"
/>
<FormControlLabel
control={
<Checkbox
checked={showDisabled}
onChange={(_, value) => setShowDisabled(value)}
/>
}
label="Show Disabled"
/>
</Paper>
</>
);
}
plugins/visualizer/src/components/AppVisualizerPage/index.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { AppVisualizerPage } from './AppVisualizerPage';
plugins/visualizer/src/index.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { appVisualizerPlugin as default } from './plugin';
plugins/visualizer/src/plugin.tsx
+33
View File
@@ -0,0 +1,33 @@
/*
* Copyright 2023 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
createPageExtension,
createPlugin,
} from '@backstage/frontend-plugin-api';
import React from 'react';
const appVisualizerPage = createPageExtension({
id: 'plugin.app-visualizer.page',
defaultPath: '/visualizer',
loader: () =>
import('./components/AppVisualizerPage').then(m => <m.AppVisualizerPage />),
});
export const appVisualizerPlugin = createPlugin({
id: 'app-visualizer',
extensions: [appVisualizerPage],
});