Fix npm workspaces build for Mantine UI

Thanks to input by @nexucis :)

Signed-off-by: Julius Volz <julius.volz@gmail.com>

web/ui/mantine-ui/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@prometheus-io/mantine-ui",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.49.1",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "start": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "echo TODO: Create tests for the new Mantine UI"
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.12.0",
@@ -31,7 +32,6 @@
     "react-router-dom": "^6.22.1"
   },
   "devDependencies": {
-    "@types/eslint": "~8.56.2",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -43,7 +43,6 @@
     "postcss": "^8.4.35",
     "postcss-preset-mantine": "^1.13.0",
     "postcss-simple-vars": "^7.0.1",
-    "typescript": "^5.2.2",
     "vite": "^5.1.0"
   }
 }

web/ui/module/codemirror-promql/src/client/prometheus.ts

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { FetchFn } from '.';
+import { FetchFn } from './index';
 import { Matcher } from '../types';
 import { labelMatchersToString } from '../parser';
 import LRUCache from 'lru-cache';

web/ui/module/lezer-promql/package.json

@@ -32,7 +32,8 @@
   "devDependencies": {
     "@lezer/generator": "^1.5.1",
     "@lezer/highlight": "^1.2.0",
-    "@lezer/lr": "^1.3.14"
+    "@lezer/lr": "^1.3.14",
+    "@rollup/plugin-node-resolve": "^15.2.3"
   },
   "peerDependencies": {
     "@lezer/highlight": "^1.1.2",

web/ui/package.json

@@ -1,10 +1,12 @@
 {
   "name": "prometheus-io",
+  "description": "Monorepo for the Prometheus UI",
+  "version": "0.49.1",
   "private": true,
   "scripts": {
-    "build": "GENERATE_SOURCEMAP=false bash build_ui.sh --all",
+    "build": "bash build_ui.sh --all",
     "build:module": "bash build_ui.sh --build-module",
-    "start": "npm run start -w mantine-ui",
+    "start": "npm run start -w app",
     "test": "npm run test --workspaces",
     "lint": "npm run lint --workspaces"
   },
@@ -12,22 +14,12 @@
     "mantine-ui",
     "module/*"
   ],
-  "engines": {
-    "npm": ">=7.0.0"
-  },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/jest": "^29.5.12",
-    "@types/jest": "^29.5.11",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@types/node": "^20.10.4",
+    "@typescript-eslint/parser": "^6.21.0",
-    "eslint-config-prettier": "^8.10.0",
+    "ts-jest": "^29.1.2",
-    "eslint-config-react-app": "^7.0.1",
+    "typescript": "^5.2.2",
-    "eslint-plugin-prettier": "^4.2.1",
+    "vite": "^5.1.0"
-    "jest-canvas-mock": "^2.5.2",
+  }
-    "jest-fetch-mock": "^3.0.3",
-    "prettier": "^2.8.8",
-    "rollup": "^4.12.0",
-    "ts-jest": "^29.1.1",
-    "typescript": "^5.3.3"
-  },
-  "version": "0.49.1"
 }

web/ui/react-app/postcss.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+};

web/ui/react-app/src/images/prometheus_logo_grey.svg.orig

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="115.333px" height="114px" viewBox="0 0 115.333 114" enable-background="new 0 0 115.333 114" xml:space="preserve">
+<g id="Layer_2">
+</g>
+<g>
+	<path fill="#EEEEEE" d="M56.667,0.667C25.372,0.667,0,26.036,0,57.332c0,31.295,25.372,56.666,56.667,56.666
+		s56.666-25.371,56.666-56.666C113.333,26.036,87.961,0.667,56.667,0.667z M56.667,106.722c-8.904,0-16.123-5.948-16.123-13.283
+		H72.79C72.79,100.773,65.571,106.722,56.667,106.722z M83.297,89.04H30.034v-9.658h53.264V89.04z M83.106,74.411h-52.92
+		c-0.176-0.203-0.356-0.403-0.526-0.609c-5.452-6.62-6.736-10.076-7.983-13.598c-0.021-0.116,6.611,1.355,11.314,2.413
+		c0,0,2.42,0.56,5.958,1.205c-3.397-3.982-5.414-9.044-5.414-14.218c0-11.359,8.712-21.285,5.569-29.308
+		c3.059,0.249,6.331,6.456,6.552,16.161c3.252-4.494,4.613-12.701,4.613-17.733c0-5.21,3.433-11.262,6.867-11.469
+		c-3.061,5.045,0.793,9.37,4.219,20.099c1.285,4.03,1.121,10.812,2.113,15.113C63.797,33.534,65.333,20.5,71,16
+		c-2.5,5.667,0.37,12.758,2.333,16.167c3.167,5.5,5.087,9.667,5.087,17.548c0,5.284-1.951,10.259-5.242,14.148
+		c3.742-0.702,6.326-1.335,6.326-1.335l12.152-2.371C91.657,60.156,89.891,67.418,83.106,74.411z"/>
+</g>
+</svg>

web/ui/react-app/src/images/prometheus_logo_grey.svg.rej

@@ -0,0 +1,11 @@
+--- web/ui/react-app/src/images/prometheus_logo_grey.svg
++++ web/ui/react-app/src/images/prometheus_logo_grey.svg
+@@ -6,14 +6,8 @@
+ <g id="Layer_2">
+ </g>
+ <g>
+ <path fill="#EEEEEE" d="M56.667,0.667C25.372,0.667,0,26.036,0,57.332c0,31.295,25.372,56.666,56.667,56.666   s56.666-25.371,56.666-56.666C113.333,26.036,87.961,0.667,56.667,0.667z M56.667,106.722c-8.904,0-16.123-5.948-16.123-13.283   H72.79C72.79,100.773,65.571,106.722,56.667,106.722z M83.297,89.04H30.034v-9.658h53.264V89.04z M83.106,74.411h-52.92   c-0.176-0.203-0.356-0.403-0.526-0.609c-5.452-6.62-6.736-10.076-7.983-13.598c-0.021-0.116,6.611,1.355,11.314,2.413   c0,0,2.42,0.56,5.958,1.205c-3.397-3.982-5.414-9.044-5.414-14.218c0-11.359,8.712-21.285,5.569-29.308   c3.059,0.249,6.331,6.456,6.552,16.161c3.252-4.494,4.613-12.701,4.613-17.733c0-5.21,3.433-11.262,6.867-11.469   c-3.061,5.045,0.793,9.37,4.219,20.099c1.285,4.03,1.121,10.812,2.113,15.113C63.797,33.534,65.333,20.5,71,16   c-2.5,5.667,0.37,12.758,2.333,16.167c3.167,5.5,5.087,9.667,5.087,17.548c0,5.284-1.951,10.259-5.242,14.148   c3.742-0.702,6.326-1.335,6.326-1.335l12.152-2.371C91.657,60.156,89.891,67.418,83.106,74.411z">
+	<animate id="flameAnimation" dur="1s" begin="indefinite" repeatCount="indefinite" attributeName="d" values="M56.667,0.667C25.372,0.667,0,26.036,0,57.332c0,31.295,25.372,56.666,56.667,56.666   s56.666-25.371,56.666-56.666C113.333,26.036,87.961,0.667,56.667,0.667z M56.667,106.722c-8.904,0-16.123-5.948-16.123-13.283   H72.79C72.79,100.773,65.571,106.722,56.667,106.722z M83.297,89.04H30.034v-9.658h53.264V89.04z M83.106,74.411h-52.92   c-0.176-0.203-0.356-0.403-0.526-0.609c-5.452-6.62-6.736-10.076-7.983-13.598c-0.021-0.116,6.611,1.355,11.314,2.413   c0,0,2.42,0.56,5.958,1.205c-3.397-3.982-5.414-9.044-5.414-14.218c0-11.359,8.712-21.285,5.569-29.308   c3.059,0.249,6.331,6.456,6.552,16.161c3.252-4.494,4.613-12.701,4.613-17.733c0-5.21,3.433-11.262,6.867-11.469   c-3.061,5.045,0.793,9.37,4.219,20.099c1.285,4.03,1.121,10.812,2.113,15.113C63.797,33.534,65.333,20.5,71,16   c-2.5,5.667,0.37,12.758,2.333,16.167c3.167,5.5,5.087,9.667,5.087,17.548c0,5.284-1.951,10.259-5.242,14.148   c3.742-0.702,6.326-1.335,6.326-1.335l12.152-2.371C91.657,60.156,89.891,67.418,83.106,74.411z;m 56.666,0.667 c 31.295,0 56.667,25.369 56.667,56.665 0,31.295 -25.372,56.666 -56.667,56.666 C 25.371,113.998 0,88.627 0,57.332 0,26.036 25.372,0.667 56.666,0.667 Z m 0,106.055 c 8.904,0 16.123,-5.948 16.123,-13.283 H 40.543 c 0,7.334 7.219,13.283 16.123,13.283 z M 30.036,89.04 H 83.299 V 79.382 H 30.035 v 9.658 z m 0.191,-14.629 h 52.92 c 0.176,-0.203 0.356,-0.403 0.526,-0.609 5.452,-6.62 6.736,-10.076 7.983,-13.598 0.021,-0.116 -6.611,1.355 -11.314,2.413 0,0 -2.42,0.56 -5.958,1.205 3.397,-3.982 5.414,-9.044 5.414,-14.218 0,-11.359 -8.712,-21.285 -5.569,-29.308 -3.059,0.249 -6.331,6.456 -6.552,16.161 -3.252,-4.494 -4.613,-12.701 -4.613,-17.733 0,-5.21 -3.433,-11.262 -6.867,-11.469 3.061,5.045 -0.793,9.37 -4.219,20.099 -1.285,4.03 -1.121,10.812 -2.113,15.113 C 49.536,33.534 48,20.5 42.333,16 c 2.5,5.667 -0.37,12.758 -2.333,16.167 -3.167,5.5 -5.087,9.667 -5.087,17.548 0,5.284 1.951,10.259 5.242,14.148 -3.742,-0.702 -6.326,-1.335 -6.326,-1.335 L 21.677,60.157 c -0.001,-10e-4 1.765,7.261 8.55,14.254 z;M56.667,0.667C25.372,0.667,0,26.036,0,57.332c0,31.295,25.372,56.666,56.667,56.666   s56.666-25.371,56.666-56.666C113.333,26.036,87.961,0.667,56.667,0.667z M56.667,106.722c-8.904,0-16.123-5.948-16.123-13.283   H72.79C72.79,100.773,65.571,106.722,56.667,106.722z M83.297,89.04H30.034v-9.658h53.264V89.04z M83.106,74.411h-52.92   c-0.176-0.203-0.356-0.403-0.526-0.609c-5.452-6.62-6.736-10.076-7.983-13.598c-0.021-0.116,6.611,1.355,11.314,2.413   c0,0,2.42,0.56,5.958,1.205c-3.397-3.982-5.414-9.044-5.414-14.218c0-11.359,8.712-21.285,5.569-29.308   c3.059,0.249,6.331,6.456,6.552,16.161c3.252-4.494,4.613-12.701,4.613-17.733c0-5.21,3.433-11.262,6.867-11.469   c-3.061,5.045,0.793,9.37,4.219,20.099c1.285,4.03,1.121,10.812,2.113,15.113C63.797,33.534,65.333,20.5,71,16   c-2.5,5.667,0.37,12.758,2.333,16.167c3.167,5.5,5.087,9.667,5.087,17.548c0,5.284-1.951,10.259-5.242,14.148   c3.742-0.702,6.326-1.335,6.326-1.335l12.152-2.371C91.657,60.156,89.891,67.418,83.106,74.411z" />
+ </path>
+ </g>
+ </svg>

web/ui/react-app/src/pages/graph/GraphHistogramHelpers.ts

@@ -0,0 +1,62 @@
+/**
+ * Inspired by a similar feature in VictoriaMetrics.
+ * See https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3384 for more details.
+ * Developed by VictoriaMetrics team.
+ */
+
+import { GraphExemplar, GraphProps, GraphSeries } from './Graph';
+
+export function isHistogramData(data: GraphProps['data']) {
+  if (!data?.result?.length) return false;
+  const result = data.result;
+  if (result.length < 2) return false;
+  const histogramLabels = ['le'];
+
+  const firstLabels = Object.keys(result[0].metric).filter((n) => !histogramLabels.includes(n));
+  const isHistogram = result.every((r) => {
+    const labels = Object.keys(r.metric).filter((n) => !histogramLabels.includes(n));
+    return firstLabels.length === labels.length && labels.every((l) => r.metric[l] === result[0].metric[l]);
+  });
+
+  return isHistogram && result.every((r) => histogramLabels.some((l) => l in r.metric));
+}
+
+export function prepareHistogramData(buckets: GraphSeries[]) {
+  if (!buckets.every((a) => a.labels.le)) return buckets;
+
+  const sortedBuckets = buckets.sort((a, b) => promValueToNumber(a.labels.le) - promValueToNumber(b.labels.le));
+  const result: GraphSeries[] = [];
+
+  for (let i = 0; i < sortedBuckets.length; i++) {
+    const values = [];
+    const { data, labels, color } = sortedBuckets[i];
+
+    for (const [timestamp, value] of data) {
+      const prevVal = sortedBuckets[i - 1]?.data.find((v) => v[0] === timestamp)?.[1] || 0;
+      const newVal = Number(value) - +prevVal;
+      values.push([Number(timestamp), newVal]);
+    }
+
+    result.push({
+      data: values,
+      labels,
+      color,
+      index: i,
+    });
+  }
+  return result;
+}
+
+export function promValueToNumber(s: string) {
+  switch (s) {
+    case 'NaN':
+      return NaN;
+    case 'Inf':
+    case '+Inf':
+      return Infinity;
+    case '-Inf':
+      return -Infinity;
+    default:
+      return parseFloat(s);
+  }
+}