@backstage-community/plugin-newrelic-dashboard 0.3.10

package/README.md

@@ -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-community/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!

package/dist/index.d.ts

@@ -0,0 +1,55 @@
+/// <reference types="react" />
+import * as react from 'react';
+import * as _backstage_core_plugin_api from '@backstage/core-plugin-api';
+import { Entity } from '@backstage/catalog-model';
+
+/** @public */
+declare const newRelicDashboardPlugin: _backstage_core_plugin_api.BackstagePlugin<{
+    root: _backstage_core_plugin_api.RouteRef<undefined>;
+}, {}, {}>;
+/** @public */
+declare const EntityNewRelicDashboardContent: () => react.JSX.Element;
+/** @public */
+declare const EntityNewRelicDashboardCard: () => react.JSX.Element;
+/**
+ * Render dashboard snapshots from Newrelic in backstage. Use dashboards which have the tag `isDashboardPage: true`
+ *
+ * @remarks
+ * This can be helpful for rendering dashboards outside of Entity Catalog.
+ *
+ * @public
+ */
+declare const DashboardSnapshot: (props: {
+    guid: string;
+    name: string;
+    permalink: string;
+}) => react.JSX.Element;
+/**
+ * Render dashboard snapshots from Newrelic in backstage. Use dashboards which have the tag `isDashboardPage: true`
+ *
+ * @deprecated
+ * Use DashboardSnapshot export name instead
+ *
+ * @public
+ */
+declare const DashboardSnapshotComponent: (props: {
+    guid: string;
+    name: string;
+    permalink: string;
+}) => react.JSX.Element;
+/**
+ * Render a dashboard snapshots list from Newrelic in backstage. Use dashboards which have the tag `isDashboardPage: true`
+ *
+ * @remarks
+ * This can be helpful for rendering dashboards outside of Entity Catalog.
+ *
+ * @public
+ */
+declare const DashboardSnapshotList: (props: {
+    guid: string;
+}) => react.JSX.Element;
+
+/** @public */
+declare const isNewRelicDashboardAvailable: (entity: Entity) => boolean;
+
+export { DashboardSnapshot, DashboardSnapshotComponent, DashboardSnapshotList, EntityNewRelicDashboardCard, EntityNewRelicDashboardContent, isNewRelicDashboardAvailable, newRelicDashboardPlugin };

package/dist/index.esm.js

@@ -0,0 +1,447 @@
+import { createApiRef, createRouteRef, createPlugin, createApiFactory, configApiRef, discoveryApiRef, fetchApiRef, createComponentExtension, useApi, storageApiRef } from '@backstage/core-plugin-api';
+import { ResponseError } from '@backstage/errors';
+import React, { useState } from 'react';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+import { Progress, ErrorPanel, InfoCard, Link, Page, Content } from '@backstage/core-components';
+import Box from '@material-ui/core/Box';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import Typography from '@material-ui/core/Typography';
+import useAsync from 'react-use/esm/useAsync';
+import DesktopMac from '@material-ui/icons/DesktopMac';
+import { useEntity, MissingAnnotationEmptyState } from '@backstage/plugin-catalog-react';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import useObservable from 'react-use/esm/useObservable';
+import Tab from '@material-ui/core/Tab';
+import Tabs from '@material-ui/core/Tabs';
+
+const newRelicDashboardApiRef = createApiRef({
+  id: "plugin.newrelicdashboard.service"
+});
+
+const getDashboardParentGuidQuery = "query ($query: String) {\n  actor {\n    entitySearch(query: $query) {\n      results {\n        entities {\n          name\n          ... on DashboardEntityOutline {\n            name\n            dashboardParentGuid\n          guid\n          }\n          permalink\n        }\n      }\n    }\n  }\n}\n";
+
+const getDashboardSnapshotQuery = "mutation($guid: EntityGuid! , ,$duration: Milliseconds) {\n  dashboardCreateSnapshotUrl(guid: $guid , params: {timeWindow: {duration: $duration}})\n}";
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class NewRelicDashboardClient {
+  constructor({
+    discoveryApi,
+    fetchApi
+  }) {
+    __publicField(this, "discoveryApi");
+    __publicField(this, "fetchApi");
+    this.discoveryApi = discoveryApi;
+    this.fetchApi = fetchApi;
+  }
+  async callApi(query, variables) {
+    const myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+    const graphql = JSON.stringify({
+      query,
+      variables
+    });
+    const requestOptions = {
+      method: "POST",
+      headers: myHeaders,
+      body: graphql,
+      redirect: "follow"
+    };
+    const apiUrl = `${await this.discoveryApi.getBaseUrl(
+      "proxy"
+    )}/newrelic/api/graphql`;
+    const response = await this.fetchApi.fetch(apiUrl, requestOptions);
+    if (response.status === 200) {
+      return await response.json();
+    }
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    } else {
+      return void 0;
+    }
+  }
+  async getDashboardEntity(guid) {
+    var _a, _b;
+    const DashboardEntityList = await this.callApi(
+      getDashboardParentGuidQuery,
+      {
+        query: `id ='${guid}' OR parentId ='${guid}'`
+      }
+    );
+    if (DashboardEntityList && ((_b = (_a = DashboardEntityList == null ? void 0 : DashboardEntityList.data) == null ? void 0 : _a.actor.entitySearch.results.entities) == null ? void 0 : _b.length) > 1) {
+      DashboardEntityList.data.actor.entitySearch.results.entities = DashboardEntityList == null ? void 0 : DashboardEntityList.data.actor.entitySearch.results.entities.filter(
+        (entity) => (entity == null ? void 0 : entity.dashboardParentGuid) !== null
+      );
+    }
+    return {
+      getDashboardEntity: DashboardEntityList
+    };
+  }
+  async getDashboardSnapshot(guid, duration) {
+    const DashboardSnapshotValue = await this.callApi(
+      getDashboardSnapshotQuery,
+      {
+        guid,
+        duration
+      }
+    );
+    return {
+      getDashboardSnapshot: DashboardSnapshotValue
+    };
+  }
+}
+
+const rootRouteRef = createRouteRef({
+  id: "new-relic-dashboard"
+});
+
+const newRelicDashboardPlugin = createPlugin({
+  id: "new-relic-dashboard",
+  routes: {
+    root: rootRouteRef
+  },
+  apis: [
+    createApiFactory({
+      api: newRelicDashboardApiRef,
+      deps: {
+        configApi: configApiRef,
+        discoveryApi: discoveryApiRef,
+        fetchApi: fetchApiRef
+      },
+      factory: ({ configApi, discoveryApi, fetchApi }) => new NewRelicDashboardClient({
+        discoveryApi,
+        fetchApi,
+        baseUrl: configApi.getOptionalString("newrelicdashboard.baseUrl")
+      })
+    })
+  ]
+});
+const EntityNewRelicDashboardContent = newRelicDashboardPlugin.provide(
+  createComponentExtension({
+    name: "EntityNewRelicDashboardContent",
+    component: {
+      lazy: () => Promise.resolve().then(function () { return Router$1; }).then((m) => m.Router)
+    }
+  })
+);
+const EntityNewRelicDashboardCard = newRelicDashboardPlugin.provide(
+  createComponentExtension({
+    name: "EntityNewRelicDashboardCard",
+    component: {
+      lazy: () => Promise.resolve().then(function () { return DashboardEntityList$1; }).then(
+        (m) => m.DashboardEntityList
+      )
+    }
+  })
+);
+const DashboardSnapshot$2 = newRelicDashboardPlugin.provide(
+  createComponentExtension({
+    name: "DashboardSnapshot",
+    component: {
+      lazy: () => Promise.resolve().then(function () { return DashboardSnapshot$1; }).then((m) => m.DashboardSnapshot)
+    }
+  })
+);
+const DashboardSnapshotComponent = DashboardSnapshot$2;
+const DashboardSnapshotList$2 = newRelicDashboardPlugin.provide(
+  createComponentExtension({
+    name: "DashboardSnapshotList",
+    component: {
+      lazy: () => Promise.resolve().then(function () { return DashboardSnapshotList$1; }).then((m) => m.DashboardSnapshotList)
+    }
+  })
+);
+
+const NEWRELIC_GUID_ANNOTATION = "newrelic.com/dashboard-guid";
+
+const useStyles$2 = makeStyles({
+  svgIcon: {
+    display: "inline-block",
+    "& svg": {
+      display: "inline-block",
+      fontSize: "inherit",
+      verticalAlign: "baseline"
+    }
+  }
+});
+const DashboardEntityList = () => {
+  var _a, _b, _c, _d, _e, _f;
+  const { entity } = useEntity();
+  const classes = useStyles$2();
+  const newRelicDashboardAPI = useApi(newRelicDashboardApiRef);
+  const { value, loading, error } = useAsync(async () => {
+    var _a2;
+    const dashboardObject = newRelicDashboardAPI.getDashboardEntity(
+      String((_a2 = entity.metadata.annotations) == null ? void 0 : _a2[NEWRELIC_GUID_ANNOTATION])
+    );
+    return dashboardObject;
+  }, [(_a = entity.metadata.annotations) == null ? void 0 : _a[NEWRELIC_GUID_ANNOTATION]]);
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(ErrorPanel, { title: error.name, defaultExpanded: true, error });
+  }
+  return /* @__PURE__ */ React.createElement(InfoCard, { title: "New Relic Dashboard Pages", variant: "gridItem" }, (value == null ? void 0 : value.getDashboardEntity) === void 0 && "Unauthorized Request , please check API Key", (value == null ? void 0 : value.getDashboardEntity) !== void 0 && ((_d = (_c = (_b = value == null ? void 0 : value.getDashboardEntity) == null ? void 0 : _b.data.actor.entitySearch.results) == null ? void 0 : _c.entities) == null ? void 0 : _d.length) <= 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, "No Dashboard Pages found with the specified Dashboard GUID"), (_f = (_e = value == null ? void 0 : value.getDashboardEntity) == null ? void 0 : _e.data.actor.entitySearch.results.entities) == null ? void 0 : _f.map(
+    (entityResult, index) => {
+      return /* @__PURE__ */ React.createElement(Box, { style: { margin: "10px" }, display: "flex", key: index }, /* @__PURE__ */ React.createElement(Box, { mr: 1, className: classes.svgIcon }, /* @__PURE__ */ React.createElement(Typography, { component: "div" }, /* @__PURE__ */ React.createElement(DesktopMac, null))), /* @__PURE__ */ React.createElement(Box, { flexGrow: "1" }, /* @__PURE__ */ React.createElement(Link, { to: entityResult.permalink }, entityResult.name)));
+    }
+  ));
+};
+
+var DashboardEntityList$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  DashboardEntityList: DashboardEntityList
+});
+
+const useStyles$1 = makeStyles(
+  (theme) => ({
+    cardSelect: {
+      margin: theme.spacing(2, 1, 0, 0)
+    },
+    img: {
+      width: "100%",
+      height: "auto",
+      border: `solid 1px ${theme.palette.common.black}`
+    }
+  }),
+  { name: "BackstageNewRelicDashboardSnapshot" }
+);
+const DashboardSnapshot = (props) => {
+  var _a, _b, _c;
+  const classes = useStyles$1();
+  const { guid, name, permalink } = props;
+  const newRelicDashboardAPI = useApi(newRelicDashboardApiRef);
+  const storageApi = useApi(storageApiRef).forBucket("newrelic-dashboard");
+  const setStorageValue = (value2) => {
+    storageApi.set(guid, value2);
+  };
+  const storageSnapshot = useObservable(
+    storageApi.observe$(guid),
+    storageApi.snapshot(guid)
+  );
+  const { value, loading, error } = useAsync(async () => {
+    const dashboardObject = newRelicDashboardAPI.getDashboardSnapshot(
+      guid,
+      storageSnapshot.value || 2592e6
+    );
+    return dashboardObject;
+  }, [guid, storageSnapshot.value]);
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(ErrorPanel, { title: error.name, defaultExpanded: true, error });
+  }
+  const url = (_c = (_b = (_a = value == null ? void 0 : value.getDashboardSnapshot) == null ? void 0 : _a.data) == null ? void 0 : _b.dashboardCreateSnapshotUrl) == null ? void 0 : _c.replace(
+    /\pdf$/i,
+    "png"
+  );
+  return /* @__PURE__ */ React.createElement(
+    InfoCard,
+    {
+      variant: "gridItem",
+      title: name,
+      action: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+        Select,
+        {
+          className: classes.cardSelect,
+          defaultValue: 2592e6,
+          value: storageSnapshot.value,
+          onChange: (event) => {
+            setStorageValue(Number(event.target.value));
+          }
+        },
+        /* @__PURE__ */ React.createElement(MenuItem, { value: 36e5 }, "1 Hour"),
+        /* @__PURE__ */ React.createElement(MenuItem, { value: 432e5 }, "12 Hours"),
+        /* @__PURE__ */ React.createElement(MenuItem, { value: 864e5 }, "1 Day"),
+        /* @__PURE__ */ React.createElement(MenuItem, { value: 2592e5 }, "3 Days"),
+        /* @__PURE__ */ React.createElement(MenuItem, { value: 6048e5 }, "1 Week"),
+        /* @__PURE__ */ React.createElement(MenuItem, { value: 2592e6 }, "1 Month")
+      ))
+    },
+    /* @__PURE__ */ React.createElement(Box, { display: "flex" }, /* @__PURE__ */ React.createElement(Box, { flexGrow: "1" }, /* @__PURE__ */ React.createElement(Link, { to: permalink }, url ? /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        alt: `${name} Dashboard`,
+        className: classes.img,
+        src: url
+      }
+    ) : "Dashboard loading... , click here to open if it did not render correctly")))
+  );
+};
+
+var DashboardSnapshot$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  DashboardSnapshot: DashboardSnapshot
+});
+
+const tabPanelStyles = makeStyles(
+  (theme) => ({
+    tabPanel: {
+      marginTop: theme.spacing(0.5)
+    }
+  }),
+  { name: "BackstageNewRelicDashboardTabPanel" }
+);
+function TabPanel(props) {
+  const { children, value1, index, ...other } = props;
+  const classes = tabPanelStyles(tabPanelStyles);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classes.tabPanel,
+      role: "tabpanel",
+      hidden: value1 !== index,
+      id: `simple-tabpanel-${index}`,
+      "aria-labelledby": `simple-tab-${index}`,
+      ...other
+    },
+    children
+  );
+}
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`
+  };
+}
+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" }
+);
+const DashboardSnapshotList = (props) => {
+  var _a, _b, _c, _d, _e, _f;
+  const { guid } = props;
+  const styles = useStyles();
+  const newRelicDashboardAPI = useApi(newRelicDashboardApiRef);
+  const { value, loading, error } = useAsync(async () => {
+    const dashboardObject = newRelicDashboardAPI.getDashboardEntity(guid);
+    return dashboardObject;
+  }, [guid]);
+  const [value1, setValue1] = useState(0);
+  const handleChange = ({}, newValue) => {
+    setValue1(newValue);
+  };
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(ErrorPanel, { title: error.name, defaultExpanded: true, error });
+  }
+  return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
+    Tabs,
+    {
+      selectionFollowsFocus: true,
+      indicatorColor: "primary",
+      textColor: "inherit",
+      variant: "scrollable",
+      scrollButtons: "auto",
+      "aria-label": "scrollable auto tabs example",
+      onChange: handleChange,
+      value: value1
+    },
+    (_c = (_b = (_a = value == null ? void 0 : value.getDashboardEntity) == null ? void 0 : _a.data) == null ? void 0 : _b.actor.entitySearch.results.entities) == null ? void 0 : _c.map(
+      (Entity, index) => {
+        return /* @__PURE__ */ React.createElement(
+          Tab,
+          {
+            label: Entity.name,
+            className: styles.defaultTab,
+            classes: {
+              selected: styles.selected,
+              root: styles.tabRoot
+            },
+            ...a11yProps(index)
+          }
+        );
+      }
+    )
+  ), (_f = (_e = (_d = value == null ? void 0 : value.getDashboardEntity) == null ? void 0 : _d.data) == null ? void 0 : _e.actor.entitySearch.results.entities) == null ? void 0 : _f.map(
+    (Entity, index) => {
+      return /* @__PURE__ */ React.createElement(TabPanel, { value1, index }, /* @__PURE__ */ React.createElement(
+        DashboardSnapshot,
+        {
+          name: Entity.name,
+          permalink: Entity.permalink,
+          guid: Entity.guid
+        }
+      ));
+    }
+  ));
+};
+
+var DashboardSnapshotList$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  DashboardSnapshotList: DashboardSnapshotList
+});
+
+const NewRelicDashboard = () => {
+  var _a;
+  const { entity } = useEntity();
+  return /* @__PURE__ */ React.createElement(Page, { themeId: "home" }, /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 6, direction: "row", alignItems: "stretch" }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(DashboardEntityList, null)), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(
+    DashboardSnapshotList,
+    {
+      guid: String(
+        (_a = entity.metadata.annotations) == null ? void 0 : _a[NEWRELIC_GUID_ANNOTATION]
+      )
+    }
+  )))));
+};
+
+const isNewRelicDashboardAvailable = (entity) => {
+  var _a, _b;
+  return Boolean((_b = (_a = entity == null ? void 0 : entity.metadata) == null ? void 0 : _a.annotations) == null ? void 0 : _b[NEWRELIC_GUID_ANNOTATION]);
+};
+const Router = () => {
+  const { entity } = useEntity();
+  if (isNewRelicDashboardAvailable(entity)) {
+    return /* @__PURE__ */ React.createElement(NewRelicDashboard, null);
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MissingAnnotationEmptyState, { annotation: NEWRELIC_GUID_ANNOTATION }), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      color: "primary",
+      href: "https://github.com/backstage/backstage/tree/master/plugins/newrelic-dashboard"
+    },
+    "Read New Relic Dashboard Plugin Docs"
+  ));
+};
+
+var Router$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Router: Router,
+  isNewRelicDashboardAvailable: isNewRelicDashboardAvailable
+});
+
+export { DashboardSnapshot$2 as DashboardSnapshot, DashboardSnapshotComponent, DashboardSnapshotList$2 as DashboardSnapshotList, EntityNewRelicDashboardCard, EntityNewRelicDashboardContent, isNewRelicDashboardAvailable, newRelicDashboardPlugin };
+//# sourceMappingURL=index.esm.js.map