fix: loading all hosts list of hosts (#6111)

* chore: simply build nightly packages

.circleci/config.yml

@@ -4,6 +4,13 @@ orbs:
   aws-s3: circleci/aws-s3@2.0.0
 
 
+parameters:
+  trigger:
+    type: enum
+    enum: [none, deploy-as-artifacts]
+    default: none
+
+
 workflows:
   version: 2
   main:
@@ -69,6 +76,15 @@ workflows:
             tags:
               only: /^[0-9]+(\.[0-9]+)*$/
 
+  trigger:
+    when:
+      equal: [ deploy-as-artifacts, << pipeline.parameters.trigger >> ]
+    jobs:
+      - build
+      - build-nightly:
+          requires:
+            - build
+
 jobs:
   build:
     environment:
@@ -123,6 +139,27 @@ jobs:
       - store_artifacts:
           path: ./build/
 
+  build-nightly:
+    environment:
+      DOCKER_TAG: chronograf-20240919
+      GO111MODULE: "ON"
+    machine:
+      image: ubuntu-2204:current
+    steps:
+      - attach_workspace:
+          at: /home/circleci
+      - run: |
+          ./etc/scripts/docker/run.sh \
+            --debug \
+            --clean \
+            --package \
+            --platform all \
+            --arch all \
+            --nightly \
+            --version=${CIRCLE_SHA1:0:7}
+      - store_artifacts:
+          path: ./build/
+
   deploy-pre-release:
     environment:
       DOCKER_TAG: chronograf-20240919

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Bug Fixes
 
 1. [#6103](https://github.com/influxdata/chronograf/pull/6103): Set active database for InfluxQL meta queries.
+1. [#6111](https://github.com/influxdata/chronograf/pull/6111): Fix loading Hosts page for large number of hosts.
 
 ### Other
 

docs/release.md

@@ -51,3 +51,18 @@ git push --tags
     * amd64
 * Windows
     * amd64
+
+## Testing builds
+
+The test builds are stored as artifacts on the CircleCI build page. If you want to create a test build, you can do it by triggering a pipeline on CircleCI.
+During the trigger of the pipeline, you should specify the `trigger` parameter with the value `deploy-as-artifacts`:
+
+<p align="left">
+  <img src="./images/testing-builds-pipeline.png"/>
+</p>
+
+The resulting artifacts will be available on the CircleCI build page for `build-nightly` Job:
+
+<p align="left">
+  <img src="./images/testing-builds-result.png"/>
+</p>

ui/src/hosts/apis/index.ts

@@ -49,13 +49,13 @@ export const getCpuAndLoadForHosts = async (
   tempVars: Template[]
 ): Promise<HostsObject> => {
   const query = replaceTemplate(
-    `SELECT mean("usage_user") FROM \":db:\".\":rp:\".\"cpu\" WHERE "cpu" = 'cpu-total' AND time > now() - 10m GROUP BY host;
+    `SHOW TAG VALUES WITH KEY = "host" WHERE TIME > now() - 10m;
+      SELECT mean("usage_user") FROM \":db:\".\":rp:\".\"cpu\" WHERE "cpu" = 'cpu-total' AND time > now() - 10m GROUP BY host;
       SELECT mean("load1") FROM \":db:\".\":rp:\".\"system\" WHERE time > now() - 10m GROUP BY host;
       SELECT non_negative_derivative(mean(uptime)) AS deltaUptime FROM \":db:\".\":rp:\".\"system\" WHERE time > now() - ${telegrafSystemInterval} * 10 GROUP BY host, time(${telegrafSystemInterval}) fill(0);
       SELECT mean("Percent_Processor_Time") FROM \":db:\".\":rp:\".\"win_cpu\" WHERE time > now() - 10m GROUP BY host;
       SELECT mean("Processor_Queue_Length") FROM \":db:\".\":rp:\".\"win_system\" WHERE time > now() - 10m GROUP BY host;
-      SELECT non_negative_derivative(mean("System_Up_Time")) AS winDeltaUptime FROM \":db:\".\":rp:\".\"win_system\" WHERE time > now() - ${telegrafSystemInterval} * 10 GROUP BY host, time(${telegrafSystemInterval}) fill(0);
+      SELECT non_negative_derivative(mean("System_Up_Time")) AS winDeltaUptime FROM \":db:\".\":rp:\".\"win_system\" WHERE time > now() - ${telegrafSystemInterval} * 10 GROUP BY host, time(${telegrafSystemInterval}) fill(0);`,
-      SHOW TAG VALUES WITH KEY = "host" WHERE TIME > now() - 10m;`,
     tempVars
   )
 
@@ -65,15 +65,19 @@ export const getCpuAndLoadForHosts = async (
     db: telegrafDB,
   })
 
+  return parseHostsObject(data)
+}
+
+export const parseHostsObject = (data: any): HostsObject => {
   const hosts: HostsObject = {}
   const precision = 100
-  const cpuSeries = getDeep<Series[]>(data, 'results.[0].series', [])
+  const allHostsSeries = getDeep<Series[]>(data, 'results.[0].series', [])
-  const loadSeries = getDeep<Series[]>(data, 'results.[1].series', [])
+  const cpuSeries = getDeep<Series[]>(data, 'results.[1].series', [])
-  const uptimeSeries = getDeep<Series[]>(data, 'results.[2].series', [])
+  const loadSeries = getDeep<Series[]>(data, 'results.[2].series', [])
-  const winCPUSeries = getDeep<Series[]>(data, 'results.[3].series', [])
+  const uptimeSeries = getDeep<Series[]>(data, 'results.[3].series', [])
-  const winLoadSeries = getDeep<Series[]>(data, 'results.[4].series', [])
+  const winCPUSeries = getDeep<Series[]>(data, 'results.[4].series', [])
-  const winUptimeSeries = getDeep<Series[]>(data, 'results.[5].series', [])
+  const winLoadSeries = getDeep<Series[]>(data, 'results.[5].series', [])
-  const allHostsSeries = getDeep<Series[]>(data, 'results.[6].series', [])
+  const winUptimeSeries = getDeep<Series[]>(data, 'results.[6].series', [])
 
   allHostsSeries.forEach(s => {
     const hostnameIndex = s.columns.findIndex(col => col === 'value')

ui/test/hosts/containers/HostsPage.test.tsx

@@ -12,6 +12,7 @@ jest.mock('src/hosts/apis', () => require('mocks/hosts/apis'))
 jest.mock('src/shared/apis/env', () => require('mocks/shared/apis/env'))
 
 import {getCpuAndLoadForHosts} from 'src/hosts/apis'
+const {parseHostsObject} = jest.requireActual('src/hosts/apis')
 
 const setup = (override = {}) => {
   const props = {
@@ -64,3 +65,168 @@ describe('Hosts.Containers.HostsPage', () => {
     })
   })
 })
+
+describe('Parsing HostsObject', () => {
+  let cpu_load_hosts
+
+  beforeEach(() => {
+    cpu_load_hosts = {
+      results: [
+        {
+          statement_id: 0,
+          series: [
+            {
+              name: 'cpu',
+              columns: ['key', 'value'],
+              values: [['host', 'my-host1']],
+            },
+            {
+              name: 'db_query',
+              columns: ['key', 'value'],
+              values: [['host', 'my-host2']],
+            },
+          ],
+        },
+        {
+          statement_id: 1,
+          series: [
+            {
+              name: 'cpu',
+              tags: {host: 'my-host1'},
+              columns: ['time', 'mean'],
+              values: [[1718874564091, 2.2943182130124]],
+            },
+            {
+              name: 'cpu',
+              tags: {host: 'my-host2'},
+              columns: ['time', 'mean'],
+              values: [[1718874564092, 4.2943182130124]],
+            },
+          ],
+        },
+        {
+          statement_id: 2,
+          series: [
+            {
+              name: 'system',
+              tags: {host: 'my-host1'},
+              columns: ['time', 'mean'],
+              values: [[1718874564111, 1.5699999999999]],
+            },
+            {
+              name: 'system',
+              tags: {host: 'my-host2'},
+              columns: ['time', 'mean'],
+              values: [[1718874564112, 2.5699999999999]],
+            },
+          ],
+        },
+        {
+          statement_id: 3,
+          series: [
+            {
+              name: 'system',
+              tags: {host: 'my-host1'},
+              columns: ['time', 'deltaUptime'],
+              values: [
+                [1718874540001, 753231],
+                [1718874600001, 60],
+                [1718874660001, 60],
+                [1718874720001, 60],
+                [1718874780001, 60],
+                [1718874840001, 60],
+                [1718874900001, 60],
+                [1718874960001, 60],
+                [1718875020001, 60],
+                [1718875080001, 60],
+                [1718875140001, 60],
+              ],
+            },
+            {
+              name: 'system',
+              tags: {host: 'my-host2'},
+              columns: ['time', 'deltaUptime'],
+              values: [
+                [2718874540002, 753232],
+                [2718874600002, 60],
+                [2718874660002, 60],
+                [2718874720002, 60],
+                [2718874780002, 60],
+                [2718874840002, 60],
+                [2718874900002, 60],
+                [2718874960002, 60],
+                [2718875020002, 60],
+                [2718875080002, 60],
+                [2718875140002, 70],
+              ],
+            },
+          ],
+        },
+        {statement_id: 4},
+        {statement_id: 5},
+        {statement_id: 6},
+      ],
+      uuid: '123456789',
+    }
+  })
+
+  it('parse', () => {
+    const hosts = parseHostsObject(cpu_load_hosts)
+    expect(hosts['my-host1']).toStrictEqual({
+      name: 'my-host1',
+      cpu: 2.29,
+      load: 1.57,
+      deltaUptime: 60,
+      apps: [],
+    })
+    expect(hosts['my-host2']).toStrictEqual({
+      name: 'my-host2',
+      cpu: 4.29,
+      load: 2.57,
+      deltaUptime: 70,
+      apps: [],
+    })
+    expect(hosts['my-host3']).toBeUndefined()
+  })
+  it('missing in cpu', () => {
+    cpu_load_hosts.results[1].series = [cpu_load_hosts.results[1].series[0]]
+    const hosts = parseHostsObject(cpu_load_hosts)
+    expect(hosts['my-host1']).toBeDefined()
+    expect(hosts['my-host1']).toStrictEqual({
+      name: 'my-host1',
+      cpu: 2.29,
+      load: 1.57,
+      deltaUptime: 60,
+      apps: [],
+    })
+    expect(hosts['my-host2']).toStrictEqual({
+      name: 'my-host2',
+      cpu: 0,
+      load: 2.57,
+      deltaUptime: 70,
+      apps: [],
+    })
+    expect(hosts['my-host3']).toBeUndefined()
+  })
+  it('missing in host', () => {
+    const series = cpu_load_hosts.results[0].series[0]
+    cpu_load_hosts.results[0].series = [series]
+    const hosts = parseHostsObject(cpu_load_hosts)
+    expect(hosts['my-host1']).toBeDefined()
+    expect(hosts['my-host1']).toStrictEqual({
+      name: 'my-host1',
+      cpu: 2.29,
+      load: 1.57,
+      deltaUptime: 60,
+      apps: [],
+    })
+    expect(hosts['my-host2']).toStrictEqual({
+      name: 'my-host2',
+      cpu: 4.29,
+      load: 2.57,
+      deltaUptime: 70,
+      apps: [],
+    })
+    expect(hosts['my-host3']).toBeUndefined()
+  })
+})