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

Merge branch 'master' into mobile-sidebar

Browse Source 
Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
This commit is contained in:
Philipp Hugenroth
2022-01-03 10:31:12 +01:00
parent 8c833df12a 8fdb2d8c0c
commit 78abba5ed2
233 changed files with 2907 additions and 1378 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/features/kubernetes/configuration.md
+59 -2
View File
@@ -39,6 +39,7 @@ kubernetes:
region: 'europe-west1'
skipTLSVerify: true
skipMetricsLookup: true
exposeDashboard: true
```
### `serviceLocatorMethod`
@@ -113,9 +114,13 @@ kubectl -n <NAMESPACE> get secret $(kubectl -n <NAMESPACE> get sa <SERVICE_ACCOU
Specifies the link to the Kubernetes dashboard managing this cluster.
Note that you should specify the app used for the dashboard using the
**dashboardApp property**, in order to properly format links to kubernetes
`dashboardApp` property, in order to properly format links to kubernetes
resources, otherwise it will assume that you're running the standard one.
Note also that this attribute is optional for some kinds of dashboards, such as
GKE, which requires additional parameters specified in the `dashboardParameters`
option.
##### `clusters.\*.dashboardApp` (optional)
Specifies the app that provides the Kubernetes dashboard.
@@ -124,11 +129,14 @@ This will be used for formatting links to kubernetes objects inside the
dashboard.
The supported dashboards are: `standard`, `rancher`, `openshift`, `gke`, `aks`,
`eks` However, not all of them are implemented yet, so please contribute!
`eks`. However, not all of them are implemented yet, so please contribute!
Note that it will default to the regular dashboard provided by the Kubernetes
project (`standard`), that can run in any Kubernetes cluster.
Note that for the `gke` app, you must provide additional information in the
`dashboardParameters` option.
Note that you can add your own formatter by registering it to the
`clusterLinksFormatters` dictionary, in the app project.
@@ -143,6 +151,43 @@ See also
https://github.com/backstage/backstage/tree/master/plugins/kubernetes/src/utils/clusterLinks/formatters
for real examples.
##### `clusters.\*.dashboardParameters` (optional)
Specifies additional information for the selected `dashboardApp` formatter.
Note that, even though `dashboardParameters` is optional, it might be mandatory
for some dashboards, such as GKE.
###### required parameters for GKE
| Name | Description |
| ----------- | ------------------------------------------------------------------------ |
| projectId | the ID of the GCP project containing your Kubernetes clusters |
| region | the region of GCP containing your Kubernetes clusters |
| clusterName | the name of your kubernetes cluster, within your `projectId` GCP project |
Note that the GKE cluster locator can automatically provide the values for the
`dashboardApp` and `dashboardParameters` options if you set the
`exposeDashboard` property to `true`.
Example:
```yaml
kubernetes:
serviceLocatorMethod:
type: 'multiTenant'
clusterLocatorMethods:
- type: 'config'
clusters:
- url: http://127.0.0.1:9999
name: my-cluster
dashboardApp: gke
dashboardParameters:
projectId: my-project
region: us-east1
clusterName: my-cluster
```
##### `clusters.\*.caData` (optional)
PEM-encoded certificate authority certificates.
@@ -184,6 +229,10 @@ For example:
Will configure the Kubernetes plugin to connect to all GKE clusters in the
project `gke-clusters` in the region `europe-west1`.
Note that the GKE cluster locator can automatically provide the values for the
`dashboardApp` and `dashboardParameters` options if you enable the
`exposeDashboard` option.
##### `projectId`
The Google Cloud project to look for Kubernetes clusters in.
@@ -203,6 +252,14 @@ presented by the API server. Defaults to `false`.
This determines whether the Kubernetes client looks up resource metrics
CPU/Memory for pods returned by the API server. Defaults to `false`.
##### `exposeDashboard`
This determines wether the `dashboardApp` and `dashboardParameters` should be
automatically configured in order to expose the GKE dashboard from the
Kubernetes plugin.
Defaults to `false`.
### `customResources` (optional)
Configures which [custom resources][3] to look for when returning an entity's
docs/features/software-catalog/catalog-customization.md
+7 -21
View File
@@ -10,8 +10,7 @@ and find catalog entities. This is already set up by default by
`@backstage/create-app`.
If you want to change the default index page - such as to add a custom filter to
the catalog - you can replace the routing in `App.tsx` to point to your own
`CatalogIndexPage`.
the catalog - you can create your own `CatalogIndexPage`.
> Note: The catalog index page is designed to have a minimal code footprint to
> support easy customization, but creating a copy does introduce a possibility
@@ -21,12 +20,11 @@ the catalog - you can replace the routing in `App.tsx` to point to your own
For example, suppose that I want to allow filtering by a custom annotation added
to entities, `company.com/security-tier`. To start, I'll copy the code for the
default catalog page and create a component in a
[new plugin](../../plugins/create-a-plugin.md):
default catalog page and create a component.
```tsx
// imports, etc omitted for brevity. for full source see:
// https://github.com/backstage/backstage/blob/master/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
// https://github.com/backstage/backstage/blob/master/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
export const CustomCatalogPage = ({
columns,
actions,
@@ -167,21 +165,7 @@ export const CustomCatalogPage = ({
};
```
This page itself can be exported as a routable extension in the plugin:
```ts
export const CustomCatalogIndexPage = myPlugin.provide(
createRoutableExtension({
name: 'CustomCatalogIndexPage',
component: () =>
import('./components/CustomCatalogPage').then(m => m.CustomCatalogPage),
mountPoint: catalogRouteRef,
}),
);
```
Finally, we can replace the catalog route in the Backstage application with our
new `CustomCatalogIndexPage`.
Finally, we can apply our new `CustomCatalogPage`.
```diff
# packages/app/src/App.tsx
@@ -189,7 +173,9 @@ const routes = (
<FlatRoutes>
<Navigate key="/" to="catalog" />
- <Route path="/catalog" element={<CatalogIndexPage />} />
+ <Route path="/catalog" element={<CustomCatalogIndexPage />} />
+ <Route path="/catalog" element={<CatalogIndexPage />}>
+ <CustomCatalogPage />
+ </Route>
```
The same method can be used to customize the _default_ filters with a different
docs/getting-started/app-custom-theme.md
+61 -42
View File
@@ -53,8 +53,10 @@ To add a custom theme to your Backstage app, you pass it as configuration to
For example, adding the theme that we created in the previous section can be
done like this:
```ts
```tsx
import { createApp } from '@backstage/app-defaults';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
const app = createApp({
apis: ...,
@@ -63,7 +65,11 @@ const app = createApp({
id: 'my-theme',
title: 'My Custom Theme',
variant: 'light',
theme: myTheme,
Provider: ({ children }) => (
<ThemeProvider theme={myTheme}>
<CssBaseline>{children}</CssBaseline>
</ThemeProvider>
),
}]
})
```
@@ -76,60 +82,67 @@ want to use the default themes, they are exported as `lightTheme` and
## Example of a custom theme
```ts
const themeOptions = createThemeOptions({
import {
createTheme,
genPageTheme,
lightTheme,
shapes,
} from '@backstage/theme';
const myTheme = createTheme({
palette: {
...lightTheme.palette,
primary: {
main: '#123456',
main: '#343b58',
},
secondary: {
main: '#123456',
main: '#565a6e',
},
error: {
main: '#123456',
main: '#8c4351',
},
warning: {
main: '#123456',
main: '#8f5e15',
},
info: {
main: '#123456',
main: '#34548a',
},
success: {
main: '#123456',
main: '#485e30',
},
background: {
default: '#123456',
paper: '#123456',
default: '#d5d6db',
paper: '#d5d6db',
},
banner: {
info: '#123456',
error: '#123456',
text: '#123456',
link: '#123456',
info: '#34548a',
error: '#8c4351',
text: '#343b58',
link: '#565a6e',
},
errorBackground: '#123456',
warningBackground: '#123456',
infoBackground: '#123456',
errorBackground: '#8c4351',
warningBackground: '#8f5e15',
infoBackground: '#343b58',
navigation: {
background: '#123456',
indicator: '#123456',
color: '#123456',
selectedColor: '#123456',
background: '#343b58',
indicator: '#8f5e15',
color: '#d5d6db',
selectedColor: '#ffffff',
},
},
defaultPageTheme: 'home',
fontFamily: 'Comic Sans',
fontFamily: 'Comic Sans MS',
/* below drives the header colors */
pageTheme: {
home: genPageTheme(['#123456', '#123456'], shapes.wave),
documentation: genPageTheme(['#123456', '#123456'], shapes.wave2),
tool: genPageTheme(['#123456', '#123456'], shapes.round),
service: genPageTheme(['#123456', '#123456'], shapes.wave),
website: genPageTheme(['#123456', '#123456'], shapes.wave),
library: genPageTheme(['#123456', '#123456'], shapes.wave),
other: genPageTheme(['#123456', '#123456'], shapes.wave),
app: genPageTheme(['#123456', '#123456'], shapes.wave),
apis: genPageTheme(['#123456', '#123456'], shapes.wave),
home: genPageTheme(['#8c4351', '#343b58'], shapes.wave),
documentation: genPageTheme(['#8c4351', '#343b58'], shapes.wave2),
tool: genPageTheme(['#8c4351', '#343b58'], shapes.round),
service: genPageTheme(['#8c4351', '#343b58'], shapes.wave),
website: genPageTheme(['#8c4351', '#343b58'], shapes.wave),
library: genPageTheme(['#8c4351', '#343b58'], shapes.wave),
other: genPageTheme(['#8c4351', '#343b58'], shapes.wave),
app: genPageTheme(['#8c4351', '#343b58'], shapes.wave),
apis: genPageTheme(['#8c4351', '#343b58'], shapes.wave),
},
});
```
@@ -162,7 +175,7 @@ wouldn't be enough to alter the `box-shadow` property or to add css rules that
aren't already defined like a margin. For these cases you should also create an
override.
```ts
```tsx
import { createApp } from '@backstage/core-app-api';
import { BackstageTheme, lightTheme } from '@backstage/theme';
/**
@@ -187,6 +200,16 @@ export const createCustomThemeOverrides = (
};
};
const customTheme: BackstageTheme = {
...lightTheme,
overrides: {
// These are the overrides that Backstage applies to `material-ui` components
...lightTheme.overrides,
// These are your custom overrides, either to `material-ui` or Backstage components.
...createCustomThemeOverrides(lightTheme),
},
};
const app = createApp({
apis: ...,
plugins: ...,
@@ -194,15 +217,11 @@ const app = createApp({
id: 'my-theme',
title: 'My Custom Theme',
variant: 'light',
theme: {
...lightTheme,
overrides: {
// These are the overrides that Backstage applies to `material-ui` components
...lightTheme.overrides,
// These are your custom overrides, either to `material-ui` or Backstage components.
...createCustomThemeOverrides(lightTheme),
},
},
Provider: ({ children }) => (
<ThemeProvider theme={customTheme}>
<CssBaseline>{children}</CssBaseline>
</ThemeProvider>
),
}]
});
```