vmui: fix layout and add server url by default (#1519)

* fix: change layout for correctly display big query

* fix: set default server from url

* fix: change get default server url
This commit is contained in:
Yury Molodov 2021-08-06 12:06:08 +03:00 committed by GitHub
parent 5ce531027f
commit 236fc7d739
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 3 deletions

View File

@ -50,17 +50,18 @@ const HomeLayout: FC = () => {
<UrlCopy url={fetchUrl}/> <UrlCopy url={fetchUrl}/>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Box display="flex" flexDirection="column" style={{height: "calc(100vh - 64px)"}}> <Box display="flex" flexDirection="column" style={{minHeight: "calc(100vh - 64px)"}}>
<Box m={2}> <Box m={2}>
<QueryConfigurator/> <QueryConfigurator/>
</Box> </Box>
<Box flexShrink={1} style={{overflowY: "scroll"}}> <Box flexShrink={1}>
{isLoading && <Fade in={isLoading} style={{ {isLoading && <Fade in={isLoading} style={{
transitionDelay: isLoading ? "300ms" : "0ms", transitionDelay: isLoading ? "300ms" : "0ms",
}}> }}>
<Box alignItems="center" flexDirection="column" display="flex" <Box alignItems="center" flexDirection="column" display="flex"
style={{ style={{
width: "100%", width: "100%",
maxWidth: "calc(100vh - 32px)",
position: "absolute", position: "absolute",
height: "150px", height: "150px",
background: "linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7), rgba(255,255,255,0))" background: "linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7), rgba(255,255,255,0))"

View File

@ -2,6 +2,7 @@ import {DisplayType} from "../../components/Home/Configurator/DisplayTypeSwitch"
import {TimeParams, TimePeriod} from "../../types"; import {TimeParams, TimePeriod} from "../../types";
import {dateFromSeconds, getDurationFromPeriod, getTimeperiodForDuration} from "../../utils/time"; import {dateFromSeconds, getDurationFromPeriod, getTimeperiodForDuration} from "../../utils/time";
import {getFromStorage} from "../../utils/storage"; import {getFromStorage} from "../../utils/storage";
import {getDefaultServer} from "../../utils/default-server-url";
export interface TimeState { export interface TimeState {
duration: string; duration: string;
@ -31,8 +32,9 @@ export type Action =
| { type: "TOGGLE_AUTOREFRESH"} | { type: "TOGGLE_AUTOREFRESH"}
| { type: "TOGGLE_AUTOCOMPLETE"} | { type: "TOGGLE_AUTOCOMPLETE"}
export const initialState: AppState = { export const initialState: AppState = {
serverUrl: getFromStorage("PREFERRED_URL") as string || "https://", // https://demo.promlabs.com or https://play.victoriametrics.com/select/accounting/1/6a716b0f-38bc-4856-90ce-448fd713e3fe/prometheus", serverUrl: getFromStorage("PREFERRED_URL") as string || getDefaultServer(), // https://demo.promlabs.com or https://play.victoriametrics.com/select/accounting/1/6a716b0f-38bc-4856-90ce-448fd713e3fe/prometheus",
displayType: "chart", displayType: "chart",
query: getFromStorage("LAST_QUERY") as string || "\n", // demo_memory_usage_bytes query: getFromStorage("LAST_QUERY") as string || "\n", // demo_memory_usage_bytes
time: { time: {

View File

@ -0,0 +1,6 @@
export const getDefaultServer = (): string => {
const {href} = window.location;
const regexp = /^http.+\/vmui/;
const [result] = href.match(regexp) || ["https://"];
return result.replace("vmui", "prometheus");
};