From 6be5cacce5fbeaafc9489b734b99b715b5e4c10c Mon Sep 17 00:00:00 2001 From: Andy McHugh Date: Thu, 18 Apr 2024 22:52:53 +0100 Subject: [PATCH] condensed mode see changelog --- CHANGELOG.md | 16 +- package.json | 2 +- .../dashboards/threadHighlighting.json | 213 +++++++++++++++++- src/components/Config.tsx | 2 + src/components/FlowPanel.tsx | 11 +- src/components/Highlighter.tsx | 1 - src/components/TimeSlider.tsx | 1 - yaml_defs/panelConfig.yaml | 4 + 8 files changed, 234 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 813021a..51b93c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,15 +1,19 @@ # Changelog -## 1.x.x -Improves sub 100% scaling so that it now should correctly fill the panel maintaining -aspect ratio. +## 1.7.0 +Improves scaling in all ways but especially the sub 100% scaling so that it now correctly +fills the panel maintaining aspect ratio. -Changes the background color definition to be applied to the available svg panel area +Changes the background color definition so that it applies to the available svg panel area rather that the actual svg background. -Adds new cell-label yaml 'unitsPostfix'. This is an optional string that will be postfixed +Adds a new panelConfig field 'unitsPostfix'. This is an optional string that will be postfixed to the label value. It can be used for specifying custom units. In yaml, unicode characters -are specified with a \u. i.e. "\u03bc" = Mu. +are specified with a \u. i.e. "\u03bc" = Mu. New panel config terms: +- cells.cell-name.label.unitsPostfix + +Adds a new panelConfig field 'condensed'. This mode which uses less vertical space for the controls when both the timeSlider and highlighter are enabled. New panelConfig terms: +- tagConfig.condensed ## 1.6.0 Adds resource links for website, license and yaml defs to the plugin landing page. diff --git a/package.json b/package.json index 0abe1b2..3978c16 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flow", - "version": "1.6.0", + "version": "1.7.0", "description": "Svg flowchart visualization", "scripts": { "build": "webpack -c ./webpack.config.ts --env production", diff --git a/provisioning/dashboards/threadHighlighting.json b/provisioning/dashboards/threadHighlighting.json index bd540d8..fdd7332 100644 --- a/provisioning/dashboards/threadHighlighting.json +++ b/provisioning/dashboards/threadHighlighting.json @@ -18,7 +18,7 @@ "editable": true, "fiscalYearStartMonth": 0, "graphTooltip": 0, - "id": 16, + "id": 17, "links": [], "liveNow": false, "panels": [ @@ -41,7 +41,7 @@ "showLineNumbers": false, "showMiniMap": false }, - "content": "# Thread Highlighting\n\nThis dashbard demonstrates thread highlightng. The fields are tagged with attribute type\nand technology type allowing the data to be higlighted across these dimensions.\n\nThe intent behind this is to make it easier to spot correlations.", + "content": "# Thread Highlighting\n\nThis dashbard demonstrates thread highlightng. The fields are tagged with attribute type\nand technology type allowing the data to be higlighted across these dimensions.\n\nThe intent behind this is to make it easier to spot correlations.\n\nThe lefthand panels are not condensed. The righthand panels are condensed. Condenced only\nhas an impact on the control space when both controls are enabled.", "mode": "markdown" }, "pluginVersion": "10.0.0", @@ -53,8 +53,8 @@ "uid": "grafana" }, "gridPos": { - "h": 16, - "w": 24, + "h": 7, + "w": 12, "x": 0, "y": 5 }, @@ -75,6 +75,209 @@ "timeSliderEnabled": true }, "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 7, + "w": 12, + "x": 12, + "y": 5 + }, + "id": 7, + "options": { + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 1, + "displaySvgCtr": 0, + "mappingsCtr": 1, + "timingsCtr": 0 + }, + "highlighterEnabled": true, + "panelConfig": "---\n\n#------------------------------------------------------------------------------\n# YAML Aliases to simplify maintenance\n\nanchorLinks:\n - threshold: &threshold_inflow\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 125}\n - {color: \"red\", level: 175}\n - threshold: &threshold_depth\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 500}\n - {color: \"red\", level: 1000}\n - threshold: &threshold_latency\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 50}\n - {color: \"red\", level: 150}\n - threshold: &threshold_active\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 400}\n - {color: \"red\", level: 800}\n\n#------------------------------------------------------------------------------\n# Highlighting\n\ntagConfig:\n legend: [\"Queue Technology:\", \"rabbitMQ\", \"kafka\", \"|\", \"Flow Attribs:\", \"inflow\", \"depth\", \"latency\", \"active\", \"|\"]\n color: \"yellow\"\n highlightRgbFactor: 5.0\n lowlightAlphaFactor: 0.3\n condensed: true\n\n#------------------------------------------------------------------------------\n# Panel Config\n\ncellIdPreamble: \"cell-\"\ngradientMode: \"hue\"\n\ncells:\n #----------------------------------------------------------------------------\n user_throttle_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n user_throttle_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n user_throttle_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n user_throttle_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n ingest_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n ingest_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n ingest_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n ingest_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n backfill_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n backfill_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n backfill_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n backfill_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n transform_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n transform_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n transform_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n transform_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n load_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n load_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n load_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n load_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n priority_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n priority_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n priority_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n priority_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]", + "siteConfig": "", + "svg": "\n\n\n
Transform Queue
Transform Queue
User Throttle
User Throttle
Load Queue
Load Queue
no data
no data
Ingest Queue
Ingest Queue
no data
no data
no data
no data
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
no data
no data
Backfill Queue
Backfill Queue
no data
no data
latency
latency
active
active
depth
depth
Priority Queue
Priority Queue
no data
no data
latency
latency
active
active
depth
depthText is not SVG - cannot display", + "testDataEnabled": true, + "timeSliderEnabled": true + }, + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 7, + "w": 12, + "x": 0, + "y": 12 + }, + "id": 8, + "options": { + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 1, + "displaySvgCtr": 0, + "mappingsCtr": 1, + "timingsCtr": 0 + }, + "highlighterEnabled": true, + "panelConfig": "---\n\n#------------------------------------------------------------------------------\n# YAML Aliases to simplify maintenance\n\nanchorLinks:\n - threshold: &threshold_inflow\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 125}\n - {color: \"red\", level: 175}\n - threshold: &threshold_depth\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 500}\n - {color: \"red\", level: 1000}\n - threshold: &threshold_latency\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 50}\n - {color: \"red\", level: 150}\n - threshold: &threshold_active\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 400}\n - {color: \"red\", level: 800}\n\n#------------------------------------------------------------------------------\n# Highlighting\n\ntagConfig:\n legend: [\"Queue Technology:\", \"rabbitMQ\", \"kafka\", \"|\", \"Flow Attribs:\", \"inflow\", \"depth\", \"latency\", \"active\", \"|\"]\n color: \"yellow\"\n highlightRgbFactor: 5.0\n lowlightAlphaFactor: 0.3\n\n#------------------------------------------------------------------------------\n# Panel Config\n\ncellIdPreamble: \"cell-\"\ngradientMode: \"hue\"\n\ncells:\n #----------------------------------------------------------------------------\n user_throttle_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n user_throttle_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n user_throttle_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n user_throttle_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n ingest_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n ingest_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n ingest_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n ingest_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n backfill_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n backfill_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n backfill_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n backfill_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n transform_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n transform_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n transform_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n transform_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n load_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n load_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n load_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n load_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n priority_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n priority_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n priority_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n priority_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]", + "siteConfig": "", + "svg": "\n\n\n
Transform Queue
Transform Queue
User Throttle
User Throttle
Load Queue
Load Queue
no data
no data
Ingest Queue
Ingest Queue
no data
no data
no data
no data
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
no data
no data
Backfill Queue
Backfill Queue
no data
no data
latency
latency
active
active
depth
depth
Priority Queue
Priority Queue
no data
no data
latency
latency
active
active
depth
depthText is not SVG - cannot display", + "testDataEnabled": true, + "timeSliderEnabled": false + }, + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 7, + "w": 12, + "x": 12, + "y": 12 + }, + "id": 9, + "options": { + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 1, + "displaySvgCtr": 0, + "mappingsCtr": 1, + "timingsCtr": 0 + }, + "highlighterEnabled": true, + "panelConfig": "---\n\n#------------------------------------------------------------------------------\n# YAML Aliases to simplify maintenance\n\nanchorLinks:\n - threshold: &threshold_inflow\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 125}\n - {color: \"red\", level: 175}\n - threshold: &threshold_depth\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 500}\n - {color: \"red\", level: 1000}\n - threshold: &threshold_latency\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 50}\n - {color: \"red\", level: 150}\n - threshold: &threshold_active\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 400}\n - {color: \"red\", level: 800}\n\n#------------------------------------------------------------------------------\n# Highlighting\n\ntagConfig:\n legend: [\"Queue Technology:\", \"rabbitMQ\", \"kafka\", \"|\", \"Flow Attribs:\", \"inflow\", \"depth\", \"latency\", \"active\", \"|\"]\n color: \"yellow\"\n highlightRgbFactor: 5.0\n lowlightAlphaFactor: 0.3\n condensed: true\n\n#------------------------------------------------------------------------------\n# Panel Config\n\ncellIdPreamble: \"cell-\"\ngradientMode: \"hue\"\n\ncells:\n #----------------------------------------------------------------------------\n user_throttle_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n user_throttle_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n user_throttle_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n user_throttle_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n ingest_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n ingest_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n ingest_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n ingest_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n backfill_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n backfill_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n backfill_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n backfill_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n transform_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n transform_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n transform_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n transform_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n load_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n load_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n load_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n load_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n priority_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n priority_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n priority_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n priority_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]", + "siteConfig": "", + "svg": "\n\n\n
Transform Queue
Transform Queue
User Throttle
User Throttle
Load Queue
Load Queue
no data
no data
Ingest Queue
Ingest Queue
no data
no data
no data
no data
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
no data
no data
Backfill Queue
Backfill Queue
no data
no data
latency
latency
active
active
depth
depth
Priority Queue
Priority Queue
no data
no data
latency
latency
active
active
depth
depthText is not SVG - cannot display", + "testDataEnabled": true, + "timeSliderEnabled": false + }, + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 7, + "w": 12, + "x": 0, + "y": 19 + }, + "id": 10, + "options": { + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 1, + "displaySvgCtr": 0, + "mappingsCtr": 1, + "timingsCtr": 0 + }, + "highlighterEnabled": false, + "panelConfig": "---\n\n#------------------------------------------------------------------------------\n# YAML Aliases to simplify maintenance\n\nanchorLinks:\n - threshold: &threshold_inflow\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 125}\n - {color: \"red\", level: 175}\n - threshold: &threshold_depth\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 500}\n - {color: \"red\", level: 1000}\n - threshold: &threshold_latency\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 50}\n - {color: \"red\", level: 150}\n - threshold: &threshold_active\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 400}\n - {color: \"red\", level: 800}\n\n#------------------------------------------------------------------------------\n# Highlighting\n\ntagConfig:\n legend: [\"Queue Technology:\", \"rabbitMQ\", \"kafka\", \"|\", \"Flow Attribs:\", \"inflow\", \"depth\", \"latency\", \"active\", \"|\"]\n color: \"yellow\"\n highlightRgbFactor: 5.0\n lowlightAlphaFactor: 0.3\n\n#------------------------------------------------------------------------------\n# Panel Config\n\ncellIdPreamble: \"cell-\"\ngradientMode: \"hue\"\n\ncells:\n #----------------------------------------------------------------------------\n user_throttle_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n user_throttle_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n user_throttle_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n user_throttle_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n ingest_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n ingest_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n ingest_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n ingest_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n backfill_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n backfill_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n backfill_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n backfill_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n transform_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n transform_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n transform_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n transform_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n load_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n load_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n load_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n load_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n priority_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n priority_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n priority_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n priority_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]", + "siteConfig": "", + "svg": "\n\n\n
Transform Queue
Transform Queue
User Throttle
User Throttle
Load Queue
Load Queue
no data
no data
Ingest Queue
Ingest Queue
no data
no data
no data
no data
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
no data
no data
Backfill Queue
Backfill Queue
no data
no data
latency
latency
active
active
depth
depth
Priority Queue
Priority Queue
no data
no data
latency
latency
active
active
depth
depthText is not SVG - cannot display", + "testDataEnabled": true, + "timeSliderEnabled": true + }, + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 7, + "w": 12, + "x": 12, + "y": 19 + }, + "id": 11, + "options": { + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 1, + "displaySvgCtr": 0, + "mappingsCtr": 1, + "timingsCtr": 0 + }, + "highlighterEnabled": false, + "panelConfig": "---\n\n#------------------------------------------------------------------------------\n# YAML Aliases to simplify maintenance\n\nanchorLinks:\n - threshold: &threshold_inflow\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 125}\n - {color: \"red\", level: 175}\n - threshold: &threshold_depth\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 500}\n - {color: \"red\", level: 1000}\n - threshold: &threshold_latency\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 50}\n - {color: \"red\", level: 150}\n - threshold: &threshold_active\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 400}\n - {color: \"red\", level: 800}\n\n#------------------------------------------------------------------------------\n# Highlighting\n\ntagConfig:\n legend: [\"Queue Technology:\", \"rabbitMQ\", \"kafka\", \"|\", \"Flow Attribs:\", \"inflow\", \"depth\", \"latency\", \"active\", \"|\"]\n color: \"yellow\"\n highlightRgbFactor: 5.0\n lowlightAlphaFactor: 0.3\n condensed: true\n\n#------------------------------------------------------------------------------\n# Panel Config\n\ncellIdPreamble: \"cell-\"\ngradientMode: \"hue\"\n\ncells:\n #----------------------------------------------------------------------------\n user_throttle_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n user_throttle_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n user_throttle_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n user_throttle_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n ingest_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n ingest_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n ingest_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n ingest_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n backfill_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n backfill_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n backfill_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n backfill_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n transform_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n transform_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n transform_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n transform_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n load_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n load_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n load_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n load_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n priority_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n priority_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n priority_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n priority_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]", + "siteConfig": "", + "svg": "\n\n\n
Transform Queue
Transform Queue
User Throttle
User Throttle
Load Queue
Load Queue
no data
no data
Ingest Queue
Ingest Queue
no data
no data
no data
no data
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
no data
no data
Backfill Queue
Backfill Queue
no data
no data
latency
latency
active
active
depth
depth
Priority Queue
Priority Queue
no data
no data
latency
latency
active
active
depth
depthText is not SVG - cannot display", + "testDataEnabled": true, + "timeSliderEnabled": true + }, + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 7, + "w": 12, + "x": 0, + "y": 26 + }, + "id": 12, + "options": { + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 1, + "displaySvgCtr": 0, + "mappingsCtr": 1, + "timingsCtr": 0 + }, + "highlighterEnabled": false, + "panelConfig": "---\n\n#------------------------------------------------------------------------------\n# YAML Aliases to simplify maintenance\n\nanchorLinks:\n - threshold: &threshold_inflow\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 125}\n - {color: \"red\", level: 175}\n - threshold: &threshold_depth\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 500}\n - {color: \"red\", level: 1000}\n - threshold: &threshold_latency\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 50}\n - {color: \"red\", level: 150}\n - threshold: &threshold_active\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 400}\n - {color: \"red\", level: 800}\n\n#------------------------------------------------------------------------------\n# Highlighting\n\ntagConfig:\n legend: [\"Queue Technology:\", \"rabbitMQ\", \"kafka\", \"|\", \"Flow Attribs:\", \"inflow\", \"depth\", \"latency\", \"active\", \"|\"]\n color: \"yellow\"\n highlightRgbFactor: 5.0\n lowlightAlphaFactor: 0.3\n\n#------------------------------------------------------------------------------\n# Panel Config\n\ncellIdPreamble: \"cell-\"\ngradientMode: \"hue\"\n\ncells:\n #----------------------------------------------------------------------------\n user_throttle_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n user_throttle_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n user_throttle_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n user_throttle_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n ingest_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n ingest_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n ingest_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n ingest_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n backfill_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n backfill_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n backfill_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n backfill_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n transform_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n transform_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n transform_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n transform_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n load_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n load_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n load_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n load_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n priority_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n priority_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n priority_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n priority_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]", + "siteConfig": "", + "svg": "\n\n\n
Transform Queue
Transform Queue
User Throttle
User Throttle
Load Queue
Load Queue
no data
no data
Ingest Queue
Ingest Queue
no data
no data
no data
no data
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
no data
no data
Backfill Queue
Backfill Queue
no data
no data
latency
latency
active
active
depth
depth
Priority Queue
Priority Queue
no data
no data
latency
latency
active
active
depth
depthText is not SVG - cannot display", + "testDataEnabled": true, + "timeSliderEnabled": false + }, + "type": "andrewbmchugh-flow-panel" + }, + { + "datasource": { + "type": "datasource", + "uid": "grafana" + }, + "gridPos": { + "h": 7, + "w": 12, + "x": 12, + "y": 26 + }, + "id": 13, + "options": { + "debuggingCtr": { + "colorsCtr": 0, + "dataCtr": 1, + "displaySvgCtr": 0, + "mappingsCtr": 1, + "timingsCtr": 0 + }, + "highlighterEnabled": false, + "panelConfig": "---\n\n#------------------------------------------------------------------------------\n# YAML Aliases to simplify maintenance\n\nanchorLinks:\n - threshold: &threshold_inflow\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 125}\n - {color: \"red\", level: 175}\n - threshold: &threshold_depth\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 500}\n - {color: \"red\", level: 1000}\n - threshold: &threshold_latency\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 50}\n - {color: \"red\", level: 150}\n - threshold: &threshold_active\n - {color: \"semi-dark-green\", level: 0}\n - {color: \"orange\", level: 400}\n - {color: \"red\", level: 800}\n\n#------------------------------------------------------------------------------\n# Highlighting\n\ntagConfig:\n legend: [\"Queue Technology:\", \"rabbitMQ\", \"kafka\", \"|\", \"Flow Attribs:\", \"inflow\", \"depth\", \"latency\", \"active\", \"|\"]\n color: \"yellow\"\n highlightRgbFactor: 5.0\n lowlightAlphaFactor: 0.3\n condensed: true\n\n#------------------------------------------------------------------------------\n# Panel Config\n\ncellIdPreamble: \"cell-\"\ngradientMode: \"hue\"\n\ncells:\n #----------------------------------------------------------------------------\n user_throttle_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n user_throttle_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n user_throttle_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n user_throttle_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n ingest_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n ingest_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n ingest_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n ingest_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n backfill_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n backfill_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n backfill_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n backfill_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]\n\n #----------------------------------------------------------------------------\n transform_inflow:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n transform_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n transform_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n transform_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n load_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"rabbitMQ\"]\n load_depth:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"rabbitMQ\"]\n load_latency:\n dataRef: \"test-data-small-sin\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"rabbitMQ\"]\n load_active:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"rabbitMQ\"]\n\n #----------------------------------------------------------------------------\n priority_inflow:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"replace\"\n units: \"ops\"\n labelColor:\n thresholds: *threshold_inflow\n tags: [\"inflow\", \"kafka\"]\n priority_depth:\n dataRef: \"test-data-large-cos\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_depth\n tags: [\"depth\", \"kafka\"]\n priority_latency:\n dataRef: \"test-data-small-cos\"\n label:\n separator: \"colon\"\n units: \"s\"\n labelColor:\n thresholds: *threshold_latency\n tags: [\"latency\", \"kafka\"]\n priority_active:\n dataRef: \"test-data-large-sin\"\n label:\n separator: \"colon\"\n units: \"short\"\n labelColor:\n thresholds: *threshold_active\n tags: [\"active\", \"kafka\"]", + "siteConfig": "", + "svg": "\n\n\n
Transform Queue
Transform Queue
User Throttle
User Throttle
Load Queue
Load Queue
no data
no data
Ingest Queue
Ingest Queue
no data
no data
no data
no data
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
latency
latency
active
active
depth
depth
no data
no data
Backfill Queue
Backfill Queue
no data
no data
latency
latency
active
active
depth
depth
Priority Queue
Priority Queue
no data
no data
latency
latency
active
active
depth
depthText is not SVG - cannot display", + "testDataEnabled": true, + "timeSliderEnabled": false + }, + "type": "andrewbmchugh-flow-panel" } ], "refresh": "", @@ -93,4 +296,4 @@ "title": "Thread Highlighting", "version": 1, "weekStart": "" -} \ No newline at end of file +} diff --git a/src/components/Config.tsx b/src/components/Config.tsx index 9f80ce9..3faefc0 100644 --- a/src/components/Config.tsx +++ b/src/components/Config.tsx @@ -66,6 +66,7 @@ export type PanelConfigHighlighter = { tagLegend: string[]; color: string; factors: HighlightFactors; + condensed: boolean; }; export type SiteConfig = { @@ -111,6 +112,7 @@ export function panelConfigFactory(config: any) { highlightRgbFactor: config.tagConfig?.highlightRgbFactor ?? 5.0, lowlightAlphaFactor: config.tagConfig?.lowlightAlphaFactor ?? 0.3, }, + condensed: config.tagConfig?.condensed ?? false, }; return { diff --git a/src/components/FlowPanel.tsx b/src/components/FlowPanel.tsx index 3c7dc12..e7a3e27 100644 --- a/src/components/FlowPanel.tsx +++ b/src/components/FlowPanel.tsx @@ -281,10 +281,15 @@ export const FlowPanel: React.FC = ({ options, data, width, height, timeZ //--------------------------------------------------------------------------- // Define the canvas + const condensed = panelConfig?.highlighter?.condensed; + const firstSeparator = highlighterEnabled || timeSliderEnabled; + const secondSeparator = highlighterEnabled && timeSliderEnabled && !condensed; + const svgWidth = svgAttribs.width; const svgHeight = svgAttribs.height; - const highlighterHeight = highlighterEnabled ? 60 : 0; - const timeSliderHeight = timeSliderEnabled ? 60 : 0; + const controlHeight = highlighterEnabled && timeSliderEnabled && condensed ? 40 : 60; + const highlighterHeight = highlighterEnabled ? controlHeight : 0; + const timeSliderHeight = timeSliderEnabled ? controlHeight : 0; const svgViewWidth = width; const svgViewHeight = height - highlighterHeight - timeSliderHeight; const svgScaleX = svgViewWidth / svgWidth; @@ -323,7 +328,9 @@ export const FlowPanel: React.FC = ({ options, data, width, height, timeZ // modifications being made. dangerouslySetInnerHTML={{__html: svgElement.outerHTML}}/> + {firstSeparator ?
: undefined}
{highlighterEnabled && highlighter}
+ {secondSeparator ?
: undefined}
{timeSliderEnabled && timeSlider}
))(); diff --git a/src/components/Highlighter.tsx b/src/components/Highlighter.tsx index adecd07..a6c52c4 100644 --- a/src/components/Highlighter.tsx +++ b/src/components/Highlighter.tsx @@ -43,7 +43,6 @@ export const HighlighterFactory = (props: HighlighterProps) => { return (
-
{VizLegend({ placement: 'bottom', displayMode: LegendDisplayMode.List, diff --git a/src/components/TimeSlider.tsx b/src/components/TimeSlider.tsx index 92b9be6..f34f9dd 100644 --- a/src/components/TimeSlider.tsx +++ b/src/components/TimeSlider.tsx @@ -47,7 +47,6 @@ export const TimeSliderFactory = (props: TimeSliderProps) => { return (
-