Add Stat Chart (#787)

[NickLanam]

Signed-off-by: Nick Lanam nlanam@pixielabs.ai

Summary: Adds a new chart type, 'StatChart', which just displays the latest value of a single metric with units and label.

Relevant Issues: Fixes #787

Type of change: /kind feature

Test Plan: Try this script with this vis spec.

import px
import pxviews

ns_per_ms = 1000 * 1000
ns_per_s = 1000 * ns_per_ms
# Window size to use on time_ column for bucketing.
window_ns = px.DurationNanos(10 * ns_per_s)

def resource_timeseries(start_time: str, node: px.Node):
    ''' Gets the windowed process stats (CPU, memory, etc) for the input node.

    Args:
    @start_time Starting time of the data to examine.
    @node: The full name of the node to filter on.
    '''
    df = pxviews.container_process_timeseries(start_time, px.now(), window_ns)
    df = df[df.ctx['node'] == node]
    df['node'] = df.ctx['node']

    df = df.groupby(['time_', 'node']).agg(
        cpu_usage=('cpu_usage', px.sum),
        actual_disk_read_throughput=('actual_disk_read_throughput', px.sum),
        actual_disk_write_throughput=('actual_disk_write_throughput', px.sum),
        total_disk_read_throughput=('total_disk_read_throughput', px.sum),
        total_disk_write_throughput=('total_disk_write_throughput', px.sum),
        rss=('rss', px.sum),
        vsize=('vsize', px.sum),
    )

    df.groupby_col = df['node']
    return df

{
  "variables": [
      {
          "name": "start_time",
          "type": "PX_STRING",
          "description": "The relative start time of the window. Current time is assumed to be now",
          "defaultValue": "-5m"
      },
      {
          "name": "node",
          "type": "PX_NODE",
          "description": "The node name to filter on"
      }
  ],
  "globalFuncs": [
      {
          "outputName": "resource_timeseries",
          "func": {
              "name": "resource_timeseries",
              "args": [
                  {
                      "name": "start_time",
                      "variable": "start_time"
                  },
                  {
                      "name": "node",
                      "variable": "node"
                  }
              ]
          }
      }
  ],
  "widgets": [
      {
          "name": "CPU Stat",
          "position": {
              "x": 0,
              "y": 0,
              "w": 1,
              "h": 1
          },
          "globalFuncOutputName": "resource_timeseries",
          "displaySpec": {
              "@type": "types.px.dev/px.vispb.StatChart",
              "title": "CPU Usage",
              "stat": {
                  "value": "cpu_usage"
              }
          }
      },
      {
        "name": "Bytes Read Stat",
        "position": {
            "x": 2,
            "y": 0,
            "w": 2,
            "h": 2
        },
        "globalFuncOutputName": "resource_timeseries",
        "displaySpec": {
            "@type": "types.px.dev/px.vispb.StatChart",
            "title": "Bytes Read",
            "stat": {
                "value": "total_disk_read_throughput"
            }
        }
    }
  ]
}

Changelog Message:

New chart type: Stat. Shows a label, metric, and units for that metric.

[aimichelle]

Screenshots?

[NickLanam]

Screenshots?

I think I attached those a couple of seconds after you loaded the page

[aimichelle]

Marking as request changes, since I didn't for my previous comments.