diff --git a/clickhouse/package.json b/clickhouse/package.json index a1a81d98a..1ce127119 100644 --- a/clickhouse/package.json +++ b/clickhouse/package.json @@ -19,11 +19,11 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^3.2.0", - "@perses-dev/components": "^0.53.1", - "@perses-dev/core": "^0.53.0", - "@perses-dev/dashboards": "^0.53.1", - "@perses-dev/explore": "^0.53.1", - "@perses-dev/plugin-system": "^0.53.1", + "@perses-dev/components": "^0.54.0-beta.0", + "@perses-dev/core": "^0.54.0-beta.0", + "@perses-dev/dashboards": "^0.54.0-beta.0", + "@perses-dev/explore": "^0.54.0-beta.0", + "@perses-dev/plugin-system": "^0.54.0-beta.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", diff --git a/clickhouse/src/queries/click-house-log-query/ClickHouseLogQueryEditor.tsx b/clickhouse/src/queries/click-house-log-query/ClickHouseLogQueryEditor.tsx index 6a426e7ad..ced1283b0 100644 --- a/clickhouse/src/queries/click-house-log-query/ClickHouseLogQueryEditor.tsx +++ b/clickhouse/src/queries/click-house-log-query/ClickHouseLogQueryEditor.tsx @@ -20,6 +20,7 @@ import { import { ReactElement, useCallback } from 'react'; import { produce } from 'immer'; import { Stack } from '@mui/material'; +import { createModEnterHandler } from '@perses-dev/dashboards'; import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants'; import { ClickQLEditor } from '../../components'; import { queryExample } from '../../components/constants'; @@ -86,12 +87,7 @@ export function ClickHouseLogQueryEditor(props: ClickHouseQueryEditorProps): Rea value={query} onChange={handleClickHouseQueryChange} onBlur={handleQueryBlur} - onKeyDown={(event) => { - if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) { - event.preventDefault(); - handleQueryExecute(query); - } - }} + onKeyDown={createModEnterHandler(() => handleQueryExecute(query))} placeholder="Enter ClickHouse SQL query" /> diff --git a/clickhouse/src/queries/click-house-time-series-query/ClickHouseQueryEditor.tsx b/clickhouse/src/queries/click-house-time-series-query/ClickHouseQueryEditor.tsx index 45871c9b8..5df4e9439 100644 --- a/clickhouse/src/queries/click-house-time-series-query/ClickHouseQueryEditor.tsx +++ b/clickhouse/src/queries/click-house-time-series-query/ClickHouseQueryEditor.tsx @@ -20,6 +20,7 @@ import { import { ReactElement, useCallback } from 'react'; import { produce } from 'immer'; import { Stack } from '@mui/material'; +import { createModEnterHandler } from '@perses-dev/dashboards'; import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants'; import { ClickQLEditor } from '../../components'; import { queryExample } from '../../components/constants'; @@ -86,12 +87,7 @@ export function ClickHouseTimeSeriesQueryEditor(props: ClickHouseTimeSeriesQuery value={query} onChange={handleClickHouseQueryChange} onBlur={handleQueryBlur} - onKeyDown={(event) => { - if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) { - event.preventDefault(); - handleQueryExecute(query); - } - }} + onKeyDown={createModEnterHandler(() => handleQueryExecute(query))} placeholder="Enter ClickHouse SQL query" /> diff --git a/logstable/package.json b/logstable/package.json index bd74ed857..d3915b47c 100644 --- a/logstable/package.json +++ b/logstable/package.json @@ -27,10 +27,10 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^3.2.0", - "@perses-dev/components": "^0.53.1", - "@perses-dev/core": "^0.53.0", - "@perses-dev/plugin-system": "^0.53.1", - "@perses-dev/dashboards": "^0.53.1", + "@perses-dev/components": "^0.54.0-beta.0", + "@perses-dev/core": "^0.54.0-beta.0", + "@perses-dev/plugin-system": "^0.54.0-beta.0", + "@perses-dev/dashboards": "^0.54.0-beta.0", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", "echarts": "5.5.0", diff --git a/logstable/src/components/VirtualizedLogsList.tsx b/logstable/src/components/VirtualizedLogsList.tsx index 470f5a342..9317f2a1b 100644 --- a/logstable/src/components/VirtualizedLogsList.tsx +++ b/logstable/src/components/VirtualizedLogsList.tsx @@ -17,7 +17,7 @@ import CloseIcon from 'mdi-material-ui/Close'; import { Virtuoso } from 'react-virtuoso'; import { LogEntry } from '@perses-dev/core'; import { useSelection } from '@perses-dev/components'; -import { useSelectionItemActions } from '@perses-dev/dashboards'; +import { formatForDisplay, useSelectionItemActions } from '@perses-dev/dashboards'; import { ActionOptions, useAllVariableValues } from '@perses-dev/plugin-system'; import { formatLogEntries, formatLogMessage } from '../utils/copyHelpers'; import { LogsTableOptions } from '../model'; @@ -26,8 +26,8 @@ import { LogRow } from './LogRow'; const PERSES_LOGSTABLE_HINTS_DISMISSED = 'PERSES_LOGSTABLE_HINTS_DISMISSED'; const COPY_TOAST_DURATION_MS = 5000; -// Detect Mac for keyboard shortcuts display -const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent); +// Platform-aware modifier key display using TanStack's formatForDisplay +const modKeyDisplay = formatForDisplay('Mod'); interface VirtualizedLogsListProps { logs: LogEntry[]; @@ -324,7 +324,7 @@ export const VirtualizedLogsList: React.FC = ({ > - {isMac ? '⌘' : 'Ctrl'}+Click to select + {modKeyDisplay}+Click to select • @@ -336,7 +336,7 @@ export const VirtualizedLogsList: React.FC = ({ • - {isMac ? '⌘' : 'Ctrl'}+C to copy + {modKeyDisplay}+C to copy • diff --git a/loki/package.json b/loki/package.json index e07f09955..d61ab250d 100644 --- a/loki/package.json +++ b/loki/package.json @@ -22,11 +22,11 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^3.2.0", - "@perses-dev/components": "^0.53.1", - "@perses-dev/core": "^0.53.0", - "@perses-dev/dashboards": "^0.53.1", - "@perses-dev/explore": "^0.53.1", - "@perses-dev/plugin-system": "^0.53.1", + "@perses-dev/components": "^0.54.0-beta.0", + "@perses-dev/core": "^0.54.0-beta.0", + "@perses-dev/dashboards": "^0.54.0-beta.0", + "@perses-dev/explore": "^0.54.0-beta.0", + "@perses-dev/plugin-system": "^0.54.0-beta.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", diff --git a/loki/src/queries/loki-log-query/LokiLogQueryEditor.tsx b/loki/src/queries/loki-log-query/LokiLogQueryEditor.tsx index f004d8f09..bfcae944d 100644 --- a/loki/src/queries/loki-log-query/LokiLogQueryEditor.tsx +++ b/loki/src/queries/loki-log-query/LokiLogQueryEditor.tsx @@ -24,6 +24,7 @@ import { InputLabel, Stack, ToggleButton, ToggleButtonGroup } from '@mui/materia import { ReactElement, useCallback, useMemo } from 'react'; import { produce } from 'immer'; import { OptionsEditorControl } from '@perses-dev/components'; +import { createModEnterHandler } from '@perses-dev/dashboards'; import { LogQLEditor } from '../../components'; import { isDefaultLokiSelector, LOKI_DATASOURCE_KIND, LokiDatasourceSelector, LokiClient } from '../../model'; import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants'; @@ -128,12 +129,7 @@ export function LokiLogQueryEditor(props: LokiQueryEditorProps): ReactElement { value={query} onChange={handleLogsQueryChange} onBlur={handleQueryBlur} - onKeyDown={(event) => { - if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) { - event.preventDefault(); - handleQueryExecute(query); - } - }} + onKeyDown={createModEnterHandler(() => handleQueryExecute(query))} placeholder='Enter LogQL query (e.g. {job="mysql"} |= "error")' completionConfig={completionConfig} // height="120px" diff --git a/loki/src/queries/loki-time-series-query/LokiTimeSeriesQueryEditor.tsx b/loki/src/queries/loki-time-series-query/LokiTimeSeriesQueryEditor.tsx index 47cb66d04..90cb5ff34 100644 --- a/loki/src/queries/loki-time-series-query/LokiTimeSeriesQueryEditor.tsx +++ b/loki/src/queries/loki-time-series-query/LokiTimeSeriesQueryEditor.tsx @@ -20,6 +20,7 @@ import { } from '@perses-dev/plugin-system'; import { InputLabel, Stack } from '@mui/material'; import { ReactElement, useCallback } from 'react'; +import { createModEnterHandler } from '@perses-dev/dashboards'; import { produce } from 'immer'; import { LogQLEditor } from '../../components'; import { LOKI_DATASOURCE_KIND, LokiDatasourceSelector } from '../../model'; @@ -103,12 +104,7 @@ export function LokiQueryEditor(props: LokiQueryEditorProps): ReactElement { value={query} onChange={handleLogsQueryChange} onBlur={handleQueryBlur} - onKeyDown={(event) => { - if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) { - event.preventDefault(); - handleQueryExecute(query); - } - }} + onKeyDown={createModEnterHandler(() => handleQueryExecute(query))} placeholder='Enter LogQL query (e.g. {job="mysql"} |= "error")' // height="120px" /> diff --git a/package.json b/package.json index baca5eefa..9238f3bba 100644 --- a/package.json +++ b/package.json @@ -43,12 +43,12 @@ "react-dom": "^17.0.2 || ^18.0.0" }, "devDependencies": { - "@module-federation/rsbuild-plugin": "^2.3.3", - "@perses-dev/components": "^0.53.1", - "@perses-dev/core": "^0.53.0", - "@perses-dev/dashboards": "^0.53.1", - "@perses-dev/explore": "^0.53.1", - "@perses-dev/plugin-system": "^0.53.1", + "@module-federation/rsbuild-plugin": "^0.21.6", + "@perses-dev/components": "^0.54.0-beta.0", + "@perses-dev/core": "^0.54.0-beta.0", + "@perses-dev/dashboards": "^0.54.0-beta.0", + "@perses-dev/explore": "^0.54.0-beta.0", + "@perses-dev/plugin-system": "^0.54.0-beta.0", "@rsbuild/core": "^1.6.7", "@rsbuild/plugin-react": "^1.4.2", "@swc/cli": "^0.8.1", diff --git a/victorialogs/package.json b/victorialogs/package.json index 8aa738f00..3df8a2b86 100644 --- a/victorialogs/package.json +++ b/victorialogs/package.json @@ -22,11 +22,11 @@ "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@hookform/resolvers": "^3.2.0", - "@perses-dev/components": "^0.53.1", - "@perses-dev/core": "^0.53.0", - "@perses-dev/dashboards": "^0.53.1", - "@perses-dev/explore": "^0.53.1", - "@perses-dev/plugin-system": "^0.53.1", + "@perses-dev/components": "^0.54.0-beta.0", + "@perses-dev/core": "^0.54.0-beta.0", + "@perses-dev/dashboards": "^0.54.0-beta.0", + "@perses-dev/explore": "^0.54.0-beta.0", + "@perses-dev/plugin-system": "^0.54.0-beta.0", "@tanstack/react-query": "^4.39.1", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", diff --git a/victorialogs/src/queries/victorialogs-log-query/VictoriaLogsLogQueryEditor.tsx b/victorialogs/src/queries/victorialogs-log-query/VictoriaLogsLogQueryEditor.tsx index 8006baa5e..0b242272e 100644 --- a/victorialogs/src/queries/victorialogs-log-query/VictoriaLogsLogQueryEditor.tsx +++ b/victorialogs/src/queries/victorialogs-log-query/VictoriaLogsLogQueryEditor.tsx @@ -20,6 +20,7 @@ import { } from '@perses-dev/plugin-system'; import { InputLabel, Stack } from '@mui/material'; import { ReactElement, useCallback, useState, useEffect } from 'react'; +import { createModEnterHandler } from '@perses-dev/dashboards'; import { LogsQLEditor } from '../../components/logsql-editor'; import { VICTORIALOGS_DATASOURCE_KIND, VictoriaLogsDatasourceSelector } from '../../model'; import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants'; @@ -104,12 +105,7 @@ export function VictoriaLogsLogQueryEditor(props: VictoriaLogsQueryEditorProps): value={localQuery} onChange={handleQueryChange} onBlur={() => handleQueryExecute(localQuery)} - onKeyDown={(event) => { - if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) { - event.preventDefault(); - handleQueryExecute(localQuery); - } - }} + onKeyDown={createModEnterHandler(() => handleQueryExecute(localQuery))} placeholder='Enter LogsQL query (e.g. {job="mysql"} |= "error")' // height="120px" /> diff --git a/victorialogs/src/queries/victorialogs-time-series-query/VictoriaLogsTimeSeriesQueryEditor.tsx b/victorialogs/src/queries/victorialogs-time-series-query/VictoriaLogsTimeSeriesQueryEditor.tsx index 4050ff708..63b714ca7 100644 --- a/victorialogs/src/queries/victorialogs-time-series-query/VictoriaLogsTimeSeriesQueryEditor.tsx +++ b/victorialogs/src/queries/victorialogs-time-series-query/VictoriaLogsTimeSeriesQueryEditor.tsx @@ -20,6 +20,7 @@ import { } from '@perses-dev/plugin-system'; import { InputLabel, Stack } from '@mui/material'; import { ReactElement, useCallback, useState, useEffect } from 'react'; +import { createModEnterHandler } from '@perses-dev/dashboards'; import { LogsQLEditor } from '../../components/logsql-editor'; import { VICTORIALOGS_DATASOURCE_KIND, VictoriaLogsDatasourceSelector } from '../../model'; import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants'; @@ -101,12 +102,7 @@ export function VictoriaLogsQueryEditor(props: VictoriaLogsQueryEditorProps): Re value={localQuery} onChange={handleQueryChange} onBlur={() => handleQueryExecute(localQuery)} - onKeyDown={(event) => { - if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) { - event.preventDefault(); - handleQueryExecute(localQuery); - } - }} + onKeyDown={createModEnterHandler(() => handleQueryExecute(localQuery))} placeholder='Enter LogsQL query (e.g. {job="mysql"} |= "error")' // height="120px" />