Add section for query stats viewer (timescale#2488)

* Add draft for query stats viewer

* Add screenshot and table

* Add admon

* Update column descriptions

* apparently ordinals have to be spelled out

* update cache hit ratio description

---------

Co-authored-by: Rajakavitha Kodhandapani <[email protected]>

Author: Loquacity

.vscode/image.code-snippets

@@ -1,19 +1,22 @@
 {
-	// Place your docs-timescale workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
-	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
-	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
-	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
-	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
-	// Placeholders with the same ids are connected.
-	// Example:
-	 "Image": {
-	 	"scope": "markdown,html",
-	 	"prefix": ["img"],
-	 	"body": [
-	 		"<img class=\"main-content__illustration\"",
-            "src=\"$1\"",
-             "alt=\"$2\" />"
-	 	],
-	 	"description": "Inserts an image"
-	 }
-}
+  // Place your docs-timescale workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
+  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
+  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
+  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
+  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
+  // Placeholders with the same ids are connected.
+  // Example:
+  "Image": {
+    "scope": "markdown,html",
+    "prefix": [
+      "img"
+    ],
+    "body": [
+      "<img class=\"main-content__illustration\"",
+      "src=\"$1\"",
+      "width={1375} height={944}",
+      "alt=\"$2\" />"
+    ],
+    "description": "Inserts an image"
+  }
+}

_partials/_early_access.md

@@ -1,4 +1,4 @@
 <Highlight type="important">
-This feature is early access. Early access features might be subject to billing changes in
-the future.
+This feature is early access. Early access features might be subject to billing
+changes in the future.
 </Highlight>

use-timescale/metrics-logging/service-metrics.md

@@ -9,18 +9,21 @@ cloud_ui:
         - [services, :serviceId, metrics]
 ---
 
+import EarlyAccess from "versionContent/_partials/_early_access.mdx";
+
 # Service metrics
 
 You can view your service metrics from the Timescale
 [metrics dashboard][metrics-dashboard]. This dashboard gives you service-level
 information, such as CPU, memory, and storage usage.
 
-You can also view your query-level statistics by using the pre-installed
+You can view query-level statistics from the `Query stats` tab. You can also
+view your query-level statistics by using the pre-installed
 [`pg_stat_statements`][pg-stat] extension from a PostgreSQL client.
 
 ## Metrics dashboard
 
-Timescale provides a Metrics dashboard for managing your services. You can
+Timescale provides a metrics dashboard for managing your services. You can
 see the Metrics dashboard in your Timescale account by navigating to the
 `Services` section, clicking the service you want to explore, and selecting the
 `Metrics` tab.
@@ -89,6 +92,48 @@ increase your storage capacity, or reduce the size of your database. When you
 have done that, you can also add a retention policy, or turn on compression, to
 avoid the problem occurring again in the future.
 
+## Query-level statistics in the Timescale dashboard
+
+You can analyze your queries by navigating to the `Query stats` tab from the
+Services dashboard.
+
+<EarlyAccess />
+
+Use the filter at the top of the page to view details of your queries, including
+how many rows the query returned, and the time the query took to run.
+
+<img class="main-content__illustration"
+src="https://s3.amazonaws.com/assets.timescale.com/docs/images/tsc_querystats_expanded.webp"
+width={1375} height={944}
+alt="The Timescale query stats viewer showing the statistics for a recent query" />
+
+In the results window, use the horizontal scroll bar at the bottom of the screen
+to see statistics for your query. You can also use the arrow to the left of the
+query to expand it. The columns show these details about your queries:
+
+|Column|Description|
+|-|-|
+|Executions|Number of times the query has been run during the results period|
+|Total rows|Total number of rows scanned, inserted, or updated by the query during the results period|
+|Median rows|Median number of rows touched each time the query is run|
+|P05 time|The fifth percentile, or the minimum time this query took|
+|Median time|Median number of microseconds (µs) or milliseconds (ms) it took to run the query|
+|P95 time|The ninety-fifth percentile, or the maximum time this query took|
+|Median memory|Median amount of memory consumed by the query
+|P95 memory|The ninety-fifth percentile, or the maximum memory this query used|
+|Median bytes read|Median number of bytes used each time the query is run|
+|P95 bytes read|The ninety-fifth percentile, or the maximum number of bytes this query used|
+|Cache hit ratio|Ratio of memory used compared to disk used, as a percentage. Calculated as `cache hit / (cache hit + cache miss)`.|
+|Hypertables|A green check mark is shown if results were drawn from a hypertable|
+|Compressed tables|A green check mark is shown if results were drawn from a compressed table|
+|User name|Username of the logged in user running the query|
+
+<Highlight type="note">
+If you have just completed a query, it can take a minute or two for it to show
+in the query stats viewer. Wait a little, and then refresh the page to see your
+query.
+</Highlight>
+
 ## Query-level statistics with pg_stat_statements
 
 The `pg_stat_statements` extension gives you query-level statistics for your SQL