store endpoint in local storage

Signed-off-by: Bugen Zhao <[email protected]>
risingwavelabs · Jan 4, 2024 · a8d8656 · a8d8656
1 parent be6a5f3
commit a8d8656
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 13 deletions.
diff --git a/dashboard/mock-server.js b/dashboard/mock-server.js
@@ -16,8 +16,11 @@
  */
 
 const express = require("express")
+const cors = require("cors")
 
 const app = express()
+app.use(cors())
+
 app.listen(32333, () => {
   console.log("Server running on port 32333")
 })

diff --git a/dashboard/next.config.js b/dashboard/next.config.js
@@ -20,16 +20,6 @@
  */
 const nextConfig = {
   trailingSlash: true,
-
-  rewrites: () => {
-    return [
-      {
-        source: "/api/:path*",
-        // To test with a RisingWave Meta node, use "http://127.0.0.1:5691/api/:path*"
-        destination: "http://localhost:32333/:path*",
-      },
-    ]
-  },
 }
 
 module.exports = nextConfig
diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -19,6 +19,7 @@
     "@monaco-editor/react": "^4.4.6",
     "@types/d3": "^7.4.0",
     "@types/lodash": "^4.14.184",
+    "@uidotdev/usehooks": "^2.4.1",
     "base64url": "^3.0.1",
     "bootstrap-icons": "^1.9.1",
     "d3": "^7.6.1",
@@ -48,6 +49,7 @@
     "@types/node": "^18.7.14",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "cors": "^2.8.5",
     "eslint": "^8.45.0",
     "eslint-config-next": "13.4.12",
     "eslint-config-prettier": "^8.8.0",

diff --git a/dashboard/pages/api/api.ts b/dashboard/pages/api/api.ts
@@ -15,10 +15,35 @@
  *
  */
 
+const PROD_API_ENDPOINT = "/api"
+const MOCK_API_ENDPOINT = "http://localhost:32333"
+const EXTERNAL_META_NODE_API_ENDPOINT = "http://localhost:5691/api"
+
+export const PREDEFINED_API_ENDPOINTS = [
+  PROD_API_ENDPOINT,
+  MOCK_API_ENDPOINT,
+  EXTERNAL_META_NODE_API_ENDPOINT,
+]
+
+export const DEFAULT_API_ENDPOINT: string =
+  process.env.NODE_ENV === "production" ? PROD_API_ENDPOINT : MOCK_API_ENDPOINT
+
+export const API_ENDPOINT_KEY = "risingwave.dashboard.api.endpoint"
+
 class Api {
-  async get(url: string) {
+  urlFor(path: string) {
+    let apiEndpoint: string = (
+      JSON.parse(localStorage.getItem(API_ENDPOINT_KEY) || "null") ||
+      DEFAULT_API_ENDPOINT
+    ).replace(/\/+$/, "") // remove trailing slashes
+
+    return `${apiEndpoint}${path}`
+  }
+
+  async get(path: string) {
+    const url = this.urlFor(path)
+
     try {
-      url = `http://localhost:5691/api${url}`
       const res = await fetch(url)
       const data = await res.json()
       return data

diff --git a/dashboard/pages/settings.tsx b/dashboard/pages/settings.tsx
@@ -16,11 +16,28 @@
  */
 
 import { Box, FormControl, FormLabel, Input, VStack } from "@chakra-ui/react"
+import { useIsClient, useLocalStorage } from "@uidotdev/usehooks"
 import Head from "next/head"
 import { Fragment } from "react"
 import Title from "../components/Title"
+import {
+  API_ENDPOINT_KEY,
+  DEFAULT_API_ENDPOINT,
+  PREDEFINED_API_ENDPOINTS,
+} from "./api/api"
 
 export default function Settings() {
+  const isClient = useIsClient()
+  return isClient && <ClientSettings />
+}
+
+// Local storage is only available on the client side.
+function ClientSettings() {
+  const [apiEndpoint, saveApiEndpoint] = useLocalStorage(
+    API_ENDPOINT_KEY,
+    DEFAULT_API_ENDPOINT
+  )
+
   return (
     <Fragment>
       <Head>
@@ -31,7 +48,16 @@ export default function Settings() {
         <VStack spacing={4} w="full">
           <FormControl>
             <FormLabel>RisingWave Meta Node HTTP API</FormLabel>
-            <Input value="/api" />
+            <Input
+              value={apiEndpoint}
+              onChange={(event) => saveApiEndpoint(event.target.value)}
+              list="predefined"
+            />
+            <datalist id="predefined">
+              {PREDEFINED_API_ENDPOINTS.map((endpoint) => (
+                <option key={endpoint} value={endpoint} />
+              ))}
+            </datalist>
           </FormControl>
         </VStack>
       </Box>