Skip to content

[ENHANCEMENT]: Use shared utilities for keyboard shortcuts in plugins #630

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ibakshay wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

[ENHANCEMENT]: Use shared utilities for keyboard shortcuts in plugins #630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions clickhouse/src/queries/click-house-log-query/ClickHouseLogQueryEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
import { ReactElement, useCallback } from 'react';
import { produce } from 'immer';
import { Stack } from '@mui/material';
import { createModEnterHandler } from '@perses-dev/components';
import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';
import { ClickQLEditor } from '../../components';
import { queryExample } from '../../components/constants';
Expand Down Expand Up @@ -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"
/>

Expand Down
8 changes: 2 additions & 6 deletions clickhouse/src/queries/click-house-time-series-query/ClickHouseQueryEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
import { ReactElement, useCallback } from 'react';
import { produce } from 'immer';
import { Stack } from '@mui/material';
import { createModEnterHandler } from '@perses-dev/components';
import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';
import { ClickQLEditor } from '../../components';
import { queryExample } from '../../components/constants';
Expand Down Expand Up @@ -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"
/>

Expand Down
10 changes: 5 additions & 5 deletions logstable/src/components/VirtualizedLogsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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[];
Expand Down Expand Up @@ -324,7 +324,7 @@ export const VirtualizedLogsList: React.FC<VirtualizedLogsListProps> = ({
>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flex: 1 }}>
<Box component="span" sx={{ opacity: 0.8 }}>
{isMac ? '⌘' : 'Ctrl'}+Click to select
{modKeyDisplay}+Click to select
</Box>
<Box component="span" sx={{ opacity: 0.6 }}>
•
Expand All @@ -336,7 +336,7 @@ export const VirtualizedLogsList: React.FC<VirtualizedLogsListProps> = ({
•
</Box>
<Box component="span" sx={{ opacity: 0.8 }}>
{isMac ? '⌘' : 'Ctrl'}+C to copy
{modKeyDisplay}+C to copy
</Box>
<Box component="span" sx={{ opacity: 0.6 }}>
•
Expand Down
9 changes: 2 additions & 7 deletions loki/src/queries/loki-log-query/LokiLogQueryEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
import { InputLabel, Stack, ToggleButton, ToggleButtonGroup } from '@mui/material';
import { ReactElement, useCallback, useMemo } from 'react';
import { produce } from 'immer';
import { OptionsEditorControl } from '@perses-dev/components';
import { OptionsEditorControl, createModEnterHandler } from '@perses-dev/components';
import { LogQLEditor } from '../../components';
import { isDefaultLokiSelector, LOKI_DATASOURCE_KIND, LokiDatasourceSelector, LokiClient } from '../../model';
import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';
Expand Down Expand Up @@ -128,12 +128,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"
Expand Down
8 changes: 2 additions & 6 deletions loki/src/queries/loki-time-series-query/LokiTimeSeriesQueryEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/components';
import { produce } from 'immer';
import { LogQLEditor } from '../../components';
import { LOKI_DATASOURCE_KIND, LokiDatasourceSelector } from '../../model';
Expand Down Expand Up @@ -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"
/>
Expand Down
8 changes: 2 additions & 6 deletions victorialogs/src/queries/victorialogs-log-query/VictoriaLogsLogQueryEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/components';
import { LogsQLEditor } from '../../components/logsql-editor';
import { VICTORIALOGS_DATASOURCE_KIND, VictoriaLogsDatasourceSelector } from '../../model';
import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';
Expand Down Expand Up @@ -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"
/>
Expand Down
8 changes: 2 additions & 6 deletions ...orialogs/src/queries/victorialogs-time-series-query/VictoriaLogsTimeSeriesQueryEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/components';
import { LogsQLEditor } from '../../components/logsql-editor';
import { VICTORIALOGS_DATASOURCE_KIND, VictoriaLogsDatasourceSelector } from '../../model';
import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';
Expand Down Expand Up @@ -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"
/>
Expand Down
Loading