Web-Console: change go to sql button to more button (#8227)

* change go to sql button

* rename to See in SQL view

* update snapshots

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

@@ -11,11 +11,43 @@ exports[`data source view matches snapshot 1`] = `
       localStorageKey="datasources-refresh-rate"
       onRefresh={[Function]}
     />
-    <Blueprint3.Button
+    <Blueprint3.Popover
-      icon="application"
+      boundary="scrollParent"
-      onClick={[Function]}
+      captureDismiss={false}
-      text="Go to SQL"
+      content={
-    />
+        <Blueprint3.Menu>
+          <Blueprint3.MenuItem
+            disabled={false}
+            icon="application"
+            multiline={false}
+            onClick={[Function]}
+            popoverProps={Object {}}
+            shouldDismissPopover={true}
+            text="See in SQL view"
+          />
+        </Blueprint3.Menu>
+      }
+      defaultIsOpen={false}
+      disabled={false}
+      fill={false}
+      hasBackdrop={false}
+      hoverCloseDelay={300}
+      hoverOpenDelay={150}
+      inheritDarkTheme={true}
+      interactionKind="click"
+      minimal={false}
+      modifiers={Object {}}
+      openOnTargetFocus={true}
+      position="bottom-left"
+      targetTagName="span"
+      transitionDuration={300}
+      usePortal={true}
+      wrapperTagName="span"
+    >
+      <Blueprint3.Button
+        icon="more"
+      />
+    </Blueprint3.Popover>
     <Blueprint3.Switch
       checked={false}
       label="Show segment timeline"

web-console/src/views/datasource-view/datasource-view.tsx

@@ -16,7 +16,17 @@
  * limitations under the License.
  */
 
-import { Button, FormGroup, InputGroup, Intent, Switch } from '@blueprintjs/core';
+import {
+  Button,
+  FormGroup,
+  InputGroup,
+  Intent,
+  Menu,
+  MenuItem,
+  Popover,
+  Position,
+  Switch,
+} from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import axios from 'axios';
 import classNames from 'classnames';
@@ -448,6 +458,29 @@ GROUP BY 1`;
     );
   }
 
+  renderBulkDatasourceActions() {
+    const { goToQuery, noSqlMode } = this.props;
+    const bulkDatasourceActionsMenu = (
+      <Menu>
+        {!noSqlMode && (
+          <MenuItem
+            icon={IconNames.APPLICATION}
+            text="See in SQL view"
+            onClick={() => goToQuery(DatasourcesView.DATASOURCE_SQL)}
+          />
+        )}
+      </Menu>
+    );
+
+    return (
+      <>
+        <Popover content={bulkDatasourceActionsMenu} position={Position.BOTTOM_LEFT}>
+          <Button icon={IconNames.MORE} />
+        </Popover>
+      </>
+    );
+  }
+
   private saveRules = async (datasource: string, rules: any[], comment: string) => {
     try {
       await axios.post(`/druid/coordinator/v1/rules/${datasource}`, rules, {
@@ -901,7 +934,7 @@ GROUP BY 1`;
   }
 
   render(): JSX.Element {
-    const { goToQuery, noSqlMode } = this.props;
+    const { noSqlMode } = this.props;
     const { showDisabled, hiddenColumns, showChart, chartHeight, chartWidth } = this.state;
 
     return (
@@ -913,13 +946,7 @@ GROUP BY 1`;
             }}
             localStorageKey={LocalStorageKeys.DATASOURCES_REFRESH_RATE}
           />
-          {!noSqlMode && (
+          {this.renderBulkDatasourceActions()}
-            <Button
-              icon={IconNames.APPLICATION}
-              text="Go to SQL"
-              onClick={() => goToQuery(DatasourcesView.DATASOURCE_SQL)}
-            />
-          )}
           <Switch
             checked={showChart}
             label="Show segment timeline"

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

@@ -12,12 +12,43 @@ exports[`segments-view matches snapshot 1`] = `
         localStorageKey="segments-refresh-rate"
         onRefresh={[Function]}
       />
-      <Blueprint3.Button
+      <Blueprint3.Popover
-        disabled={true}
+        boundary="scrollParent"
-        icon="application"
+        captureDismiss={false}
-        onClick={[Function]}
+        content={
-        text="Go to SQL"
+          <Blueprint3.Menu>
-      />
+            <Blueprint3.MenuItem
+              disabled={true}
+              icon="application"
+              multiline={false}
+              onClick={[Function]}
+              popoverProps={Object {}}
+              shouldDismissPopover={true}
+              text="See in SQL view"
+            />
+          </Blueprint3.Menu>
+        }
+        defaultIsOpen={false}
+        disabled={false}
+        fill={false}
+        hasBackdrop={false}
+        hoverCloseDelay={300}
+        hoverOpenDelay={150}
+        inheritDarkTheme={true}
+        interactionKind="click"
+        minimal={false}
+        modifiers={Object {}}
+        openOnTargetFocus={true}
+        position="bottom-left"
+        targetTagName="span"
+        transitionDuration={300}
+        usePortal={true}
+        wrapperTagName="span"
+      >
+        <Blueprint3.Button
+          icon="more"
+        />
+      </Blueprint3.Popover>
       <Component>
         Group by
       </Component>

web-console/src/views/segments-view/segments-view.tsx

@@ -16,7 +16,16 @@
  * limitations under the License.
  */
 
-import { Button, ButtonGroup, Intent, Label } from '@blueprintjs/core';
+import {
+  Button,
+  ButtonGroup,
+  Intent,
+  Label,
+  Menu,
+  MenuItem,
+  Popover,
+  Position,
+} from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import axios from 'axios';
 import React from 'react';
@@ -607,6 +616,35 @@ export class SegmentsView extends React.PureComponent<SegmentsViewProps, Segment
     );
   }
 
+  renderBulkSegmentsActions() {
+    const { goToQuery, noSqlMode } = this.props;
+    const lastSegmentsQuery = this.segmentsSqlQueryManager.getLastIntermediateQuery();
+
+    const bulkSegmentsActionsMenu = (
+      <Menu>
+        {!noSqlMode && (
+          <MenuItem
+            icon={IconNames.APPLICATION}
+            text="See in SQL view"
+            disabled={!lastSegmentsQuery}
+            onClick={() => {
+              if (!lastSegmentsQuery) return;
+              goToQuery(lastSegmentsQuery);
+            }}
+          />
+        )}
+      </Menu>
+    );
+
+    return (
+      <>
+        <Popover content={bulkSegmentsActionsMenu} position={Position.BOTTOM_LEFT}>
+          <Button icon={IconNames.MORE} />
+        </Popover>
+      </>
+    );
+  }
+
   render(): JSX.Element {
     const {
       segmentTableActionDialogId,
@@ -614,9 +652,8 @@ export class SegmentsView extends React.PureComponent<SegmentsViewProps, Segment
       actions,
       hiddenColumns,
     } = this.state;
-    const { goToQuery, noSqlMode } = this.props;
+    const { noSqlMode } = this.props;
     const { groupByInterval } = this.state;
-    const lastSegmentsQuery = this.segmentsSqlQueryManager.getLastIntermediateQuery();
 
     return (
       <>
@@ -630,17 +667,7 @@ export class SegmentsView extends React.PureComponent<SegmentsViewProps, Segment
               }
               localStorageKey={LocalStorageKeys.SEGMENTS_REFRESH_RATE}
             />
-            {!noSqlMode && (
+            {this.renderBulkSegmentsActions()}
-              <Button
-                icon={IconNames.APPLICATION}
-                text="Go to SQL"
-                disabled={!lastSegmentsQuery}
-                onClick={() => {
-                  if (!lastSegmentsQuery) return;
-                  goToQuery(lastSegmentsQuery);
-                }}
-              />
-            )}
             <Label>Group by</Label>
             <ButtonGroup>
               <Button

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

@@ -34,11 +34,43 @@ exports[`servers view action servers view 1`] = `
       localStorageKey="servers-refresh-rate"
       onRefresh={[Function]}
     />
-    <Blueprint3.Button
+    <Blueprint3.Popover
-      icon="application"
+      boundary="scrollParent"
-      onClick={[Function]}
+      captureDismiss={false}
-      text="Go to SQL"
+      content={
-    />
+        <Blueprint3.Menu>
+          <Blueprint3.MenuItem
+            disabled={false}
+            icon="application"
+            multiline={false}
+            onClick={[Function]}
+            popoverProps={Object {}}
+            shouldDismissPopover={true}
+            text="See in SQL view"
+          />
+        </Blueprint3.Menu>
+      }
+      defaultIsOpen={false}
+      disabled={false}
+      fill={false}
+      hasBackdrop={false}
+      hoverCloseDelay={300}
+      hoverOpenDelay={150}
+      inheritDarkTheme={true}
+      interactionKind="click"
+      minimal={false}
+      modifiers={Object {}}
+      openOnTargetFocus={true}
+      position="bottom-left"
+      targetTagName="span"
+      transitionDuration={300}
+      usePortal={true}
+      wrapperTagName="span"
+    >
+      <Blueprint3.Button
+        icon="more"
+      />
+    </Blueprint3.Popover>
     <TableColumnSelector
       columns={
         Array [

web-console/src/views/servers-view/servers-view.tsx

@@ -16,7 +16,16 @@
  * limitations under the License.
  */
 
-import { Button, ButtonGroup, Intent, Label } from '@blueprintjs/core';
+import {
+  Button,
+  ButtonGroup,
+  Intent,
+  Label,
+  Menu,
+  MenuItem,
+  Popover,
+  Position,
+} from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import axios from 'axios';
 import { sum } from 'd3-array';
@@ -610,8 +619,31 @@ ORDER BY "rank" DESC, "server" DESC`;
     );
   }
 
-  render(): JSX.Element {
+  renderBulkServersActions() {
     const { goToQuery, noSqlMode } = this.props;
+
+    const bulkserversActionsMenu = (
+      <Menu>
+        {!noSqlMode && (
+          <MenuItem
+            icon={IconNames.APPLICATION}
+            text="See in SQL view"
+            onClick={() => goToQuery(ServersView.SERVER_SQL)}
+          />
+        )}
+      </Menu>
+    );
+
+    return (
+      <>
+        <Popover content={bulkserversActionsMenu} position={Position.BOTTOM_LEFT}>
+          <Button icon={IconNames.MORE} />
+        </Popover>
+      </>
+    );
+  }
+
+  render(): JSX.Element {
     const { groupServersBy, hiddenColumns } = this.state;
 
     return (
@@ -642,13 +674,7 @@ ORDER BY "rank" DESC, "server" DESC`;
             onRefresh={auto => this.serverQueryManager.rerunLastQuery(auto)}
             localStorageKey={LocalStorageKeys.SERVERS_REFRESH_RATE}
           />
-          {!noSqlMode && (
+          {this.renderBulkServersActions()}
-            <Button
-              icon={IconNames.APPLICATION}
-              text="Go to SQL"
-              onClick={() => goToQuery(ServersView.SERVER_SQL)}
-            />
-          )}
           <TableColumnSelector
             columns={serverTableColumns}
             onChange={column => this.setState({ hiddenColumns: hiddenColumns.toggle(column) })}

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

@@ -367,11 +367,43 @@ exports[`tasks view matches snapshot 1`] = `
           localStorageKey="task-refresh-rate"
           onRefresh={[Function]}
         />
-        <Blueprint3.Button
+        <Blueprint3.Popover
-          icon="application"
+          boundary="scrollParent"
-          onClick={[Function]}
+          captureDismiss={false}
-          text="Go to SQL"
+          content={
-        />
+            <Blueprint3.Menu>
+              <Blueprint3.MenuItem
+                disabled={false}
+                icon="application"
+                multiline={false}
+                onClick={[Function]}
+                popoverProps={Object {}}
+                shouldDismissPopover={true}
+                text="See in SQL view"
+              />
+            </Blueprint3.Menu>
+          }
+          defaultIsOpen={false}
+          disabled={false}
+          fill={false}
+          hasBackdrop={false}
+          hoverCloseDelay={300}
+          hoverOpenDelay={150}
+          inheritDarkTheme={true}
+          interactionKind="click"
+          minimal={false}
+          modifiers={Object {}}
+          openOnTargetFocus={true}
+          position="bottom-left"
+          targetTagName="span"
+          transitionDuration={300}
+          usePortal={true}
+          wrapperTagName="span"
+        >
+          <Blueprint3.Button
+            icon="more"
+          />
+        </Blueprint3.Popover>
         <Blueprint3.Popover
           boundary="scrollParent"
           captureDismiss={false}

web-console/src/views/task-view/tasks-view.tsx

@@ -1010,8 +1010,32 @@ ORDER BY "rank" DESC, "created_time" DESC`;
     );
   }
 
+  renderBulkTasksActions() {
+    const { goToQuery, noSqlMode } = this.props;
+
+    const bulkTaskActionsMenu = (
+      <Menu>
+        {!noSqlMode && (
+          <MenuItem
+            icon={IconNames.APPLICATION}
+            text="See in SQL view"
+            onClick={() => goToQuery(TasksView.TASK_SQL)}
+          />
+        )}
+      </Menu>
+    );
+
+    return (
+      <>
+        <Popover content={bulkTaskActionsMenu} position={Position.BOTTOM_LEFT}>
+          <Button icon={IconNames.MORE} />
+        </Popover>
+      </>
+    );
+  }
+
   render(): JSX.Element {
-    const { goToQuery, goToLoadData, noSqlMode } = this.props;
+    const { goToLoadData } = this.props;
     const {
       groupTasksBy,
       supervisorSpecDialogOpen,
@@ -1122,13 +1146,7 @@ ORDER BY "rank" DESC, "created_time" DESC`;
                 localStorageKey={LocalStorageKeys.TASKS_REFRESH_RATE}
                 onRefresh={auto => this.taskQueryManager.rerunLastQuery(auto)}
               />
-              {!noSqlMode && (
+              {this.renderBulkTasksActions()}
-                <Button
-                  icon={IconNames.APPLICATION}
-                  text="Go to SQL"
-                  onClick={() => goToQuery(TasksView.TASK_SQL)}
-                />
-              )}
               <Popover content={submitTaskMenu} position={Position.BOTTOM_LEFT}>
                 <Button icon={IconNames.PLUS} text="Submit task" />
               </Popover>