Added Popover charts

newrelic-experimental · Mar 27, 2024 · 76e180c · 76e180c
1 parent 0ce0942
commit 76e180c
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 53 deletions.
diff --git a/nerdlets/nr1-attribute-explorer/attribute-explorer.js b/nerdlets/nr1-attribute-explorer/attribute-explorer.js
@@ -20,6 +20,13 @@ const excludeAttributes = [
  "totalTime",
  "webDuration",
  "duration.ms",
+ "tags.account",
+ "tags.accountId",
+ "tags.trustedAccountId",
+ "appName",
+ "service.name",
+ "entity.name",
+ "entity.type"
 ];
 
 /*

diff --git a/nerdlets/nr1-attribute-explorer/components/AttributeChart.js b/nerdlets/nr1-attribute-explorer/components/AttributeChart.js
@@ -11,7 +11,11 @@ import {
  Stack,
  StackItem,
  SectionMessage,
+ Popover,
+ PopoverBody,
+ PopoverTrigger,
 } from "nr1";
+import { PopoverChart } from "./PopoverChart";
 
 const AttributeChartQuery = ({
  accountId,
@@ -21,38 +25,42 @@ const AttributeChartQuery = ({
  onClickBar,
 }) => {
  return (
- <NrqlQuery
- accountIds={[accountId]}
- query={query}
- pollInterval={pollInterval}
- timeRange={timeRange}
- >
- {({ loading, error, data }) => {
- if (loading) {
- return <Spinner type={Spinner.TYPE.DOT} />;
- }
+ <PlatformStateContext.Consumer>
+ {(platformState) => (
+ <NrqlQuery
+ accountIds={[accountId]}
+ query={query}
+ pollInterval={pollInterval}
+ timeRange={platformState.timeRange}
+ >
+ {({ loading, error, data }) => {
+ if (loading) {
+ return <Spinner type={Spinner.TYPE.DOT} />;
+ }
 
- if (error) {
- return (
- <Stack>
- <StackItem>
- <SectionMessage
- type={SectionMessage.TYPE.WARNING}
- title="Chart failed to display."
- description={error.message}
- />
- </StackItem>
- </Stack>
- );
- }
+  if (error) {
+  return (
+  <Stack>
+  <StackItem>
+  <SectionMessage
+  type={SectionMessage.TYPE.WARNING}
+  title="Chart failed to display."
+  description={error.message}
+  />
+  </StackItem>
+  </Stack>
+  );
+  }
 
- if (data != null && data.length > 0) {
- return <BarChart data={data} fullWidth onClickBar={onClickBar} />;
- } else {
- return <div className="myNoData">No values.</div>;
- }
- }}
- </NrqlQuery>
+ if (data != null && data.length > 0) {
+ return <BarChart data={data} fullWidth onClickBar={onClickBar} />;
+ } else {
+ return <div className="myNoData">No values.</div>;
+ }
+ }}
+ </NrqlQuery>
+ )}
+ </PlatformStateContext.Consumer>
  );
 };
 
@@ -67,21 +75,26 @@ const AttributeChart = ({
  <GridItem columnSpan={2}>
  <Tile type={Tile.TYPE.PLAIN} sizeType={Tile.SIZE_TYPE.SMALL}>
  <div className="myHeader">
- <HeadingText type={HeadingText.TYPE.HEADING_5}>
- {attribute}
- </HeadingText>
+ <Popover openOnHover="true">
+ <PopoverTrigger>
+ <HeadingText type={HeadingText.TYPE.HEADING_5}>
+ {attribute}
+ </HeadingText>
+ </PopoverTrigger>
+ <PopoverBody>
+ <PopoverChart
+ accountId={accountId}
+ query={query}
+ />
+ </PopoverBody>
+ </Popover>
  </div>
- <PlatformStateContext.Consumer>
- {(platformState) => (
- <AttributeChartQuery
- accountId={accountId}
- query={query}
- pollInterval={pollInterval}
- platformState={platformState}
- onClickBar={onClickBar}
- />
- )}
- </PlatformStateContext.Consumer>
+ <AttributeChartQuery
+ accountId={accountId}
+ query={query}
+ pollInterval={pollInterval}
+ onClickBar={onClickBar}
+ />
  </Tile>
  </GridItem>
  );

diff --git a/nerdlets/nr1-attribute-explorer/components/PopoverChart.js b/nerdlets/nr1-attribute-explorer/components/PopoverChart.js
@@ -0,0 +1,38 @@
+import React from "react";
+import {
+ PlatformStateContext,
+ LineChart,
+} from "nr1";
+
+const PopoverChart = ({ accountId, query }) => {
+ return (
+ <PlatformStateContext.Consumer>
+ {(platformState) => {
+ query = query + " TIMESERIES";
+ if (typeof platformState.timeRange.duration !== 'undefined' && platformState.timeRange.duration !== null) {
+ const seconds = platformState.timeRange.duration/1000;
+ query = query + " SINCE " + seconds + " seconds ago";
+ }
+ else {
+ if (typeof platformState.timeRange.begin_time !== 'undefined' && platformState.timeRange.begin_time !== null)
+ query = query + " since " + platformState.timeRange.begin_time;
+ if (typeof platformState.timeRange.end_time !== 'undefined' && platformState.timeRange.end_time !== null)
+ query = query + " until " + platformState.timeRange.end_time;
+ }
+ console.log(platformState);
+ return (
+ <>
+ <div className="myPopover">
+ <LineChart
+ accountIds={[accountId]}
+ query={query}
+ />
+ </div>
+ </>
+ );
+ }}
+ </PlatformStateContext.Consumer>
+ );
+};
+
+export { PopoverChart };
diff --git a/nerdlets/nr1-attribute-explorer/styles.scss b/nerdlets/nr1-attribute-explorer/styles.scss
@@ -42,3 +42,7 @@
  margin-left: 2%;
  margin-right: 2%;
 }
+
+.myPopover {
+ margin: 3%;
+}
diff --git a/nerdlets/nr1-attribute-explorer/views/AttributeExplorerView.js b/nerdlets/nr1-attribute-explorer/views/AttributeExplorerView.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Layout, LayoutItem, Tile, BlockText, Button, Dropdown } from "nr1";
+import { Layout, LayoutItem, Tile, BlockText, Button, Dropdown, Tooltip } from "nr1";
 import { HeaderChartsContainer } from "../components/HeaderChartsContainer";
 import { AttributeChartsContainer } from "../components/AttributeChartsContainer";
 import { CustomDropdown } from "../components/CustomDropdown";
@@ -72,15 +72,20 @@ const AttributeExplorerView = ({
  </span>
  )}
  Number of attributes: {attributes.length}
- <Button
- onClick={getTraces}
- className="mySpaceLeft"
- iconType={
- Button.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__TRACES
- }
+ <Tooltip
+ text="View relevant traces filtered by the attributes selected."
+ placementType={Tooltip.PLACEMENT_TYPE.BOTTOM}
  >
- Traces
- </Button>
+ <Button
+ onClick={getTraces}
+ className="mySpaceLeft"
+ iconType={
+ Button.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__TRACES
+ }
+ >
+ Traces
+ </Button>
+ </Tooltip>
  <div className="mySpaceTop">
  <Button
  iconType={