app/vmui: help button for shortcuts and controls (#839)

Co-authored-by: Aliaksandr Valialkin <[email protected]>

Author: Loori-R

app/vmui/packages/vmui/src/components/Chart/BarHitsChart/BarHitsOptions/BarHitsOptions.tsx

@@ -5,10 +5,11 @@ import "./style.scss";
 import useStateSearchParams from "../../../../hooks/useStateSearchParams";
 import { useSearchParams } from "react-router-dom";
 import Button from "../../../Main/Button/Button";
-import { SettingsIcon, VisibilityIcon, VisibilityOffIcon } from "../../../Main/Icons";
+import { SettingsIcon, TipIcon, VisibilityIcon, VisibilityOffIcon } from "../../../Main/Icons";
 import Tooltip from "../../../Main/Tooltip/Tooltip";
 import Popper from "../../../Main/Popper/Popper";
 import useBoolean from "../../../../hooks/useBoolean";
+import ShortcutKeys from "../../../Main/ShortcutKeys/ShortcutKeys";
 
 interface Props {
   onChange: (options: GraphOptions) => void;
@@ -61,6 +62,13 @@ const BarHitsOptions: FC<Props> = ({ onChange }) => {
 
   return (
     <div className="vm-bar-hits-options">
+      <ShortcutKeys>
+        <Button
+          variant="text"
+          color="gray"
+          startIcon={<TipIcon/>}
+        />
+      </ShortcutKeys>
       <div ref={optionsButtonRef}>
         <Tooltip title="Graph settings">
           <Button

app/vmui/packages/vmui/src/components/Chart/GraphTips/GraphTips.tsx

@@ -1,7 +1,4 @@
-import { FC, useCallback } from "preact/compat";
-import { getAppModeEnable } from "../../../utils/app-mode";
-import Button from "../Button/Button";
-import { KeyboardIcon } from "../Icons";
+import { FC, ReactNode, useCallback } from "preact/compat";
 import Modal from "../Modal/Modal";
 import "./style.scss";
 import Tooltip from "../Tooltip/Tooltip";
@@ -14,8 +11,11 @@ const title = "Shortcut keys";
 const isMac = isMacOs();
 const keyOpenHelp = isMac ? "Cmd + /" : "F1";
 
-const ShortcutKeys: FC<{ showTitle?: boolean }> = ({ showTitle }) => {
-  const appModeEnable = getAppModeEnable();
+type Props = {
+  children?: ReactNode
+}
+
+const ShortcutKeys: FC<Props> = ({ children }) => {
 
   const {
     value: openList,
@@ -35,20 +35,12 @@ const ShortcutKeys: FC<{ showTitle?: boolean }> = ({ showTitle }) => {
 
   return <>
     <Tooltip
-      open={showTitle === true ? false : undefined}
       title={`${title} (${keyOpenHelp})`}
       placement="bottom-center"
     >
-      <Button
-        className={appModeEnable ? "" : "vm-header-button"}
-        variant="contained"
-        color="primary"
-        startIcon={<KeyboardIcon/>}
-        onClick={handleOpen}
-        ariaLabel={title}
-      >
-        {showTitle && title}
-      </Button>
+      <div onClick={handleOpen}>
+        {children}
+      </div>
     </Tooltip>
 
     {openList && (
@@ -62,9 +54,6 @@ 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>

app/vmui/packages/vmui/src/components/Chart/GraphTips/constants/tips.tsx

@@ -1,6 +1,4 @@
 import { isMacOs } from "../../../../utils/detect-device";
-import { VisibilityIcon } from "../../Icons";
-import GraphTips from "../../../Chart/GraphTips/GraphTips";
 
 const ctrlMeta = <code>{isMacOs() ? "Cmd" : "Ctrl"}</code>;
 
@@ -26,10 +24,6 @@ const keyList = [
         keys: <>{ctrlMeta} + <code>Arrow Down</code></>,
         description: "Next command from the Query history"
       },
-      {
-        keys: <>{ctrlMeta} + <code>click</code> by <VisibilityIcon/></>,
-        description: "Toggle multiple queries"
-      },
       {
         keys: AUTOCOMPLETE_QUICK_KEY,
         description: "Show quick autocomplete tips"
@@ -38,7 +32,6 @@ const keyList = [
   },
   {
     title: "Graph",
-    readMore: <GraphTips/>,
     list: [
       {
         keys: <>{ctrlMeta} + <code>scroll Up</code> or <code>+</code></>,
@@ -53,12 +46,8 @@ const keyList = [
         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"
+        keys: <><code>click</code> on legend item</>,
+        description: "Open the legend item menu"
       }
     ]
   },

app/vmui/packages/vmui/src/components/Chart/GraphTips/style.scss

@@ -15,15 +15,10 @@
 
     &__title {
       font-weight: bold;
+      line-height: 24px;
       margin-bottom: $padding-global;
     }
 
-    &__read-more {
-      position: absolute;
-      top: -8px;
-      right: 0;
-    }
-
     &-list {
       display: grid;
       gap: $padding-global;

app/vmui/packages/vmui/src/components/Main/ShortcutKeys/ShortcutKeys.tsx

@@ -5,8 +5,13 @@ import { ControlsProps } from "../Header/HeaderControls/HeaderControls";
 import { TimeSelector } from "../../components/Configurators/TimeRangeSettings/TimeSelector/TimeSelector";
 import TenantsFields from "../../components/Configurators/GlobalSettings/TenantsConfiguration/TenantsFields";
 import { ExecutionControls } from "../../components/Configurators/TimeRangeSettings/ExecutionControls/ExecutionControls";
+import ShortcutKeys from "../../components/Main/ShortcutKeys/ShortcutKeys";
+import { getAppModeEnable } from "../../utils/app-mode";
+import Button from "../../components/Main/Button/Button";
+import { KeyboardIcon } from "../../components/Main/Icons";
 
 const ControlsLogsLayout: FC<ControlsProps> = ({ isMobile, headerSetup }) => {
+  const appModeEnable = getAppModeEnable();
   const settingsRef = useRef<GlobalSettingsHandle>(null);
 
   return (
@@ -21,6 +26,16 @@ const ControlsLogsLayout: FC<ControlsProps> = ({ isMobile, headerSetup }) => {
       {headerSetup?.timeSelector && <TimeSelector onOpenSettings={settingsRef?.current?.open}/>}
       {headerSetup?.executionControls &&  <ExecutionControls/>}
       <GlobalSettings ref={settingsRef}/>
+      {!isMobile && (
+        <ShortcutKeys>
+          <Button
+            className={appModeEnable ? "" : "vm-header-button"}
+            variant="contained"
+            color="primary"
+            startIcon={<KeyboardIcon/>}
+          />
+        </ShortcutKeys>
+      )}
     </div>
   );
 };

app/vmui/packages/vmui/src/components/Main/ShortcutKeys/constants/keyList.tsx

@@ -22,6 +22,7 @@ according to the follosing docs:
 ## tip
 
 * FEATURE: [syslog data ingestion](https://docs.victoriametrics.com/victorialogs/data-ingestion/syslog/): add support for automatic parsing of [`@cee` messages](http://cee.mitre.org/language/1.0-beta1/clt.html#syslog). Thanks to @exherb for the pull request [#842](https://github.com/VictoriaMetrics/VictoriaLogs/pull/842).
+* FEATURE: [web UI](https://docs.victoriametrics.com/victorialogs/querying/#web-ui): add the help button with shortcuts reference and controls for charts and query input. See [#77](https://github.com/VictoriaMetrics/VictoriaLogs/issues/77).
 
 * BUGFIX: [delete API](https://docs.victoriametrics.com/victorialogs/#how-to-delete-logs): prevent from possible fatal error (panic) at `block_stream_merger.go:237` during the deletion of the logs. See [#825](https://github.com/VictoriaMetrics/VictoriaLogs/issues/825).