Web console: minor tweaks and fixes (#17970)

vogievetsky · web-flow · commit 33c5e53f7b57 · 2025-05-01T22:00:53.000-07:00
* allow prefix editing when downloading

* add parse JSON action

* add unquote JSON action

* add KEY and VALUE to keywords

* adjust outer tick size

* more keywords

* rename

* better download naming

* use sed to update the config when building
diff --git a/web-console/lib/keywords.ts b/web-console/lib/keywords.ts
@@ -54,6 +54,8 @@ export const SQL_KEYWORDS = [
   'ROW',
   'ROWS',
   'ONLY',
+  'KEY',
+  'VALUE',
   'VALUES',
   'PARTITIONED BY',
   'CLUSTERED BY',
@@ -76,6 +78,23 @@ export const SQL_KEYWORDS = [
   'UNPIVOT',
   'MATCHED',
   'UPDATE SET',
+  'EPOCH',
+  'MILLISECOND',
+  'SECOND',
+  'MINUTE',
+  'HOUR',
+  'DAY',
+  'DOW',
+  'ISODOW',
+  'DOY',
+  'WEEK',
+  'MONTH',
+  'QUARTER',
+  'YEAR',
+  'ISOYEAR',
+  'DECADE',
+  'CENTURY',
+  'MILLENNIUM',
 ];
 
 export const SQL_EXPRESSION_PARTS = [
diff --git a/web-console/script/druid b/web-console/script/druid
@@ -64,7 +64,8 @@ function _build_distribution() {
     && cp "$(_get_code_root)/extensions-core/testing-tools/target/druid-testing-tools-$(_get_druid_version).jar" extensions/druid-testing-tools/ \
     && mkdir -p extensions/druid-compressed-bigdecimal \
     && cp "$(_get_code_root)/extensions-contrib/compressed-bigdecimal/target/druid-compressed-bigdecimal-$(_get_druid_version).jar" extensions/druid-compressed-bigdecimal/ \
-    && echo -e "\n\ndruid.extensions.loadList=[\"druid-hdfs-storage\", \"druid-kafka-indexing-service\", \"druid-multi-stage-query\", \"druid-testing-tools\", \"druid-bloom-filter\", \"druid-datasketches\", \"druid-histogram\", \"druid-stats\", \"druid-compressed-bigdecimal\", \"druid-parquet-extensions\", \"druid-deltalake-extensions\"]" >> conf/druid/auto/_common/common.runtime.properties \
+    && sed -i.bak 's/druid\.extensions\.loadList=\[\([^]]*\)\]/druid.extensions.loadList=[\1, "druid-testing-tools", "druid-bloom-filter", "druid-histogram", "druid-stats", "druid-compressed-bigdecimal", "druid-deltalake-extensions"]/' conf/druid/auto/_common/common.runtime.properties \
+    && rm conf/druid/auto/_common/common.runtime.properties.bak \
     && echo -e "\n\ndruid.server.http.allowedHttpMethods=[\"HEAD\"]" >> conf/druid/auto/_common/common.runtime.properties \
     && echo -e "\n\ndruid.export.storage.baseDir=/" >> conf/druid/auto/_common/common.runtime.properties \
     && echo -e "\n\ndruid.msq.dart.enabled=true" >> conf/druid/auto/_common/common.runtime.properties \
diff --git a/web-console/src/views/explore-view/components/resource-pane/nested-column-dialog/nested-column-dialog.tsx b/web-console/src/views/explore-view/components/resource-pane/nested-column-dialog/nested-column-dialog.tsx
@@ -178,7 +178,7 @@ export const NestedColumnDialog = React.memo(function NestedColumnDialog(
                   querySource.addColumnAfter(
                     nestedColumn.getOutputName() || '',
                     ...selectedPaths.map(path =>
-                      F('JSON_VALUE', nestedColumn, path).as(
+                      SqlFunction.jsonValue(nestedColumn, path).as(
                         querySource.getAvailableName(getOutputName(path)),
                       ),
                     ),
diff --git a/web-console/src/views/explore-view/modules/time-chart-module/continuous-chart-render.tsx b/web-console/src/views/explore-view/modules/time-chart-module/continuous-chart-render.tsx
@@ -758,6 +758,7 @@ export const ContinuousChartRender = function ContinuousChartRender(
                 select(node).call(
                   axisLeft(measureScale)
                     .ticks(3)
+                    .tickSizeOuter(0)
                     .tickFormat(e => formatNumber(e.valueOf())),
                 )
               }
diff --git a/web-console/src/views/workbench-view/destination-pages-pane/destination-pages-pane.scss b/web-console/src/views/workbench-view/destination-pages-pane/destination-pages-pane.scss
@@ -20,6 +20,12 @@
   display: flex;
   flex-direction: column;
 
+  .download-as-controls {
+    width: 570px;
+    display: inline-flex;
+    margin-right: 15px;
+  }
+
   .download-button {
     margin-top: 4px;
     margin-left: 2px;
diff --git a/web-console/src/views/workbench-view/destination-pages-pane/destination-pages-pane.tsx b/web-console/src/views/workbench-view/destination-pages-pane/destination-pages-pane.tsx
@@ -16,7 +16,18 @@
  * limitations under the License.
  */
 
-import { AnchorButton, Button, Intent, Menu, MenuItem, Popover, Position } from '@blueprintjs/core';
+import {
+  AnchorButton,
+  Button,
+  ControlGroup,
+  InputGroup,
+  Intent,
+  Label,
+  Menu,
+  MenuItem,
+  Popover,
+  Position,
+} from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React, { useState } from 'react';
 import ReactTable from 'react-table';
@@ -47,7 +58,7 @@ function resultFormatToExtension(resultFormat: ResultFormat): string {
   }
 }
 
-const RESULT_FORMAT_LABEL: Record<ResultFormat, string> = {
+const RESULT_FORMAT_DESCRIPTION: Record<ResultFormat, string> = {
   object: 'Array of objects',
   array: 'Array of arrays',
   objectLines: 'JSON Lines',
@@ -63,34 +74,34 @@ export const DestinationPagesPane = React.memo(function DestinationPagesPane(
   props: DestinationPagesPaneProps,
 ) {
   const { execution } = props;
+  const [prefix, setPrefix] = useState(execution.id);
   const [desiredResultFormat, setDesiredResultFormat] = useState<ResultFormat>('objectLines');
   const desiredExtension = resultFormatToExtension(desiredResultFormat);
 
   const destination = execution.destination;
   const pages = execution.destinationPages;
   if (!pages) return null;
   const numPages = pages.length;
-  const id = Api.encodePath(execution.id);
 
   const numTotalRows = destination?.numTotalRows;
 
   function getResultUrl(pageIndex: number) {
     return UrlBaser.base(
-      `/druid/v2/sql/statements/${id}/results?${
+      `/druid/v2/sql/statements/${Api.encodePath(execution.id)}/results?${
         pageIndex < 0 ? '' : `page=${pageIndex}&`
       }resultFormat=${desiredResultFormat}&filename=${getPageFilename(pageIndex)}`,
     );
   }
 
   function getFilenamePageInfo(pageIndex: number) {
-    if (pageIndex < 0) return 'all_data';
+    if (pageIndex < 0) return '';
     const numPagesString = String(numPages);
     const pageNumberString = String(pageIndex + 1).padStart(numPagesString.length, '0');
-    return `page_${pageNumberString}_of_${numPagesString}`;
+    return `.page_${pageNumberString}_of_${numPagesString}`;
   }
 
   function getPageFilename(pageIndex: number) {
-    return `${id}_${getFilenamePageInfo(pageIndex)}.${desiredExtension}`;
+    return `${prefix}${getFilenamePageInfo(pageIndex)}.${desiredExtension}`;
   }
 
   return (
@@ -101,29 +112,38 @@ export const DestinationPagesPane = React.memo(function DestinationPagesPane(
         } have been written to ${pluralIfNeeded(numPages, 'page')}. `}
       </p>
       <p>
-        Format when downloading:{' '}
-        <Popover
-          minimal
-          position={Position.BOTTOM_LEFT}
-          content={
-            <Menu>
-              {RESULT_FORMATS.map((resultFormat, i) => (
-                <MenuItem
-                  key={i}
-                  icon={tickIcon(desiredResultFormat === resultFormat)}
-                  text={RESULT_FORMAT_LABEL[resultFormat]}
-                  label={resultFormat}
-                  onClick={() => setDesiredResultFormat(resultFormat)}
-                />
-              ))}
-            </Menu>
-          }
-        >
-          <Button
-            text={RESULT_FORMAT_LABEL[desiredResultFormat]}
-            rightIcon={IconNames.CARET_DOWN}
+        <Label>Download as</Label>
+        <ControlGroup className="download-as-controls">
+          <InputGroup
+            value={prefix}
+            onChange={(e: any) => setPrefix(e.target.value.slice(0, 200))}
+            placeholder="file_prefix"
+            rightElement={<Button disabled text={`.${desiredExtension}`} />}
+            fill
           />
-        </Popover>{' '}
+          <Popover
+            minimal
+            position={Position.BOTTOM_LEFT}
+            content={
+              <Menu>
+                {RESULT_FORMATS.map((resultFormat, i) => (
+                  <MenuItem
+                    key={i}
+                    icon={tickIcon(desiredResultFormat === resultFormat)}
+                    text={RESULT_FORMAT_DESCRIPTION[resultFormat]}
+                    label={resultFormat}
+                    onClick={() => setDesiredResultFormat(resultFormat)}
+                  />
+                ))}
+              </Menu>
+            }
+          >
+            <Button
+              text={RESULT_FORMAT_DESCRIPTION[desiredResultFormat]}
+              rightIcon={IconNames.CARET_DOWN}
+            />
+          </Popover>
+        </ControlGroup>
         <AnchorButton
           intent={Intent.PRIMARY}
           icon={IconNames.DOWNLOAD}
diff --git a/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx b/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx

Original file line number	Diff line number	Diff line change
`@@ -758,6 +758,7 @@ export const ContinuousChartRender = function ContinuousChartRender(`
`758`	`758`	`select(node).call(`
`759`	`759`	`axisLeft(measureScale)`
`760`	`760`	`.ticks(3)`
	`761`	`+ .tickSizeOuter(0)`
`761`	`762`	`.tickFormat(e => formatNumber(e.valueOf())),`
`762`	`763`	`)`
`763`	`764`	`}`