Merge pull request #74987 from delroth/prom-webui

prometheus: bundle the webui assets and build the new React UI

pkgs/servers/monitoring/prometheus/default.nix

@@ -1,11 +1,8 @@
-{ lib, go, buildGoPackage, fetchFromGitHub }:
+{ lib, go, buildGoPackage, fetchFromGitHub, mkYarnPackage }:
 
-buildGoPackage rec {
-  pname = "prometheus";
+let
   version = "2.14.0";
 
-  goPackagePath = "github.com/prometheus/prometheus";
-
   src = fetchFromGitHub {
     rev = "v${version}";
     owner = "prometheus";
@@ -13,16 +10,47 @@ buildGoPackage rec {
     sha256 = "0zmxj78h3cnqbhsqab940hyzpim5i9r81b15a57f3dnrrd10p287";
   };
 
+  webui = mkYarnPackage {
+    src = "${src}/web/ui/react-app";
+    packageJSON = ./webui-package.json;
+    yarnNix = ./webui-yarndeps.nix;
+
+    # The standard yarn2nix directory management causes build failures with
+    # Prometheus's webui due to using relative imports into node_modules. Use
+    # an extremely simplified version of it instead.
+    configurePhase = "ln -s $node_modules node_modules";
+    buildPhase = "PUBLIC_URL=. yarn build";
+    installPhase = "mv build $out";
+    distPhase = "true";
+  };
+in buildGoPackage rec {
+  pname = "prometheus";
+  inherit src version;
+
+  goPackagePath = "github.com/prometheus/prometheus";
+
+  postPatch = ''
+    ln -s ${webui.node_modules} web/ui/react-app/node_modules
+    ln -s ${webui} web/ui/static/react
+  '';
+
   buildFlagsArray = let
     t = "${goPackagePath}/vendor/github.com/prometheus/common/version";
-  in ''
-    -ldflags=
-       -X ${t}.Version=${version}
-       -X ${t}.Revision=unknown
-       -X ${t}.Branch=unknown
-       -X ${t}.BuildUser=nix@nixpkgs
-       -X ${t}.BuildDate=unknown
-       -X ${t}.GoVersion=${lib.getVersion go}
+  in [
+    "-tags=builtinassets"
+    ''
+      -ldflags=
+         -X ${t}.Version=${version}
+         -X ${t}.Revision=unknown
+         -X ${t}.Branch=unknown
+         -X ${t}.BuildUser=nix@nixpkgs
+         -X ${t}.BuildDate=unknown
+         -X ${t}.GoVersion=${lib.getVersion go}
+    ''
+  ];
+
+  preBuild = ''
+    make -C go/src/${goPackagePath} assets
   '';
 
   preInstall = ''

pkgs/servers/monitoring/prometheus/update-webui-deps.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env nix-shell
+#!nix-shell -I nixpkgs=../../../.. -i bash -p wget yarn2nix-moretea.yarn2nix
+
+# This script is based upon:
+# pkgs/applications/networking/instant-messengers/riot/update-riot-desktop.sh
+
+set -euo pipefail
+
+if [ "$#" -ne 1 ] || [[ "$1" == -* ]]; then
+        echo "Regenerates the Yarn dependency lock files for the prometheus package."
+        echo "Usage: $0 <git release tag>"
+        exit 1
+fi
+
+PROM_WEB_SRC="https://raw.githubusercontent.com/prometheus/prometheus/$1"
+
+wget "$PROM_WEB_SRC/web/ui/react-app/package.json" -O webui-package.json
+wget "$PROM_WEB_SRC/web/ui/react-app/yarn.lock" -O yarn.lock
+yarn2nix --lockfile=yarn.lock > webui-yarndeps.nix
+rm yarn.lock

pkgs/servers/monitoring/prometheus/webui-package.json

@@ -0,0 +1,96 @@
+{
+  "name": "graph",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.14",
+    "@fortawesome/free-solid-svg-icons": "^5.7.1",
+    "@fortawesome/react-fontawesome": "^0.1.4",
+    "@reach/router": "^1.2.1",
+    "@testing-library/react-hooks": "^3.1.1",
+    "@types/jest": "^24.0.20",
+    "@types/jquery": "^3.3.29",
+    "@types/node": "^12.11.1",
+    "@types/reach__router": "^1.2.6",
+    "@types/react": "^16.8.2",
+    "@types/react-copy-to-clipboard": "^4.3.0",
+    "@types/react-dom": "^16.8.0",
+    "@types/react-resize-detector": "^4.0.2",
+    "@types/sanitize-html": "^1.20.2",
+    "bootstrap": "^4.2.1",
+    "downshift": "^3.2.2",
+    "enzyme-to-json": "^3.4.3",
+    "flot": "^3.2.13",
+    "fuzzy": "^0.1.3",
+    "i": "^0.3.6",
+    "jest-fetch-mock": "^2.1.2",
+    "jquery": "^3.3.1",
+    "jquery.flot.tooltip": "^0.9.0",
+    "jsdom": "^15.2.0",
+    "moment": "^2.24.0",
+    "moment-timezone": "^0.5.23",
+    "popper.js": "^1.14.3",
+    "react": "^16.7.0",
+    "react-copy-to-clipboard": "^5.0.1",
+    "react-dom": "^16.7.0",
+    "react-resize-detector": "^4.2.1",
+    "react-scripts": "^3.2.0",
+    "react-test-renderer": "^16.9.0",
+    "reactstrap": "^8.0.1",
+    "sanitize-html": "^1.20.1",
+    "tempusdominus-bootstrap-4": "^5.1.2",
+    "tempusdominus-core": "^5.0.3",
+    "typescript": "^3.3.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
+    "eject": "react-scripts eject",
+    "lint:ci": "eslint --quiet \"src/**/*.{ts,tsx}\"",
+    "lint": "eslint --fix \"src/**/*.{ts,tsx}\""
+  },
+  "prettier": {
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "printWidth": 125
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "devDependencies": {
+    "@types/enzyme": "^3.10.3",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/flot": "0.0.31",
+    "@types/moment-timezone": "^0.5.10",
+    "@types/reactstrap": "^8.0.5",
+    "@types/sinon": "^7.5.0",
+    "@typescript-eslint/eslint-plugin": "2.x",
+    "@typescript-eslint/parser": "2.x",
+    "babel-eslint": "10.x",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
+    "eslint": "6.x",
+    "eslint-config-prettier": "^6.4.0",
+    "eslint-config-react-app": "^5.0.2",
+    "eslint-plugin-flowtype": "3.x",
+    "eslint-plugin-import": "2.x",
+    "eslint-plugin-jsx-a11y": "6.x",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "7.x",
+    "eslint-plugin-react-hooks": "1.x",
+    "jest-fetch-mock": "^2.1.2",
+    "prettier": "^1.18.2",
+    "sinon": "^7.5.0"
+  },
+  "proxy": "http://localhost:9090",
+  "jest": {
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
+  }
+}