vmui: add a tip for JSON and Table tabs (#4000)

* feat: add a tip for JSON and Table tabs

* feat: add Hyperlink component

* fix: update Hyperlink

* fix: update link to instant query

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

@@ -0,0 +1,34 @@
+import React, { FC } from "preact/compat";
+import { ReactNode } from "react";
+import classNames from "classnames";
+
+interface Hyperlink {
+  text?: string;
+  href: string;
+  children?: ReactNode;
+  colored?: boolean;
+  underlined?: boolean;
+}
+
+const Hyperlink: FC<Hyperlink> = ({
+  text,
+  href,
+  children,
+  colored = true,
+  underlined = false
+}) => (
+  <a
+    href={href}
+    className={classNames({
+      "vm-link": true,
+      "vm-link_colored": colored,
+      "vm-link_underlined": underlined
+    })}
+    target="_blank"
+    rel="noreferrer"
+  >
+    {text || children}
+  </a>
+);
+
+export default Hyperlink;

app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTips/index.tsx

@@ -1,18 +1,9 @@
 import { TipIcon } from "../../../components/Main/Icons";
 import React, { FC } from "preact/compat";
 import { ReactNode } from "react";
+import Hyperlink from "../../../components/Main/Hyperlink/Hyperlink";
 import "./style.scss";
 
-const Link: FC<{ href: string, children: ReactNode, target?: string }> = ({ href, children, target }) => (
-  <a
-    href={href}
-    className="vm-link vm-link_colored"
-    target={target}
-  >
-    {children}
-  </a>
-);
-
 const TipCard: FC<{ title?: string, children: ReactNode }> = ({ title, children }) => (
   <div className="vm-cardinality-tip">
     <div className="vm-cardinality-tip-header">
@@ -25,50 +16,22 @@ const TipCard: FC<{ title?: string, children: ReactNode }> = ({ title, children
   </div>
 );
 
-export const TipDocumentation: FC = () => (
-  <TipCard title="Cardinality explorer">
-    <h6>Helpful for analyzing VictoriaMetrics TSDB data</h6>
-    <ul>
-      <li>
-        <Link href="https://docs.victoriametrics.com/#cardinality-explorer">
-          Cardinality explorer documentation
-        </Link>
-      </li>
-      <li>
-        See the <Link href="https://victoriametrics.com/blog/cardinality-explorer/">
-        example of using</Link> the cardinality explorer
-      </li>
-    </ul>
-  </TipCard>
-);
-
 export const TipHighNumberOfSeries: FC = () => (
   <TipCard title="Metrics with a high number of series">
     <ul>
       <li>
         Identify and eliminate labels with frequently changed values to reduce their&nbsp;
-        <Link
-          href='https://docs.victoriametrics.com/FAQ.html#what-is-high-cardinality'
-          target={"_blank"}
-        >cardinality</Link>&nbsp;and&nbsp;
-        <Link
-          href='https://docs.victoriametrics.com/FAQ.html#what-is-high-churn-rate'
-          target={"_blank"}
-        >high churn rate</Link>
+        <Hyperlink href='https://docs.victoriametrics.com/FAQ.html#what-is-high-cardinality'>cardinality</Hyperlink>
+        &nbsp;and&nbsp;
+        <Hyperlink href='https://docs.victoriametrics.com/FAQ.html#what-is-high-churn-rate'>high churn rate</Hyperlink>
       </li>
       <li>
         Find unused time series and&nbsp;
-        <Link
-          href='https://docs.victoriametrics.com/relabeling.html'
-          target={"_blank"}
-        >drop entire metrics</Link>
+        <Hyperlink href='https://docs.victoriametrics.com/relabeling.html'>drop entire metrics</Hyperlink>
       </li>
       <li>
-          Aggregate time series before they got ingested into the database via&nbsp;
-        <Link
-          href='https://docs.victoriametrics.com/stream-aggregation.html'
-          target={"_blank"}
-        >streaming aggregation</Link>
+        Aggregate time series before they got ingested into the database via&nbsp;
+        <Hyperlink href='https://docs.victoriametrics.com/stream-aggregation.html'>streaming aggregation</Hyperlink>
       </li>
     </ul>
   </TipCard>
@@ -79,12 +42,10 @@ export const TipHighNumberOfValues: FC = () => (
     <ul>
       <li>Decrease the number of unique label values to reduce cardinality</li>
       <li>Drop the label entirely via&nbsp;
-        <Link
-          href='https://docs.victoriametrics.com/relabeling.html'
-          target={"_blank"}
-        >relabeling</Link></li>
+        <Hyperlink href='https://docs.victoriametrics.com/relabeling.html'>relabeling</Hyperlink></li>
       <li>For volatile label values (such as URL path, user session, etc.)
-          consider printing them to the log file instead of adding to time series</li>
+        consider printing them to the log file instead of adding to time series
+      </li>
     </ul>
   </TipCard>
 );

app/vmui/packages/vmui/src/pages/CustomPanel/InstantQueryTip/InstantQueryTip.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from "preact/compat";
+import Hyperlink from "../../../components/Main/Hyperlink/Hyperlink";
+
+const last_over_time = <Hyperlink
+  text="last_over_time"
+  href="https://docs.victoriametrics.com/MetricsQL.html#last_over_time"
+  underlined
+/>;
+
+const instant_query = <Hyperlink
+  text="instant query"
+  href="https://docs.victoriametrics.com/keyConcepts.html#instant-query"
+  underlined
+/>;
+
+const InstantQueryTip: FC = () => (
+  <div>
+    <p>
+      This tab shows {instant_query} results for the last 5 minutes ending at the selected time range.
+    </p>
+    <p>
+      Please wrap the query into {last_over_time} if you need results over arbitrary lookbehind interval.
+    </p>
+  </div>
+);
+
+export default InstantQueryTip;

app/vmui/packages/vmui/src/pages/CustomPanel/index.tsx

@@ -22,6 +22,7 @@ import TableView from "../../components/Views/TableView/TableView";
 import Button from "../../components/Main/Button/Button";
 import classNames from "classnames";
 import useDeviceDetect from "../../hooks/useDeviceDetect";
+import InstantQueryTip from "./InstantQueryTip/InstantQueryTip";
 
 const CustomPanel: FC = () => {
   const { displayType, isTracingEnabled } = useCustomPanelState();
@@ -120,6 +121,7 @@ const CustomPanel: FC = () => {
       )}
       {isLoading && <Spinner />}
       {!hideError && error && <Alert variant="error">{error}</Alert>}
+      {!liveData?.length && (displayType !== "chart") && <Alert variant="info"><InstantQueryTip/></Alert>}
       {warning && <Alert variant="warning">
         <div
           className={classNames({

app/vmui/packages/vmui/src/styles/components/link.scss

@@ -8,6 +8,10 @@
     color: $color-primary;
   }
 
+  &_underlined {
+    text-decoration: underline;
+  }
+
   &_with-icon {
     display: grid;
     align-items: center;