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