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';