Skip to content

Commit 78682dc

Browse files
Loori-Rvalyala
Loori-R
and
valyala
authored
app/vmui: automatically load tenants via /select/tenant_ids (#844)
Co-authored-by: Aliaksandr Valialkin <[email protected]>
1 parent 2db1a83 commit 78682dc

File tree

10 files changed

+267
-166
lines changed

10 files changed

+267
-166
lines changed

‎app/vmui/packages/vmui/src/api/accountId.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
export const getAccountIds = (server: string) =>
2-
`${server.replace(/^(.+)(\/select.+)/, "$1")}/admin/tenants`;
2+
`${server}/select/tenant_ids`;

‎app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/Tenants.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { FC, useRef } from "preact/compat";
2+
import { useSearchParams } from "react-router-dom";
3+
import { useTimeDispatch } from "../../../../state/time/TimeStateContext";
4+
import { useFetchAccountIds } from "./hooks/useFetchAccountIds";
5+
import TenantsSelect from "./TenantsSelect";
6+
import TenantsFields from "./TenantsFields";
7+
import Button from "../../../Main/Button/Button";
8+
import classNames from "classnames";
9+
import Tooltip from "../../../Main/Tooltip/Tooltip";
10+
import useDeviceDetect from "../../../../hooks/useDeviceDetect";
11+
import useBoolean from "../../../../hooks/useBoolean";
12+
import Popper from "../../../Main/Popper/Popper";
13+
import { ArrowDownIcon, StorageIcon } from "../../../Main/Icons";
14+
import "./style.scss";
15+
import "../../TimeRangeSettings/ExecutionControls/style.scss";
16+
17+
export type TenantType = {
18+
accountId: string;
19+
projectId: string;
20+
}
21+
22+
const Tenants: FC = () => {
23+
const { accountIds } = useFetchAccountIds();
24+
const { isMobile } = useDeviceDetect();
25+
const timeDispatch = useTimeDispatch();
26+
27+
const [searchParams, setSearchParams] = useSearchParams();
28+
const accountId = searchParams.get("accountID") || "0";
29+
const projectId = searchParams.get("projectID") || "0";
30+
const tenantId = `${accountId}:${projectId}`;
31+
32+
const buttonRef = useRef<HTMLDivElement>(null);
33+
34+
const {
35+
value: openPopup,
36+
toggle: toggleOpenPopup,
37+
setFalse: handleClosePopup,
38+
} = useBoolean(false);
39+
40+
const onChange = ({ accountId, projectId }: Partial<TenantType>) => {
41+
if (accountId) searchParams.set("accountID", accountId);
42+
if (projectId) searchParams.set("projectID", projectId);
43+
setSearchParams(searchParams);
44+
timeDispatch({ type: "RUN_QUERY" });
45+
handleClosePopup();
46+
};
47+
48+
const childrenProps = {
49+
tenantId,
50+
accountIds,
51+
accountId,
52+
projectId,
53+
onChange,
54+
};
55+
56+
return (
57+
<div className="vm-tenant-input">
58+
<Tooltip title="Define Tenant ID if you need request to another storage">
59+
<div ref={buttonRef}>
60+
{isMobile ? (
61+
<div
62+
className="vm-mobile-option"
63+
onClick={toggleOpenPopup}
64+
>
65+
<span className="vm-mobile-option__icon"><StorageIcon/></span>
66+
<div className="vm-mobile-option-text">
67+
<span className="vm-mobile-option-text__label">Tenant ID</span>
68+
<span className="vm-mobile-option-text__value">{tenantId}</span>
69+
</div>
70+
<span className="vm-mobile-option__arrow"><ArrowDownIcon/></span>
71+
</div>
72+
) : (
73+
<Button
74+
className="vm-header-button"
75+
variant="contained"
76+
color="primary"
77+
fullWidth
78+
startIcon={<StorageIcon/>}
79+
endIcon={(
80+
<div
81+
className={classNames({
82+
"vm-execution-controls-buttons__arrow": true,
83+
"vm-execution-controls-buttons__arrow_open": openPopup,
84+
})}
85+
>
86+
<ArrowDownIcon/>
87+
</div>
88+
)}
89+
onClick={toggleOpenPopup}
90+
>
91+
{tenantId}
92+
</Button>
93+
)}
94+
</div>
95+
</Tooltip>
96+
<Popper
97+
open={openPopup}
98+
placement="bottom-right"
99+
onClose={handleClosePopup}
100+
buttonRef={buttonRef}
101+
title={isMobile ? "Define Tenant ID" : undefined}
102+
>
103+
{accountIds.length ? <TenantsSelect {...childrenProps}/> : <TenantsFields {...childrenProps}/>}
104+
</Popper>
105+
</div>
106+
);
107+
};
108+
109+
export default Tenants;

‎app/vmui/packages/vmui/src/components/Configurators/GlobalSettings/TenantsConfiguration/TenantsFields.tsx‎

Lines changed: 62 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,78 @@
1-
import { FC, useRef, useEffect } from "preact/compat";
2-
import { useTimeDispatch } from "../../../../state/time/TimeStateContext";
3-
import { ArrowDownIcon, QuestionIcon, StorageIcon } from "../../../Main/Icons";
1+
import { FC, useCallback, useEffect, useState } from "preact/compat";
42
import Button from "../../../Main/Button/Button";
5-
import "./style.scss";
6-
import "../../TimeRangeSettings/ExecutionControls/style.scss";
73
import classNames from "classnames";
8-
import Popper from "../../../Main/Popper/Popper";
9-
import { getAppModeEnable } from "../../../../utils/app-mode";
10-
import Tooltip from "../../../Main/Tooltip/Tooltip";
114
import useDeviceDetect from "../../../../hooks/useDeviceDetect";
125
import TextField from "../../../Main/TextField/TextField";
13-
import useBoolean from "../../../../hooks/useBoolean";
14-
import useStateSearchParams from "../../../../hooks/useStateSearchParams";
15-
import { useSearchParams } from "react-router-dom";
6+
import { TenantType } from "./Tenants";
167

17-
const TenantsFields: FC = () => {
18-
const appModeEnable = getAppModeEnable();
19-
const { isMobile } = useDeviceDetect();
20-
const timeDispatch = useTimeDispatch();
21-
22-
const [searchParams, setSearchParams] = useSearchParams();
23-
const [accountID, setAccountID] = useStateSearchParams("0", "accountID");
24-
const [projectID, setProjectID] = useStateSearchParams("0", "projectID");
25-
const formattedTenant = `${accountID}:${projectID}`;
26-
27-
const buttonRef = useRef<HTMLDivElement>(null);
8+
interface Props extends TenantType {
9+
accountId: string;
10+
projectId: string;
11+
onChange: (tenant: Partial<TenantType>) => void;
12+
}
2813

29-
const {
30-
value: openPopup,
31-
toggle: toggleOpenPopup,
32-
setFalse: handleClosePopup,
33-
} = useBoolean(false);
14+
const TenantsFields: FC<Props> = ({ accountId, projectId, onChange }) => {
15+
const { isMobile } = useDeviceDetect();
3416

35-
const applyChanges = () => {
36-
searchParams.set("accountID", accountID);
37-
searchParams.set("projectID", projectID);
38-
setSearchParams(searchParams);
39-
handleClosePopup();
40-
timeDispatch({ type: "RUN_QUERY" });
41-
};
17+
const [accountTmp, setAccountTmp] = useState(accountId);
18+
const [projectTmp, setProjectTmp] = useState(projectId);
4219

43-
const handleReset = () => {
44-
setAccountID(searchParams.get("accountID") || "0");
45-
setProjectID(searchParams.get("projectID") || "0");
46-
};
20+
const applyChanges = useCallback(() => {
21+
onChange({
22+
accountId: accountTmp || accountId,
23+
projectId: projectTmp || projectId
24+
});
25+
}, [accountTmp, accountId, projectTmp, projectId]);
4726

4827
useEffect(() => {
49-
if (openPopup) return;
50-
handleReset();
51-
}, [openPopup]);
28+
setAccountTmp(accountId);
29+
setProjectTmp(projectId);
30+
}, [accountId, projectId]);
5231

5332
return (
54-
<div className="vm-tenant-input">
55-
<Tooltip title="Define Tenant ID if you need request to another storage">
56-
<div ref={buttonRef}>
57-
{isMobile ? (
58-
<div
59-
className="vm-mobile-option"
60-
onClick={toggleOpenPopup}
61-
>
62-
<span className="vm-mobile-option__icon"><StorageIcon/></span>
63-
<div className="vm-mobile-option-text">
64-
<span className="vm-mobile-option-text__label">Tenant ID</span>
65-
<span className="vm-mobile-option-text__value">{formattedTenant}</span>
66-
</div>
67-
<span className="vm-mobile-option__arrow"><ArrowDownIcon/></span>
68-
</div>
69-
) : (
70-
<Button
71-
className={appModeEnable ? "" : "vm-header-button"}
72-
variant="contained"
73-
color="primary"
74-
fullWidth
75-
startIcon={<StorageIcon/>}
76-
endIcon={(
77-
<div
78-
className={classNames({
79-
"vm-execution-controls-buttons__arrow": true,
80-
"vm-execution-controls-buttons__arrow_open": openPopup,
81-
})}
82-
>
83-
<ArrowDownIcon/>
84-
</div>
85-
)}
86-
onClick={toggleOpenPopup}
87-
>
88-
{formattedTenant}
89-
</Button>
90-
)}
91-
</div>
92-
</Tooltip>
93-
<Popper
94-
open={openPopup}
95-
placement="bottom-right"
96-
onClose={handleClosePopup}
97-
buttonRef={buttonRef}
98-
title={isMobile ? "Define Tenant ID" : undefined}
99-
>
100-
<div
101-
className={classNames({
102-
"vm-list vm-tenant-input-list": true,
103-
"vm-list vm-tenant-input-list_mobile": isMobile,
104-
"vm-tenant-input-list_inline": true,
105-
})}
33+
<div
34+
className={classNames({
35+
"vm-list vm-tenant-input-list": true,
36+
"vm-list vm-tenant-input-list_mobile": isMobile,
37+
})}
38+
>
39+
<div className="vm-tenant-input-list__fields">
40+
<TextField
41+
autofocus
42+
label="accountID"
43+
value={accountTmp}
44+
onChange={setAccountTmp}
45+
type="number"
46+
/>
47+
<TextField
48+
autofocus
49+
label="projectID"
50+
value={projectTmp}
51+
onChange={setProjectTmp}
52+
type="number"
53+
/>
54+
</div>
55+
<div className="vm-tenant-input-list__buttons">
56+
<a
57+
href="https://docs.victoriametrics.com/victorialogs/#multitenancy"
58+
target="_blank"
59+
rel="help noreferrer"
60+
>
61+
<Button
62+
variant="text"
63+
color="primary"
64+
>
65+
Read more
66+
</Button>
67+
</a>
68+
<Button
69+
variant="contained"
70+
color="primary"
71+
onClick={applyChanges}
10672
>
107-
<TextField
108-
autofocus
109-
label="accountID"
110-
value={accountID}
111-
onChange={setAccountID}
112-
type="number"
113-
/>
114-
<TextField
115-
autofocus
116-
label="projectID"
117-
value={projectID}
118-
onChange={setProjectID}
119-
type="number"
120-
/>
121-
<div className="vm-tenant-input-list__buttons">
122-
<Tooltip title="Multitenancy in VictoriaLogs documentation">
123-
<a
124-
href="https://docs.victoriametrics.com/victorialogs/#multitenancy"
125-
target="_blank"
126-
rel="help noreferrer"
127-
>
128-
<Button
129-
variant="text"
130-
color="gray"
131-
startIcon={<QuestionIcon/>}
132-
/>
133-
</a>
134-
</Tooltip>
135-
<Button
136-
variant="contained"
137-
color="primary"
138-
onClick={applyChanges}
139-
>
140-
Apply
141-
</Button>
142-
</div>
143-
</div>
144-
</Popper>
73+
Apply
74+
</Button>
75+
</div>
14576
</div>
14677
);
14778
};

0 commit comments

Comments
 (0)