From 0f38e66d23e0e465c40f5ab71a762bab0966c1cb Mon Sep 17 00:00:00 2001
From: Bill O'Connell <91283923+wdoconnell@users.noreply.github.com>
Date: Mon, 22 Jul 2024 13:49:12 -0400
Subject: [PATCH] fix: add guidance re usage query count (#6910)

---
 cypress/e2e/cloud/usage.test.ts |  2 +-
 src/usage/UsageSingleStat.tsx   | 29 +++++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/cypress/e2e/cloud/usage.test.ts b/cypress/e2e/cloud/usage.test.ts
index f6636d44d5..34dbd5275a 100644
--- 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
index a4a960e18a..252f759521 100644
--- a/src/usage/UsageSingleStat.tsx
+++ b/src/usage/UsageSingleStat.tsx
@@ -1,11 +1,19 @@
 // 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'
 
+// Constants
+const QUERY_COUNT_VECTOR_NAME = 'Query Count'
+
 // Types
 import {
   SingleStatViewProperties,
@@ -39,6 +47,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 === QUERY_COUNT_VECTOR_NAME
+  const vectorName = isQueryCount ? 'Query Count (Flux Only)' : usageVector.name
+
   const error = fromFluxResult?.table?.columns?.error?.data?.[0]
 
   return (
@@ -51,9 +63,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 +85,8 @@ const UsageSingleStat: FC<Props> = ({
   )
 }
 
+const queryCountWarning = (
+  <p>SQL and InfluxQL query counts are not displayed.</p>
+)
+
 export default UsageSingleStat