Merge pull request #104 from aso1124/deprecations

Fix NR Platform deprecations
newrelic · Oct 28, 2022 · 5656fa2 · 5656fa2
2 parents f6b32bf + fee4b5b
commit 5656fa2
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 44 deletions.
diff --git a/nerdlets/find-user/components/session/SessionTable.js b/nerdlets/find-user/components/session/SessionTable.js
@@ -18,7 +18,10 @@ import {
 } from '../../../shared/utils/date-formatter'
 import { getThresholdClass } from '../../../shared/utils/threshold'
 import videoConfig from '../../../shared/config/VideoConfig'
-import { FIND_USER_ATTRIBUTE, VIDEO_EVENTS } from '../../../shared/config/constants'
+import {
+  FIND_USER_ATTRIBUTE,
+  VIDEO_EVENTS,
+} from '../../../shared/config/constants'
 
 export default class SessionTable extends React.Component {
   state = {
@@ -27,7 +30,8 @@ export default class SessionTable extends React.Component {
   }
 
   getViewQualityCount = (views, threshold, above) => {
-    const count = views.reduce((acc, v) => {
+    const count = views.reduce(
+      (acc, v) => {
         if (
           (above && v.qualityScore >= threshold) ||
           (!above && v.qualityScore < threshold)
@@ -79,7 +83,7 @@ export default class SessionTable extends React.Component {
     const nrql = `FROM ${VIDEO_EVENTS} SELECT min(timestamp), max(timestamp) WHERE ${userClause} LIMIT MAX ${duration.since} facet viewSession`
 
     return (
-      <NrqlQuery accountId={accountId} query={nrql}>
+      <NrqlQuery accountIds={[accountId]} query={nrql}>
         {({ data, error, loading }) => {
           if (loading) return <Spinner fillContainer />
           if (error) return <BlockText>{error.message}</BlockText>
@@ -104,7 +108,10 @@ export default class SessionTable extends React.Component {
             const timedSession = {
               session: s.session,
               qualityScore: s.qualityScore,
-              totalViews: s.views.reduce((acc, v) => { acc.push(v.id); return acc }, []),
+              totalViews: s.views.reduce((acc, v) => {
+                acc.push(v.id)
+                return acc
+              }, []),
               good: this.getViewQualityCount(s.views, 90, true),
               bad: this.getViewQualityCount(s.views, 90, false),
               minTime,
@@ -232,4 +239,4 @@ SessionTable.propTypes = {
   user: PropTypes.string.isRequired,
   sessionViews: PropTypes.array.isRequired,
   chooseSession: PropTypes.func.isRequired,
-}
+}
diff --git a/nerdlets/mande-nerdlet/components/action-sidebar/Filter.js b/nerdlets/mande-nerdlet/components/action-sidebar/Filter.js
@@ -53,7 +53,10 @@ class Filter extends React.Component {
 
     const query = `SELECT uniques(${attribute}) FROM ${eventTypes} ${since}`
 
-    const { data, error } = await NrqlQuery.query({ accountId, query })
+    const { data, error } = await NrqlQuery.query({
+      accountIds: [accountId],
+      query,
+    })
     if (error) console.error(error)
 
     let values = [] // if we don't get any values back, state will reset to blank
@@ -217,7 +220,7 @@ class Filter extends React.Component {
               </span>
               <span className="filter-category-section-label-control">
                 <Button
-                  type={Button.TYPE.PLAIN_NEUTRAL}
+                  type={Button.TYPE.PLAIN}
                   sizeType={Button.SIZE_TYPE.SMALL}
                   iconType={Button.ICON_TYPE.INTERFACE__OPERATIONS__REFRESH}
                   onClick={this.refreshHandler}

diff --git a/nerdlets/mande-nerdlet/components/category-detail/Chart.js b/nerdlets/mande-nerdlet/components/category-detail/Chart.js
@@ -123,7 +123,7 @@ class Chart extends React.Component {
       case 'area':
         return (
           <AreaChart
-            accountId={accountId}
+            accountIds={[accountId]}
             query={query}
             onClickArea={getHook(config.click ? config.click : 'filter').bind(
               this.props
@@ -136,7 +136,7 @@ class Chart extends React.Component {
       case 'bar':
         return (
           <BarChart
-            accountId={accountId}
+            accountIds={[accountId]}
             query={query}
             onClickBar={
               getHook(config.click ? config.click : 'filter').bind(this.props)
@@ -147,44 +147,44 @@ class Chart extends React.Component {
       case 'billboard':
         if (facets)
           return this.renderChart({ ...config, chartType: 'bar' }, query)
-        else return <BillboardChart accountId={accountId} query={query} />
+        else return <BillboardChart accountIds={[accountId]} query={query} />
       case 'heatmap':
-        return <HeatmapChart accountId={accountId} query={query} />
+        return <HeatmapChart accountIds={[accountId]} query={query} />
       case 'histogram':
-        return <HistogramChart accountId={accountId} query={query} />
+        return <HistogramChart accountIds={[accountId]} query={query} />
       case 'billboard':
-        return <BillboardChart accountId={accountId} query={query} />
+        return <BillboardChart accountIds={[accountId]} query={query} />
       case 'pie':
-        return <PieChart accountId={accountId} query={query} />
+        return <PieChart accountIds={[accountId]} query={query} />
       case 'line':
         return (
           <LineChart
-            accountId={accountId}
+            accountIds={[accountId]}
             query={query}
             onClickLine={getHook(config.click ? config.click : 'filter').bind(
               this.props
             )}
           />
         )
       case 'funnel':
-        return <FunnelChart accountId={accountId} query={query} />
+        return <FunnelChart accountIds={[accountId]} query={query} />
       case 'scatter':
-        return <ScatterChart accountId={accountId} query={query} />
+        return <ScatterChart accountIds={[accountId]} query={query} />
       case 'table': // need to pass the facets for data matching
         const tableQuery = expand
           ? query
           : query.replace(/limit (max|[0-9]+)/gi, 'LIMIT 20')
         return (
           <TableChart
-            accountId={accountId}
+            accountIds={[accountId]}
             query={tableQuery}
             onClickTable={
               config.click ? getHook(config.click).bind(this.props) : () => null
             }
           />
         )
       default:
-        return <LineChart accountId={accountId} query={this.query} />
+        return <LineChart accountIds={[accountId]} query={this.query} />
     }
   }
 
@@ -208,7 +208,7 @@ class Chart extends React.Component {
           {!expand && (
             <div className="chart-actions" ref={this.myRef}>
               <Button
-                type={Button.TYPE.PLAIN_NEUTRAL}
+                type={Button.TYPE.PLAIN}
                 iconType={Button.ICON_TYPE.INTERFACE__OPERATIONS__MORE}
                 onClick={this.onActionsMenuClick}
               />

diff --git a/nerdlets/shared/components/metric/Metric.js b/nerdlets/shared/components/metric/Metric.js
@@ -103,7 +103,7 @@ export default class Metric extends React.PureComponent {
       sparkline = (
         <SparklineChart
           className="spark-line-chart"
-          accountId={accountId}
+          accountIds={[accountId]}
           query={nrql}
           onHoverSparkline={() => null}
         />
@@ -125,13 +125,16 @@ export default class Metric extends React.PureComponent {
     return (
       <React.Fragment>
         {/* {metric.def.query.title ? metric.def.query.title : metric.def.title} */}
-        <p className="name">{showTooltip ? (
-          <Tooltip text={tooltipText ? tooltipText : metric.title}>
-            {metric.title}
-          </Tooltip>
-          // eslint-disable-next-line prettier/prettier
-          ) : metric.title
-        }</p>
+        <p className="name">
+          {showTooltip ? (
+            <Tooltip text={tooltipText ? tooltipText : metric.title}>
+              {metric.title}
+            </Tooltip>
+          ) : (
+            // eslint-disable-next-line prettier/prettier
+            metric.title
+          )}
+        </p>
         <span className="value-container">
           {this.renderMetricValue(thresholdClass, false)}
           {showCompare && this.renderCompare()}
@@ -202,15 +205,18 @@ export default class Metric extends React.PureComponent {
           <div
             onClick={() => (click ? click(metric) : () => null)}
             style={styles && { ...styles }}
-            className={`${!selected ? 'metric-chart' : 'metric-chart selected'
-              } ${thresholdClass} ${!click ? 'no-click' : ''}`}
+            className={`${
+              !selected ? 'metric-chart' : 'metric-chart selected'
+            } ${thresholdClass} ${!click ? 'no-click' : ''}`}
           >
             {metricContent}
           </div>
           {minify && (
             <div className="metric-tooltip">
               <div className="metric maximized">
-                <div className={`metric-chart ${thresholdClass}`}>{maximized}</div>
+                <div className={`metric-chart ${thresholdClass}`}>
+                  {maximized}
+                </div>
               </div>
             </div>
           )}

diff --git a/nerdlets/shared/utils/metric-data-loader.js b/nerdlets/shared/utils/metric-data-loader.js
@@ -116,19 +116,18 @@ export const loadMetric = async (
     }`
 
   try {
-    const { data, errors } = await NerdGraphQuery.query({
+    const { data, error } = await NerdGraphQuery.query({
       query,
       fetchPolicyType: NerdGraphQuery.FETCH_POLICY_TYPE.NO_CACHE,
     })
-
-    if (errors) {
-      console.error(`error returned by query. ${query}: `, errors)
+    if (error) {
+      console.error(`error returned by query. ${query}: `, error?.graphQLErrors)
       return false
     } else {
       return parser(metric, data, metric[queryCategory].lookup)
     }
   } catch (e) {
-    console.error(`error occurred: `, e)
+    console.error(`error querying metrics occurred: `, e)
     return false
   }
 }

diff --git a/nerdlets/user-video-view/components/view/ViewTable.js b/nerdlets/user-video-view/components/view/ViewTable.js
@@ -39,7 +39,7 @@ export default class ViewTable extends React.Component {
     const nrql = `FROM ${VIDEO_EVENTS} SELECT min(timestamp) as 'startTime', latest(contentTitle) as 'contentTitle' WHERE viewSession = '${session.id}' and actionName != 'PLAYER_READY' LIMIT MAX ${duration.since} facet viewId`
 
     return (
-      <NrqlQuery accountId={accountId} query={nrql}>
+      <NrqlQuery accountIds={[accountId]} query={nrql}>
         {({ data, error, loading }) => {
           if (loading) return <Spinner fillContainer />
           if (error) return <BlockText>{error.message}</BlockText>
@@ -163,7 +163,8 @@ export default class ViewTable extends React.Component {
                       videoConfig.qualityScore.threshold,
                       item.qualityScore,
                       'greenLight'
-                    )}`}>
+                    )}`}
+                  >
                     {item.qualityScore + ' %'}
                   </TableRowCell>
                   {videoConfig.qualityScore.include.map((qs, idx) => {

diff --git a/nerdlets/video-session/components/session-detail/SessionDetail.js b/nerdlets/video-session/components/session-detail/SessionDetail.js
@@ -11,7 +11,7 @@ export default class SessionDetail extends React.PureComponent {
     // console.debug('sessionDetail sessionDetails query', nrql)
 
     return (
-      <NrqlQuery accountId={accountId} query={nrql}>
+      <NrqlQuery accountIds={[accountId]} query={nrql}>
         {({ data, error, loading }) => {
           if (loading) return <Spinner fillContainer />
           if (error) return <BlockText>{error.message}</BlockText>

diff --git a/nerdlets/video-session/components/timeline/EventStream.js b/nerdlets/video-session/components/timeline/EventStream.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { NrqlQuery, Spinner, Button, Icon, Stack, StackItem } from 'nr1'
+import { Spinner, Button, Icon, Stack, StackItem } from 'nr1'
 import Moment from 'react-moment'
 
 export default class EventStream extends React.PureComponent {
@@ -54,7 +54,8 @@ export default class EventStream extends React.PureComponent {
         this.state.expandedTimelineItem == i ? 'timeline-item-expanded' : ''
       const streamTimeline = this.buildStreamTimeline(event)
 
-      legendItem && legendItem.visible &&
+      legendItem &&
+        legendItem.visible &&
         sessionEvents.push(
           <div
             key={i}
@@ -83,7 +84,7 @@ export default class EventStream extends React.PureComponent {
                 <div className="timeline-item-title">{event.actionName}</div>
                 <Button
                   className="timeline-item-dropdown-arrow"
-                  type={Button.TYPE.PLAIN_NEUTRAL}
+                  type={Button.TYPE.PLAIN}
                   iconType={
                     Button.ICON_TYPE
                       .INTERFACE__CHEVRON__CHEVRON_BOTTOM__V_ALTERNATE

diff --git a/nerdlets/video-session/components/timeline/TimelineDetail.js b/nerdlets/video-session/components/timeline/TimelineDetail.js
@@ -18,7 +18,7 @@ export default class TimelineDetail extends React.PureComponent {
 
     const query = `SELECT * from ${VIDEO_EVENTS} WHERE viewId = '${session}' ORDER BY timestamp ASC LIMIT 1000 ${duration.since}`
 
-    const { data } = await NrqlQuery.query({ accountId, query })
+    const { data } = await NrqlQuery.query({ accountIds: [accountId], query })
 
     let result = []
     if (data && data.length > 0) result = data[0].data

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "private": true,
   "name": "nr1-mande",
   "description": "Nerdpack for the Media and Entertainment vertical, built against the internal Video Demo account.",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "scripts": {
     "start": "nr1 nerdpack:serve",
     "test": "exit 0",