mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2024-11-21 14:44:00 +00:00
vmui/logs: add fields for tenant configuration (#6661)
Added fields for configuring AccountID and ProjectID #6631
This commit is contained in:
Yury Molodov
f41gh7
parent
115a76d28c
commit
a93ee27a85
6 changed files with 181 additions and 3 deletions
|
|
@ -0,0 +1,150 @@
|
|||
import React, { FC, useRef } from "preact/compat";
|
||||
import { useTimeDispatch } from "../../../../state/time/TimeStateContext";
|
||||
import { ArrowDownIcon, QuestionIcon, StorageIcon } from "../../../Main/Icons";
|
||||
import Button from "../../../Main/Button/Button";
|
||||
import "./style.scss";
|
||||
import "../../TimeRangeSettings/ExecutionControls/style.scss";
|
||||
import classNames from "classnames";
|
||||
import Popper from "../../../Main/Popper/Popper";
|
||||
import { getAppModeEnable } from "../../../../utils/app-mode";
|
||||
import Tooltip from "../../../Main/Tooltip/Tooltip";
|
||||
import useDeviceDetect from "../../../../hooks/useDeviceDetect";
|
||||
import TextField from "../../../Main/TextField/TextField";
|
||||
import useBoolean from "../../../../hooks/useBoolean";
|
||||
import useStateSearchParams from "../../../../hooks/useStateSearchParams";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
|
||||
const TenantsFields: FC = () => {
|
||||
const appModeEnable = getAppModeEnable();
|
||||
const { isMobile } = useDeviceDetect();
|
||||
const timeDispatch = useTimeDispatch();
|
||||
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [accountID, setAccountID] = useStateSearchParams("0", "accountID");
|
||||
const [projectID, setProjectID] = useStateSearchParams("0", "projectID");
|
||||
const formattedTenant = `${accountID}:${projectID}`;
|
||||
|
||||
const buttonRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const {
|
||||
value: openPopup,
|
||||
toggle: toggleOpenPopup,
|
||||
setFalse: handleClosePopup,
|
||||
} = useBoolean(false);
|
||||
|
||||
const applyChanges = () => {
|
||||
searchParams.set("accountID", accountID);
|
||||
searchParams.set("projectID", projectID);
|
||||
setSearchParams(searchParams);
|
||||
handleClosePopup();
|
||||
timeDispatch({ type: "RUN_QUERY" });
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setAccountID(searchParams.get("accountID") || "0");
|
||||
setProjectID(searchParams.get("projectID") || "0");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (openPopup) return;
|
||||
handleReset();
|
||||
}, [openPopup]);
|
||||
|
||||
return (
|
||||
<div className="vm-tenant-input">
|
||||
<Tooltip title="Define Tenant ID if you need request to another storage">
|
||||
<div ref={buttonRef}>
|
||||
{isMobile ? (
|
||||
<div
|
||||
className="vm-mobile-option"
|
||||
onClick={toggleOpenPopup}
|
||||
>
|
||||
<span className="vm-mobile-option__icon"><StorageIcon/></span>
|
||||
<div className="vm-mobile-option-text">
|
||||
<span className="vm-mobile-option-text__label">Tenant ID</span>
|
||||
<span className="vm-mobile-option-text__value">{formattedTenant}</span>
|
||||
</div>
|
||||
<span className="vm-mobile-option__arrow"><ArrowDownIcon/></span>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
className={appModeEnable ? "" : "vm-header-button"}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
fullWidth
|
||||
startIcon={<StorageIcon/>}
|
||||
endIcon={(
|
||||
<div
|
||||
className={classNames({
|
||||
"vm-execution-controls-buttons__arrow": true,
|
||||
"vm-execution-controls-buttons__arrow_open": openPopup,
|
||||
})}
|
||||
>
|
||||
<ArrowDownIcon/>
|
||||
</div>
|
||||
)}
|
||||
onClick={toggleOpenPopup}
|
||||
>
|
||||
{formattedTenant}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Popper
|
||||
open={openPopup}
|
||||
placement="bottom-right"
|
||||
onClose={handleClosePopup}
|
||||
buttonRef={buttonRef}
|
||||
title={isMobile ? "Define Tenant ID" : undefined}
|
||||
>
|
||||
<div
|
||||
className={classNames({
|
||||
"vm-list vm-tenant-input-list": true,
|
||||
"vm-list vm-tenant-input-list_mobile": isMobile,
|
||||
"vm-tenant-input-list_inline": true,
|
||||
})}
|
||||
>
|
||||
<TextField
|
||||
autofocus
|
||||
label="accountID"
|
||||
value={accountID}
|
||||
onChange={setAccountID}
|
||||
type="number"
|
||||
/>
|
||||
<TextField
|
||||
autofocus
|
||||
label="projectID"
|
||||
value={projectID}
|
||||
onChange={setProjectID}
|
||||
type="number"
|
||||
/>
|
||||
<div className="vm-tenant-input-list__buttons">
|
||||
<Tooltip title="Multitenancy in VictoriaLogs documentation">
|
||||
<a
|
||||
href="https://docs.victoriametrics.com/victorialogs/#multitenancy"
|
||||
target="_blank"
|
||||
rel="help noreferrer"
|
||||
>
|
||||
<Button
|
||||
variant="text"
|
||||
color="gray"
|
||||
startIcon={<QuestionIcon/>}
|
||||
/>
|
||||
</a>
|
||||
</Tooltip>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={applyChanges}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Popper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TenantsFields;
|
||||
|
|
@ -17,11 +17,23 @@
|
|||
padding: 0 $padding-global $padding-small;
|
||||
}
|
||||
|
||||
&_inline {
|
||||
display: grid;
|
||||
gap: calc($padding-small/2);
|
||||
padding: $padding-global;
|
||||
}
|
||||
|
||||
&__search {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: $padding-small $padding-global;
|
||||
background-color: $color-background-block;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: $padding-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import classNames from "classnames";
|
|||
import GlobalSettings from "../../components/Configurators/GlobalSettings/GlobalSettings";
|
||||
import { ControlsProps } from "../Header/HeaderControls/HeaderControls";
|
||||
import { TimeSelector } from "../../components/Configurators/TimeRangeSettings/TimeSelector/TimeSelector";
|
||||
import TenantsFields from "../../components/Configurators/GlobalSettings/TenantsConfiguration/TenantsFields";
|
||||
|
||||
const ControlsLogsLayout: FC<ControlsProps> = ({ isMobile }) => {
|
||||
|
||||
|
|
@ -13,6 +14,7 @@ const ControlsLogsLayout: FC<ControlsProps> = ({ isMobile }) => {
|
|||
"vm-header-controls_mobile": isMobile,
|
||||
})}
|
||||
>
|
||||
<TenantsFields/>
|
||||
<TimeSelector/>
|
||||
<GlobalSettings/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,11 @@ import { ErrorTypes, TimeParams } from "../../../types";
|
|||
import { LogHits } from "../../../api/types";
|
||||
import dayjs from "dayjs";
|
||||
import { LOGS_BARS_VIEW } from "../../../constants/logs";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
|
||||
export const useFetchLogHits = (server: string, query: string) => {
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [logHits, setLogHits] = useState<LogHits[]>([]);
|
||||
const [isLoading, setIsLoading] = useState<{[key: number]: boolean;}>([]);
|
||||
const [error, setError] = useState<ErrorTypes | string>();
|
||||
|
|
@ -22,6 +25,10 @@ export const useFetchLogHits = (server: string, query: string) => {
|
|||
return {
|
||||
signal,
|
||||
method: "POST",
|
||||
headers: {
|
||||
AccountID: searchParams.get("accountID") || "0",
|
||||
ProjectID: searchParams.get("projectID") || "0",
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
query: query.trim(),
|
||||
step: `${step}ms`,
|
||||
|
|
@ -68,7 +75,7 @@ export const useFetchLogHits = (server: string, query: string) => {
|
|||
}
|
||||
}
|
||||
setIsLoading(prev => ({ ...prev, [id]: false }));
|
||||
}, [url, query]);
|
||||
}, [url, query, searchParams]);
|
||||
|
||||
return {
|
||||
logHits,
|
||||
|
|
|
|||
|
|
@ -3,8 +3,11 @@ import { getLogsUrl } from "../../../api/logs";
|
|||
import { ErrorTypes, TimeParams } from "../../../types";
|
||||
import { Logs } from "../../../api/types";
|
||||
import dayjs from "dayjs";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
|
||||
export const useFetchLogs = (server: string, query: string, limit: number) => {
|
||||
const [searchParams] = useSearchParams();
|
||||
|
||||
const [logs, setLogs] = useState<Logs[]>([]);
|
||||
const [isLoading, setIsLoading] = useState<{[key: number]: boolean;}>([]);
|
||||
const [error, setError] = useState<ErrorTypes | string>();
|
||||
|
|
@ -16,7 +19,9 @@ export const useFetchLogs = (server: string, query: string, limit: number) => {
|
|||
signal,
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Accept": "application/stream+json",
|
||||
Accept: "application/stream+json",
|
||||
AccountID: searchParams.get("accountID") || "0",
|
||||
ProjectID: searchParams.get("projectID") || "0",
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
query: query.trim(),
|
||||
|
|
@ -69,7 +74,7 @@ export const useFetchLogs = (server: string, query: string, limit: number) => {
|
|||
}
|
||||
return false;
|
||||
}
|
||||
}, [url, query, limit]);
|
||||
}, [url, query, limit, searchParams]);
|
||||
|
||||
return {
|
||||
logs,
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ according to [these docs](https://docs.victoriametrics.com/victorialogs/quicksta
|
|||
|
||||
## tip
|
||||
|
||||
* FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): add fields for setting AccountID and ProjectID. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/6631).
|
||||
|
||||
## [v0.28.0](https://github.com/VictoriaMetrics/VictoriaMetrics/releases/tag/v0.28.0-victorialogs)
|
||||
|
||||
Released at 2024-07-10
|
||||
|
|
|
|||
Loading…
Reference in a new issue