diff --git a/app/vmui/packages/vmui/src/components/Main/Hyperlink/Hyperlink.tsx b/app/vmui/packages/vmui/src/components/Main/Hyperlink/Hyperlink.tsx new file mode 100644 index 0000000000..c1cd58e3fe --- /dev/null +++ b/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 = ({ + text, + href, + children, + colored = true, + underlined = false +}) => ( + + {text || children} + +); + +export default Hyperlink; diff --git a/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTips/index.tsx b/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTips/index.tsx index 4d4be5d712..51dd4822fa 100644 --- a/app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTips/index.tsx +++ b/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 }) => ( - - {children} - -); - const TipCard: FC<{ title?: string, children: ReactNode }> = ({ title, children }) => (
@@ -25,50 +16,22 @@ const TipCard: FC<{ title?: string, children: ReactNode }> = ({ title, children
); -export const TipDocumentation: FC = () => ( - -
Helpful for analyzing VictoriaMetrics TSDB data
-
    -
  • - - Cardinality explorer documentation - -
  • -
  • - See the - example of using the cardinality explorer -
  • -
-
-); - export const TipHighNumberOfSeries: FC = () => (
  • Identify and eliminate labels with frequently changed values to reduce their  - cardinality and  - high churn rate + cardinality +  and  + high churn rate
  • Find unused time series and  - drop entire metrics + drop entire metrics
  • - Aggregate time series before they got ingested into the database via  - streaming aggregation + Aggregate time series before they got ingested into the database via  + streaming aggregation
@@ -79,12 +42,10 @@ export const TipHighNumberOfValues: FC = () => ( ); diff --git a/app/vmui/packages/vmui/src/pages/CustomPanel/InstantQueryTip/InstantQueryTip.tsx b/app/vmui/packages/vmui/src/pages/CustomPanel/InstantQueryTip/InstantQueryTip.tsx new file mode 100644 index 0000000000..1b09110f78 --- /dev/null +++ b/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 = ; + +const instant_query = ; + +const InstantQueryTip: FC = () => ( +
+

+ This tab shows {instant_query} results for the last 5 minutes ending at the selected time range. +

+

+ Please wrap the query into {last_over_time} if you need results over arbitrary lookbehind interval. +

+
+); + +export default InstantQueryTip; diff --git a/app/vmui/packages/vmui/src/pages/CustomPanel/index.tsx b/app/vmui/packages/vmui/src/pages/CustomPanel/index.tsx index b731e55b48..cf15cae010 100644 --- a/app/vmui/packages/vmui/src/pages/CustomPanel/index.tsx +++ b/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 && } {!hideError && error && {error}} + {!liveData?.length && (displayType !== "chart") && } {warning &&