-
Notifications
You must be signed in to change notification settings - Fork 591
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(dashboard): allow specifying API endpoint for development #14361
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -15,8 +15,34 @@ | |
* | ||
*/ | ||
|
||
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 | ||
Comment on lines
+28
to
+29
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. By default we still use the |
||
|
||
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 { | ||
const res = await fetch(url) | ||
const data = await res.json() | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 | ||
) | ||
Comment on lines
+36
to
+39
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The endpoint will be stored in the local storage of the browser. |
||
|
||
return ( | ||
<Fragment> | ||
<Head> | ||
|
@@ -31,15 +48,16 @@ export default function Settings() { | |
<VStack spacing={4} w="full"> | ||
<FormControl> | ||
<FormLabel>RisingWave Meta Node HTTP API</FormLabel> | ||
<Input value="/api" /> | ||
</FormControl> | ||
<FormControl> | ||
<FormLabel>Grafana HTTP API</FormLabel> | ||
<Input value="/api" /> | ||
</FormControl> | ||
<FormControl> | ||
<FormLabel>Prometheus 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> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No need for rewrites now as we directly send requests to the mock server with CORS allowed.