Add UI

http/service.go

@@ -5,12 +5,17 @@ package http
 import (
 	"context"
 	"crypto/tls"
+	"crypto/x509"
+	"embed"
 	"encoding/json"
 	"errors"
 	"expvar"
 	"fmt"
 	"io"
+	"io/fs"
+	"io/ioutil"
 	"log"
+	"mime"
 	"net"
 	"net/http"
 	"net/http/pprof"
@@ -426,6 +431,8 @@ func (s *Service) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 		s.handleExpvar(w, r)
 	case strings.HasPrefix(r.URL.Path, "/debug/pprof") && s.Pprof:
 		s.handlePprof(w, r)
+	case strings.HasPrefix(r.URL.Path, "/ui"):
+		s.handleUI(w, r)
 	default:
 		w.WriteHeader(http.StatusNotFound)
 	}
@@ -1524,6 +1531,47 @@ func (s *Service) handlePprof(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+// Pattern should start with "all:" prefix in order to
+// include files and directories beginning with "." or "_".
+//go:embed all:ui/out/*
+var staticAssets embed.FS
+
+// handleUI serves UI assets(html, javascript, css) over HTTP.
+func (s *Service) handleUI(w http.ResponseWriter, r *http.Request) {
+	// If the request path is `/ui/menu/query-runner`, one of the two files below will be served.
+	// 1. `ui/out/query-runner` (normarlizedFilePath)
+	// 2. `ui/out/query-runner/index.html` (indexFilePath)
+	normalizedFilePath := strings.Replace(r.URL.Path, "/ui", "ui/out", 1)
+	normalizedFilePath = strings.TrimRight(normalizedFilePath, "/")
+	indexFilePath := normalizedFilePath + "/index.html"
+
+	targetPaths := []string{normalizedFilePath, indexFilePath}
+	for _, path := range targetPaths {
+		fileInfo, err := fs.Stat(staticAssets, path)
+		if err != nil || fileInfo.IsDir() {
+			continue
+		}
+
+		file, err := staticAssets.ReadFile(path)
+		if err != nil {
+			continue
+		}
+
+		// Mime type has to be set manually.
+		splittedPath := strings.Split(path, ".")
+		mimeType := mime.TypeByExtension("." + splittedPath[len(splittedPath)-1])
+		if mimeType != "" {
+			w.Header().Add("Content-Type", mimeType)
+		}
+
+		w.Write(file)
+		return
+	}
+
+	// If no file exists, redirect to the main menu.
+	http.Redirect(w, r, "/ui/menu/query-runner/", http.StatusMovedPermanently)
+}
+
 // Addr returns the address on which the Service is listening
 func (s *Service) Addr() net.Addr {
 	return s.ln.Addr()

http/ui/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "overrides": [
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "react/react-in-jsx-scope": "off",
+        "@typescript-eslint/ban-ts-comment": "warn"
+    }
+}

http/ui/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

http/ui/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

http/ui/README.md

@@ -0,0 +1,20 @@
+# rqlite UI
+Rqlite UI provides simple web UI for rqlite. You can execute SQL queries and check status of rqlite cluster via rqman.  
+
+
+## Development
+### Prerequisite
+Latest [Node.js](https://nodejs.org/ko/download) and [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable) are needed.
+
+### Running UI in local environment
+After executing below command, UI will be running on `localhost:3000`
+```bash
+yarn dev
+```
+
+
+## Packaging into rqlited
+```bash
+yarn build && yarn next export
+```
+The build output can be found in the `out` directory. When you build rqlited, that directory will be included in the binary.  

http/ui/components/common/AccountFormModal.tsx

@@ -0,0 +1,51 @@
+import { Dialog, DialogTitle, Button, Stack, TextField } from "@mui/material";
+import { isEmpty } from "lodash";
+import { useEffect, useState } from "react";
+
+export interface IAccountFormModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (account: { username: string; password: string }) => void;
+}
+
+const AccountFormModal = (props: IAccountFormModalProps) => {
+  const { onClose, open, onSubmit } = props;
+  const [form, setForm] = useState({ username: "", password: "" });
+  useEffect(() => {
+    setForm({ username: "", password: "" });
+  }, [open]);
+
+  return (
+    <Dialog onClose={onClose} open={open}>
+      <Stack sx={{ padding: "10px" }}>
+        <DialogTitle >Enter a <a href="https://rqlite.io/docs/guides/security/#basic-auth" target="_blank" rel="noreferrer">rqlite account</a></DialogTitle>
+        <TextField
+          value={form.username}
+          onChange={(e) => setForm({ ...form, username: e.target.value })}
+          label="username"
+          style={{ marginBottom: "10px" }}
+        />
+        <TextField
+          value={form.password}
+          onChange={(e) => setForm({ ...form, password: e.target.value })}
+          label="password"
+        />
+        <Button
+          sx={{ marginTop: "20px" }}
+          onClick={() => {
+            if (isEmpty(form.username) || isEmpty(form.password)) {
+              return;
+            }
+
+            onSubmit(form);
+            onClose();
+          }}
+        >
+          SUBMIT
+        </Button>
+      </Stack>
+    </Dialog>
+  );
+};
+
+export default AccountFormModal;