fix: add guidance re usage query count

influxdata · Jul 22, 2024 · 4679df5 · 4679df5
1 parent 343d5c9
commit 4679df5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/cypress/e2e/cloud/usage.test.ts b/cypress/e2e/cloud/usage.test.ts
@@ -2,7 +2,7 @@ import {Organization} from '../../../src/types'
 
 const statHeaders = [
   'Data In (MB)',
-  'Query Count',
+  'Query Count (Flux Only) ?',
   'Storage (GB-hr)',
   'Data Out (GB)',
 ]

diff --git a/src/usage/UsageSingleStat.tsx b/src/usage/UsageSingleStat.tsx
@@ -1,10 +1,15 @@
 // Libraries
 import React, {FC, useContext} from 'react'
-import {Panel, ComponentSize, InfluxColors} from '@influxdata/clockface'
+import {
+  Panel,
+  ComponentSize,
+  InfluxColors,
+  QuestionMarkTooltip,
+} from '@influxdata/clockface'
 
 // Components
 import {View} from 'src/visualization'
-import {UsageContext} from 'src/usage/context/usage'
+import {UsageContext, VectorName} from 'src/usage/context/usage'
 
 // Types
 import {
@@ -39,6 +44,10 @@ const UsageSingleStat: FC<Props> = ({
     decimalPlaces: {isEnforced: false, digits: 0},
   }
 
+  // Adjusts table properties to warn user that only flux queries are included in the Query Count.
+  const isQueryCount: Boolean = usageVector.name === VectorName.QueryCount
+  const vectorName = isQueryCount ? 'Query Count (Flux Only)' : usageVector.name
+
   const error = fromFluxResult?.table?.columns?.error?.data?.[0]
 
   return (
@@ -51,9 +60,14 @@ const UsageSingleStat: FC<Props> = ({
         size={ComponentSize.ExtraSmall}
         testID="usage-single-stat--header"
       >
-        <h5>{`${usageVector.name} ${
-          usageVector.unit !== '' ? `(${usageVector.unit})` : ''
-        }`}</h5>
+        <h5>
+          {`${vectorName} ${
+            usageVector.unit !== '' ? `(${usageVector.unit})` : ''
+          }`}
+          {isQueryCount && (
+            <QuestionMarkTooltip tooltipContents={queryCountWarning} />
+          )}
+        </h5>
       </Panel.Header>
       <Panel.Body className="panel-body--size" style={{height: 300 / length}}>
         <View
@@ -68,4 +82,8 @@ const UsageSingleStat: FC<Props> = ({
   )
 }
 
+const queryCountWarning = (
+  <p>SQL and InfluxQL query counts are not displayed.</p>
+)
+
 export default UsageSingleStat
diff --git a/src/usage/context/usage.tsx b/src/usage/context/usage.tsx
@@ -41,6 +41,13 @@ const DEFAULT_USAGE: Usage = {
   status: RemoteDataState.NotStarted,
 }
 
+export enum VectorName {
+  QueryCount = 'Query Count',
+  Storage = 'Storage',
+  DataIn = 'Data In',
+  DataOut = 'Data Out',
+}
+
 export interface UsageContextType {
   billingDateTime: string
   billingStats: FromFluxResult[]