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

* change go to sql button * rename to See in SQL view * update snapshots
2019-08-05 14:12:16 -07:00 · 2019-08-05 14:12:16 -07:00 · 5d0805dd48
parent ab5b3be6c6
commit 5d0805dd48
8 changed files with 286 additions and 61 deletions
--- a/web-console/src/views/datasource-view/snapshots/datasource-view.spec.tsx.snap
+++ b/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
-      icon="application"
-      onClick={[Function]}
-      text="Go to SQL"
-    />
+    <Blueprint3.Popover
+      boundary="scrollParent"
+      captureDismiss={false}
+      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"
--- a/web-console/src/views/datasource-view/datasource-view.tsx
+++ b/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 && (
-            <Button
-              icon={IconNames.APPLICATION}
-              text="Go to SQL"
-              onClick={() => goToQuery(DatasourcesView.DATASOURCE_SQL)}
-            />
-          )}
+          {this.renderBulkDatasourceActions()}
          <Switch
            checked={showChart}
            label="Show segment timeline"
--- a/web-console/src/views/segments-view/snapshots/segments-view.spec.tsx.snap
+++ b/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
-        disabled={true}
-        icon="application"
-        onClick={[Function]}
-        text="Go to SQL"
-      />
+      <Blueprint3.Popover
+        boundary="scrollParent"
+        captureDismiss={false}
+        content={
+          <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>
--- a/web-console/src/views/segments-view/segments-view.tsx
+++ b/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 && (
-              <Button
-                icon={IconNames.APPLICATION}
-                text="Go to SQL"
-                disabled={!lastSegmentsQuery}
-                onClick={() => {
-                  if (!lastSegmentsQuery) return;
-                  goToQuery(lastSegmentsQuery);
-                }}
-              />
-            )}
+            {this.renderBulkSegmentsActions()}
            <Label>Group by</Label>
            <ButtonGroup>
              <Button
--- a/web-console/src/views/servers-view/snapshots/servers-view.spec.tsx.snap
+++ b/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
-      icon="application"
-      onClick={[Function]}
-      text="Go to SQL"
-    />
+    <Blueprint3.Popover
+      boundary="scrollParent"
+      captureDismiss={false}
+      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 [
--- a/web-console/src/views/servers-view/servers-view.tsx
+++ b/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 && (
-            <Button
-              icon={IconNames.APPLICATION}
-              text="Go to SQL"
-              onClick={() => goToQuery(ServersView.SERVER_SQL)}
-            />
-          )}
+          {this.renderBulkServersActions()}
          <TableColumnSelector
            columns={serverTableColumns}
            onChange={column => this.setState({ hiddenColumns: hiddenColumns.toggle(column) })}
--- a/web-console/src/views/task-view/snapshots/tasks-view.spec.tsx.snap
+++ b/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
-          icon="application"
-          onClick={[Function]}
-          text="Go to SQL"
-        />
+        <Blueprint3.Popover
+          boundary="scrollParent"
+          captureDismiss={false}
+          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}
--- a/web-console/src/views/task-view/tasks-view.tsx
+++ b/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 && (
-                <Button
-                  icon={IconNames.APPLICATION}
-                  text="Go to SQL"
-                  onClick={() => goToQuery(TasksView.TASK_SQL)}
-                />
-              )}
+              {this.renderBulkTasksActions()}
              <Popover content={submitTaskMenu} position={Position.BOTTOM_LEFT}>
                <Button icon={IconNames.PLUS} text="Submit task" />
              </Popover>