feat: entity mode

nerdlets/browser-nerdlet/index.js

@@ -0,0 +1,54 @@
+import React, { useEffect, useContext, useState } from 'react';
+import {
+  nerdlet,
+  NerdletStateContext,
+  Spinner,
+  PlatformStateContext
+} from 'nr1';
+import { generateEntityData } from '../shared/utils';
+import AppView from '../shared/components/AppView';
+
+// https://docs.newrelic.com/docs/new-relic-programmable-platform-introduction
+
+const UserFlowBrowserNerdlet = () => {
+  useEffect(() => {
+    nerdlet.setConfig({
+      accountPicker: true,
+      timePicker: true,
+      timePickerRanges: [
+        { label: '30 minutes', offset: 1800000 },
+        { label: '60 minutes', offset: 3600000 },
+        { label: '3 hours', offset: 10800000 },
+        { label: '6 hours', offset: 21600000 },
+        { label: '12 hours', offset: 43200000 },
+        { label: '24 hours', offset: 86400000 },
+        { label: '3 days', offset: 259200000 },
+        { label: '7 days', offset: 604800000 },
+        { label: '10 days', offset: 864000000 }
+      ]
+    });
+  }, []);
+
+  const [entity, setEntity] = useState(null);
+  const { entityGuid } = useContext(NerdletStateContext);
+  const { timeRange } = useContext(PlatformStateContext);
+
+  useEffect(async () => {
+    const timeRangeClause = `SINCE ${timeRange?.duration / 60000} minutes ago`;
+    const entityData = await generateEntityData(entityGuid, timeRangeClause);
+
+    setEntity(entityData);
+  }, [timeRange]);
+
+  if (entity) {
+    return (
+      <div>
+        <AppView entity={entity} />
+      </div>
+    );
+  }
+
+  return <Spinner />;
+};
+
+export default UserFlowBrowserNerdlet;

nerdlets/browser-nerdlet/nr1.json

@@ -0,0 +1,14 @@
+{
+  "schemaType": "NERDLET",
+  "id": "user-flows-browser-nerdlet",
+  "description": "",
+  "displayName": "User Flows",
+  "context": {
+    "entities": [
+      {
+        "domain": "BROWSER",
+        "type": "APPLICATION"
+      }
+    ]
+  }
+}

nerdlets/browser-nerdlet/styles.scss

@@ -0,0 +1,3 @@
+.my-nerdlet {
+  outline: 1px solid black;
+}

nerdlets/real-user-journey-experience/FetchBrowserApplications.js

@@ -98,6 +98,9 @@ const FetchBrowserApplications = () => {
     name.toLowerCase().includes(search.toLowerCase())
   );
 
+  console.log(selectedApp);
+  console.log(selectedAppDetails);
+
   return (
     <Grid
       style={mainGridCSSStyle}
@@ -172,6 +175,7 @@ const FetchBrowserApplications = () => {
             {({ loading, data }) => {
               if (loading) return <Spinner inline />;
               if (!loading && data) {
+                console.log(data);
                 const browserInteractions = data.facets.map(
                   (facetInfo, indx) => ({
                     id: `A${indx}`,

nerdlets/real-user-journey-experience/index.js

@@ -38,8 +38,8 @@ const RealUserJourneyExperienceNerdlet = () => {
       </h4>
       <br />
       <div>
-        This application displays user flows from top 5 landing pages. The
-        flows are derived from browser real user monitoring data.
+        This application displays user flows from top 5 landing pages. The flows
+        are derived from browser real user monitoring data.
       </div>
       <br />
       {platformState.accountId !== 'cross-account' && (

nerdlets/shared/components/AppView.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { BlockText, GridItem, Stack } from 'nr1';
+import FetchBrowserApplicationDetails from '../../real-user-journey-experience/FetchBrowserApplicationDetails';
+import FetchBrowserInteractionAsFlowAnalysisGraph from '../../real-user-journey-experience/FetchBrowserInteractionAsFlowAnalysisGraph';
+
+const AppView = ({ entity }) => {
+  const { topQuery } = entity;
+
+  const browserInteractions = (topQuery?.rawResponse?.facets || []).map(
+    (facetInfo, indx) => ({
+      id: `A${indx}`,
+      browserInteractionName: facetInfo.name[0],
+      urlDomain: facetInfo.name[1],
+      category: facetInfo.name[2],
+      trigger: facetInfo.name[3],
+      uniqueSessionCount: facetInfo.results[0].uniqueCount,
+      avgDuration: facetInfo.results[1].average,
+      applicationDetails: entity,
+      timeRangeClause: entity?.timeRangeClause
+    })
+  );
+
+  const journeyGridItemCSSStyle = {
+    outlineWidth: 'thin',
+    borderRadius: '25px',
+    margin: '10px',
+    padding: '10px'
+  };
+
+  return (
+    <div>
+      <>
+        <GridItem columnSpan={12}>
+          <Stack
+            gapType={Stack.GAP_TYPE.LARGE}
+            horizontalType={Stack.HORIZONTAL_TYPE.FILL_EVENLY}
+            fullWidth
+            fullHeight
+          >
+            <FetchBrowserApplicationDetails {...entity} />
+          </Stack>
+        </GridItem>
+
+        {browserInteractions.length === 0 ? (
+          <GridItem columnSpan={12}>
+            <BlockText
+              type={BlockText.TYPE.PARAGRAPH}
+              tagType={BlockText.TYPE.DIV}
+              spacingType={[BlockText.SPACING_TYPE.LARGE]}
+            >
+              There are no user journeys to display
+            </BlockText>
+          </GridItem>
+        ) : (
+          <>
+            {browserInteractions.map(browserInteraction => (
+              <GridItem
+                columnSpan={12}
+                style={journeyGridItemCSSStyle}
+                key={browserInteraction.id}
+              >
+                <FetchBrowserInteractionAsFlowAnalysisGraph
+                  {...browserInteraction}
+                />
+              </GridItem>
+            ))}
+          </>
+        )}
+      </>
+    </div>
+  );
+};
+
+export default AppView;

nerdlets/shared/utils.js

@@ -0,0 +1,42 @@
+import { NerdGraphQuery } from 'nr1';
+
+export const generateTopInteractionsQuery = (timeRangeClause, limit) =>
+  `FROM BrowserInteraction SELECT uniqueCount(session), average(duration) FACET browserInteractionName, domain, category, trigger, actionText where category = 'Initial page load' AND previousUrl = targetUrl ${timeRangeClause} LIMIT ${limit}`;
+
+export const generateEntityData = (entityGuid, timeRangeClause) => {
+  return new Promise(resolve => {
+    const topQuery = generateTopInteractionsQuery(timeRangeClause, 5);
+
+    NerdGraphQuery.query({
+      query: `{
+        actor {
+          entity(guid: "${entityGuid}") {
+            ... on Entity {
+                topQuery: nrdbQuery(nrql: "${topQuery}", timeout: 120) {
+                    rawResponse
+                  }
+              guid
+              name
+              type
+              account {
+                id
+                name
+              }
+              entityType
+              domain
+              alertSeverity
+              indexedAt
+              reporting
+              accountId
+            }
+          }
+        }
+      }`
+    }).then(data => {
+      const entity = data?.data?.actor?.entity;
+      entity.timeRangeClause = timeRangeClause;
+
+      resolve(entity);
+    });
+  });
+};