mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2024-11-21 14:44:00 +00:00
fix: correct the description of shortcut keys (#4057)
This commit is contained in:
Yury Molodov
GitHub
parent
4b2cc1b32c
commit
a1601929ec
4 changed files with 111 additions and 91 deletions
|
|
@ -51,15 +51,16 @@ const legendTips = [
|
|||
</>
|
||||
},
|
||||
{
|
||||
title: "Copy key-value pairs",
|
||||
title: "Copy label key-value pairs",
|
||||
description: <>
|
||||
<code>click</code> on a key-value pair to save it to the clipboard.
|
||||
<code>click</code> on a label key-value pair to save it to the clipboard.
|
||||
</>
|
||||
},
|
||||
{
|
||||
title: "Collapse/Expand the legend group",
|
||||
description: <>
|
||||
<code>click</code> on the group name (e.g. <b>Query 1: {name!=""}</b>) to collapse or expand the legend.
|
||||
<code>click</code> on the group name (e.g. <b>Query 1: {__name__!=""}</b>)
|
||||
to collapse or expand the legend.
|
||||
</>
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,75 +1,16 @@
|
|||
import React, { FC, useState } from "preact/compat";
|
||||
import { isMacOs } from "../../../utils/detect-device";
|
||||
import React, { FC, useEffect, useState } from "preact/compat";
|
||||
import { getAppModeEnable } from "../../../utils/app-mode";
|
||||
import Button from "../Button/Button";
|
||||
import { KeyboardIcon } from "../Icons";
|
||||
import Modal from "../Modal/Modal";
|
||||
import "./style.scss";
|
||||
import Tooltip from "../Tooltip/Tooltip";
|
||||
|
||||
const ctrlMeta = isMacOs() ? "Cmd" : "Ctrl";
|
||||
|
||||
const keyList = [
|
||||
{
|
||||
title: "Query",
|
||||
list: [
|
||||
{
|
||||
keys: ["Enter"],
|
||||
description: "Run"
|
||||
},
|
||||
{
|
||||
keys: ["Shift", "Enter"],
|
||||
description: "Multi-line queries"
|
||||
},
|
||||
{
|
||||
keys: [ctrlMeta, "Arrow Up"],
|
||||
description: "Previous command from the Query history"
|
||||
},
|
||||
{
|
||||
keys: [ctrlMeta, "Arrow Down"],
|
||||
description: "Next command from the Query history"
|
||||
},
|
||||
{
|
||||
keys: [ctrlMeta, "Click by 'Eye'"],
|
||||
description: "Toggle multiple queries"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Graph",
|
||||
list: [
|
||||
{
|
||||
keys: [ctrlMeta, "Scroll Up"],
|
||||
alt: ["+"],
|
||||
description: "Zoom in"
|
||||
},
|
||||
{
|
||||
keys: [ctrlMeta, "Scroll Down"],
|
||||
alt: ["-"],
|
||||
description: "Zoom out"
|
||||
},
|
||||
{
|
||||
keys: [ctrlMeta, "Click and Drag"],
|
||||
description: "Move the graph left/right"
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legend",
|
||||
list: [
|
||||
{
|
||||
keys: ["Mouse Click"],
|
||||
description: "Select series"
|
||||
},
|
||||
{
|
||||
keys: [ctrlMeta, "Mouse Click"],
|
||||
description: "Toggle multiple series"
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
import keyList from "./constants/keyList";
|
||||
import { isMacOs } from "../../../utils/detect-device";
|
||||
|
||||
const title = "Shortcut keys";
|
||||
const isMac = isMacOs();
|
||||
const keyOpenHelp = isMac ? "Cmd + /" : "F1";
|
||||
|
||||
const ShortcutKeys: FC<{ showTitle?: boolean }> = ({ showTitle }) => {
|
||||
const [openList, setOpenList] = useState(false);
|
||||
|
|
@ -83,10 +24,26 @@ const ShortcutKeys: FC<{showTitle?: boolean}> = ({ showTitle }) => {
|
|||
setOpenList(false);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
const openOnMac = isMac && e.key === "/" && e.metaKey;
|
||||
const openOnOther = !isMac && e.key === "F1" && !e.metaKey;
|
||||
if (openOnMac || openOnOther) {
|
||||
handleOpen();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return <>
|
||||
<Tooltip
|
||||
open={showTitle === true ? false : undefined}
|
||||
title={title}
|
||||
title={`${title} (${keyOpenHelp})`}
|
||||
placement="bottom-center"
|
||||
>
|
||||
<Button
|
||||
|
|
@ -111,33 +68,20 @@ const ShortcutKeys: FC<{showTitle?: boolean}> = ({ showTitle }) => {
|
|||
className="vm-shortcuts-section"
|
||||
key={section.title}
|
||||
>
|
||||
{section.readMore && (
|
||||
<div className="vm-shortcuts-section__read-more">{section.readMore}</div>
|
||||
)}
|
||||
<h3 className="vm-shortcuts-section__title">
|
||||
{section.title}
|
||||
</h3>
|
||||
<div className="vm-shortcuts-section-list">
|
||||
{section.list.map(l => (
|
||||
{section.list.map((l, i) => (
|
||||
<div
|
||||
className="vm-shortcuts-section-list-item"
|
||||
key={l.keys.join("+")}
|
||||
key={`${section.title}_${i}`}
|
||||
>
|
||||
<div className="vm-shortcuts-section-list-item__key">
|
||||
{l.keys.map((k, i) => (
|
||||
<>
|
||||
<code key={k}>
|
||||
{k}
|
||||
</code>
|
||||
{i !== l.keys.length - 1 ? "+" : ""}
|
||||
</>
|
||||
))}
|
||||
{l.alt && l.alt.map((alt, i) => (
|
||||
<>
|
||||
or
|
||||
<code key={alt}>
|
||||
{alt}
|
||||
</code>
|
||||
{i !== l.alt.length - 1 ? "+" : ""}
|
||||
</>
|
||||
))}
|
||||
{l.keys}
|
||||
</div>
|
||||
<p className="vm-shortcuts-section-list-item__description">
|
||||
{l.description}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
import React from "preact/compat";
|
||||
import { isMacOs } from "../../../../utils/detect-device";
|
||||
import { VisibilityIcon } from "../../Icons";
|
||||
import GraphTips from "../../../Chart/GraphTips/GraphTips";
|
||||
|
||||
const ctrlMeta = <code>{isMacOs() ? "Cmd" : "Ctrl"}</code>;
|
||||
|
||||
const keyList = [
|
||||
{
|
||||
title: "Query",
|
||||
list: [
|
||||
{
|
||||
keys: <code>Enter</code>,
|
||||
description: "Run"
|
||||
},
|
||||
{
|
||||
keys: <><code>Shift</code> + <code>Enter</code></>,
|
||||
description: "Multi-line queries"
|
||||
},
|
||||
{
|
||||
keys: <>{ctrlMeta} + <code>Arrow Up</code></>,
|
||||
description: "Previous command from the Query history"
|
||||
},
|
||||
{
|
||||
keys: <>{ctrlMeta} + <code>Arrow Down</code></>,
|
||||
description: "Next command from the Query history"
|
||||
},
|
||||
{
|
||||
keys: <>{ctrlMeta} + <code>click</code> by <VisibilityIcon/></>,
|
||||
description: "Toggle multiple queries"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Graph",
|
||||
readMore: <GraphTips/>,
|
||||
list: [
|
||||
{
|
||||
keys: <>{ctrlMeta} + <code>scroll Up</code> or <code>+</code></>,
|
||||
description: "Zoom in"
|
||||
},
|
||||
{
|
||||
keys: <>{ctrlMeta} + <code>scroll Down</code> or <code>-</code></>,
|
||||
description: "Zoom out"
|
||||
},
|
||||
{
|
||||
keys: <>{ctrlMeta} + <code>drag</code></>,
|
||||
description: "Move the graph left/right"
|
||||
},
|
||||
{
|
||||
keys: <><code>click</code></>,
|
||||
description: "Select the series in the legend"
|
||||
},
|
||||
{
|
||||
keys: <>{ctrlMeta} + <code>click</code></>,
|
||||
description: "Toggle multiple series in the legend"
|
||||
}
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
export default keyList;
|
||||
|
|
@ -8,13 +8,20 @@
|
|||
}
|
||||
|
||||
&-section {
|
||||
margin-bottom: $padding-medium;
|
||||
position: relative;
|
||||
margin-bottom: $padding-global;
|
||||
padding-bottom: $padding-global;
|
||||
border-bottom: $border-divider;
|
||||
|
||||
&__title {
|
||||
font-weight: bold;
|
||||
padding: $padding-small 0;
|
||||
margin-bottom: $padding-global;
|
||||
border-bottom: $border-divider;
|
||||
}
|
||||
|
||||
&__read-more {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&-list {
|
||||
|
|
@ -40,6 +47,7 @@
|
|||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
svg,
|
||||
code {
|
||||
display: inline-block;
|
||||
padding: 2px $padding-small 0;
|
||||
|
|
@ -52,6 +60,11 @@
|
|||
border: $border-divider;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
|
|
|
|||
Loading…
Reference in a new issue