From 79ecedded9e776298968dcb82f890251e508d990 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Wed, 29 Jun 2022 10:34:04 -0500 Subject: [PATCH 01/10] Add custom time window annotation to newrelic-dashboard plugin and minor bug fix Signed-off-by: Jake Crews --- .changeset/funny-fireants-shop.md | 6 ++++ plugins/newrelic-dashboard/CHANGELOG.md | 7 +++++ plugins/newrelic-dashboard/README.md | 30 +++++++++++-------- plugins/newrelic-dashboard/package.json | 2 +- .../DashboardSnapshotList.tsx | 5 ++-- .../NewRelicDashboard/NewRelicDashboard.tsx | 8 ++++- plugins/newrelic-dashboard/src/constants.ts | 2 ++ 7 files changed, 43 insertions(+), 17 deletions(-) create mode 100644 .changeset/funny-fireants-shop.md diff --git a/.changeset/funny-fireants-shop.md b/.changeset/funny-fireants-shop.md new file mode 100644 index 0000000000..762262a60b --- /dev/null +++ b/.changeset/funny-fireants-shop.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-newrelic-dashboard': patch +--- + +- 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 diff --git a/plugins/newrelic-dashboard/CHANGELOG.md b/plugins/newrelic-dashboard/CHANGELOG.md index ea33fd1444..a5af58354c 100644 --- a/plugins/newrelic-dashboard/CHANGELOG.md +++ b/plugins/newrelic-dashboard/CHANGELOG.md @@ -1,5 +1,12 @@ # @backstage/plugin-newrelic-dashboard +## 0.1.16 + +### Patch Changes + +- 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 + ## 0.1.15-next.1 ### Patch Changes diff --git a/plugins/newrelic-dashboard/README.md b/plugins/newrelic-dashboard/README.md index a31042b3fe..0c1b62208a 100644 --- a/plugins/newrelic-dashboard/README.md +++ b/plugins/newrelic-dashboard/README.md @@ -60,20 +60,24 @@ const overviewContent = ( ``` -4. Add `newrelic.com/dashboard-guid` annotation in catalog descriptor file +4. Add annotations 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. + 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 -``` -// catalog-info.yaml -apiVersion: backstage.io/v1alpha1 -kind: Component -metadata: - # ... - annotations: - newrelic.com/dashboard-guid: -spec: - type: service -``` + ``` + // catalog-info.yaml + apiVersion: backstage.io/v1alpha1 + kind: Component + metadata: + # ... + annotations: + newrelic.com/dashboard-guid: + newrelic.com/dashboard-time-window: # optional + spec: + type: service + ``` All set , you will be able to see the plugin in action! diff --git a/plugins/newrelic-dashboard/package.json b/plugins/newrelic-dashboard/package.json index b488db090c..6da0c4e25e 100644 --- a/plugins/newrelic-dashboard/package.json +++ b/plugins/newrelic-dashboard/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-newrelic-dashboard", - "version": "0.1.15-next.1", + "version": "0.1.16", "main": "src/index.ts", "types": "src/index.ts", "license": "Apache-2.0", diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx index 87f2334bf7..0b7a5830ce 100644 --- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx +++ b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx @@ -52,6 +52,7 @@ function a11yProps(index: number) { } type Props = { guid: string; + duration: number; }; const useStyles = makeStyles( theme => ({ @@ -79,7 +80,7 @@ const useStyles = makeStyles( }), { name: 'DashboardHeaderTabs' }, ); -export const DashboardSnapshotList = ({ guid }: Props) => { +export const DashboardSnapshotList = ({ duration, guid }: Props) => { const styles = useStyles(); const newRelicDashboardAPI = useApi(newRelicDashboardApiRef); const { value, loading, error } = useAsync(async (): Promise< @@ -137,7 +138,7 @@ export const DashboardSnapshotList = ({ guid }: Props) => { name={Entity.name} permalink={Entity.permalink} guid={Entity.guid} - duration={26297430000} + duration={duration ? duration : 2592000000} /> ); diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/NewRelicDashboard.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/NewRelicDashboard.tsx index c9cc9bf611..024bd28f00 100644 --- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/NewRelicDashboard.tsx +++ b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/NewRelicDashboard.tsx @@ -19,7 +19,10 @@ 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'; +import { + NEWRELIC_TIME_WINDOW_ANNOTATION, + NEWRELIC_GUID_ANNOTATION, +} from '../../constants'; export const NewRelicDashboard = () => { const { entity } = useEntity(); @@ -35,6 +38,9 @@ export const NewRelicDashboard = () => { guid={String( entity.metadata.annotations?.[NEWRELIC_GUID_ANNOTATION], )} + duration={Number( + entity.metadata.annotations?.[NEWRELIC_TIME_WINDOW_ANNOTATION], + )} /> diff --git a/plugins/newrelic-dashboard/src/constants.ts b/plugins/newrelic-dashboard/src/constants.ts index dd0dcff2d8..a87c41b37c 100644 --- a/plugins/newrelic-dashboard/src/constants.ts +++ b/plugins/newrelic-dashboard/src/constants.ts @@ -14,3 +14,5 @@ * limitations under the License. */ export const NEWRELIC_GUID_ANNOTATION = 'newrelic.com/dashboard-guid'; +export const NEWRELIC_TIME_WINDOW_ANNOTATION = + 'newrelic.com/dashboard-time-window'; From 2456dd67f1e2e5e18b9fe494b86b4c4d19ef37a5 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Wed, 6 Jul 2022 10:48:44 -0500 Subject: [PATCH 02/10] stop using config annotation and use input field with storage api Signed-off-by: Jake Crews --- .changeset/funny-fireants-shop.md | 2 +- plugins/newrelic-dashboard/README.md | 30 +++++----- plugins/newrelic-dashboard/dev/index.tsx | 2 +- .../NewRelicDashboard/DashboardEntityList.tsx | 2 +- .../DashboardSnapshot.tsx | 55 ++++++++++++++----- .../DashboardSnapshotList.tsx | 4 +- .../NewRelicDashboard/NewRelicDashboard.tsx | 8 +-- plugins/newrelic-dashboard/src/constants.ts | 2 - 8 files changed, 58 insertions(+), 47 deletions(-) diff --git a/.changeset/funny-fireants-shop.md b/.changeset/funny-fireants-shop.md index 762262a60b..b94b49068f 100644 --- a/.changeset/funny-fireants-shop.md +++ b/.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 diff --git a/plugins/newrelic-dashboard/README.md b/plugins/newrelic-dashboard/README.md index 0c1b62208a..a31042b3fe 100644 --- a/plugins/newrelic-dashboard/README.md +++ b/plugins/newrelic-dashboard/README.md @@ -60,24 +60,20 @@ const overviewContent = ( ``` -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: - newrelic.com/dashboard-time-window: # optional - spec: - type: service - ``` +``` +// catalog-info.yaml +apiVersion: backstage.io/v1alpha1 +kind: Component +metadata: + # ... + annotations: + newrelic.com/dashboard-guid: +spec: + type: service +``` All set , you will be able to see the plugin in action! diff --git a/plugins/newrelic-dashboard/dev/index.tsx b/plugins/newrelic-dashboard/dev/index.tsx index d0db8c4d96..bb5f5b92d7 100644 --- a/plugins/newrelic-dashboard/dev/index.tsx +++ b/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(); diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardEntityList.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardEntityList.tsx index a9e6e39a0d..6c89f3eb80 100644 --- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardEntityList.tsx +++ b/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: { diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx index 69608833f7..62e1a1a39c 100644 --- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx +++ b/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 = - newRelicDashboardAPI.getDashboardSnapshot(guid, duration); + newRelicDashboardAPI.getDashboardSnapshot(guid, newDuration); return dashboardObject; - }, [guid, duration]); + }, [guid, newDuration]); + if (loading) { return ; } if (error) { return ; } + const url = value?.getDashboardSnapshot?.data?.dashboardCreateSnapshotUrl?.replace( /\pdf$/i, 'png', ); return ( - - + + { + setNewDuration(Number(event.target.value)); + newrelicDashboardStore.set(guid, Number(event.target.value)); + }} + > + 1 Hour + 12 Hours + 1 Day + 3 Days + 1 Week + 1 Month + + } + > diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx index 0b7a5830ce..85a73b0a4b 100644 --- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshotList.tsx +++ b/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} /> ); diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/NewRelicDashboard.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/NewRelicDashboard.tsx index 024bd28f00..c9cc9bf611 100644 --- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/NewRelicDashboard.tsx +++ b/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], - )} /> diff --git a/plugins/newrelic-dashboard/src/constants.ts b/plugins/newrelic-dashboard/src/constants.ts index a87c41b37c..dd0dcff2d8 100644 --- a/plugins/newrelic-dashboard/src/constants.ts +++ b/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'; From 251d7c407e37bfd44ab86adee2bd955f4ee24fe4 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Wed, 6 Jul 2022 10:50:18 -0500 Subject: [PATCH 03/10] fix changelog Signed-off-by: Jake Crews --- plugins/newrelic-dashboard/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/newrelic-dashboard/CHANGELOG.md b/plugins/newrelic-dashboard/CHANGELOG.md index a5af58354c..dcd8c92c16 100644 --- a/plugins/newrelic-dashboard/CHANGELOG.md +++ b/plugins/newrelic-dashboard/CHANGELOG.md @@ -5,7 +5,7 @@ ### Patch Changes - 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 ## 0.1.15-next.1 From a9065c7424cd426af31aba43502bfce1d3eccd31 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Wed, 6 Jul 2022 11:25:01 -0500 Subject: [PATCH 04/10] fix api report Signed-off-by: Jake Crews --- plugins/newrelic-dashboard/api-report.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/plugins/newrelic-dashboard/api-report.md b/plugins/newrelic-dashboard/api-report.md index cff24d90c6..fd0846bc4e 100644 --- a/plugins/newrelic-dashboard/api-report.md +++ b/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) From f28391c377e4d93947812b87b7d8c103e6c93692 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 7 Jul 2022 06:55:42 -0500 Subject: [PATCH 05/10] address management PR comments Signed-off-by: Jake Crews --- .changeset/funny-fireants-shop.md | 7 ++++--- plugins/newrelic-dashboard/CHANGELOG.md | 7 ------- plugins/newrelic-dashboard/package.json | 2 +- 3 files changed, 5 insertions(+), 11 deletions(-) diff --git a/.changeset/funny-fireants-shop.md b/.changeset/funny-fireants-shop.md index b94b49068f..8e6d997aa2 100644 --- a/.changeset/funny-fireants-shop.md +++ b/.changeset/funny-fireants-shop.md @@ -1,6 +1,7 @@ --- -'@backstage/plugin-newrelic-dashboard': patch +'@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 -- Add a select option to change the time window of the snapshot shown +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. diff --git a/plugins/newrelic-dashboard/CHANGELOG.md b/plugins/newrelic-dashboard/CHANGELOG.md index 37c394c989..ce7fb18e5c 100644 --- a/plugins/newrelic-dashboard/CHANGELOG.md +++ b/plugins/newrelic-dashboard/CHANGELOG.md @@ -1,12 +1,5 @@ # @backstage/plugin-newrelic-dashboard -## 0.1.16 - -### Patch Changes - -- Fix bug where the default time window/snapshot duration was supposed to be 30 days, but ended up being 43 weeks -- Add a select option to change the time window of the snapshot shown - ## 0.1.15-next.2 ### Patch Changes diff --git a/plugins/newrelic-dashboard/package.json b/plugins/newrelic-dashboard/package.json index 14aed0c0b5..a0a21fcf9c 100644 --- a/plugins/newrelic-dashboard/package.json +++ b/plugins/newrelic-dashboard/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-newrelic-dashboard", - "version": "0.1.16", + "version": "0.1.15-next.2", "main": "src/index.ts", "types": "src/index.ts", "license": "Apache-2.0", From 3d057d80baf8a3acf367a75317d240803a217bb1 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 7 Jul 2022 07:54:14 -0500 Subject: [PATCH 06/10] add observable Signed-off-by: Jake Crews --- .../DashboardSnapshot.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx index 62e1a1a39c..9a226476f7 100644 --- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx +++ b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx @@ -25,6 +25,7 @@ import { } from '@backstage/core-components'; import { newRelicDashboardApiRef } from '../../../api'; import { DashboardSnapshotSummary } from '../../../api/NewRelicDashboardApi'; +import { useObservable } from 'react-use'; type Props = { guid: string; @@ -34,14 +35,19 @@ type Props = { export const DashboardSnapshot = ({ guid, name, permalink }: Props) => { const newRelicDashboardAPI = useApi(newRelicDashboardApiRef); - const storageApi = useApi(storageApiRef); - const newrelicDashboardStore = storageApi.forBucket('newrelic-dashboard'); + const storageApi = useApi(storageApiRef).forBucket('newrelic-dashboard'); + const setStorageValue = (value: number) => { + storageApi.set(guid, value); + }; + const storageSnapshot = useObservable( + storageApi.observe$(guid), + storageApi.snapshot(guid), + ); const [newDuration, setNewDuration] = useState(2592000000); useEffect(() => { - if (newrelicDashboardStore.snapshot(guid).value) - setNewDuration(Number(newrelicDashboardStore.snapshot(guid).value)); - }, [guid, newrelicDashboardStore]); + if (storageSnapshot.value) setNewDuration(Number(storageSnapshot.value)); + }, [guid, storageSnapshot]); const { value, loading, error } = useAsync(async (): Promise< DashboardSnapshotSummary | undefined @@ -74,7 +80,7 @@ export const DashboardSnapshot = ({ guid, name, permalink }: Props) => { value={newDuration} onChange={event => { setNewDuration(Number(event.target.value)); - newrelicDashboardStore.set(guid, Number(event.target.value)); + setStorageValue(Number(event.target.value)); }} > 1 Hour From c00f41ee353613bd361fcb81c8a7715ac7a957f7 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 7 Jul 2022 08:11:23 -0500 Subject: [PATCH 07/10] update react-use to fix bug in 17.2.x Signed-off-by: Jake Crews --- plugins/newrelic-dashboard/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/newrelic-dashboard/package.json b/plugins/newrelic-dashboard/package.json index a0a21fcf9c..c9171a211d 100644 --- a/plugins/newrelic-dashboard/package.json +++ b/plugins/newrelic-dashboard/package.json @@ -31,7 +31,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" + "react-use": "^17.3.0" }, "devDependencies": { "@backstage/cli": "^0.18.0-next.2", From 35d30613f4229ca2c0a613571921bab6d7dfce2e Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 7 Jul 2022 08:29:33 -0500 Subject: [PATCH 08/10] update react-use to 17.4.0 to fix bug in 17.2.x Signed-off-by: Jake Crews --- plugins/newrelic-dashboard/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/newrelic-dashboard/package.json b/plugins/newrelic-dashboard/package.json index c9171a211d..f65ad9bf72 100644 --- a/plugins/newrelic-dashboard/package.json +++ b/plugins/newrelic-dashboard/package.json @@ -31,7 +31,7 @@ "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.57", - "react-use": "^17.3.0" + "react-use": "^17.4.0" }, "devDependencies": { "@backstage/cli": "^0.18.0-next.2", From 04667f29a5f587c512dd0c1a8b4aa592b6f70f72 Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 7 Jul 2022 08:48:07 -0500 Subject: [PATCH 09/10] use correct import of useobersvable Signed-off-by: Jake Crews --- plugins/newrelic-dashboard/package.json | 2 +- .../DashboardSnapshotList/DashboardSnapshot.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/newrelic-dashboard/package.json b/plugins/newrelic-dashboard/package.json index f65ad9bf72..a0a21fcf9c 100644 --- a/plugins/newrelic-dashboard/package.json +++ b/plugins/newrelic-dashboard/package.json @@ -31,7 +31,7 @@ "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.57", - "react-use": "^17.4.0" + "react-use": "^17.2.4" }, "devDependencies": { "@backstage/cli": "^0.18.0-next.2", diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx index 9a226476f7..c17c73cb08 100644 --- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx +++ b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx @@ -25,7 +25,7 @@ import { } from '@backstage/core-components'; import { newRelicDashboardApiRef } from '../../../api'; import { DashboardSnapshotSummary } from '../../../api/NewRelicDashboardApi'; -import { useObservable } from 'react-use'; +import useObservable from 'react-use/lib/useObservable'; type Props = { guid: string; From 8c6c288f26f1cb50c442bfa94e9b28f0f04f385b Mon Sep 17 00:00:00 2001 From: Jake Crews Date: Thu, 7 Jul 2022 13:07:07 -0500 Subject: [PATCH 10/10] remove useState and useEffect Signed-off-by: Jake Crews --- .../DashboardSnapshot.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx index c17c73cb08..f501fd77bf 100644 --- a/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx +++ b/plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useEffect, useState } from 'react'; +import React 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'; @@ -43,19 +43,17 @@ export const DashboardSnapshot = ({ guid, name, permalink }: Props) => { storageApi.observe$(guid), storageApi.snapshot(guid), ); - const [newDuration, setNewDuration] = useState(2592000000); - - useEffect(() => { - if (storageSnapshot.value) setNewDuration(Number(storageSnapshot.value)); - }, [guid, storageSnapshot]); const { value, loading, error } = useAsync(async (): Promise< DashboardSnapshotSummary | undefined > => { const dashboardObject: Promise = - newRelicDashboardAPI.getDashboardSnapshot(guid, newDuration); + newRelicDashboardAPI.getDashboardSnapshot( + guid, + storageSnapshot.value || 2592000000, + ); return dashboardObject; - }, [guid, newDuration]); + }, [guid, storageSnapshot.value]); if (loading) { return ; @@ -77,9 +75,9 @@ export const DashboardSnapshot = ({ guid, name, permalink }: Props) => { action={