Kiu/VictoriaMetrics
Kiu/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2024-11-23 12:31:07 +01:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

feat: add toggle query display by Ctrl (#3449)

Browse Source
This commit is contained in:
Yury Molodov 2022-12-06 07:45:15 +01:00 committed by GitHub
parent 01a9b36a95
commit 7645d9ae00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx
View File

@ -28,6 +28,10 @@ const keyList = [
{
keys: [ctrlMeta, "Arrow Down"],
description: "Next command from the Query history"
},
{
keys: [ctrlMeta, "Click by 'Eye'"],
description: "Toggle multiple queries"
}
]
},
@ -36,10 +40,12 @@ const keyList = [
list: [
{
keys: [ctrlMeta, "Scroll Up"],
alt: ["+"],
description: "Zoom in"
},
{
keys: [ctrlMeta, "Scroll Down"],
alt: ["-"],
description: "Zoom out"
},
{
@ -118,6 +124,15 @@ const ShortcutKeys: FC = () => {
{i !== l.keys.length - 1 ? "+" : ""}
</>
))}
{l.alt && l.alt.map((alt, i) => (
<>
or
<code key={alt}>
{alt}
</code>
{i !== l.alt.length - 1 ? "+" : ""}
</>
))}
</div>
<p className="vm-shortcuts-section-list-item__description">
{l.description}

2
app/vmui/packages/vmui/src/components/Main/ShortcutKeys/style.scss
View File

@ -19,7 +19,7 @@
&-item {
display: grid;
grid-template-columns: 180px 1fr;
grid-template-columns: 210px 1fr;
align-items: center;
gap: $padding-small;

20
app/vmui/packages/vmui/src/pages/CustomPanel/QueryConfigurator/QueryConfigurator.tsx
View File

@ -11,6 +11,8 @@ import Button from "../../../components/Main/Button/Button";
import "./style.scss";
import Tooltip from "../../../components/Main/Tooltip/Tooltip";
import classNames from "classnames";
import { MouseEvent as ReactMouseEvent } from "react";
import { arrayEquals } from "../../../utils/array";
export interface QueryConfiguratorProps {
error?: ErrorTypes | string;
@ -55,8 +57,16 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({ error, queryOptions, on
setStateQuery(prev => prev.filter((q, i) => i !== index));
};
const onToggleHideQuery = (index: number) => {
setHideQuery(prev => prev.includes(index) ? prev.filter(n => n !== index) : [...prev, index]);
const onToggleHideQuery = (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>, index: number) => {
const { ctrlKey, metaKey } = e;
const ctrlMetaKey = ctrlKey || metaKey;
if (ctrlMetaKey) {
const hideIndexes = stateQuery.map((q, i) => i).filter(n => n !== index);
setHideQuery(prev => arrayEquals(hideIndexes, prev) ? [] : hideIndexes);
} else {
setHideQuery(prev => prev.includes(index) ? prev.filter(n => n !== index) : [...prev, index]);
}
};
const handleChangeQuery = (value: string, index: number) => {
@ -84,11 +94,11 @@ const QueryConfigurator: FC<QueryConfiguratorProps> = ({ error, queryOptions, on
const createHandlerRemoveQuery = (i: number) => () => {
onRemoveQuery(i);
setHideQuery(prev => prev.map(n => n > i ? n - 1: n));
setHideQuery(prev => prev.includes(i) ? prev.filter(n => n !== i) : prev.map(n => n > i ? n - 1: n));
};
const createHandlerHideQuery = (i: number) => () => {
onToggleHideQuery(i);
const createHandlerHideQuery = (i: number) => (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
onToggleHideQuery(e, i);
};
useEffect(() => {