Added duration variable in API query

Signed-off-by: mufaddal motiwala <mufaddalmm.52@gmail.com>

packages/app/package.json

@@ -30,6 +30,7 @@
     "@backstage/plugin-kafka": "^0.2.19",
     "@backstage/plugin-kubernetes": "^0.4.17",
     "@backstage/plugin-lighthouse": "^0.2.29",
+    "@backstage/plugin-new-relic-dashboard": "^0.1.0",
     "@backstage/plugin-newrelic": "^0.3.8",
     "@backstage/plugin-org": "^0.3.27",
     "@backstage/plugin-pagerduty": "0.3.17",

packages/app/src/components/catalog/EntityPage.tsx

@@ -126,6 +126,12 @@ import {
   EntityTravisCIOverviewCard,
   isTravisciAvailable,
 } from '@roadiehq/backstage-plugin-travis-ci';
+import {
+  isNewRelicDashboardAvailable,
+  EntityNewRelicDashboard,
+  EntityPageNewRelicDashboard,
+} from '@backstage/plugin-new-relic-dashboard';
+
 import React, { ReactNode, useMemo, useState } from 'react';
 
 const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
@@ -283,6 +289,14 @@ const overviewContent = (
       </EntitySwitch.Case>
     </EntitySwitch>
 
+    <EntitySwitch>
+      <EntitySwitch.Case if={isNewRelicDashboardAvailable}>
+        <Grid item md={6} xs={12}>
+          <EntityPageNewRelicDashboard />
+        </Grid>
+      </EntitySwitch.Case>
+    </EntitySwitch>
+
     <Grid item md={4} xs={12}>
       <EntityLinksCard />
     </Grid>
@@ -363,6 +377,14 @@ const serviceEntityPage = (
       <EntityTechdocsContent />
     </EntityLayout.Route>
 
+    <EntityLayout.Route
+      if={isNewRelicDashboardAvailable}
+      path="/gitlab"
+      title="Gitlab"
+    >
+      <EntityNewRelicDashboard />
+    </EntityLayout.Route>
+
     <EntityLayout.Route path="/kubernetes" title="Kubernetes">
       <EntityKubernetesContent />
     </EntityLayout.Route>
@@ -421,7 +443,13 @@ const websiteEntityPage = (
     <EntityLayout.Route path="/docs" title="Docs">
       <EntityTechdocsContent />
     </EntityLayout.Route>
-
+    <EntityLayout.Route
+      if={isNewRelicDashboardAvailable}
+      path="/new-relic-dashboard"
+      title="New Relic Dashboard"
+    >
+      <EntityNewRelicDashboard />
+    </EntityLayout.Route>
     <EntityLayout.Route path="/kubernetes" title="Kubernetes">
       <EntityKubernetesContent />
     </EntityLayout.Route>

plugins/new-relic-dashboard/src/Router.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { Entity } from '@backstage/catalog-model';
-import { Route, Routes } from 'react-router-dom';
 import React from 'react';
 import { MissingAnnotationEmptyState } from '@backstage/core-components';
 import { Button } from '@material-ui/core';
@@ -34,11 +33,7 @@ export const Router = (_props: Props) => {
   const { entity } = useEntity();
 
   if (isNewRelicDashboardAvailable(entity)) {
-    return (
-      <Routes>
-        <Route path="/" element={<NewRelicDashboard />} />
-      </Routes>
-    );
+    return <NewRelicDashboard />;
   }
 
   return (

plugins/new-relic-dashboard/src/api/NewRelicDashboardApi.ts

@@ -38,6 +38,6 @@ export type NewRelicDashboardApi = {
   getDashboardEntity(guid: String): Promise<DashboardEntitySummary | undefined>;
   getDashboardSnapshot(
     guid: String,
-    duration: String,
+    duration: Number,
   ): Promise<DashboardSnapshotSummary | undefined>;
 };

plugins/new-relic-dashboard/src/api/NewRelicDashboardClient.ts

@@ -83,7 +83,7 @@ export class NewRelicDashboardClient implements NewRelicDashboardApi {
 
   async getDashboardSnapshot(
     guid: String,
-    duration: String,
+    duration: Number,
   ): Promise<DashboardSnapshotSummary | undefined> {
     const DashboardSnapshotValue = await this.callApi<DashboardSnapshot>(
       getDashboardSnapshotQuery,

plugins/new-relic-dashboard/src/components/NewRelicDashboard/DashboardSnapshot/DashboardSnapshot.tsx

@@ -14,18 +14,19 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Grid, Typography } from '@material-ui/core';
+import { Grid, Paper, Typography } from '@material-ui/core';
 import { useApi } from '@backstage/core-plugin-api';
 import { useAsync } from 'react-use';
 import { Progress } from '@backstage/core-components';
 import { NewRelicDashboardApiRef } from '../../../api';
 import Alert from '@material-ui/lab/Alert';
+import Link from '@material-ui/core/Link';
 
 type Props = {
   guid: String;
   name: String;
   permalink: string;
-  duration: String;
+  duration: Number;
 };
 
 export const DashboardSnapshot = ({
@@ -49,29 +50,33 @@ export const DashboardSnapshot = ({
     return <Alert severity="error">{error.message}</Alert>;
   }
   return (
-    <Grid container spacing={3} direction="column">
-      <Grid item>
-        <Typography variant="h3">{name}</Typography>
-      </Grid>
+    <Paper>
+      <Grid style={{ width: '100%' }} container spacing={3} direction="column">
+        <Grid item xs={12} style={{ marginTop: '20px' }}>
+          <Link target="_blank" href={permalink}>
+            <Typography variant="h4">{name}</Typography>
+          </Link>
+        </Grid>
 
-      <Grid item xs={8}>
-        <a target="_blank" href={permalink}>
-          <img
-            alt={`${name} Dashbord`}
-            style={{ border: 'solid 1px black' }}
-            src={value?.getDashboardSnapshot?.data?.dashboardCreateSnapshotUrl?.replace(
-              /...$/,
-              'png',
-            )}
-          />
-        </a>
-        {/* {JSON.stringify(
+        <Grid item xs={12}>
+          <a target="_blank" href={permalink}>
+            <img
+              alt={`${name} Dashbord`}
+              style={{ border: 'solid 1px black' }}
+              src={`?${value?.getDashboardSnapshot?.data?.dashboardCreateSnapshotUrl?.replace(
+                /...$/,
+                'png',
+              )}`}
+            />
+          </a>
+          {/* {JSON.stringify(
           value.getDashboardSnapshot.data.dashboardCreateSnapshotUrl.replace(
             /...$/,
             'png',
           ),
         )} */}
+        </Grid>
       </Grid>
-    </Grid>
+    </Paper>
   );
 };

plugins/new-relic-dashboard/src/components/NewRelicDashboard/DashboardSnapshot/DashboardSnapshotList.tsx

@@ -27,6 +27,7 @@ interface TabPanelProps {
   index: number;
   value1: number;
 }
+
 function TabPanel(props: TabPanelProps) {
   const { children, value1, index, ...other } = props;
 
@@ -38,7 +39,7 @@ function TabPanel(props: TabPanelProps) {
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      {value1 === index && children}
+      {children}
     </div>
   );
 }
@@ -111,47 +112,47 @@ export const DashboardSnapshotList = ({ guid }: Props) => {
             },
           )}
         </Grid> */}
-      </Grid>
-      <Tabs
-        selectionFollowsFocus
-        indicatorColor="primary"
-        textColor="inherit"
-        variant="scrollable"
-        scrollButtons="auto"
-        aria-label="scrollable auto tabs example"
-        onChange={handleChange}
-        value={value1}
-      >
+        <Tabs
+          selectionFollowsFocus
+          indicatorColor="primary"
+          textColor="inherit"
+          variant="scrollable"
+          scrollButtons="auto"
+          aria-label="scrollable auto tabs example"
+          onChange={handleChange}
+          value={value1}
+        >
+          {value.getDashboardEntity.data.actor.entitySearch.results.entities?.map(
+            (Entity: any, index: any) => {
+              return (
+                <Tab
+                  label={Entity.name}
+                  className={styles.defaultTab}
+                  classes={{
+                    selected: styles.selected,
+                    root: styles.tabRoot,
+                  }}
+                  {...a11yProps(index)}
+                />
+              );
+            },
+          )}
+        </Tabs>
         {value.getDashboardEntity.data.actor.entitySearch.results.entities?.map(
           (Entity: any, index: any) => {
             return (
-              <Tab
-                label={Entity.name}
-                className={styles.defaultTab}
-                classes={{
-                  selected: styles.selected,
-                  root: styles.tabRoot,
-                }}
-                {...a11yProps(index)}
-              />
+              <TabPanel value1={value1} index={index}>
+                <DashboardSnapshot
+                  name={Entity.name}
+                  permalink={Entity.permalink}
+                  guid={Entity.guid}
+                  duration={2000000000}
+                />
+              </TabPanel>
             );
           },
         )}
-      </Tabs>
-      {value.getDashboardEntity.data.actor.entitySearch.results.entities?.map(
-        (Entity: any, index: any) => {
-          return (
-            <TabPanel value1={value1} index={index}>
-              <DashboardSnapshot
-                name={Entity.name}
-                permalink={Entity.permalink}
-                guid={Entity.guid}
-                duration="2000000000"
-              />
-            </TabPanel>
-          );
-        },
-      )}
+      </Grid>
     </>
   );
 };

plugins/new-relic-dashboard/src/queries/getDashboardSnapshotQuery.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 export const getDashboardSnapshotQuery =
-  'mutation($guid: EntityGuid!) {\n  dashboardCreateSnapshotUrl(guid: $guid , params: {timeWindow: {duration: $duration}})\n}';
+  'mutation($guid: EntityGuid! , ,$duration: Milliseconds) {\n  dashboardCreateSnapshotUrl(guid: $guid , params: {timeWindow: {duration: $duration}})\n}';