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

Merge pull request #8201 from mufaddal7/plugin/new-relic-dashboard

Browse Source 
Plugin/new relic dashboard
This commit is contained in:
Fredrik Adelöw
2021-12-21 15:08:16 +01:00
committed by GitHub
parent faf2254214 a08be1cd8d
commit 90b1c72aaa
30 changed files with 1092 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/modern-planets-fry.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/plugin-newrelic-dashboard': patch
---
Created a New Plugin , which imports dashboard links and snapshots from New Relic
app-config.yaml
+5
View File
@@ -74,6 +74,11 @@ proxy:
headers:
X-Api-Key: ${NEW_RELIC_REST_API_KEY}
'/newrelic/api':
target: https://api.newrelic.com
headers:
X-Api-Key: ${NEW_RELIC_USER_KEY}
'/pagerduty':
target: https://api.pagerduty.com
headers:
packages/app/package.json
+1
View File
@@ -33,6 +33,7 @@
"@backstage/plugin-kubernetes": "^0.5.1",
"@backstage/plugin-lighthouse": "^0.2.31",
"@backstage/plugin-newrelic": "^0.3.10",
"@backstage/plugin-newrelic-dashboard": "^0.1.0",
"@backstage/plugin-org": "^0.3.31",
"@backstage/plugin-pagerduty": "0.3.19",
"@backstage/plugin-rollbar": "^0.3.20",
packages/app/src/components/catalog/EntityPage.tsx
+29
View File
@@ -124,6 +124,12 @@ import {
EntityTravisCIOverviewCard,
isTravisciAvailable,
} from '@roadiehq/backstage-plugin-travis-ci';
import {
isNewRelicDashboardAvailable,
EntityNewRelicDashboardContent,
EntityNewRelicDashboardCard,
} from '@backstage/plugin-newrelic-dashboard';
import React, { ReactNode, useMemo, useState } from 'react';
const customEntityFilterKind = ['Component', 'API', 'System'];
@@ -291,6 +297,14 @@ const overviewContent = (
</EntitySwitch.Case>
</EntitySwitch>
<EntitySwitch>
<EntitySwitch.Case if={isNewRelicDashboardAvailable}>
<Grid item md={6} xs={12}>
<EntityNewRelicDashboardCard />
</Grid>
</EntitySwitch.Case>
</EntitySwitch>
<Grid item md={4} xs={12}>
<EntityLinksCard />
</Grid>
@@ -371,6 +385,14 @@ const serviceEntityPage = (
<EntityTechdocsContent />
</EntityLayout.Route>
<EntityLayout.Route
if={isNewRelicDashboardAvailable}
path="/newrelic-dashboard"
title="New Relic Dashboard"
>
<EntityNewRelicDashboardContent />
</EntityLayout.Route>
<EntityLayout.Route path="/kubernetes" title="Kubernetes">
<EntityKubernetesContent />
</EntityLayout.Route>
@@ -429,6 +451,13 @@ const websiteEntityPage = (
<EntityLayout.Route path="/docs" title="Docs">
<EntityTechdocsContent />
</EntityLayout.Route>
<EntityLayout.Route
if={isNewRelicDashboardAvailable}
path="/newrelic-dashboard"
title="New Relic Dashboard"
>
<EntityNewRelicDashboardContent />
</EntityLayout.Route>
<EntityLayout.Route path="/kubernetes" title="Kubernetes">
<EntityKubernetesContent />
plugins/newrelic-dashboard/.eslintrc.js
+3
View File
@@ -0,0 +1,3 @@
module.exports = {
extends: [require.resolve('@backstage/cli/config/eslint')],
};
plugins/newrelic-dashboard/README.md
+79
View File
@@ -0,0 +1,79 @@
# New Relic Dashboard Plugin
Welcome to the newrelic-dashboard plugin!
## Features
- Adds New Relic Dashboard Pages Links to Overview section of the catalog
- Shows Snapshots of dashboards in New Relic
## Getting started
This plugin uses the Backstage proxy to securely communicate with New Relic's APIs. We use NerdGraph (New Relic's GraphQL API)
To generate a New Relic API Key , you can visit this [link](https://one.newrelic.com/launcher/api-keys-ui.api-keys-launcher)
1. Add the following to your app-config.yaml to enable this configuration:
```
// app-config.yaml
proxy:
'/newrelic/api':
target: https://api.newrelic.com
headers:
X-Api-Key: ${NEW_RELIC_USER_KEY}
```
2. Add the following to `EntityPage.tsx` to display New Relic Dashboard Tab
```
// In packages/app/src/components/catalog/EntityPage.tsx
import {
isNewRelicDashboardAvailable,
EntityNewRelicDashboardContent,
EntityNewRelicDashboardCard,
} from '@backstage/plugin-newrelic-dashboard';
const serviceEntityPage = (
<EntityLayout>
{/* other tabs... */}
<EntityLayout.Route
if={isNewRelicDashboardAvailable}
path="/newrelic-dashboard"
title="New Relic Dashboard"
>
<EntityNewRelicDashboardContent />
</EntityLayout.Route>
```
3. Add the following in `EntityPage.tsx` to display dashboard links in overview page
```
const overviewContent = (
{/* other tabs... */}
<EntitySwitch>
<EntitySwitch.Case if={isNewRelicDashboardAvailable}>
<Grid item md={6} xs={12}>
<EntityNewRelicDashboardCard />
</Grid>
</EntitySwitch.Case>
</EntitySwitch>
```
4. Add `newrelic.com/dashboard-guid` annotation in catalog descriptor file
To Obtain the dashboard's GUID: Click the info icon by the dashboard's name to access the See metadata and manage tags modal and see the dashboard's GUID.
```
// catalog-info.yaml
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
# ...
annotations:
newrelic.com/dashboard-guid: <dashboard_guid>
spec:
type: service
```
All set , you will be able to see the plugin in action!
plugins/newrelic-dashboard/api-report.md
+38
View File
@@ -0,0 +1,38 @@
## API Report File for "@backstage/plugin-newrelic-dashboard"
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
```ts
/// <reference types="react" />
import { BackstagePlugin } from '@backstage/core-plugin-api';
import { Entity } from '@backstage/catalog-model';
import { RouteRef } from '@backstage/core-plugin-api';
// Warning: (ae-missing-release-tag) "EntityNewRelicDashboardCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export const EntityNewRelicDashboardCard: () => JSX.Element;
// Warning: (ae-missing-release-tag) "EntityNewRelicDashboardContent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export const EntityNewRelicDashboardContent: () => JSX.Element;
// Warning: (ae-missing-release-tag) "isNewRelicDashboardAvailable" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export const isNewRelicDashboardAvailable: (entity: Entity) => boolean;
// Warning: (ae-missing-release-tag) "newRelicDashboardPlugin" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export const newRelicDashboardPlugin: BackstagePlugin<
{
root: RouteRef<undefined>;
},
{}
>;
// (No @packageDocumentation comment for this package)
```
plugins/newrelic-dashboard/dev/index.tsx
+19
View File
@@ -0,0 +1,19 @@
/*
* Copyright 2021 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 { createDevApp } from '@backstage/dev-utils';
import { newRelicDashboardPlugin } from './../src/plugin';
createDevApp().registerPlugin(newRelicDashboardPlugin).render();
plugins/newrelic-dashboard/package.json
+46
View File
@@ -0,0 +1,46 @@
{
"name": "@backstage/plugin-newrelic-dashboard",
"version": "0.1.0",
"main": "src/index.ts",
"types": "src/index.ts",
"license": "Apache-2.0",
"publishConfig": {
"access": "public",
"main": "dist/index.esm.js",
"types": "dist/index.d.ts"
},
"scripts": {
"build": "backstage-cli plugin:build",
"start": "backstage-cli plugin:serve",
"lint": "backstage-cli lint",
"test": "backstage-cli test",
"diff": "backstage-cli plugin:diff",
"prepack": "backstage-cli prepack",
"postpack": "backstage-cli postpack",
"clean": "backstage-cli clean"
},
"dependencies": {
"@backstage/catalog-model": "^0.9.8",
"@backstage/core-components": "^0.8.1",
"@backstage/core-plugin-api": "^0.3.1",
"@backstage/errors": "^0.1.5",
"@backstage/plugin-catalog-react": "^0.6.7",
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"react-use": "^17.2.4"
},
"devDependencies": {
"@backstage/cli": "^0.10.2",
"@backstage/dev-utils": "^0.2.14",
"@testing-library/jest-dom": "^5.10.1",
"@types/react": "^16.13.1 || ^17.0.0",
"cross-fetch": "^3.0.6"
},
"files": [
"dist"
],
"peerDependencies": {
"react": "^16.13.1 || ^17.0.0"
}
}
plugins/newrelic-dashboard/src/Router.tsx
+46
View File
@@ -0,0 +1,46 @@
/*
* Copyright 2021 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 { Entity } from '@backstage/catalog-model';
import React from 'react';
import { MissingAnnotationEmptyState } from '@backstage/core-components';
import { Button } from '@material-ui/core';
import { NewRelicDashboard } from './components/NewRelicDashboard';
import { useEntity } from '@backstage/plugin-catalog-react';
import { NEWRELIC_GUID_ANNOTATION } from './constants';
export const isNewRelicDashboardAvailable = (entity: Entity) =>
Boolean(entity?.metadata?.annotations?.[NEWRELIC_GUID_ANNOTATION]);
export const Router = () => {
const { entity } = useEntity();
if (isNewRelicDashboardAvailable(entity)) {
return <NewRelicDashboard />;
}
return (
<>
<MissingAnnotationEmptyState annotation={NEWRELIC_GUID_ANNOTATION} />
<Button
variant="contained"
color="primary"
href="https://github.com/backstage/backstage/tree/master/plugins/newrelic-dashboard"
>
Read New Relic Dashboard Plugin Docs
</Button>
</>
);
};
plugins/newrelic-dashboard/src/api/NewRelicDashboardApi.ts
+42
View File
@@ -0,0 +1,42 @@
/*
* Copyright 2021 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 { createApiRef } from '@backstage/core-plugin-api';
import { DashboardEntity } from '../types/DashboardEntity';
import { DashboardSnapshot } from '../types/DashboardSnapshot';
import { SnapshotDetails } from '../types/SnapshotDetails';
export interface DashboardEntitySummary {
getDashboardEntity: DashboardEntity;
}
export interface DashboardSnapshotSummary {
getDashboardSnapshot: DashboardSnapshot;
}
export interface SnapshotDetailsSummary {
getSnapshotDetails: SnapshotDetails[];
}
export const newRelicDashboardApiRef = createApiRef<NewRelicDashboardApi>({
id: 'plugin.newrelicdashboard.service',
});
export type NewRelicDashboardApi = {
getDashboardEntity(guid: string): Promise<DashboardEntitySummary | undefined>;
getDashboardSnapshot(
guid: string,
duration: number,
): Promise<DashboardSnapshotSummary | undefined>;
};
plugins/newrelic-dashboard/src/api/NewRelicDashboardClient.ts
+99
View File
@@ -0,0 +1,99 @@
/*
* Copyright 2021 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 {
DashboardEntitySummary,
DashboardSnapshotSummary,
NewRelicDashboardApi,
} from './NewRelicDashboardApi';
import { DiscoveryApi } from '@backstage/core-plugin-api';
import { DashboardEntity } from '../types/DashboardEntity';
import { DashboardSnapshot } from '../types/DashboardSnapshot';
import { getDashboardParentGuidQuery } from '../queries/getDashboardParentGuidQuery';
import { getDashboardSnapshotQuery } from '../queries/getDashboardSnapshotQuery';
import { ResponseError } from '@backstage/errors';
export class NewRelicDashboardClient implements NewRelicDashboardApi {
private readonly discoveryApi: DiscoveryApi;
constructor({
discoveryApi,
}: {
discoveryApi: DiscoveryApi;
baseUrl?: string;
}) {
this.discoveryApi = discoveryApi;
}
private async callApi<T>(
query: string,
variables: { [key in string]: string | number },
): Promise<T | undefined> {
const myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');
const graphql = JSON.stringify({
query: query,
variables: variables,
});
const requestOptions: RequestInit = {
method: 'POST',
headers: myHeaders,
body: graphql,
redirect: 'follow',
};
const apiUrl = `${await this.discoveryApi.getBaseUrl(
'proxy',
)}/newrelic/api/graphql`;
const response = await fetch(apiUrl, requestOptions);
if (response.status === 200) {
return (await response.json()) as T;
}
if (!response.ok) {
throw await ResponseError.fromResponse(response);
} else {
return undefined;
}
}
async getDashboardEntity(
guid: string,
): Promise<DashboardEntitySummary | undefined> {
const DashboardEntityList = await this.callApi<DashboardEntity>(
getDashboardParentGuidQuery,
{
query: `parentId ='${guid}'`,
},
);
return {
getDashboardEntity: DashboardEntityList!,
};
}
async getDashboardSnapshot(
guid: string,
duration: number,
): Promise<DashboardSnapshotSummary | undefined> {
const DashboardSnapshotValue = await this.callApi<DashboardSnapshot>(
getDashboardSnapshotQuery,
{
guid: guid,
duration: duration,
},
);
return {
getDashboardSnapshot: DashboardSnapshotValue!,
};
}
}
plugins/newrelic-dashboard/src/api/index.ts
+18
View File
@@ -0,0 +1,18 @@
/*
* Copyright 2021 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 type { NewRelicDashboardApi } from './NewRelicDashboardApi';
export { newRelicDashboardApiRef } from './NewRelicDashboardApi';
export { NewRelicDashboardClient } from './NewRelicDashboardClient';
plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardEntityList.tsx
+89
View File
@@ -0,0 +1,89 @@
/*
* Copyright 2021 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 React from 'react';
import { Box, makeStyles, Typography } from '@material-ui/core';
import { newRelicDashboardApiRef } from '../../api';
import { useApi } from '@backstage/core-plugin-api';
import { useAsync } from 'react-use';
import {
Progress,
InfoCard,
Link,
ErrorPanel,
} from '@backstage/core-components';
import DesktopMac from '@material-ui/icons/DesktopMac';
import { DashboardEntitySummary } from '../../api/NewRelicDashboardApi';
import { ResultEntity } from '../../types/DashboardEntity';
import { useEntity } from '@backstage/plugin-catalog-react';
import { NEWRELIC_GUID_ANNOTATION } from './../../constants';
const useStyles = makeStyles({
svgIcon: {
display: 'inline-block',
'& svg': {
display: 'inline-block',
fontSize: 'inherit',
verticalAlign: 'baseline',
},
},
});
export const DashboardEntityList = () => {
const { entity } = useEntity();
const classes = useStyles();
const newRelicDashboardAPI = useApi(newRelicDashboardApiRef);
const { value, loading, error } = useAsync(async (): Promise<
DashboardEntitySummary | undefined
> => {
const dashboardObject: Promise<DashboardEntitySummary | undefined> =
newRelicDashboardAPI.getDashboardEntity(
String(entity.metadata.annotations?.[NEWRELIC_GUID_ANNOTATION]),
);
return dashboardObject;
}, [entity.metadata.annotations?.[NEWRELIC_GUID_ANNOTATION]]);
if (loading) {
return <Progress />;
}
if (error) {
return <ErrorPanel title={error.name} defaultExpanded error={error} />;
}
return (
<InfoCard title="New Relic Dashboard Pages" variant="gridItem">
{value?.getDashboardEntity === undefined &&
'Unauthorized Request , please check API Key'}
{value?.getDashboardEntity !== undefined &&
value?.getDashboardEntity?.data.actor.entitySearch.results?.entities
?.length <= 0 && (
<>No Dashboard Pages found with the specified Dashboard GUID</>
)}
{value?.getDashboardEntity?.data.actor.entitySearch.results.entities?.map(
(entityResult: ResultEntity) => {
return (
<Box style={{ margin: '10px' }} display="flex">
<Box mr={1} className={classes.svgIcon}>
<Typography component="div">
<DesktopMac />
</Typography>
</Box>
<Box flexGrow="1">
<Link to={entityResult.permalink}>{entityResult.name}</Link>
</Box>
</Box>
);
},
)}
</InfoCard>
);
};
plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx
+82
View File
@@ -0,0 +1,82 @@
/*
* Copyright 2021 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 React from 'react';
import { Box, Grid } from '@material-ui/core';
import { useApi } from '@backstage/core-plugin-api';
import { useAsync } from 'react-use';
import {
InfoCard,
Progress,
ErrorPanel,
Link,
} from '@backstage/core-components';
import { newRelicDashboardApiRef } from '../../../api';
import { DashboardSnapshotSummary } from './../../../api/NewRelicDashboardApi';
type Props = {
guid: string;
name: string;
permalink: string;
duration: number;
};
export const DashboardSnapshot = ({
guid,
name,
permalink,
duration,
}: Props) => {
const newRelicDashboardAPI = useApi(newRelicDashboardApiRef);
const { value, loading, error } = useAsync(async (): Promise<
DashboardSnapshotSummary | undefined
> => {
const dashboardObject: Promise<DashboardSnapshotSummary | undefined> =
newRelicDashboardAPI.getDashboardSnapshot(guid, duration);
return dashboardObject;
}, [guid, duration]);
if (loading) {
return <Progress />;
}
if (error) {
return <ErrorPanel title={error.name} defaultExpanded error={error} />;
}
const url =
value?.getDashboardSnapshot?.data?.dashboardCreateSnapshotUrl?.replace(
/\pdf$/i,
'png',
);
return (
<Grid container style={{ marginTop: '30px' }}>
<InfoCard variant="gridItem" title={name}>
<Box display="flex">
<Box flexGrow="1">
<Link to={permalink}>
{url ? (
<img
alt={`${name} Dashbord`}
style={{ border: 'solid 1px black' }}
src={url}
/>
) : (
'Dashboard loading... , click here to open if it didnt render correctly'
)}
</Link>
</Box>
</Box>
</InfoCard>
</Grid>
);
};
plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx
+148
View File
@@ -0,0 +1,148 @@
/*
* Copyright 2021 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 React, { useState } from 'react';
import { Grid, Tab, Tabs, makeStyles } from '@material-ui/core';
import { newRelicDashboardApiRef } from '../../../api';
import { useApi } from '@backstage/core-plugin-api';
import { useAsync } from 'react-use';
import { Progress, ErrorPanel } from '@backstage/core-components';
import { DashboardSnapshot } from './DashboardSnapshot';
import { DashboardEntitySummary } from '../../../api/NewRelicDashboardApi';
import { ResultEntity } from '../../../types/DashboardEntity';
interface TabPanelProps {
children?: React.ReactNode;
index: number;
value1: number;
}
function TabPanel(props: TabPanelProps) {
const { children, value1, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value1 !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{children}
</div>
);
}
function a11yProps(index: number) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
type Props = {
guid: string;
};
const useStyles = makeStyles(
theme => ({
tabsWrapper: {
gridArea: 'pageSubheader',
backgroundColor: theme.palette.background.paper,
paddingLeft: theme.spacing(3),
},
defaultTab: {
padding: theme.spacing(3, 3),
...theme.typography.caption,
textTransform: 'uppercase',
fontWeight: 'bold',
color: theme.palette.text.secondary,
},
selected: {
color: theme.palette.text.primary,
},
tabRoot: {
'&:hover': {
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
},
},
}),
{ name: 'DashboardHeaderTabs' },
);
export const DashboardSnapshotList = ({ guid }: Props) => {
const styles = useStyles();
const newRelicDashboardAPI = useApi(newRelicDashboardApiRef);
const { value, loading, error } = useAsync(async (): Promise<
DashboardEntitySummary | undefined
> => {
const dashboardObject: Promise<DashboardEntitySummary | undefined> =
newRelicDashboardAPI.getDashboardEntity(guid);
return dashboardObject;
}, [guid]);
const [value1, setValue1] = useState<number>(0);
const handleChange = ({}: React.ChangeEvent<{}>, newValue: number) => {
setValue1(newValue);
};
if (loading) {
return <Progress />;
}
if (error) {
return <ErrorPanel title={error.name} defaultExpanded error={error} />;
}
return (
<Grid container direction="column">
<Tabs
selectionFollowsFocus
indicatorColor="primary"
textColor="inherit"
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
onChange={handleChange}
value={value1}
style={{ width: '100%' }}
>
{value?.getDashboardEntity?.data?.actor.entitySearch.results.entities?.map(
(Entity: ResultEntity, index: number) => {
return (
<Tab
label={Entity.name}
className={styles.defaultTab}
classes={{
selected: styles.selected,
root: styles.tabRoot,
}}
{...a11yProps(index)}
/>
);
},
)}
</Tabs>
{value?.getDashboardEntity?.data?.actor.entitySearch.results.entities?.map(
(Entity: ResultEntity, index: number) => {
return (
<TabPanel value1={value1} index={index}>
<DashboardSnapshot
name={Entity.name}
permalink={Entity.permalink}
guid={Entity.guid}
duration={26297430000}
/>
</TabPanel>
);
},
)}
</Grid>
);
};
plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/index.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* Copyright 2021 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 { DashboardSnapshot } from './DashboardSnapshot';
export { DashboardSnapshotList } from './DashboardSnapshotList';
plugins/newrelic-dashboard/src/components/NewRelicDashboard/NewRelicDashboard.tsx
+44
View File
@@ -0,0 +1,44 @@
/*
* Copyright 2021 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 React from 'react';
import { Grid } from '@material-ui/core';
import { Page, Content } from '@backstage/core-components';
import { DashboardEntityList } from './DashboardEntityList';
import { DashboardSnapshotList } from './DashboardSnapshotList';
import { useEntity } from '@backstage/plugin-catalog-react';
import { NEWRELIC_GUID_ANNOTATION } from '../../constants';
export const NewRelicDashboard = () => {
const { entity } = useEntity();
return (
<Page themeId="home">
<Content>
<Grid container spacing={6} direction="row" alignItems="stretch">
<Grid item xs={12}>
<DashboardEntityList />
</Grid>
<Grid item xs={12}>
<DashboardSnapshotList
guid={String(
entity.metadata.annotations?.[NEWRELIC_GUID_ANNOTATION],
)}
/>
</Grid>
</Grid>
</Content>
</Page>
);
};
plugins/newrelic-dashboard/src/components/NewRelicDashboard/index.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2021 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 { NewRelicDashboard } from './NewRelicDashboard';
plugins/newrelic-dashboard/src/constants.ts
+16
View File
@@ -0,0 +1,16 @@
/*
* Copyright 2021 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 const NEWRELIC_GUID_ANNOTATION = 'newrelic.com/dashboard-guid';
plugins/newrelic-dashboard/src/index.ts
+21
View File
@@ -0,0 +1,21 @@
/*
* Copyright 2021 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 {
newRelicDashboardPlugin,
EntityNewRelicDashboardCard,
EntityNewRelicDashboardContent,
} from './plugin';
export { isNewRelicDashboardAvailable } from './Router';
plugins/newrelic-dashboard/src/plugin.test.ts
+22
View File
@@ -0,0 +1,22 @@
/*
* Copyright 2021 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 { newRelicDashboardPlugin } from './plugin';
describe('new-relic-dashboard', () => {
it('should export plugin', () => {
expect(newRelicDashboardPlugin).toBeDefined();
});
});
plugins/newrelic-dashboard/src/plugin.ts
+62
View File
@@ -0,0 +1,62 @@
/*
* Copyright 2021 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 {
createPlugin,
configApiRef,
createApiFactory,
discoveryApiRef,
createComponentExtension,
} from '@backstage/core-plugin-api';
import { newRelicDashboardApiRef, NewRelicDashboardClient } from './api';
import { rootRouteRef } from './routes';
export const newRelicDashboardPlugin = createPlugin({
id: 'new-relic-dashboard',
routes: {
root: rootRouteRef,
},
apis: [
createApiFactory({
api: newRelicDashboardApiRef,
deps: { configApi: configApiRef, discoveryApi: discoveryApiRef },
factory: ({ configApi, discoveryApi }) =>
new NewRelicDashboardClient({
discoveryApi,
baseUrl: configApi.getOptionalString('newrelicdashboard.baseUrl'),
}),
}),
],
});
export const EntityNewRelicDashboardContent = newRelicDashboardPlugin.provide(
createComponentExtension({
name: 'EntityNewRelicDashboardPage',
component: {
lazy: () => import('./Router').then(m => m.Router),
},
}),
);
export const EntityNewRelicDashboardCard = newRelicDashboardPlugin.provide(
createComponentExtension({
name: 'EntityNewRelicDashboardListComponent',
component: {
lazy: () =>
import('./components/NewRelicDashboard/DashboardEntityList').then(
m => m.DashboardEntityList,
),
},
}),
);
plugins/newrelic-dashboard/src/queries/getDashboardParentGuidQuery.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* Copyright 2021 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 const getDashboardParentGuidQuery =
'query ($query: String) {\n actor {\n entitySearch(query: $query) {\n results {\n entities {\n name\n ... on DashboardEntityOutline {\n name\n guid\n }\n permalink\n }\n }\n }\n }\n}\n';
plugins/newrelic-dashboard/src/queries/getDashboardSnapshotQuery.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* Copyright 2021 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 const getDashboardSnapshotQuery =
'mutation($guid: EntityGuid! , ,$duration: Milliseconds) {\n dashboardCreateSnapshotUrl(guid: $guid , params: {timeWindow: {duration: $duration}})\n}';
plugins/newrelic-dashboard/src/routes.ts
+20
View File
@@ -0,0 +1,20 @@
/*
* Copyright 2021 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 { createRouteRef } from '@backstage/core-plugin-api';
export const rootRouteRef = createRouteRef({
id: 'new-relic-dashboard',
});
plugins/newrelic-dashboard/src/setupTests.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* Copyright 2021 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 '@testing-library/jest-dom';
import 'cross-fetch/polyfill';
plugins/newrelic-dashboard/src/types/DashboardEntity.ts
+33
View File
@@ -0,0 +1,33 @@
/*
* Copyright 2021 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 type DashboardEntity = {
data: {
actor: {
entitySearch: {
results: {
entities: Array<ResultEntity>;
};
};
};
};
};
export type ResultEntity = {
guid: string;
permalink: string;
name: string;
};
plugins/newrelic-dashboard/src/types/DashboardSnapshot.ts
+21
View File
@@ -0,0 +1,21 @@
/*
* Copyright 2021 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 type DashboardSnapshot = {
data: {
dashboardCreateSnapshotUrl: string;
};
};
plugins/newrelic-dashboard/src/types/SnapshotDetails.ts
+20
View File
@@ -0,0 +1,20 @@
/*
* Copyright 2021 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 type SnapshotDetails = {
dashboardSnapshotUrl: string;
permalink: string;
};