Merge pull request #12326 from jakecrews74/new-relic-dashboard/add-time-series-customization

Add input to adjust time window for the newrelic-dashboard plugin and minor bug fix

.changeset/funny-fireants-shop.md

@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-newrelic-dashboard': minor
+---
+
+Fix bug where the default time window/snapshot duration was supposed to be 30 days, but ended up being 43 weeks
+
+**BREAKING**: Add a select input to change the time window of the snapshot displayed. This removes the duration prop from the `DashboardSnapshot` component.

plugins/newrelic-dashboard/api-report.md

@@ -14,12 +14,10 @@ export const DashboardSnapshotComponent: ({
   guid,
   name,
   permalink,
-  duration,
 }: {
   guid: string;
   name: string;
   permalink: string;
-  duration: number;
 }) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "EntityNewRelicDashboardCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)

plugins/newrelic-dashboard/dev/index.tsx

@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 import { createDevApp } from '@backstage/dev-utils';
-import { newRelicDashboardPlugin } from './../src/plugin';
+import { newRelicDashboardPlugin } from '../src/plugin';
 
 createDevApp().registerPlugin(newRelicDashboardPlugin).render();

plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardEntityList.tsx

@@ -28,7 +28,7 @@ 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';
+import { NEWRELIC_GUID_ANNOTATION } from '../../constants';
 
 const useStyles = makeStyles({
   svgIcon: {

plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Box, Grid } from '@material-ui/core';
-import { useApi } from '@backstage/core-plugin-api';
+import { Box, Grid, MenuItem, Select } from '@material-ui/core';
+import { useApi, storageApiRef } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
 import {
   InfoCard,
@@ -24,43 +24,72 @@ import {
   Link,
 } from '@backstage/core-components';
 import { newRelicDashboardApiRef } from '../../../api';
-import { DashboardSnapshotSummary } from './../../../api/NewRelicDashboardApi';
+import { DashboardSnapshotSummary } from '../../../api/NewRelicDashboardApi';
+import useObservable from 'react-use/lib/useObservable';
 
 type Props = {
   guid: string;
   name: string;
   permalink: string;
-  duration: number;
 };
 
-export const DashboardSnapshot = ({
-  guid,
-  name,
-  permalink,
-  duration,
-}: Props) => {
+export const DashboardSnapshot = ({ guid, name, permalink }: Props) => {
   const newRelicDashboardAPI = useApi(newRelicDashboardApiRef);
+  const storageApi = useApi(storageApiRef).forBucket('newrelic-dashboard');
+  const setStorageValue = (value: number) => {
+    storageApi.set(guid, value);
+  };
+  const storageSnapshot = useObservable(
+    storageApi.observe$<number>(guid),
+    storageApi.snapshot(guid),
+  );
+
   const { value, loading, error } = useAsync(async (): Promise<
     DashboardSnapshotSummary | undefined
   > => {
     const dashboardObject: Promise<DashboardSnapshotSummary | undefined> =
-      newRelicDashboardAPI.getDashboardSnapshot(guid, duration);
+      newRelicDashboardAPI.getDashboardSnapshot(
+        guid,
+        storageSnapshot.value || 2592000000,
+      );
     return dashboardObject;
-  }, [guid, duration]);
+  }, [guid, storageSnapshot.value]);
+
   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}>
+    <Grid container>
+      <InfoCard
+        variant="gridItem"
+        title={name}
+        action={
+          <Select
+            style={{ margin: '15px 10px 0 0' }}
+            defaultValue={2592000000}
+            value={storageSnapshot.value}
+            onChange={event => {
+              setStorageValue(Number(event.target.value));
+            }}
+          >
+            <MenuItem value={3600000}>1 Hour</MenuItem>
+            <MenuItem value={43200000}>12 Hours</MenuItem>
+            <MenuItem value={86400000}>1 Day</MenuItem>
+            <MenuItem value={259200000}>3 Days</MenuItem>
+            <MenuItem value={604800000}>1 Week</MenuItem>
+            <MenuItem value={2592000000}>1 Month</MenuItem>
+          </Select>
+        }
+      >
         <Box display="flex">
           <Box flexGrow="1">
             <Link to={permalink}>

plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx

@@ -137,7 +137,6 @@ export const DashboardSnapshotList = ({ guid }: Props) => {
                 name={Entity.name}
                 permalink={Entity.permalink}
                 guid={Entity.guid}
-                duration={26297430000}
               />
             </TabPanel>
           );