mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2025-01-20 07:19:17 +01:00
vmui: add responsive styles for small screens (#3256)
* fix: add responsive styles for small screens * fix: correct additional settings margins * docs/CHANGELOG.md: add responsive styles
This commit is contained in:
Yury Molodov
GitHub
parent
685433b8da
commit
bc7456841f
@ -32,31 +32,30 @@ const AdditionalSettings: FC = () => {
|
||||
saveToStorage("QUERY_TRACING", !isTracingEnabled);
|
||||
};
|
||||
|
||||
return <Box display="flex" alignItems="center">
|
||||
return <Box display="flex" alignItems="center" flexWrap="wrap" gap={2}>
|
||||
<Box>
|
||||
<FormControlLabel label="Autocomplete"
|
||||
<FormControlLabel label="Autocomplete" sx={{m: 0}}
|
||||
control={<BasicSwitch checked={autocomplete} onChange={onChangeAutocomplete}/>}
|
||||
/>
|
||||
</Box>
|
||||
<Box ml={2}>
|
||||
<FormControlLabel label="Disable cache"
|
||||
<Box>
|
||||
<FormControlLabel label="Disable cache" sx={{m: 0}}
|
||||
control={<BasicSwitch checked={nocache} onChange={onChangeCache}/>}
|
||||
/>
|
||||
</Box>
|
||||
<Box ml={2}>
|
||||
<FormControlLabel label="Trace query"
|
||||
<Box>
|
||||
<FormControlLabel label="Trace query" sx={{m: 0}}
|
||||
control={<BasicSwitch checked={isTracingEnabled} onChange={onChangeQueryTracing} />}
|
||||
/>
|
||||
</Box>
|
||||
<Box ml={2} mr={inputTenantID ? 0 : 2}>
|
||||
<StepConfigurator
|
||||
defaultStep={step}
|
||||
<Box ml={2}>
|
||||
<StepConfigurator defaultStep={step}
|
||||
setStep={(value) => {
|
||||
graphDispatch({type: "SET_CUSTOM_STEP", payload: value});
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
{!!inputTenantID && <Box sx={{mx: 3}}><TenantsConfiguration/></Box>}
|
||||
{!!inputTenantID && <Box ml={2}><TenantsConfiguration/></Box>}
|
||||
</Box>;
|
||||
};
|
||||
|
||||
|
||||
@ -91,11 +91,11 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({error, queryOptions}) =>
|
||||
</Tooltip>}
|
||||
</Box>)}
|
||||
</Box>
|
||||
<Box mt={3} display="grid" gridTemplateColumns="1fr auto" alignItems="center">
|
||||
<Box mt={3} display="grid" gridTemplateColumns="1fr auto" alignItems="start" gap={4}>
|
||||
<AdditionalSettings/>
|
||||
<Box>
|
||||
<Box display="grid" gridTemplateColumns="repeat(2, auto)" gap={1}>
|
||||
{stateQuery.length < MAX_QUERY_FIELDS && (
|
||||
<Button variant="outlined" onClick={onAddQuery} startIcon={<AddIcon/>} sx={{mr: 2}}>
|
||||
<Button variant="outlined" onClick={onAddQuery} startIcon={<AddIcon/>}>
|
||||
<Typography lineHeight={"20px"} fontWeight="500">Add Query</Typography>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
@ -15,6 +15,7 @@ import Divider from "@mui/material/Divider";
|
||||
import ClickAwayListener from "@mui/material/ClickAwayListener";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import AlarmAdd from "@mui/icons-material/AlarmAdd";
|
||||
import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
import {getAppModeEnable} from "../../../../utils/app-mode";
|
||||
|
||||
const formatDate = "YYYY-MM-DD HH:mm:ss";
|
||||
@ -38,6 +39,8 @@ const classes = {
|
||||
|
||||
export const TimeSelector: FC = () => {
|
||||
|
||||
const displayFullDate = useMediaQuery("(min-width: 1120px)");
|
||||
|
||||
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
|
||||
const [until, setUntil] = useState<string>();
|
||||
const [from, setFrom] = useState<string>();
|
||||
@ -99,13 +102,17 @@ export const TimeSelector: FC = () => {
|
||||
sx={{
|
||||
color: "white",
|
||||
border: appModeEnable ? "none" : "1px solid rgba(0, 0, 0, 0.2)",
|
||||
boxShadow: "none"
|
||||
boxShadow: "none",
|
||||
minWidth: "34px",
|
||||
padding: displayFullDate ? "" : "6px 8px",
|
||||
}}
|
||||
startIcon={<QueryBuilderIcon/>}
|
||||
startIcon={<QueryBuilderIcon style={displayFullDate ? {} : {marginRight: "-8px", marginLeft: "4px"}}/>}
|
||||
onClick={(e) => setAnchorEl(e.currentTarget)}>
|
||||
{relativeTime && relativeTime !== "none"
|
||||
? relativeTime.replace(/_/g, " ")
|
||||
: `${formatRange.start} - ${formatRange.end}`}
|
||||
{displayFullDate && <span>
|
||||
{relativeTime && relativeTime !== "none"
|
||||
? relativeTime.replace(/_/g, " ")
|
||||
: `${formatRange.start} - ${formatRange.end}`}
|
||||
</span>}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Popper
|
||||
|
||||
@ -20,6 +20,7 @@ export interface GraphViewProps {
|
||||
showLegend?: boolean;
|
||||
setYaxisLimits: (val: AxisRange) => void
|
||||
setPeriod: ({from, to}: {from: Date, to: Date}) => void
|
||||
fullWidth?: boolean
|
||||
}
|
||||
|
||||
const promValueToNumber = (s: string): number => {
|
||||
@ -47,7 +48,8 @@ const GraphView: FC<GraphViewProps> = ({
|
||||
showLegend= true,
|
||||
setYaxisLimits,
|
||||
setPeriod,
|
||||
alias = []
|
||||
alias = [],
|
||||
fullWidth = true
|
||||
}) => {
|
||||
const currentStep = useMemo(() => customStep || period.step || 1, [period.step, customStep]);
|
||||
|
||||
@ -127,7 +129,7 @@ const GraphView: FC<GraphViewProps> = ({
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return <>
|
||||
<div style={{width: "100%"}} ref={containerRef}>
|
||||
<div style={{width: fullWidth ? "calc(100vw - 68px)" : "100%"}} ref={containerRef}>
|
||||
{containerRef?.current &&
|
||||
<LineChart data={dataChart} series={series} metrics={data} period={period} yaxis={yaxis} unit={unit}
|
||||
setPeriod={setPeriod} container={containerRef?.current}/>}
|
||||
|
||||
@ -35,6 +35,7 @@ const classes = {
|
||||
color: "inherit",
|
||||
textDecoration: "underline",
|
||||
transition: ".2s opacity",
|
||||
whiteSpace: "nowrap",
|
||||
"&:hover": {
|
||||
opacity: ".8",
|
||||
}
|
||||
@ -121,7 +122,7 @@ const Header: FC = () => {
|
||||
</Link>
|
||||
</Box>
|
||||
)}
|
||||
<Box sx={{ml: appModeEnable ? 0 : 8}}>
|
||||
<Box ml={appModeEnable ? 0 : 8} flexGrow={1}>
|
||||
<Tabs value={activeMenu} textColor="inherit" TabIndicatorProps={{style: {background: color}}}
|
||||
onChange={(e, val) => setActiveMenu(val)}>
|
||||
{routes.filter(r => !r.hide).map(r => (
|
||||
@ -136,7 +137,7 @@ const Header: FC = () => {
|
||||
))}
|
||||
</Tabs>
|
||||
</Box>
|
||||
<Box display="flex" gap={1} alignItems="center" ml="auto" mr={0}>
|
||||
<Box display="flex" gap={1} alignItems="center" mr={0} ml={4}>
|
||||
{headerSetup?.timeSelector && <TimeSelector/>}
|
||||
{headerSetup?.datePicker && (
|
||||
<DatePicker
|
||||
|
||||
@ -126,7 +126,9 @@ const PredefinedPanels: FC<PredefinedPanelsProps> = ({
|
||||
alias={alias}
|
||||
showLegend={showLegend}
|
||||
setYaxisLimits={setYaxisLimits}
|
||||
setPeriod={setPeriod}/>
|
||||
setPeriod={setPeriod}
|
||||
fullWidth={false}
|
||||
/>
|
||||
}
|
||||
</Box>
|
||||
</Box>;
|
||||
|
||||
@ -45,6 +45,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
|
||||
* FEATURE: [vmagent](https://docs.victoriametrics.com/vmagent.html): allow controlling [staleness tracking](https://docs.victoriametrics.com/vmagent.html#prometheus-staleness-markers) on a per-[scrape_config](https://docs.victoriametrics.com/sd_configs.html#scrape_configs) basis by specifying `no_stale_markers: true` or `no_stale_markers: false` option in the corresponding [scrape_config](https://docs.victoriametrics.com/sd_configs.html#scrape_configs).
|
||||
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): limit the number of plotted series. This should prevent from browser crashes or hangs when the query returns big number of time series. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3155).
|
||||
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): reduce memory usage when querying big number of time series. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3240).
|
||||
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add responsive styles for small screens. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3239) and [this pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/3256).
|
||||
* FEATURE: log error if some environment variables referred at `-promscrape.config` via `%{ENV_VAR}` aren't found. This should prevent from silent using incorrect config files.
|
||||
* FEATURE: immediately shut down VictoriaMetrics apps on the second SIGINT or SIGTERM signal if they couldn't be finished gracefully for some reason after receiving the first signal.
|
||||
* FEATURE: improve the performance of [/api/v1/series](https://docs.victoriametrics.com/url-examples.html#apiv1series) endpoint by eliminating loading of unused `TSID` data during the API call.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user