[Backport] Display time in local time

web-console/package.json

@@ -72,6 +72,7 @@
     "d3-shape": "^3.2.0",
     "d3-time-format": "^4.1.0",
     "date-fns": "^2.28.0",
+    "dayjs": "^1.11.15",
     "druid-query-toolkit": "^1.2.0",
     "echarts": "^5.5.1",
     "file-saver": "^2.0.5",

web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap

@@ -274,6 +274,16 @@ exports[`HeaderBar matches snapshot 1`] = `
             shouldDismissPopover={true}
             text="Compaction dynamic config"
           />
+          <Blueprint5.MenuItem
+            active={false}
+            disabled={false}
+            icon="console"
+            multiline={false}
+            onClick={[Function]}
+            popoverProps={{}}
+            shouldDismissPopover={true}
+            text="Web console config"
+          />
           <Blueprint5.MenuDivider />
           <Blueprint5.MenuItem
             active={false}

web-console/src/components/header-bar/header-bar.tsx

@@ -41,6 +41,7 @@ import {
   DoctorDialog,
   OverlordDynamicConfigDialog,
 } from '../../dialogs';
+import { WebConsoleConfigDialog } from '../../dialogs/web-console-config-dialog/web-console-config-dialog';
 import type { ConsoleViewId } from '../../druid-models';
 import { getConsoleViewIcon } from '../../druid-models';
 import { Capabilities } from '../../helpers';
@@ -76,6 +77,7 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
     useState(false);
   const [overlordDynamicConfigDialogOpen, setOverlordDynamicConfigDialogOpen] = useState(false);
   const [compactionDynamicConfigDialogOpen, setCompactionDynamicConfigDialogOpen] = useState(false);
+  const [webConsoleConfigDialogOpen, setWebConsoleConfigDialogOpen] = useState(false);
 
   const showSplitDataLoaderMenu = capabilities.hasMultiStageQueryTask();
 
@@ -194,6 +196,11 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
         onClick={() => setCompactionDynamicConfigDialogOpen(true)}
         disabled={!capabilities.hasCoordinatorAccess()}
       />
+      <MenuItem
+        icon={IconNames.CONSOLE}
+        text="Web console config"
+        onClick={() => setWebConsoleConfigDialogOpen(true)}
+      />
       <MenuDivider />
       <MenuItem
         icon={IconNames.HIGH_PRIORITY}
@@ -401,6 +408,9 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
           onClose={() => setCompactionDynamicConfigDialogOpen(false)}
         />
       )}
+      {webConsoleConfigDialogOpen && (
+        <WebConsoleConfigDialog onClose={() => setWebConsoleConfigDialogOpen(false)} />
+      )}
     </Navbar>
   );
 });

web-console/src/components/table-filterable-cell/table-filterable-cell.tsx

@@ -37,12 +37,14 @@ export interface TableFilterableCellProps {
   onFiltersChange(filters: Filter[]): void;
   enableComparisons?: boolean;
   children?: ReactNode;
+  displayValue?: string;
 }
 
 export const TableFilterableCell = React.memo(function TableFilterableCell(
   props: TableFilterableCellProps,
 ) {
-  const { field, value, children, filters, enableComparisons, onFiltersChange } = props;
+  const { field, value, children, filters, enableComparisons, onFiltersChange, displayValue } =
+    props;
 
   return (
     <Popover
@@ -56,7 +58,7 @@ export const TableFilterableCell = React.memo(function TableFilterableCell(
                 <MenuItem
                   key={i}
                   icon={filterModeToIcon(mode)}
-                  text={value}
+                  text={displayValue ?? value}
                   onClick={() =>
                     onFiltersChange(
                       addOrUpdateFilter(filters, {

web-console/src/dialogs/web-console-config-dialog/web-console-config-dialog.tsx

@@ -0,0 +1,67 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React, { useState } from 'react';
+
+import { AutoForm } from '../../components';
+import {
+  WEB_CONSOLE_CONFIG_FIELDS,
+  type WebConsoleConfig,
+} from '../../druid-models/web-console-config/web-console-config';
+import { DEFAULT_WEB_CONSOLE_CONFIG } from '../../druid-models/web-console-config/web-console-config.mock';
+import { AppToaster } from '../../singletons';
+import { localStorageGetJson, LocalStorageKeys, localStorageSetJson } from '../../utils';
+
+export interface WebConsoleConfigDialogProps {
+  onClose(): void;
+}
+
+export const WebConsoleConfigDialog = React.memo(function WebConsoleConfigDialog(
+  props: WebConsoleConfigDialogProps,
+) {
+  const { onClose } = props;
+  const [config, setConfig] = useState<WebConsoleConfig>(
+    localStorageGetJson(LocalStorageKeys.WEB_CONSOLE_CONFIGS) || DEFAULT_WEB_CONSOLE_CONFIG,
+  );
+
+  function save() {
+    localStorageSetJson(LocalStorageKeys.WEB_CONSOLE_CONFIGS, config);
+    AppToaster.show({
+      message: 'Saved web console config',
+      intent: Intent.SUCCESS,
+    });
+    onClose();
+    location.reload();
+  }
+
+  return (
+    <Dialog isOpen title="Web console config" onClose={onClose} canOutsideClickClose={false}>
+      <div className={Classes.DIALOG_BODY}>
+        <p>Sets the local web console configuration.</p>
+        <AutoForm fields={WEB_CONSOLE_CONFIG_FIELDS} model={config} onChange={setConfig} />
+      </div>
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button text="Save" onClick={save} intent={Intent.PRIMARY} rightIcon={IconNames.TICK} />
+        </div>
+      </div>
+    </Dialog>
+  );
+});

web-console/src/druid-models/web-console-config/web-console-config.mock.tsx

@@ -0,0 +1,23 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { WebConsoleConfig } from './web-console-config';
+
+export const DEFAULT_WEB_CONSOLE_CONFIG: WebConsoleConfig = {
+  showLocalTime: false,
+};

web-console/src/druid-models/web-console-config/web-console-config.tsx

@@ -0,0 +1,37 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Field } from '../../components';
+
+export interface WebConsoleConfig {
+  showLocalTime?: boolean;
+}
+
+export const WEB_CONSOLE_CONFIG_FIELDS: Field<WebConsoleConfig>[] = [
+  {
+    name: 'showLocalTime',
+    type: 'boolean',
+    defaultValue: false,
+    info: (
+      <>
+        Boolean flag for whether we show local time in the &quot;Tasks&quot;, &quot;Segments&quot;
+        and &quot;Services&quot; views.
+      </>
+    ),
+  },
+];

web-console/src/utils/date.ts

@@ -19,8 +19,14 @@
 import type { DateRange, NonNullDateRange } from '@blueprintjs/datetime';
 import { fromDate, toTimeZone } from '@internationalized/date';
 import type { Timezone } from 'chronoshift';
+import dayjs from 'dayjs';
+
+import type { WebConsoleConfig } from '../druid-models/web-console-config/web-console-config';
+
+import { localStorageGetJson, LocalStorageKeys } from './local-storage-keys';
 
 const CURRENT_YEAR = new Date().getUTCFullYear();
+export const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
 
 export function isNonNullRange(range: DateRange): range is NonNullDateRange {
   return range[0] != null && range[1] != null;
@@ -94,3 +100,11 @@ export function maxDate(a: Date, b: Date): Date {
 export function minDate(a: Date, b: Date): Date {
   return a < b ? a : b;
 }
+
+export function formatDate(value: string) {
+  const webConsoleConfig: WebConsoleConfig | undefined = localStorageGetJson(
+    LocalStorageKeys.WEB_CONSOLE_CONFIGS,
+  );
+  const showLocalTime = webConsoleConfig?.showLocalTime;
+  return showLocalTime ? dayjs(value).format(DATE_FORMAT) : dayjs(value).toISOString();
+}

web-console/src/utils/local-storage-keys.tsx

@@ -61,6 +61,8 @@ export const LocalStorageKeys = {
 
   EXPLORE_STATE: 'explore-state' as const,
   EXPLORE_STICKY: 'explore-sticky' as const,
+
+  WEB_CONSOLE_CONFIGS: 'web-console-configs' as const,
 };
 export type LocalStorageKeys = (typeof LocalStorageKeys)[keyof typeof LocalStorageKeys];
 

web-console/src/views/segments-view/__snapshots__/segments-view.spec.tsx.snap

@@ -178,7 +178,7 @@ exports[`SegmentsView matches snapshot 1`] = `
             "filterable": true,
             "headerClassName": "enable-comparisons",
             "show": true,
-            "width": 180,
+            "width": 220,
           },
           {
             "Cell": [Function],
@@ -188,7 +188,7 @@ exports[`SegmentsView matches snapshot 1`] = `
             "filterable": true,
             "headerClassName": "enable-comparisons",
             "show": true,
-            "width": 180,
+            "width": 220,
           },
           {
             "Cell": [Function],