InfluxDB 3 Explorer 1.2 (#6350)

* feat(explorer): WIP cache management docs

* feat(explorer): add cache management guides, fix js bugs

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

assets/js/custom-timestamps.js

@@ -43,7 +43,7 @@ function getStartDate() {
 
 ////////////////////////////////////////////////////////////////////////////////
 
-// If the user has not set the startDate cookie, default the startDate to yesterday
+// If the user has not set the startDate cookie, default startDate to yesterday
 var startDate = getStartDate() || yesterday();
 
 // Convert a time value to a Unix timestamp (seconds)
@@ -109,6 +109,49 @@ const defaultTimes = [
   }, // 1641067200
 ];
 
+// Helper function to update text while preserving code placeholder elements
+function updateTextNode(node, times) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    let text = node.textContent;
+    times.forEach(function (x) {
+      const oldDatePart = datePart(x.rfc3339.replace(/T.*$/, ''));
+      const newDatePart = datePart(x.rfc3339_new.replace(/T.*$/, ''));
+      const rfc3339Regex = new RegExp(
+        `${oldDatePart.year}(.*?)${oldDatePart.month}(.*?)${oldDatePart.day}`,
+        'g'
+      );
+      const rfc3339Repl = `${newDatePart.year}$1${newDatePart.month}$2${newDatePart.day}`;
+
+      text = text
+        .replaceAll(x.unix, x.unix_new)
+        .replace(rfc3339Regex, rfc3339Repl);
+    });
+    node.textContent = text;
+  }
+}
+
+// Recursively update timestamps in DOM while preserving structure
+function updateTimestampsInElement(element, times) {
+  // Skip code placeholder elements to preserve their functionality
+  if (element.classList && element.classList.contains('code-placeholder')) {
+    return;
+  }
+
+  // Skip elements with data-component attribute (preserves all components)
+  if (element.hasAttribute && element.hasAttribute('data-component')) {
+    return;
+  }
+
+  const childNodes = Array.from(element.childNodes);
+  childNodes.forEach((child) => {
+    if (child.nodeType === Node.TEXT_NODE) {
+      updateTextNode(child, times);
+    } else if (child.nodeType === Node.ELEMENT_NODE) {
+      updateTimestampsInElement(child, times);
+    }
+  });
+}
+
 function updateTimestamps(newStartDate, seedTimes = defaultTimes) {
   // Update the times array with replacement times
   const times = seedTimes.map((x) => {
@@ -129,40 +172,14 @@ function updateTimestamps(newStartDate, seedTimes = defaultTimes) {
     '.custom-timestamps table',
   ];
 
+  // Update block elements while preserving DOM structure
   $(updateBlockElWhitelist.join()).each(function () {
-    var wrapper = $(this)[0];
+    updateTimestampsInElement(this, times);
-
-    times.forEach(function (x) {
-      const oldDatePart = datePart(x.rfc3339.replace(/T.*$/, ''));
-      const newDatePart = datePart(x.rfc3339_new.replace(/T.*$/, ''));
-      const rfc3339Regex = new RegExp(
-        `${oldDatePart.year}(.*?)${oldDatePart.month}(.*?)${oldDatePart.day}`,
-        'g'
-      );
-      const rfc3339Repl = `${newDatePart.year}$1${newDatePart.month}$2${newDatePart.day}`;
-
-      wrapper.innerHTML = wrapper.innerHTML
-        .replaceAll(x.unix, x.unix_new)
-        .replaceAll(rfc3339Regex, rfc3339Repl);
-    });
   });
 
+  // Update span elements
   $('span.custom-timestamps').each(function () {
-    var wrapper = $(this)[0];
+    updateTimestampsInElement(this, times);
-
-    times.forEach(function (x) {
-      const oldDatePart = datePart(x.rfc3339.replace(/T.*$/, ''));
-      const newDatePart = datePart(x.rfc3339_new.replace(/T.*$/, ''));
-      const rfc3339Regex = new RegExp(
-        `${oldDatePart.year}-${oldDatePart.month}-${oldDatePart.day}`,
-        'g'
-      );
-      const rfc3339Repl = `${newDatePart.year}-${newDatePart.month}-${newDatePart.day}`;
-
-      wrapper.innerHTML = wrapper.innerHTML
-        .replaceAll(x.unix, x.unix_new)
-        .replaceAll(rfc3339Regex, rfc3339Repl);
-    });
   });
 
   // Create a new seed times array with new start time for next change
@@ -196,10 +213,11 @@ function CustomTimeTrigger({ component }) {
     prevArrow: '<',
   });
 
-  //////////////////////////////////// ACTIONS ///////////////////////////////////
+  /////////////////////////////////// ACTIONS //////////////////////////////////
 
-  // Initial update to yesterdays date ON PAGE LOAD
+  // Initial update to yesterday's date ON PAGE LOAD
-  // Conditionally set the start date cookie it startDate is equal to the default value
+  // Conditionally set the start date cookie if startDate is equal to the
+  // default value
   let updatedTimes = updateTimestamps(startDate, defaultTimes);
 
   if (startDate === yesterday()) {

content/influxdb3/core/admin/distinct-value-cache/_index.md

@@ -12,6 +12,7 @@ weight: 105
 influxdb3/core/tags: [cache]
 related:
   - /influxdb3/core/reference/sql/functions/cache/#distinct_cache, distinct_cache SQL function
+  - /influxdb3/explorer/manage-caches/distinct-value-caches/
 source: /shared/influxdb3-admin/distinct-value-cache/_index.md
 ---
 

content/influxdb3/core/admin/distinct-value-cache/create.md

@@ -10,6 +10,7 @@ weight: 201
 influxdb3/core/tags: [cache]
 related:
   - /influxdb3/core/reference/cli/influxdb3/create/distinct_cache/
+  - /influxdb3/explorer/manage-caches/distinct-value-caches/
 list_code_example: |
   {{% show-in "core" %}}
   <!--pytest.mark.skip-->

content/influxdb3/core/admin/distinct-value-cache/delete.md

@@ -20,6 +20,7 @@ list_code_example: |
   ```
 related:
   - /influxdb3/core/reference/cli/influxdb3/delete/distinct_cache/
+  - /influxdb3/explorer/manage-caches/distinct-value-caches/
 source: /shared/influxdb3-admin/distinct-value-cache/delete.md
 ---
 

content/influxdb3/core/admin/distinct-value-cache/query.md

@@ -19,6 +19,7 @@ list_code_example: |
   > InfluxQL does not support the `distinct_cache()` function.
 related:
   - /influxdb3/core/reference/sql/functions/cache/#distinct_cache, distinct_cache SQL function
+  - /influxdb3/explorer/manage-caches/distinct-value-caches/
 source: /shared/influxdb3-admin/distinct-value-cache/query.md
 ---
 

content/influxdb3/core/admin/distinct-value-cache/show.md

@@ -18,6 +18,8 @@ list_code_example: |
     --token 00xoXX0xXXx0000XxxxXx0Xx0xx0 \
     table distinct_caches
   ```
+related:
+  - /influxdb3/explorer/manage-caches/distinct-value-caches/
 source: /shared/influxdb3-admin/distinct-value-cache/show.md
 ---
 

content/influxdb3/core/admin/last-value-cache/_index.md

@@ -13,6 +13,7 @@ weight: 104
 influxdb3/core/tags: [cache]
 related:
   - /influxdb3/core/reference/sql/functions/cache/#last_cache, last_cache SQL function
+  - /influxdb3/explorer/manage-caches/last-value-caches/
 source: /shared/influxdb3-admin/last-value-cache/_index.md
 ---
 

content/influxdb3/core/admin/last-value-cache/create.md

@@ -10,6 +10,7 @@ weight: 201
 influxdb3/core/tags: [cache]
 related:
   - /influxdb3/core/reference/cli/influxdb3/create/last_cache/
+  - /influxdb3/explorer/manage-caches/last-value-caches/
 list_code_example: |
   {{% show-in "core" %}}
   <!--pytest.mark.skip-->

content/influxdb3/core/admin/last-value-cache/delete.md

@@ -20,6 +20,7 @@ list_code_example: |
   ```
 related:
   - /influxdb3/core/reference/cli/influxdb3/delete/last_cache/
+  - /influxdb3/explorer/manage-caches/last-value-caches/
 source: /shared/influxdb3-admin/last-value-cache/delete.md
 ---
 

content/influxdb3/core/admin/last-value-cache/query.md

@@ -19,6 +19,7 @@ list_code_example: |
   > InfluxQL does not support the `last_cache()` function.
 related:
   - /influxdb3/core/reference/sql/functions/cache/#last_cache, last_cache SQL function
+  - /influxdb3/explorer/manage-caches/last-value-caches/
 source: /shared/influxdb3-admin/last-value-cache/query.md
 ---
 

content/influxdb3/core/admin/last-value-cache/show.md

@@ -18,6 +18,8 @@ list_code_example: |
     --token 00xoXX0xXXx0000XxxxXx0Xx0xx0 \
     table last_caches
   ```
+related:
+  - /influxdb3/explorer/manage-caches/last-value-caches/
 source: /shared/influxdb3-admin/last-value-cache/show.md
 ---
 

content/influxdb3/enterprise/admin/distinct-value-cache/_index.md

@@ -12,6 +12,7 @@ weight: 106
 influxdb3/enterprise/tags: [cache]
 related:
   - /influxdb3/enterprise/reference/sql/functions/cache/#distinct_cache, distinct_cache SQL function
+  - /influxdb3/explorer/manage-caches/distinct-value-caches/
 source: /shared/influxdb3-admin/distinct-value-cache/_index.md
 ---
 

content/influxdb3/enterprise/admin/distinct-value-cache/create.md

@@ -10,6 +10,7 @@ weight: 201
 influxdb3/enterprise/tags: [cache]
 related:
   - /influxdb3/enterprise/reference/cli/influxdb3/create/distinct_cache/
+  - /influxdb3/explorer/manage-caches/distinct-value-caches/
 list_code_example: |
   {{% show-in "core" %}}
   <!--pytest.mark.skip-->

content/influxdb3/enterprise/admin/distinct-value-cache/delete.md

@@ -20,6 +20,7 @@ list_code_example: |
   ```
 related:
   - /influxdb3/enterprise/reference/cli/influxdb3/delete/distinct_cache/
+  - /influxdb3/explorer/manage-caches/distinct-value-caches/
 source: /shared/influxdb3-admin/distinct-value-cache/delete.md
 ---
 

content/influxdb3/enterprise/admin/distinct-value-cache/query.md

@@ -19,6 +19,7 @@ list_code_example: |
   > InfluxQL does not support the `distinct_cache()` function.
 related:
   - /influxdb3/enterprise/reference/sql/functions/cache/#distinct_cache, distinct_cache SQL function
+  - /influxdb3/explorer/manage-caches/distinct-value-caches/
 source: /shared/influxdb3-admin/distinct-value-cache/query.md
 ---
 

content/influxdb3/enterprise/admin/distinct-value-cache/show.md

@@ -18,6 +18,8 @@ list_code_example: |
     --token 00xoXX0xXXx0000XxxxXx0Xx0xx0 \
     table distinct_caches
   ```
+related:
+  - /influxdb3/explorer/manage-caches/distinct-value-caches/
 source: /shared/influxdb3-admin/distinct-value-cache/show.md
 ---
 

content/influxdb3/enterprise/admin/last-value-cache/_index.md

@@ -13,6 +13,7 @@ weight: 105
 influxdb3/enterprise/tags: [cache]
 related:
   - /influxdb3/enterprise/reference/sql/functions/cache/#last_cache, last_cache SQL function
+  - /influxdb3/explorer/manage-caches/last-value-caches/
 source: /shared/influxdb3-admin/last-value-cache/_index.md
 ---
 

content/influxdb3/enterprise/admin/last-value-cache/create.md

@@ -10,6 +10,7 @@ weight: 201
 influxdb3/enterprise/tags: [cache]
 related:
   - /influxdb3/enterprise/reference/cli/influxdb3/create/last_cache/
+  - /influxdb3/explorer/manage-caches/last-value-caches/
 list_code_example: |
   {{% show-in "core" %}}
   <!--pytest.mark.skip-->

content/influxdb3/enterprise/admin/last-value-cache/delete.md

@@ -20,6 +20,7 @@ list_code_example: |
   ```
 related:
   - /influxdb3/enterprise/reference/cli/influxdb3/delete/last_cache/
+  - /influxdb3/explorer/manage-caches/last-value-caches/
 source: /shared/influxdb3-admin/last-value-cache/delete.md
 ---
 

content/influxdb3/enterprise/admin/last-value-cache/query.md

@@ -19,6 +19,7 @@ list_code_example: |
   > InfluxQL does not support the `last_cache()` function.
 related:
   - /influxdb3/enterprise/reference/sql/functions/cache/#last_cache, last_cache SQL function
+  - /influxdb3/explorer/manage-caches/last-value-caches/
 source: /shared/influxdb3-admin/last-value-cache/query.md
 ---
 

content/influxdb3/enterprise/admin/last-value-cache/show.md

@@ -18,6 +18,8 @@ list_code_example: |
     --token 00xoXX0xXXx0000XxxxXx0Xx0xx0 \
     table last_caches
   ```
+related:
+  - /influxdb3/explorer/manage-caches/last-value-caches/
 source: /shared/influxdb3-admin/last-value-cache/show.md
 ---
 

content/influxdb3/explorer/manage-caches/_index.md

@@ -0,0 +1,21 @@
+---
+title: Manage caches with InfluxDB 3 Explorer
+seotitle: Manage InfluxDB caches with InfluxDB 3 Explorer
+description: >
+  Use InfluxDB 3 Explorer to manage Last Value Caches and Distinct Value Caches
+  in an InfluxDB 3 instance or cluster.
+menu:
+  influxdb3_explorer:
+    name: Manage caches
+weight: 6
+related:
+  - /influxdb3/enterprise/admin/last-value-cache/, Manage the Last Value Cache in InfluxDB 3 Enterprise
+  - /influxdb3/enterprise/admin/distinct-value-cache/, Manage the Distinct Value Cache in InfluxDB 3 Enterprise
+  - /influxdb3/core/admin/last-value-cache/, Manage the Last Value Cache in InfluxDB 3 Core
+  - /influxdb3/core/admin/distinct-value-cache/, Manage the Distinct Value Cache in InfluxDB 3 Core
+---
+
+Use InfluxDB 3 Explorer to manage Last Value Caches and Distinct Value Caches
+in an InfluxDB 3 instance or cluster.
+
+{{< children >}}

content/influxdb3/explorer/manage-caches/distinct-value-caches.md

@@ -0,0 +1,72 @@
+---
+title: Manage Distinct Value Caches with InfluxDB 3 Explorer
+list_title: Manage Distinct Value Caches
+description: >
+  Use InfluxDB 3 Explorer to manage Distinct Value Caches in an InfluxDB 3
+  instance or cluster.
+menu:
+  influxdb3_explorer:
+    name: Distinct Value Caches
+    parent: Manage caches
+weight: 102
+related:
+  - /influxdb3/enterprise/admin/distinct-value-cache/, Manage the Distinct Value Cache in InfluxDB 3 Enterprise
+  - /influxdb3/core/admin/distinct-value-cache/, Manage the Distinct Value Cache in InfluxDB 3 Core
+---
+
+Use InfluxDB 3 Explorer to manage Distinct Value Caches (DVCs) in an InfluxDB 3
+instance or cluster. To navigate to the **Distinct Value Cache management page**:
+
+1. In the left navigation bar, select **Configure** > **Caches**.
+2. Select the **Distinct Value Caches** tab.
+
+- [View Distinct Value Caches](#view-distinct-value-caches)
+- [Create a Distinct Value Cache](#create-a-distinct-value-cache)
+- [Query a Distinct Value Cache](#query-a-distinct-value-cache)
+- [Delete a Distinct Value Cache](#delete-a-distinct-value-cache)
+
+## View Distinct Value Caches
+
+To view DVCs associated with a database, navigate to the
+**Distinct Value Cache management page** and select the database from the
+**Select Database** dropdown menu. The page lists all DVCs associated with the
+selected database.
+
+## Create a Distinct Value Cache
+
+On the **Distinct Value Cache management page**:
+
+1.  Click **+ Create Cache**.
+2.  Provide the following:
+
+    - **Cache name**: A unique name for the cache.
+    - **Database**: The database the cache is associated with.
+    - **Table**: The target table for the cache. As data is written to the table,
+      it populates the cache.
+      _You must select a database before you can select a table._
+    - **Column names**: Select columns to cache distinct values from.
+      These are typically InfluxDB tags, but you can also use fields.
+      combinations to cache. Once this limit is exceeded, InfluxDB drops the oldest cached
+      distinct values.
+    - **Max Age**: Specify the maximum age of cached values as a duration in
+      [humantime](https://docs.rs/humantime/latest/humantime/fn.parse_duration.html)
+      form. The default is `24h`.
+
+      > [!Note]
+      > Higher cardinality (more distinct values) in a DVC increases memory usage.
+
+3.  Click **Create**.
+
+## Query a Distinct Value Cache
+
+Use the `distinct_cache` SQL function to query a DVC. For more information, see
+[Query a Distinct Value Cache](/influxdb3/enterprise/admin/distinct-value-cache/query/).
+
+## Delete a Distinct Value Cache
+
+On the **Distinct Value Cache management page**:
+
+1.  Select the database associated with the cache you want to delete from the
+    **Select Database** dropdown menu.
+2.  In the **Active Caches** table, click the {{% icon "trash" %}} icon next to
+    the cache you want to delete.

content/influxdb3/explorer/manage-caches/last-value-caches.md

@@ -0,0 +1,74 @@
+---
+title: Manage Last Value Caches with InfluxDB 3 Explorer
+list_title: Manage Last Value Caches
+description: >
+  Use InfluxDB 3 Explorer to manage Last Value Caches in an InfluxDB 3 instance
+  or cluster.
+menu:
+  influxdb3_explorer:
+    name: Last Value Caches
+    parent: Manage caches
+weight: 101
+related:
+  - /influxdb3/enterprise/admin/last-value-cache/, Manage the Last Value Cache in InfluxDB 3 Enterprise
+  - /influxdb3/core/admin/last-value-cache/, Manage the Last Value Cache in InfluxDB 3 Core
+---
+
+Use InfluxDB 3 Explorer to manage Last Value Caches (LVCs) in an InfluxDB 3
+instance or cluster. To navigate to the **Last Value Cache management page**, in
+the left navigation bar, select **Configure** > **Caches**.
+
+- [View Last Value Caches](#view-last-value-caches)
+- [Create a Last Value Cache](#create-a-last-value-cache)
+- [Query a Last Value Cache](#query-a-last-value-cache)
+- [Delete a Last Value Cache](#delete-a-last-value-cache)
+
+## View Last Value Caches
+
+To view LVCs associated with a database, navigate to the
+**Last Value Cache management page** and select the database from the
+**Select Database** dropdown menu. The page lists all LVCs associated with the
+selected database.
+
+## Create a Last Value Cache
+
+On the **Last Value Cache management page**:
+
+1.  Click **+ Create Cache**.
+2.  Provide the following:
+
+    - **Cache name**: A unique name for the cache.
+    - **Database**: The database the cache is associated with.
+    - **Table**: The target table for the cache. As data is written to the table,
+      it populates the cache.
+      _You must select a database before you can select a table._
+    - **Key columns**: Select string-typed column columns to use as the primary
+      key for the cache. These are typically InfluxDB tags, but you can also use
+      fields. Each unique combination of key column values represents a distinct
+      series. LVCs cache N (count) values per series.
+    - **Value columns**: Select columns to cache values for. These are
+      typically InfluxDB fields, but can also be tags. If no columns are
+      selected as value columns, all non-key columns are used as value columns
+      (excluding `time`).
+    - **Count**: Specify the number of recently written values to cache per series.
+
+      > [!Note]
+      > Higher cardinality (more unique series) in an LVC increases memory usage.
+      > Be selective about key columns and the number of values to cache per
+      > series to optimize performance.
+
+3.  Click **Create**.
+
+## Query a Last Value Cache
+
+Use the `last_cache` SQL function to query an LVC. For more information, see
+[Query a Last Value Cache](/influxdb3/enterprise/admin/last-value-cache/query/).
+
+## Delete a Last Value Cache
+
+On the **Last Value Cache management page**:
+
+1.  Select the database associated with the cache you want to delete from the
+    **Select Database** dropdown menu.
+2.  In the **Active Caches** table, click the {{% icon "trash" %}} icon next to
+    the cache you want to delete.

content/shared/influxdb3-sample-data/sample-data.md

@@ -53,8 +53,8 @@ home sensor sample data to {{< product-name >}}.
 {{% code-tab-content %}}
 
 {{% influxdb/custom-timestamps %}}
-{{% code-placeholders "AUTH_TOKEN|DATABASE_NAME" %}}
+
-```sh
+```bash { placeholders="AUTH_TOKEN|DATABASE_NAME" }
 influxdb3 write \
   --token AUTH_TOKEN \
   --database DATABASE_NAME \
@@ -85,15 +85,13 @@ home,room=Kitchen temp=23.1,hum=36.6,co=22i 1641063600
 home,room=Living\ Room temp=22.2,hum=36.4,co=17i 1641067200
 home,room=Kitchen temp=22.7,hum=36.5,co=26i 1641067200'
 ```
-{{% /code-placeholders %}}
 {{% /influxdb/custom-timestamps %}}
 
 {{% /code-tab-content %}}
 {{% code-tab-content %}}
 
 {{% influxdb/custom-timestamps %}}
-{{% code-placeholders "AUTH_TOKEN|DATABASE_NAME" %}}
+```bash { placeholders="AUTH_TOKEN|DATABASE_NAME" }
-```sh
 curl -v "http://localhost:8181/api/v3/write_lp?db=sensors&precision=auto&accept_partial=true" \
   --data-raw "home,room=Living\ Room temp=21.1,hum=35.9,co=0i 1735545600
 home,room=Kitchen temp=21.0,hum=35.9,co=0i 1735545600
@@ -122,15 +120,13 @@ home,room=Kitchen temp=23.1,hum=36.6,co=22i 1735585200
 home,room=Living\ Room temp=22.2,hum=36.4,co=17i 1735588800
 home,room=Kitchen temp=22.7,hum=36.5,co=26i 1735588800"
 ```
-{{% /code-placeholders %}}
 {{% /influxdb/custom-timestamps %}}
 
 {{% /code-tab-content %}}
 {{% code-tab-content %}}
 
 {{% influxdb/custom-timestamps %}}
-{{% code-placeholders "AUTH_TOKEN|DATABASE_NAME" %}}
+```bash { placeholders="AUTH_TOKEN|DATABASE_NAME" }
-```sh
 curl --request POST \
   http://{{< influxdb/host >}}/api/v2/write?bucket=DATABASE_NAME&precision=s \
   --header "Authorization: Bearer AUTH_TOKEN" \
@@ -165,15 +161,13 @@ home,room=Living\ Room temp=22.2,hum=36.4,co=17i 1641067200
 home,room=Kitchen temp=22.7,hum=36.5,co=26i 1641067200
 "
 ```
-{{% /code-placeholders %}}
 {{% /influxdb/custom-timestamps %}}
 
 {{% /code-tab-content %}}
 {{% code-tab-content %}}
 
 {{% influxdb/custom-timestamps %}}
-{{% code-placeholders "AUTH_TOKEN|DATABASE_NAME" %}}
+```bash { placeholders="AUTH_TOKEN|DATABASE_NAME" }
-```sh
 curl --request POST \
   http://{{< influxdb/host >}}/write?db=DATABASE_NAME&precision=s \
   --header "Authorization: Bearer AUTH_TOKEN" \
@@ -207,7 +201,6 @@ home,room=Living\ Room temp=22.2,hum=36.4,co=17i 1641067200
 home,room=Kitchen temp=22.7,hum=36.5,co=26i 1641067200
 "
 ```
-{{% /code-placeholders %}}
 {{% /influxdb/custom-timestamps %}}
 
 {{% /code-tab-content %}}

layouts/partials/footer/widgets/custom-time-trigger.html

@@ -1,6 +1,6 @@
 {{ if or (.Page.HasShortcode "influxdb/custom-timestamps") (.Page.HasShortcode "influxdb/custom-timestamps-span") }}
 <div data-component="custom-time-trigger" class="custom-time-trigger widget blue" data-tooltip="Select custom date for sample data">
-  <a href="#" class="custom-time-trigger__button" data-action="open">
+  <a role="button" class="custom-time-trigger__button" data-action="open">
     <span class="cf-icon Clock_New"></span>
   </a>
 </div>