karafka-web 0.8.1 → 0.9.0.rc1

data/lib/karafka/web/ui/public/javascripts/charts/dataset_state_manager.js

@@ -0,0 +1,49 @@
+class DatasetStateManager {
+  constructor() {
+    this.storageKey = 'karafkaDisabledDatasets';
+  }
+
+  // Reads all disabled datasets from localStorage
+  readAll() {
+    const raw = localStorage.getItem(this.storageKey);
+    return raw ? JSON.parse(raw) : {};
+  }
+
+  // Saves all disabled datasets to localStorage
+  saveAll(data) {
+    localStorage.setItem(this.storageKey, JSON.stringify(data));
+  }
+
+  // Saves the current disabled datasets for all '.chartjs-line' charts
+  saveCurrent() {
+    const charts = document.querySelectorAll('.chartjs');
+    const url = window.location.href.split('?')[0];
+    let currentDisabled = {};
+    let allDisabled = this.readAll();
+
+    charts.forEach(chart => {
+      const chartId = chart.id;
+      const chartInstance = Chart.getChart(chartId);
+      if (!chartInstance || !chartInstance.legend || !chartInstance.legend.legendItems) return;
+
+      let disabledIndices = chartInstance.legend.legendItems
+        .map((item, index) => item.hidden ? index : null)
+        .filter(index => index !== null);
+
+      if (disabledIndices.length > 0) {
+        currentDisabled[chartId] = disabledIndices;
+      }
+    });
+
+    allDisabled[url] = currentDisabled;
+    this.saveAll(allDisabled);
+  }
+
+  // Retrieves the disabled datasets for a specific chart ID
+  getCurrentChart(chartId) {
+    const url = window.location.href.split('?')[0];
+    let allDisabled = this.readAll();
+    let currentDisabled = allDisabled[url] || {};
+    return currentDisabled[chartId] || [];
+  }
+}

data/lib/karafka/web/ui/public/javascripts/charts/types/bar.js

@@ -0,0 +1,123 @@
+class BarChartManager {
+  constructor() {
+    this.datasetStateManager = new DatasetStateManager();
+  }
+
+  refreshAndRenderBarCharts(doc, isRefresh = false) {
+    const charts = (isRefresh ? doc : document).querySelectorAll('.chartjs-bar');
+
+    charts.forEach((chartElement) => {
+      const chartId = chartElement.id;
+      const chartn = (isRefresh ? doc : document).getElementById(chartId);
+      const chartData = JSON.parse(chartn.dataset.datasets);
+      let labels = [],
+        data = [],
+        allDataPoints = [];
+      const labelTypeY = chartn.dataset.label_type_y;
+      const labelTypeX = chartn.dataset.label_type_x;
+      const disabledSets = this.datasetStateManager.getCurrentChart(chartId);
+      Object.entries(chartData).forEach(([key, value], index) => {
+        value.forEach(([label, dataPoint]) => {
+          allDataPoints.push(dataPoint);
+          if (index === 0) {
+            labels.push(DataFormattingUtils.formatLabelX(label, labelTypeX));
+          }
+        });
+        data.push({
+          data: value.map(([, dataPoint]) => dataPoint),
+          label: key,
+          hidden: disabledSets.includes(index),
+          borderWidth: 2.5
+        });
+      });
+      const minYValue = Math.min(...allDataPoints);
+      const maxYValue = Math.max(...allDataPoints);
+      const adjustedMinYValue = Math.round(minYValue - (0.1 * minYValue));
+      const adjustedMaxYValue = Math.round(maxYValue + (0.005 * maxYValue));
+      const average = Math.round(allDataPoints.reduce((sum, current) => sum + current, 0) / allDataPoints.length);
+
+      data.push({
+        type: 'line',
+        label: 'Average',
+        data: new Array(labels.length).fill(average),
+        borderWidth: 2,
+        fill: false,
+        pointRadius: 0,
+        hoverBorderWidth: 3, // Makes the line slightly thicker on hover, making it easier to hover over
+        pointHitRadius: 20 // Increases the radius around the invisible points that will detect a hover
+      });
+
+      if (isRefresh) {
+        const chart = Chart.getChart(chartId);
+        chart.data.datasets = data;
+        chart.data.labels = labels;
+        chart.options.scales.y.min = adjustedMinYValue;
+        chart.options.scales.y.max = adjustedMaxYValue;
+        chart.update('none');
+      } else {
+        this.renderBarChart(chartElement, labels, data, adjustedMinYValue, adjustedMaxYValue, labelTypeY);
+      }
+    });
+  }
+
+  renderBarChart(handler, labels, data, minYValue, maxYValue, labelTypeY) {
+    new Chart(handler, {
+      type: 'bar',
+      data: {
+        labels: labels,
+        datasets: data
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        aspectRatio: 5,
+        scales: {
+          x: {
+            display: true,
+          },
+          y: {
+            beginAtZero: false,
+            min: minYValue,
+            max: maxYValue,
+            ticks: {
+              maxTicksLimit: 8,
+              callback: function(label, index, labels) {
+                return DataFormattingUtils.formatLabelY(labelTypeY, label, index, labels);
+              }
+            }
+          }
+        },
+        animation: false,
+        animations: {
+          colors: false,
+          x: false
+        },
+        transitions: {
+          active: {
+            animation: {
+              duration: false
+            }
+          }
+        },
+        plugins: {
+          legend: {
+            position: 'hidden'
+          },
+          tooltip: {
+            callbacks: {
+              label: function(context) {
+                let label = context.dataset.label || '';
+                if (label === 'Average') {
+                  label += ': ' + context.formattedValue;
+                } else {
+                  return DataFormattingUtils.formatTooltip(labelTypeY, context);
+                }
+                return label;
+              }
+            }
+          }
+        },
+      }
+    });
+  }
+}

data/lib/karafka/web/ui/public/javascripts/charts/types/line.js

@@ -0,0 +1,143 @@
+class LineChartsManager {
+  constructor() {
+    this.datasetStateManager = new DatasetStateManager();
+  }
+
+  refreshAndRender(doc, isRefresh = false) {
+    const charts = (isRefresh ? doc : document).querySelectorAll('.chartjs-line');
+
+    charts.forEach((chartElement) => {
+      const chartId = chartElement.id;
+      const chartn = (isRefresh ? doc : document).getElementById(chartId);
+      const chartData = JSON.parse(chartn.dataset.datasets);
+      let labels = [],
+        data = [],
+        yPrecision = 0;
+      const labelTypeY = chartn.dataset.label_type_y;
+      const labelTypeX = chartn.dataset.label_type_x;
+      const disabledSets = this.datasetStateManager.getCurrentChart(chartId);
+
+      Object.entries(chartData).forEach(([key, value], index) => {
+        value.forEach(([label, dataPoint]) => {
+          if (index === 0) {
+            labels.push(DataFormattingUtils.formatLabelX(label, labelTypeX));
+          }
+          if (DataFormattingUtils.isFractionalPrecision(dataPoint)) {
+            yPrecision = 2;
+          }
+        });
+
+        data.push({
+          data: value,
+          label: key,
+          hidden: disabledSets.includes(index),
+          borderWidth: 2.5
+        });
+      });
+
+      if (isRefresh) {
+        const chart = Chart.getChart(chartId);
+        chart.data.datasets = data;
+        chart.data.labels = labels;
+        chart.update('none');
+      } else {
+        this.render(chartElement, labels, data, yPrecision, labelTypeY);
+      }
+    });
+  }
+
+  render(handler, labels, data, yPrecision, labelTypeY) {
+    new Chart(handler, {
+      type: 'line',
+      data: {
+        labels: labels,
+        datasets: data
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        aspectRatio: 5,
+        title: {
+          display: false
+        },
+        interaction: {
+          mode: 'nearest',
+          axis: 'x',
+          intersect: false
+        },
+        hover: {
+          intersect: false
+        },
+        animation: false,
+        animations: {
+          colors: false,
+          x: false
+        },
+        transitions: {
+          active: {
+            animation: {
+              duration: false
+            }
+          }
+        },
+        plugins: {
+          legend: {
+            position: 'bottom',
+            labels: {
+              padding: 20
+            },
+            onClick: (e, legendItem, legend) => {
+              const index = legendItem.datasetIndex;
+              const ci = legend.chart;
+              if (ci.isDatasetVisible(index)) {
+                ci.hide(index);
+                legendItem.hidden = true;
+              } else {
+                ci.show(index);
+                legendItem.hidden = false;
+              }
+
+              this.datasetStateManager.saveCurrent();
+            }
+          },
+          tooltip: {
+            callbacks: {
+              label: function(tooltipItem) {
+                return DataFormattingUtils.formatTooltip(labelTypeY, tooltipItem);
+              }
+            }
+          }
+        },
+        scales: {
+          x: {
+            display: false,
+          },
+          y: {
+            ticks: {
+              precision: yPrecision,
+              count: 5,
+              callback: function(label, index, labels) {
+                return DataFormattingUtils.formatLabelY(labelTypeY, label, index, labels);
+              }
+            }
+          }
+        },
+        elements: {
+          point: {
+            radius: 0,
+            style: false
+          },
+          line: {
+            style: 'star',
+            radius: 0,
+            spanGaps: false
+          }
+        },
+        hover: {
+          mode: 'index',
+          intersect: false,
+        }
+      }
+    });
+  }
+}

data/lib/karafka/web/ui/public/javascripts/charts.js

@@ -1,330 +1,15 @@
-function readAllDisabledDatasets() {
-  let raw_disabled_datasets = localStorage.karafkaDisabledDatasets
+function refreshCharts(newDoc) {
+  const lineChartsManager = new LineChartsManager();
+  lineChartsManager.refreshAndRender(newDoc, true);
 
-  if (raw_disabled_datasets == undefined) {
-    return {}
-  } else {
-    return JSON.parse(raw_disabled_datasets)
-  }
-}
-
-function saveAllDisabledDatasets(data) {
-  localStorage.karafkaDisabledDatasets = JSON.stringify(data)
-}
-
-function saveCurrentDisabledDatasets() {
-  let charts = document.querySelectorAll('.chartjs')
-  let url = window.location.href.split('?')[0]
-  let current = {}
-  let tabs = readAllDisabledDatasets()
-
-  for (var i = 0; i < charts.length; i++) {
-    let chart_id = charts[i].id
-    let chart = Chart.getChart(chart_id)
-    let items = chart.legend.legendItems
-    current[chart_id] = []
-
-    for (var y = 0; y < items.length; y++) {
-      if (items[y].hidden) {
-        current[chart_id].push(y)
-      }
-    }
-  }
-
-  tabs[url] = current
-  saveAllDisabledDatasets(tabs)
-}
-
-function getCurrentChartDisabledDatasets(chart_id) {
-  let all_disabled = readAllDisabledDatasets()
-  let url = window.location.href.split('?')[0]
-  let current = all_disabled[url]
-
-  if (current == undefined) { return [] }
-
-  var disabled_indexes = current[chart_id]
-
-  if (disabled_indexes != undefined) {
-    return disabled_indexes
-  } else {
-     return []
-  }
-}
-
-function niceBytes(x, precision){
-  let units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-  let l = 0, n = parseInt(x, 10) || 0;
-
-  while(n >= 1024 && ++l){
-      n = n/1024;
-  }
-
-  return(n.toFixed(n < 10 && l > 0 ? 1 : precision) + ' ' + units[l]);
-}
-
-function formatLabelX(value, type) {
-  switch (type) {
-    case 'date':
-      let date = new Date(value * 1000)
-      let date_str =
-        ("00" + (date.getMonth() + 1)).slice(-2) + "/" +
-        ("00" + date.getDate()).slice(-2) + "/" +
-        date.getFullYear() + " " +
-        ("00" + date.getHours()).slice(-2) + ":" +
-        ("00" + date.getMinutes()).slice(-2) + ":" +
-        ("00" + date.getSeconds()).slice(-2);
-
-      return date_str
-    default:
-      return value
-  }
-}
-
-function formatTooltip(type, tooltipItem){
-  let value = tooltipItem.parsed.y;
-  let label = tooltipItem.dataset.label;
-
-  switch(type) {
-  case 'percentage':
-
-    console.log(tooltipItem)
-
-    if (Math.floor(value) === value) {
-      return label + ': ' + value + ' %';
-    } else {
-      return label + ': ' + (Math.round(value * 100) / 100) + ' %';
-    }
-  case 'memory':
-    return label + ': ' + niceBytes(value * 1024, 2);
-  default:
-    return tooltipItem.yLabel
-  }
-}
-
-function formatLabelY(type, label, index, labels) {
-  switch(type) {
-  case 'percentage':
-    if (Math.floor(label) === label) {
-      return label + '%'
-    } else {
-      return (Math.round(label * 100) / 100) + '%'
-    }
-  case 'memory':
-    return niceBytes(label * 1024, 1)
-  default:
-    if (Math.floor(label) === label) {
-      return label
-    } else {
-      return Math.round(label * 100) / 100
-    }
-  }
-}
-
-function isFractialPrecision(value) {
-  return value === +value && value !== (value|0)
-}
-
-function refreshCharts(new_doc) {
-  var charts = new_doc.querySelectorAll('.chartjs')
-
-  for (var i = 0; i < charts.length; i++) {
-    var chart = Chart.getChart(charts[i].id)
-    var chart_id = charts[i].id
-    var chartn = new_doc.getElementById(chart_id)
-    var chart_data = chartn.dataset.datasets
-
-    let datasets = JSON.parse(chart_data)
-    let data = []
-    let labels = []
-    let label_type_y = chartn.dataset.label_type_y
-    let label_type_x = chartn.dataset.label_type_x
-    // by default assume integer values
-    let y_precision = 0
-    let disabled_sets = getCurrentChartDisabledDatasets(chart_id)
-
-    Object.keys(datasets).forEach(function(key, i) {
-      var current_set = datasets[key]
-
-      let y = 0;
-
-      while (y < current_set.length) {
-        let current_value = current_set[y][1]
-        let current_label = current_set[y][0]
-
-        if (i == 0) {
-          labels.push(formatLabelX(current_label, label_type_x))
-        }
-
-        if (isFractialPrecision(current_value)) {
-          y_precision = 2
-        }
-
-        y++
-      }
-
-      data.push(
-        {
-          data: datasets[key],
-          label: key,
-          hidden: disabled_sets.includes(i),
-          borderWidth: 2.5
-        }
-      )
-    })
-
-    chart.data.datasets = data
-    chart.data.labels = labels
-
-    chart.update()
-  }
-}
-
-function renderChart(handler, labels, data, y_precision, label_type_y) {
-  new Chart(handler, {
-    type : 'line',
-    data : {
-      labels : labels,
-      datasets : data
-    },
-    options : {
-      responsive: true,
-      aspectRatio: 5,
-      title : {
-        display : false
-      },
-      interaction: {
-        mode: 'nearest',
-        axis: 'x',
-        intersect: false
-      },
-      hover: {
-        intersect: false
-      },
-      animation: false,
-      animations: {
-        colors: false,
-        x: false
-      },
-      transitions: {
-        active: {
-          animation: {
-            duration: false
-          }
-        }
-      },
-      plugins: {
-        legend: {
-          position: 'bottom',
-          labels: {
-            padding: 20
-          },
-          onClick: function(e, legendItem, legend) {
-              const index = legendItem.datasetIndex;
-              const ci = legend.chart;
-              if (ci.isDatasetVisible(index)) {
-                  ci.hide(index);
-                  legendItem.hidden = true;
-              } else {
-                  ci.show(index);
-                  legendItem.hidden = false;
-              }
-
-              saveCurrentDisabledDatasets()
-          }
-        },
-        tooltip: {
-            callbacks: {
-                label: function (tooltipItem) {
-                  return formatTooltip(label_type_y, tooltipItem)
-                }
-            }
-        }
-      },
-      scales:{
-          x: {
-              display: false,
-          },
-          y: {
-            ticks: {
-              precision: y_precision,
-              // forces step size to be 50 units
-              count: 5,
-              callback: function(label, index, labels) {
-                return formatLabelY(label_type_y, label, index, labels)
-              }
-            }
-          }
-      },
-      elements: {
-        point: {
-          radius: 0,
-          style: false
-        },
-        line: {
-          style: 'star',
-          radius: 0,
-          spanGaps: false
-        }
-      },
-      hover: {
-        mode: 'index',
-        intersect: false,
-      }
-    }
-  })
-}
-
-function renderCharts() {
-  var charts = document.getElementsByClassName('chartjs');
-
-  for (let i = 0; i < charts.length; i++) {
-    let chart = charts.item(i)
-    let chart_id = chart.id
-    let raw_data = chart.dataset.datasets
-    let datasets = JSON.parse(raw_data)
-    let data = []
-    let labels = []
-    let label_type_y = chart.dataset.label_type_y
-    let label_type_x = chart.dataset.label_type_x
-    // by default assume integer values
-    let y_precision = 0
-    let disabled_sets = getCurrentChartDisabledDatasets(chart_id)
-
-    Object.keys(datasets).forEach(function(key, i) {
-      var current_set = datasets[key]
-
-      let y = 0;
-
-      while (y < current_set.length) {
-        let current_value = current_set[y][1]
-        let current_label = current_set[y][0]
-
-        if (i == 0) {
-          labels.push(formatLabelX(current_label, label_type_x))
-        }
-
-        if (isFractialPrecision(current_value)) {
-          y_precision = 2
-        }
-
-        y++
-      }
-
-      data.push(
-        {
-          data: datasets[key],
-          label: key,
-          hidden: disabled_sets.includes(i),
-          borderWidth: 2.5
-        }
-      )
-    })
-
-    renderChart(chart, labels, data, y_precision, label_type_y)
-  }
+  const barChartManager = new BarChartManager();
+  barChartManager.refreshAndRenderBarCharts(newDoc, true);
 }
 
 function manageCharts() {
-  renderCharts()
+  const lineChartsManager = new LineChartsManager();
+  lineChartsManager.refreshAndRender(document, false);
+
+  const barChartManager = new BarChartManager();
+  barChartManager.refreshAndRenderBarCharts(document, false);
 }

data/lib/karafka/web/ui/public/javascripts/live_poll.js

@@ -89,17 +89,17 @@ function refreshPage(text) {
   var old_charts_count = document.querySelectorAll('.chartjs').length
   var new_charts_count = new_content.querySelectorAll('.chartjs').length
 
-  // if there are any charts, we will not replace the whole page but only counters
+  // if there are any charts, we will not replace the whole page but only refreshable part
   // and we will use graphs data and update this as well
   // this will prevent us from leaking the charts references and overloading the memory
   // ChartsJS does not free all the resources when dom is replaced which causes problems after
   // the charts run for a long period of time without page reload
   if (new_charts_count == 0 || old_charts_count == 0) {
-    document.getElementById("content").replaceWith(new_content)
+    document.getElementById('content').replaceWith(new_content)
     addListeners()
   } else {
-    let new_counters = new_doc.getElementById('counters');
-    document.getElementById('counters').replaceWith(new_counters)
+    let new_refreshable = new_doc.getElementById('refreshable');
+    document.getElementById('refreshable').replaceWith(new_refreshable)
     refreshCharts(new_doc)
   }
 
@@ -112,7 +112,7 @@ function showError(error) {
 
 function scheduleLivePoll() {
   if (oldDOM == null) {
-    oldDOM = document.getElementById("content").innerHTML;
+    oldDOM = document.getElementById('content').innerHTML;
   }
 
   let ti = parseInt(localStorage.karafkaTimeInterval) || 5000;