1 files changed, 65 insertions, 15 deletions
diff --git a/app/assets/javascripts/helpers/monitor_helper.js b/app/assets/javascripts/helpers/monitor_helper.js
index 87b4b14f6bf..94a0d38f05f 100644
--- a/app/assets/javascripts/helpers/monitor_helper.js
+++ b/app/assets/javascripts/helpers/monitor_helper.js
@@ -1,4 +1,64 @@
 /**
+ * @param {String} queryLabel - Default query label for chart
+ * @param {Object} metricAttributes - Default metric attribute values (e.g. method, instance)
+ * @returns {String} The formatted query label
+ * @example
+ * singleAttributeLabel('app', {__name__: "up", app: "prometheus"}) -> "app: prometheus"
+ */
+const singleAttributeLabel = (queryLabel, metricAttributes) => {
+  if (!queryLabel) return '';
+  const relevantAttribute = queryLabel.toLowerCase().replace(' ', '_');
+  const value = metricAttributes[relevantAttribute];
+  if (!value) return '';
+  return `${queryLabel}: ${value}`;
+};
+
+/**
+ * @param {String} queryLabel - Default query label for chart
+ * @param {Object} metricAttributes - Default metric attribute values (e.g. method, instance)
+ * @returns {String} The formatted query label
+ * @example
+ * templatedLabel('__name__', {__name__: "up", app: "prometheus"}) -> "__name__"
+ */
+const templatedLabel = (queryLabel, metricAttributes) => {
+  if (!queryLabel) return '';
+  // eslint-disable-next-line array-callback-return
+  Object.entries(metricAttributes).map(([templateVar, label]) => {
+    const regex = new RegExp(`{{\\s*${templateVar}\\s*}}`, 'g');
+    // eslint-disable-next-line no-param-reassign
+    queryLabel = queryLabel.replace(regex, label);
+  });
+
+  return queryLabel;
+};
+
+/**
+ * @param {Object} metricAttributes - Default metric attribute values (e.g. method, instance)
+ * @returns {String} The formatted query label
+ * @example
+ * multiMetricLabel('', {__name__: "up", app: "prometheus"}) -> "__name__: up, app: prometheus"
+ */
+const multiMetricLabel = metricAttributes => {
+  return Object.entries(metricAttributes)
+    .map(([templateVar, label]) => `${templateVar}: ${label}`)
+    .join(', ');
+};
+
+/**
+ * @param {String} queryLabel - Default query label for chart
+ * @param {Object} metricAttributes - Default metric attribute values (e.g. method, instance)
+ * @returns {String} The formatted query label
+ */
+const getSeriesLabel = (queryLabel, metricAttributes) => {
+  return (
+    singleAttributeLabel(queryLabel, metricAttributes) ||
+    templatedLabel(queryLabel, metricAttributes) ||
+    multiMetricLabel(metricAttributes) ||
+    queryLabel
+  );
+};
+
+/**
  * @param {Array} queryResults - Array of Result objects
  * @param {Object} defaultConfig - Default chart config values (e.g. lineStyle, name)
  * @returns {Array} The formatted values
@@ -12,21 +72,11 @@ export const makeDataSeries = (queryResults, defaultConfig) =>
       if (!data.length) {
         return null;
       }
-      const relevantMetric = defaultConfig.name.toLowerCase().replace(' ', '_');
-      const name = result.metric[relevantMetric];
       const series = { data };
-      if (name) {
-        series.name = `${defaultConfig.name}: ${name}`;
-      } else {
-        series.name = defaultConfig.name;
-        Object.keys(result.metric).forEach(templateVar => {
-          const value = result.metric[templateVar];
-          const regex = new RegExp(`{{\\s*${templateVar}\\s*}}`, 'g');
-
-          series.name = series.name.replace(regex, value);
-        });
-      }
-
-      return { ...defaultConfig, ...series };
+      return {
+        ...defaultConfig,
+        ...series,
+        name: getSeriesLabel(defaultConfig.name, result.metric),
+      };
     })
     .filter(series => series !== null);