diff --git a/app/vmui/packages/vmui/src/components/Chart/GraphTips/contants/tips.tsx b/app/vmui/packages/vmui/src/components/Chart/GraphTips/contants/tips.tsx index bf096b91c..6957d3f8c 100644 --- a/app/vmui/packages/vmui/src/components/Chart/GraphTips/contants/tips.tsx +++ b/app/vmui/packages/vmui/src/components/Chart/GraphTips/contants/tips.tsx @@ -51,15 +51,16 @@ const legendTips = [ }, { - title: "Copy key-value pairs", + title: "Copy label key-value pairs", description: <> - click on a key-value pair to save it to the clipboard. + click on a label key-value pair to save it to the clipboard. }, { title: "Collapse/Expand the legend group", description: <> - click on the group name (e.g. Query 1: {name!=""}) to collapse or expand the legend. + click on the group name (e.g. Query 1: {__name__!=""}) + to collapse or expand the legend. }, ]; diff --git a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx index 1f2f589f2..3da26c034 100644 --- a/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx +++ b/app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx @@ -1,77 +1,18 @@ -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 ShortcutKeys: FC<{ showTitle?: boolean }> = ({ showTitle }) => { const [openList, setOpenList] = useState(false); const appModeEnable = getAppModeEnable(); @@ -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 <>