stop using config annotation and use input field with storage api

Signed-off-by: Jake Crews <jake.crews@daveramsey.com>

.changeset/funny-fireants-shop.md

@@ -3,4 +3,4 @@
 ---
 
 - Fix bug where the default time window/snapshot duration was supposed to be 30 days, but ended up being 43 weeks
-- Add the optional entity metadata annotation to change the time window of the data shown in the snapshot
+- Add a select option to change the time window of the snapshot shown

plugins/newrelic-dashboard/README.md

@@ -60,24 +60,20 @@ const overviewContent = (
     </EntitySwitch>
 ```
 
-4. Add annotations in catalog descriptor file
+4. Add `newrelic.com/dashboard-guid` annotation in catalog descriptor file
 
-   1. `newrelic.com/dashboard-guid`
-      - 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.
-   1. `newrelic.com/dashboard-time-window` (optional)
-      - The time window of information of the data to show in the snapshot in milliseconds. If not included the time window will default to 30 days
+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>
-       newrelic.com/dashboard-time-window: <dashboard_guid> # optional
-   spec:
-     type: service
-   ```
+```
+// 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/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

@@ -13,9 +13,9 @@
  * 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 React, { useEffect, useState } from 'react';
+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,68 @@ import {
   Link,
 } from '@backstage/core-components';
 import { newRelicDashboardApiRef } from '../../../api';
-import { DashboardSnapshotSummary } from './../../../api/NewRelicDashboardApi';
+import { DashboardSnapshotSummary } from '../../../api/NewRelicDashboardApi';
 
 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);
+  const newrelicDashboardStore = storageApi.forBucket('newrelic-dashboard');
+  const [newDuration, setNewDuration] = useState(2592000000);
+
+  useEffect(() => {
+    if (newrelicDashboardStore.snapshot(guid).value)
+      setNewDuration(Number(newrelicDashboardStore.snapshot(guid).value));
+  }, [guid, newrelicDashboardStore]);
+
   const { value, loading, error } = useAsync(async (): Promise<
     DashboardSnapshotSummary | undefined
   > => {
     const dashboardObject: Promise<DashboardSnapshotSummary | undefined> =
-      newRelicDashboardAPI.getDashboardSnapshot(guid, duration);
+      newRelicDashboardAPI.getDashboardSnapshot(guid, newDuration);
     return dashboardObject;
-  }, [guid, duration]);
+  }, [guid, newDuration]);
+
   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' }}
+            value={newDuration}
+            onChange={event => {
+              setNewDuration(Number(event.target.value));
+              newrelicDashboardStore.set(guid, 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

@@ -52,7 +52,6 @@ function a11yProps(index: number) {
 }
 type Props = {
   guid: string;
-  duration: number;
 };
 const useStyles = makeStyles(
   theme => ({
@@ -80,7 +79,7 @@ const useStyles = makeStyles(
   }),
   { name: 'DashboardHeaderTabs' },
 );
-export const DashboardSnapshotList = ({ duration, guid }: Props) => {
+export const DashboardSnapshotList = ({ guid }: Props) => {
   const styles = useStyles();
   const newRelicDashboardAPI = useApi(newRelicDashboardApiRef);
   const { value, loading, error } = useAsync(async (): Promise<
@@ -138,7 +137,6 @@ export const DashboardSnapshotList = ({ duration, guid }: Props) => {
                 name={Entity.name}
                 permalink={Entity.permalink}
                 guid={Entity.guid}
-                duration={duration ? duration : 2592000000}
               />
             </TabPanel>
           );

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

@@ -19,10 +19,7 @@ import { Page, Content } from '@backstage/core-components';
 import { DashboardEntityList } from './DashboardEntityList';
 import { DashboardSnapshotList } from './DashboardSnapshotList';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import {
-  NEWRELIC_TIME_WINDOW_ANNOTATION,
-  NEWRELIC_GUID_ANNOTATION,
-} from '../../constants';
+import { NEWRELIC_GUID_ANNOTATION } from '../../constants';
 
 export const NewRelicDashboard = () => {
   const { entity } = useEntity();
@@ -38,9 +35,6 @@ export const NewRelicDashboard = () => {
               guid={String(
                 entity.metadata.annotations?.[NEWRELIC_GUID_ANNOTATION],
               )}
-              duration={Number(
-                entity.metadata.annotations?.[NEWRELIC_TIME_WINDOW_ANNOTATION],
-              )}
             />
           </Grid>
         </Grid>

plugins/newrelic-dashboard/src/constants.ts

@@ -14,5 +14,3 @@
  * limitations under the License.
  */
 export const NEWRELIC_GUID_ANNOTATION = 'newrelic.com/dashboard-guid';
-export const NEWRELIC_TIME_WINDOW_ANNOTATION =
-  'newrelic.com/dashboard-time-window';