This is an automated email from the ASF dual-hosted git repository.
amatya pushed a commit to branch 27.0.0
in repository https://gitbox.apache.org/repos/asf/druid.git
The following commit(s) were added to refs/heads/27.0.0 by this push:
new e5c8c7aca9 Web console: make typing fun again (#14632) (#14646)
e5c8c7aca9 is described below
commit e5c8c7aca9143fa4e8b59503c3883030c553b0f5
Author: AmatyaAvadhanula <[email protected]>
AuthorDate: Mon Jul 24 17:58:20 2023 +0530
Web console: make typing fun again (#14632) (#14646)
* extract common function
* make typing fun again
Co-authored-by: Vadim Ogievetsky <[email protected]>
---
web-console/src/react-table/react-table-inputs.tsx | 16 ++++++++++------
web-console/src/utils/date.ts | 4 ++++
.../execution-stages-pane/execution-stages-pane.tsx | 3 ++-
.../recent-query-task-panel/recent-query-task-panel.tsx | 9 +++++++--
4 files changed, 23 insertions(+), 9 deletions(-)
diff --git a/web-console/src/react-table/react-table-inputs.tsx
b/web-console/src/react-table/react-table-inputs.tsx
index 4be942cd79..50937750b3 100644
--- a/web-console/src/react-table/react-table-inputs.tsx
+++ b/web-console/src/react-table/react-table-inputs.tsx
@@ -41,7 +41,7 @@ interface FilterRendererProps {
export function GenericFilterInput({ column, filter, onChange, key }:
FilterRendererProps) {
const [menuOpen, setMenuOpen] = useState(false);
- const [focused, setFocused] = useState(false);
+ const [focusedText, setFocusedText] = useState<string | undefined>();
const enableComparisons =
String(column.headerClassName).includes('enable-comparisons');
@@ -53,7 +53,7 @@ export function GenericFilterInput({ column, filter,
onChange, key }: FilterRend
return (
<InputGroup
className={classNames('generic-filter-input', {
- 'hide-icon': !filter && !(menuOpen || focused),
+ 'hide-icon': !filter && !(menuOpen || typeof focusedText === 'string'),
})}
key={key}
leftElement={
@@ -79,14 +79,18 @@ export function GenericFilterInput({ column, filter,
onChange, key }: FilterRend
<Button className="filter-mode-button" icon={filterModeToIcon(mode)}
minimal />
</Popover2>
}
- value={needle}
- onChange={e => onChange(combineModeAndNeedle(mode, e.target.value))}
+ value={focusedText ?? needle}
+ onChange={e => {
+ const enteredText = e.target.value;
+ setFocusedText(enteredText);
+ onChange(combineModeAndNeedle(mode, enteredText));
+ }}
rightElement={
filter ? <Button icon={IconNames.CROSS} minimal onClick={() =>
onChange('')} /> : undefined
}
- onFocus={() => setFocused(true)}
+ onFocus={() => setFocusedText(needle)}
onBlur={e => {
- setFocused(false);
+ setFocusedText(undefined);
if (filter && !e.target.value) onChange('');
}}
/>
diff --git a/web-console/src/utils/date.ts b/web-console/src/utils/date.ts
index dcc4374d4a..ecab2c39ca 100644
--- a/web-console/src/utils/date.ts
+++ b/web-console/src/utils/date.ts
@@ -24,6 +24,10 @@ export function dateToIsoDateString(date: Date): string {
return date.toISOString().slice(0, 10);
}
+export function prettyFormatIsoDate(isoDate: string): string {
+ return isoDate.replace('T', ' ').replace(/\.\d\d\dZ$/, '');
+}
+
export function utcToLocalDate(utcDate: Date): Date {
// Function removes the local timezone of the date and displays it in UTC
return new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);
diff --git
a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
index 98035b3ed5..57827534df 100644
---
a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
+++
b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
@@ -49,6 +49,7 @@ import {
formatInteger,
formatPercent,
oneOf,
+ prettyFormatIsoDate,
twoLines,
} from '../../../utils';
@@ -685,7 +686,7 @@ ${title} uncompressed size: ${formatBytesCompact(
if (!value) return null;
return (
<div title={value + (duration ?
`/${formatDurationWithMs(duration)}` : '')}>
- <div>{value.replace('T', ' ').replace(/\.\d\d\dZ$/, '')}</div>
+ <div>{prettyFormatIsoDate(value)}</div>
<div>{duration ? formatDurationDynamic(duration) : ''}</div>
</div>
);
diff --git
a/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
b/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
index bd31c88693..13e8f716a7 100644
---
a/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
+++
b/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
@@ -32,7 +32,12 @@ import { Execution, WorkbenchQuery } from
'../../../druid-models';
import { cancelTaskExecution, getTaskExecution } from '../../../helpers';
import { useClock, useInterval, useQueryManager } from '../../../hooks';
import { AppToaster } from '../../../singletons';
-import { downloadQueryDetailArchive, formatDuration, queryDruidSql } from
'../../../utils';
+import {
+ downloadQueryDetailArchive,
+ formatDuration,
+ prettyFormatIsoDate,
+ queryDruidSql,
+} from '../../../utils';
import { CancelQueryDialog } from '../cancel-query-dialog/cancel-query-dialog';
import { workStateStore } from '../work-state-store';
@@ -231,7 +236,7 @@ LIMIT 100`,
style={{ color }}
/>
<div className="timing">
- {w.createdTime.replace('T', ' ').replace(/\.\d\d\dZ$/,
'') +
+ {prettyFormatIsoDate(w.createdTime) +
(duration > 0 ? ` (${formatDuration(duration)})` : '')}
</div>
</div>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
