Merge pull request #241314 from jnsgruk/master

nixos/modules/virtualisation/lxd.nix

@@ -85,6 +85,14 @@ in {
           considered failed and systemd will attempt to restart it.
         '';
       };
+
+      ui = {
+        enable = lib.mkEnableOption (lib.mdDoc ''
+          Enables the (experimental) LXD UI.
+        '');
+
+        package = mkPackageOption pkgs.lxd "ui" { };
+      };
     };
   };
 
@@ -143,6 +151,10 @@ in {
       path = [ pkgs.util-linux ]
         ++ optional cfg.zfsSupport config.boot.zfs.package;
 
+      environment = mkIf (cfg.ui.enable) {
+        "LXD_UI" = cfg.ui.package;
+      };
+
       serviceConfig = {
         ExecStart = "@${cfg.package}/bin/lxd lxd --group lxd";
         ExecStartPost = "${cfg.package}/bin/lxd waitready --timeout=${cfg.startTimeout}";

nixos/tests/all-tests.nix

@@ -436,6 +436,7 @@ in {
   lxd = handleTest ./lxd.nix {};
   lxd-nftables = handleTest ./lxd-nftables.nix {};
   lxd-image-server = handleTest ./lxd-image-server.nix {};
+  lxd-ui = handleTest ./lxd-ui.nix {};
   #logstash = handleTest ./logstash.nix {};
   lorri = handleTest ./lorri/default.nix {};
   maddy = discoverTests (import ./maddy { inherit handleTest; });

nixos/tests/lxd-ui.nix

@@ -0,0 +1,35 @@
+import ./make-test-python.nix ({ pkgs, lib, ... }: {
+  name = "lxd-ui";
+
+  meta = with pkgs.lib.maintainers; {
+    maintainers = [ jnsgruk ];
+  };
+
+  nodes.machine = { lib, ... }: {
+    virtualisation = {
+      lxd.enable = true;
+      lxd.ui.enable = true;
+    };
+
+    environment.systemPackages = [ pkgs.curl ];
+  };
+
+  testScript = ''
+    machine.wait_for_unit("sockets.target")
+    machine.wait_for_unit("lxd.service")
+    machine.wait_for_file("/var/lib/lxd/unix.socket")
+
+    # Wait for lxd to settle
+    machine.succeed("lxd waitready")
+
+    # Configure LXC listen address
+    machine.succeed("lxc config set core.https_address :8443")
+    machine.succeed("systemctl restart lxd")
+
+    # Check that the LXD_UI environment variable is populated in the systemd unit
+    machine.succeed("cat /etc/systemd/system/lxd.service | grep 'LXD_UI'")
+
+    # Ensure the endpoint returns an HTML page with 'LXD UI' in the title
+    machine.succeed("curl -kLs https://localhost:8443/ui | grep '<title>LXD UI</title>'")
+  '';
+})

pkgs/tools/admin/lxd/default.nix

@@ -29,6 +29,7 @@
 , installShellFiles
 , nixosTests
 , gitUpdater
+, callPackage
 }:
 
 buildGoModule rec {
@@ -99,6 +100,8 @@ buildGoModule rec {
 
   passthru.tests.lxd = nixosTests.lxd;
   passthru.tests.lxd-nftables = nixosTests.lxd-nftables;
+  passthru.tests.lxd-ui = nixosTests.lxd-ui;
+  passthru.ui = callPackage ./ui.nix { };
   passthru.updateScript = gitUpdater {
     url = "https://github.com/lxc/lxd.git";
     rev-prefix = "lxd-";

pkgs/tools/admin/lxd/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "lxd-ui",
+  "version": "0.0.1",
+  "author": "Canonical Webteam",
+  "license": "LGPL-3.0-only",
+  "scripts": {
+    "clean": "rm -rf node_modules yarn-error.log *.log build/ .jekyll-metadata .bundle",
+    "build-html": "cp build/ui/index.html build/index.html",
+    "build": "npx vite build && yarn build-html",
+    "format-js-eslint": "eslint 'src/**/*.{json,jsx,tsx,ts}' 'tests/**/*.ts' --fix",
+    "format-js-prettier": "prettier 'src/**/*.{json,jsx,tsx,ts}' 'tests/**/*.ts' --write",
+    "format-js": "yarn format-js-eslint && yarn format-js-prettier",
+    "lint-scss": "stylelint 'src/**/*.scss'",
+    "lint-js-eslint": "eslint 'src/**/*.{json,tsx,ts}' 'tests/**/*.ts' .eslintrc.js babel.config.js",
+    "lint-js-prettier": "prettier 'src/**/*.{json,tsx,ts}' 'tests/**/*.ts' .eslintrc.js babel.config.js --check",
+    "lint-js": "yarn lint-js-eslint && yarn lint-js-prettier",
+    "hooks-add": "husky install",
+    "hooks-remove": "husky uninstall",
+    "start": "concurrently --kill-others --raw 'vite | grep -v localhost' 'yarn serve'",
+    "serve": "./entrypoint"
+  },
+  "dependencies": {
+    "@canonical/react-components": "0.42.0",
+    "@monaco-editor/react": "^4.4.6",
+    "@tanstack/react-query": "^4.14.5",
+    "@use-it/event-listener": "^0.1.7",
+    "cytoscape": "3.23.0",
+    "cytoscape-popper": "2.0.0",
+    "formik": "2.2.9",
+    "js-yaml": "4.1.0",
+    "lodash.isequal": "4.5.0",
+    "node-forge": "1.3.1",
+    "parse-prometheus-text-format": "1.1.1",
+    "react": "18.2.0",
+    "react-cytoscapejs": "2.0.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "6.6.1",
+    "react-scripts": "5.0.1",
+    "react-useportal": "^1.0.17",
+    "serve": "14.1.2",
+    "vanilla-framework": "3.15.1",
+    "xterm-addon-fit": "0.6.0",
+    "xterm-for-react": "1.0.4",
+    "yup": "0.32.11"
+  },
+  "devDependencies": {
+    "@babel/core": "7.20.7",
+    "@babel/eslint-parser": "7.19.1",
+    "@babel/preset-env": "7.20.2",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.18.6",
+    "@playwright/test": "^1.29.1",
+    "@types/cytoscape-popper": "2.0.0",
+    "@types/node-forge": "1.3.1",
+    "@types/react": "18.0.26",
+    "@types/react-cytoscapejs": "1.2.2",
+    "@types/react-dom": "18.0.10",
+    "@types/react-router-dom": "5.3.3",
+    "@types/websocket": "1.0.5",
+    "@typescript-eslint/eslint-plugin": "5.48.0",
+    "@typescript-eslint/parser": "5.48.0",
+    "@vitejs/plugin-react": "^3.1.0",
+    "autoprefixer": "10.4.13",
+    "babel-loader": "9.1.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
+    "concurrently": "7.6.0",
+    "css-loader": "6.7.3",
+    "eslint": "8.31.0",
+    "eslint-config-prettier": "8.6.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "7.31.11",
+    "husky": "8.0.0",
+    "lint-staged": "13.1.1",
+    "monaco-editor": "0.36.1",
+    "postcss": "8.4.20",
+    "postcss-cli": "10.1.0",
+    "prettier": "2.8.1",
+    "sass": "1.57.1",
+    "sass-loader": "13.2.0",
+    "style-loader": "3.3.1",
+    "stylelint": "14.16.1",
+    "stylelint-config-prettier": "9.0.4",
+    "stylelint-config-standard-scss": "6.1.0",
+    "stylelint-order": "5.0.0",
+    "stylelint-prettier": "2.0.0",
+    "stylelint-scss": "4.3.0",
+    "ts-loader": "9.4.2",
+    "typescript": "4.9.4",
+    "vite": "^4.1.0",
+    "vite-tsconfig-paths": "4.0.5"
+  },
+  "lint-staged": {
+    "src/**/*.{json,jsx,ts,tsx}": [
+      "eslint",
+      "prettier --check"
+    ],
+    "tests/**/*.{json,jsx,ts,tsx}": [
+      "eslint",
+      "prettier --check"
+    ],
+    "src/**/*.scss": "stylelint"
+  }
+}

pkgs/tools/admin/lxd/ui.nix

@@ -0,0 +1,42 @@
+{ mkYarnPackage
+, fetchFromGitHub
+, fetchYarnDeps
+, lib
+}:
+
+mkYarnPackage rec {
+  pname = "lxd-ui";
+  version = "unstable-2023-07-03";
+
+  src = fetchFromGitHub {
+    owner = "canonical";
+    repo = "lxd-ui";
+    rev = "c2e819a027d440cbb1cb9d450aad280dde68e231";
+    sha256 = "sha256-lEzGACSv6CpxnfkOcsdPrH6KRKDkoKv63m8Gsodk8uc=";
+  };
+
+  packageJSON = ./package.json;
+  offlineCache = fetchYarnDeps {
+    yarnLock = "${src}/yarn.lock";
+    sha256 = "sha256-SLkgJDb9lwz/ShZh+H4YKAFRc1BdANWI5ndM2O6NzXE=";
+  };
+
+  buildPhase = ''
+    yarn --offline build
+  '';
+
+  installPhase = ''
+    cp -rv deps/lxd-ui/build/ui/ $out
+  '';
+
+  doDist = false;
+
+  meta = {
+    description = "Web user interface for LXD.";
+    homepage = "https://linuxcontainers.org/lxd/";
+    changelog = "https://github.com/canonical/lxd-ui";
+    license = lib.licenses.gpl3;
+    maintainers = with lib.maintainers; [ jnsgruk ];
+    platforms = lib.platforms.linux;
+  };
+}