diff --git a/app/vmui/packages/vmui/src/pages/TopQueries/TopQueryPanel/TopQueryPanel.tsx b/app/vmui/packages/vmui/src/pages/TopQueries/TopQueryPanel/TopQueryPanel.tsx index 140852e7a..df3598510 100644 --- a/app/vmui/packages/vmui/src/pages/TopQueries/TopQueryPanel/TopQueryPanel.tsx +++ b/app/vmui/packages/vmui/src/pages/TopQueries/TopQueryPanel/TopQueryPanel.tsx @@ -11,7 +11,7 @@ import useDeviceDetect from "../../../hooks/useDeviceDetect"; export interface TopQueryPanelProps { rows: TopQuery[], title?: string, - columns: {title?: string, key: (keyof TopQuery)}[], + columns: {title?: string, key: (keyof TopQuery), sortBy?: (keyof TopQuery)}[], defaultOrderBy?: keyof TopQuery, } const tabs = ["table", "JSON"].map((t, i) => ({ diff --git a/app/vmui/packages/vmui/src/pages/TopQueries/TopQueryTable/TopQueryTable.tsx b/app/vmui/packages/vmui/src/pages/TopQueries/TopQueryTable/TopQueryTable.tsx index 02df010fc..565c43ebd 100644 --- a/app/vmui/packages/vmui/src/pages/TopQueries/TopQueryTable/TopQueryTable.tsx +++ b/app/vmui/packages/vmui/src/pages/TopQueries/TopQueryTable/TopQueryTable.tsx @@ -3,14 +3,20 @@ import { TopQuery } from "../../../types"; import { getComparator, stableSort } from "../../CardinalityPanel/Table/helpers"; import { TopQueryPanelProps } from "../TopQueryPanel/TopQueryPanel"; import classNames from "classnames"; -import { ArrowDropDownIcon } from "../../../components/Main/Icons"; +import { ArrowDropDownIcon, CopyIcon, PlayCircleOutlineIcon } from "../../../components/Main/Icons"; +import Button from "../../../components/Main/Button/Button"; +import Tooltip from "../../../components/Main/Tooltip/Tooltip"; +import { useSnack } from "../../../contexts/Snackbar"; +import { Link } from "react-router-dom"; +import router from "../../../router"; const TopQueryTable:FC = ({ rows, columns, defaultOrderBy }) => { + const { showInfoMessage } = useSnack(); const [orderBy, setOrderBy] = useState(defaultOrderBy || "count"); const [orderDir, setOrderDir] = useState<"asc" | "desc">("desc"); - const sortedList = useMemo(() => stableSort(rows as [], getComparator(orderDir, orderBy)), + const sortedList = useMemo(() => stableSort(rows as [], getComparator(orderDir, orderBy)) as TopQuery[], [rows, orderBy, orderDir]); const onSortHandler = (key: keyof TopQuery) => { @@ -22,6 +28,12 @@ const TopQueryTable:FC = ({ rows, columns, defaultOrderBy }) onSortHandler(col); }; + const createCopyHandler = ({ query }: TopQuery) => () => { + // TODO add useCopyToClipboard after merge https://github.com/VictoriaMetrics/VictoriaMetrics/pull/4145 + navigator.clipboard.writeText(query); + showInfoMessage({ text: "Query has been copied", type: "success" }); + }; + return ( @@ -29,7 +41,7 @@ const TopQueryTable:FC = ({ rows, columns, defaultOrderBy }) {columns.map((col) => ( ))} + @@ -62,6 +75,31 @@ const TopQueryTable:FC = ({ rows, columns, defaultOrderBy }) {row[col.key] || "-"} ))} + ))} diff --git a/app/vmui/packages/vmui/src/pages/TopQueries/hooks/useFetchTopQueries.ts b/app/vmui/packages/vmui/src/pages/TopQueries/hooks/useFetchTopQueries.ts index e09959318..f1e7db65d 100644 --- a/app/vmui/packages/vmui/src/pages/TopQueries/hooks/useFetchTopQueries.ts +++ b/app/vmui/packages/vmui/src/pages/TopQueries/hooks/useFetchTopQueries.ts @@ -5,6 +5,7 @@ import { useMemo } from "preact/compat"; import { getTopQueries } from "../../../api/top-queries"; import { TopQueriesData } from "../../../types"; import { useTopQueriesState } from "../../../state/topQueries/TopQueriesStateContext"; +import { getDurationFromMilliseconds } from "../../../utils/time"; export const useFetchTopQueries = () => { const { serverUrl } = useAppState(); @@ -26,7 +27,7 @@ export const useFetchTopQueries = () => { list.forEach(key => { const target = resp[key]; if (Array.isArray(target)) { - target.forEach(t => t.timeRangeHours = +(t.timeRangeSeconds/3600).toFixed(2)); + target.forEach(t => t.timeRange = getDurationFromMilliseconds(t.timeRangeSeconds*1000)); } }); } diff --git a/app/vmui/packages/vmui/src/pages/TopQueries/index.tsx b/app/vmui/packages/vmui/src/pages/TopQueries/index.tsx index c34a87067..ddd026cb2 100644 --- a/app/vmui/packages/vmui/src/pages/TopQueries/index.tsx +++ b/app/vmui/packages/vmui/src/pages/TopQueries/index.tsx @@ -147,7 +147,7 @@ const TopQueries: FC = () => { title={"Most frequently executed queries"} columns={[ { key: "query" }, - { key: "timeRangeHours", title: "time range, hours" }, + { key: "timeRange", sortBy: "timeRangeSeconds", title: "Query Time Interval" }, { key: "count" } ]} /> @@ -156,8 +156,8 @@ const TopQueries: FC = () => { title={"Most heavy queries"} columns={[ { key: "query" }, - { key: "avgDurationSeconds", title: "avg duration, seconds" }, - { key: "timeRangeHours", title: "time range, hours" }, + { key: "avgDurationSeconds", title: "avg duration, sec" }, + { key: "timeRange", sortBy: "timeRangeSeconds", title: "Query Time Interval" }, { key: "count" } ]} defaultOrderBy={"avgDurationSeconds"} @@ -167,8 +167,8 @@ const TopQueries: FC = () => { title={"Queries with most summary time to execute"} columns={[ { key: "query" }, - { key: "sumDurationSeconds", title: "sum duration, seconds" }, - { key: "timeRangeHours", title: "time range, hours" }, + { key: "sumDurationSeconds", title: "sum duration, sec" }, + { key: "timeRange", sortBy: "timeRangeSeconds", title: "Query Time Interval" }, { key: "count" } ]} defaultOrderBy={"sumDurationSeconds"} diff --git a/app/vmui/packages/vmui/src/pages/TopQueries/style.scss b/app/vmui/packages/vmui/src/pages/TopQueries/style.scss index dd55a72de..675bdad95 100644 --- a/app/vmui/packages/vmui/src/pages/TopQueries/style.scss +++ b/app/vmui/packages/vmui/src/pages/TopQueries/style.scss @@ -51,5 +51,14 @@ &-panels { display: grid; gap: $padding-medium; + + &__table-actions { + display: flex; + align-items: center; + justify-content: flex-end; + gap: $padding-small; + height: 100%; + padding: 0 $padding-small; + } } } diff --git a/app/vmui/packages/vmui/src/styles/components/table.scss b/app/vmui/packages/vmui/src/styles/components/table.scss index b9bbedd2a..68c26fc8c 100644 --- a/app/vmui/packages/vmui/src/styles/components/table.scss +++ b/app/vmui/packages/vmui/src/styles/components/table.scss @@ -31,6 +31,7 @@ height: 40px; vertical-align: top; line-height: 1.5; + overflow-wrap: anywhere; &__content { display: flex; @@ -68,6 +69,10 @@ &_no-wrap { white-space: nowrap; } + + &_no-padding { + padding: 0; + } } &__sort-icon { diff --git a/app/vmui/packages/vmui/src/types/index.ts b/app/vmui/packages/vmui/src/types/index.ts index 7884da2a8..8df6df748 100644 --- a/app/vmui/packages/vmui/src/types/index.ts +++ b/app/vmui/packages/vmui/src/types/index.ts @@ -86,7 +86,7 @@ export interface TopQuery { query: string timeRangeSeconds: number sumDurationSeconds: number - timeRangeHours: number + timeRange: string } export interface TopQueryStats { diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index aa2c6b29e..efc399596 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -45,6 +45,7 @@ The following tip changes can be tested by building VictoriaMetrics components f * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): display histograms as heatmaps in [Metrics explorer](https://docs.victoriametrics.com/#metrics-explorer). See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4111). * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add `WITH template` playground. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3811). * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add ability to debug relabeling. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3807). +* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add an ability to copy and execute queries listed at [top queries](https://docs.victoriametrics.com/#top-queries) page. Also make more human readable the query duration column. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4292) and [this pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/4299). * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): increase default font size for better readability. * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): [cardinality explorer](https://docs.victoriametrics.com/#cardinality-explorer): return back a table with labels containing the highest number of unique label values. See [issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4213). * FEATURE: [vmbackup](https://docs.victoriametrics.com/vmbackup.html): add `-s3StorageClass` command-line flag for setting the storage class for AWS S3 backups. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4164). Thanks to @justcompile for the [pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/4166).
@@ -46,6 +58,7 @@ const TopQueryTable:FC = ({ rows, columns, defaultOrderBy })
{/* empty cell for actions */}
+
+ + +
+