This is an automated email from the ASF dual-hosted git repository.

vogievetsky pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/druid.git


The following commit(s) were added to refs/heads/master by this push:
     new 44b3f8e5880 Web console: fix a few console bugs (#16735)
44b3f8e5880 is described below

commit 44b3f8e588003db2eae759f7345809f7ac12358a
Author: Vadim Ogievetsky <va...@ogievetsky.com>
AuthorDate: Wed Jul 17 14:51:17 2024 -0700

    Web console: fix a few console bugs (#16735)
    
    * remove __time from min max query shortcut
    
    * fix scrolling in retention rules dialog
    
    * actions menus should have titles
    
    * change term
    
    * correctly name sort/shuffle
---
 .../components/action-cell/action-cell.spec.tsx    |    2 +-
 .../src/components/action-cell/action-cell.tsx     |    7 +-
 .../__snapshots__/retention-dialog.spec.tsx.snap   | 1288 ++++++++++----------
 .../dialogs/retention-dialog/retention-dialog.scss |   18 +-
 .../dialogs/retention-dialog/retention-dialog.tsx  |  112 +-
 web-console/src/druid-models/stages/stages.spec.ts |    6 +-
 web-console/src/druid-models/stages/stages.ts      |   59 +-
 web-console/src/utils/basic-action.tsx             |    8 +-
 .../views/datasources-view/datasources-view.tsx    |    5 +-
 .../src/views/lookups-view/lookups-view.tsx        |    1 +
 .../src/views/segments-view/segments-view.tsx      |    1 +
 .../src/views/services-view/services-view.tsx      |    2 +-
 .../views/supervisors-view/supervisors-view.tsx    |    1 +
 web-console/src/views/tasks-view/tasks-view.tsx    |    1 +
 .../workbench-view/column-tree/column-tree.tsx     |    3 +-
 .../execution-stages-pane.tsx                      |   13 +-
 16 files changed, 785 insertions(+), 742 deletions(-)

diff --git a/web-console/src/components/action-cell/action-cell.spec.tsx 
b/web-console/src/components/action-cell/action-cell.spec.tsx
index 6349ee1042e..b52c6af4e84 100644
--- a/web-console/src/components/action-cell/action-cell.spec.tsx
+++ b/web-console/src/components/action-cell/action-cell.spec.tsx
@@ -23,7 +23,7 @@ import { ActionCell } from './action-cell';
 
 describe('ActionCell', () => {
   it('matches snapshot', () => {
-    const actionCell = <ActionCell onDetail={() => {}} actions={[]} />;
+    const actionCell = <ActionCell onDetail={() => {}} actions={[]} 
menuTitle="item" />;
     const { container } = render(actionCell);
     expect(container.firstChild).toMatchSnapshot();
   });
diff --git a/web-console/src/components/action-cell/action-cell.tsx 
b/web-console/src/components/action-cell/action-cell.tsx
index c0e522e68ab..4a20e429977 100644
--- a/web-console/src/components/action-cell/action-cell.tsx
+++ b/web-console/src/components/action-cell/action-cell.tsx
@@ -34,12 +34,13 @@ export const ACTION_COLUMN_WIDTH = 70;
 export interface ActionCellProps {
   onDetail?: () => void;
   disableDetail?: boolean;
-  actions?: BasicAction[];
+  actions: BasicAction[];
+  menuTitle: string;
 }
 
 export const ActionCell = React.memo(function ActionCell(props: 
ActionCellProps) {
-  const { onDetail, disableDetail, actions } = props;
-  const actionsMenu = actions ? basicActionsToMenu(actions) : null;
+  const { onDetail, disableDetail, actions, menuTitle } = props;
+  const actionsMenu = basicActionsToMenu(actions, menuTitle);
 
   return (
     <div className="action-cell">
diff --git 
a/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
 
b/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
index c22b1563155..92f290c4a27 100644
--- 
a/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
+++ 
b/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
@@ -105,367 +105,398 @@ exports[`RetentionDialog matches snapshot 1`] = `
             </div>
           </div>
           <div
-            class="bp4-form-group"
+            class="rule-form"
           >
             <div
-              class="bp4-form-content"
+              class="rule-form-content"
             >
               <div
-                class="rule-editor"
+                class="bp4-form-group"
               >
                 <div
-                  class="title"
+                  class="bp4-form-content"
                 >
-                  <button
-                    class="bp4-button bp4-minimal left"
-                    type="button"
-                  >
-                    <span
-                      class="bp4-button-text"
-                    >
-                      loadByPeriod(P1000Y+future, 2x)
-                    </span>
-                    <span
-                      aria-hidden="true"
-                      class="bp4-icon bp4-icon-caret-down"
-                      icon="caret-down"
-                    >
-                      <svg
-                        data-icon="caret-down"
-                        height="16"
-                        role="img"
-                        viewBox="0 0 16 16"
-                        width="16"
-                      >
-                        <path
-                          d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 
00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </span>
-                  </button>
                   <div
-                    class="spacer"
-                  />
-                  <button
-                    class="bp4-button bp4-minimal"
-                    type="button"
+                    class="rule-editor"
                   >
-                    <span
-                      aria-hidden="true"
-                      class="bp4-icon bp4-icon-trash"
-                      icon="trash"
+                    <div
+                      class="title"
                     >
-                      <svg
-                        data-icon="trash"
-                        height="16"
-                        role="img"
-                        viewBox="0 0 16 16"
-                        width="16"
+                      <button
+                        class="bp4-button bp4-minimal left"
+                        type="button"
                       >
-                        <path
-                          d="M14.49 3.99h-13c-.28 
0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 
.5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 
1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 
1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 
1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 
1v1h14v-1c0-.55-.45-1-1-1z"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-                <div
-                  class="bp4-collapse"
-                  style="height: auto; overflow-y: visible; transition: none;"
-                >
-                  <div
-                    aria-hidden="false"
-                    class="bp4-collapse-body"
-                    style="transform: translateY(0); transition: none;"
-                  >
+                        <span
+                          class="bp4-button-text"
+                        >
+                          loadByPeriod(P1000Y+future, 2x)
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          class="bp4-icon bp4-icon-caret-down"
+                          icon="caret-down"
+                        >
+                          <svg
+                            data-icon="caret-down"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                          >
+                            <path
+                              d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 
00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <div
+                        class="spacer"
+                      />
+                      <button
+                        class="bp4-button bp4-minimal"
+                        type="button"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="bp4-icon bp4-icon-trash"
+                          icon="trash"
+                        >
+                          <svg
+                            data-icon="trash"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                          >
+                            <path
+                              d="M14.49 3.99h-13c-.28 
0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 
.5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 
1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 
1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 
1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 
1v1h14v-1c0-.55-.45-1-1-1z"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
                     <div
-                      class="bp4-card bp4-elevation-2"
+                      class="bp4-collapse"
+                      style="height: auto; overflow-y: visible; transition: 
none;"
                     >
                       <div
-                        class="bp4-form-group"
+                        aria-hidden="false"
+                        class="bp4-collapse-body"
+                        style="transform: translateY(0); transition: none;"
                       >
                         <div
-                          class="bp4-form-content"
+                          class="bp4-card bp4-elevation-2"
                         >
                           <div
-                            class="bp4-control-group"
+                            class="bp4-form-group"
                           >
                             <div
-                              class="bp4-html-select"
-                            >
-                              <select>
-                                <option
-                                  value="loadForever"
-                                >
-                                  loadForever
-                                </option>
-                                <option
-                                  value="loadByInterval"
-                                >
-                                  loadByInterval
-                                </option>
-                                <option
-                                  value="loadByPeriod"
-                                >
-                                  loadByPeriod
-                                </option>
-                                <option
-                                  value="dropForever"
-                                >
-                                  dropForever
-                                </option>
-                                <option
-                                  value="dropByInterval"
-                                >
-                                  dropByInterval
-                                </option>
-                                <option
-                                  value="dropByPeriod"
-                                >
-                                  dropByPeriod
-                                </option>
-                                <option
-                                  value="dropBeforeByPeriod"
-                                >
-                                  dropBeforeByPeriod
-                                </option>
-                                <option
-                                  value="broadcastForever"
-                                >
-                                  broadcastForever
-                                </option>
-                                <option
-                                  value="broadcastByInterval"
-                                >
-                                  broadcastByInterval
-                                </option>
-                                <option
-                                  value="broadcastByPeriod"
-                                >
-                                  broadcastByPeriod
-                                </option>
-                              </select>
-                              <span
-                                class="bp4-icon bp4-icon-double-caret-vertical"
-                                icon="double-caret-vertical"
-                              >
-                                <svg
-                                  aria-labelledby="iconTitle-3"
-                                  data-icon="double-caret-vertical"
-                                  height="16"
-                                  role="img"
-                                  viewBox="0 0 16 16"
-                                  width="16"
-                                >
-                                  <title
-                                    id="iconTitle-3"
-                                  >
-                                    Open dropdown
-                                  </title>
-                                  <path
-                                    d="M5 7h6a1.003 1.003 0 
00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 
2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 
1.003 0 0011 9z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
-                            </div>
-                            <div
-                              class="formatted-input suggestible-input"
+                              class="bp4-form-content"
                             >
                               <div
-                                class="bp4-input-group"
+                                class="bp4-control-group"
                               >
-                                <input
-                                  class="bp4-input"
-                                  placeholder="P1D"
-                                  style="padding-right: 0px;"
-                                  type="text"
-                                  value="P1000Y"
-                                />
-                                <span
-                                  class="bp4-input-action"
+                                <div
+                                  class="bp4-html-select"
                                 >
+                                  <select>
+                                    <option
+                                      value="loadForever"
+                                    >
+                                      loadForever
+                                    </option>
+                                    <option
+                                      value="loadByInterval"
+                                    >
+                                      loadByInterval
+                                    </option>
+                                    <option
+                                      value="loadByPeriod"
+                                    >
+                                      loadByPeriod
+                                    </option>
+                                    <option
+                                      value="dropForever"
+                                    >
+                                      dropForever
+                                    </option>
+                                    <option
+                                      value="dropByInterval"
+                                    >
+                                      dropByInterval
+                                    </option>
+                                    <option
+                                      value="dropByPeriod"
+                                    >
+                                      dropByPeriod
+                                    </option>
+                                    <option
+                                      value="dropBeforeByPeriod"
+                                    >
+                                      dropBeforeByPeriod
+                                    </option>
+                                    <option
+                                      value="broadcastForever"
+                                    >
+                                      broadcastForever
+                                    </option>
+                                    <option
+                                      value="broadcastByInterval"
+                                    >
+                                      broadcastByInterval
+                                    </option>
+                                    <option
+                                      value="broadcastByPeriod"
+                                    >
+                                      broadcastByPeriod
+                                    </option>
+                                  </select>
                                   <span
-                                    aria-haspopup="true"
-                                    class="bp4-popover2-target"
+                                    class="bp4-icon 
bp4-icon-double-caret-vertical"
+                                    icon="double-caret-vertical"
                                   >
-                                    <button
-                                      class="bp4-button bp4-minimal"
-                                      type="button"
+                                    <svg
+                                      aria-labelledby="iconTitle-3"
+                                      data-icon="double-caret-vertical"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                    >
+                                      <title
+                                        id="iconTitle-3"
+                                      >
+                                        Open dropdown
+                                      </title>
+                                      <path
+                                        d="M5 7h6a1.003 1.003 0 
00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 
2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 
1.003 0 0011 9z"
+                                        fill-rule="evenodd"
+                                      />
+                                    </svg>
+                                  </span>
+                                </div>
+                                <div
+                                  class="formatted-input suggestible-input"
+                                >
+                                  <div
+                                    class="bp4-input-group"
+                                  >
+                                    <input
+                                      class="bp4-input"
+                                      placeholder="P1D"
+                                      style="padding-right: 0px;"
+                                      type="text"
+                                      value="P1000Y"
+                                    />
+                                    <span
+                                      class="bp4-input-action"
                                     >
                                       <span
-                                        aria-hidden="true"
-                                        class="bp4-icon bp4-icon-caret-down"
-                                        icon="caret-down"
+                                        aria-haspopup="true"
+                                        class="bp4-popover2-target"
                                       >
-                                        <svg
-                                          data-icon="caret-down"
-                                          height="16"
-                                          role="img"
-                                          viewBox="0 0 16 16"
-                                          width="16"
+                                        <button
+                                          class="bp4-button bp4-minimal"
+                                          type="button"
                                         >
-                                          <path
-                                            d="M12 
6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 
4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                                            fill-rule="evenodd"
-                                          />
-                                        </svg>
+                                          <span
+                                            aria-hidden="true"
+                                            class="bp4-icon 
bp4-icon-caret-down"
+                                            icon="caret-down"
+                                          >
+                                            <svg
+                                              data-icon="caret-down"
+                                              height="16"
+                                              role="img"
+                                              viewBox="0 0 16 16"
+                                              width="16"
+                                            >
+                                              <path
+                                                d="M12 
6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 
4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                                                fill-rule="evenodd"
+                                              />
+                                            </svg>
+                                          </span>
+                                        </button>
                                       </span>
-                                    </button>
-                                  </span>
-                                </span>
+                                    </span>
+                                  </div>
+                                </div>
+                                <label
+                                  class="bp4-control bp4-switch include-future"
+                                >
+                                  <input
+                                    checked=""
+                                    type="checkbox"
+                                  />
+                                  <span
+                                    class="bp4-control-indicator"
+                                  />
+                                  Include future
+                                </label>
                               </div>
                             </div>
-                            <label
-                              class="bp4-control bp4-switch include-future"
-                            >
-                              <input
-                                checked=""
-                                type="checkbox"
-                              />
-                              <span
-                                class="bp4-control-indicator"
-                              />
-                              Include future
-                            </label>
                           </div>
-                        </div>
-                      </div>
-                      <div
-                        class="bp4-form-group"
-                      >
-                        <div
-                          class="bp4-form-content"
-                        >
                           <div
-                            class="bp4-control-group"
+                            class="bp4-form-group"
                           >
-                            <button
-                              class="bp4-button bp4-minimal"
-                              style="pointer-events: none;"
-                              type="button"
-                            >
-                              <span
-                                class="bp4-button-text"
-                              >
-                                Tier:
-                              </span>
-                            </button>
-                            <div
-                              class="bp4-html-select bp4-fill"
-                            >
-                              <select>
-                                <option
-                                  value="_default_tier"
-                                >
-                                  _default_tier
-                                </option>
-                              </select>
-                              <span
-                                class="bp4-icon bp4-icon-double-caret-vertical"
-                                icon="double-caret-vertical"
-                              >
-                                <svg
-                                  aria-labelledby="iconTitle-5"
-                                  data-icon="double-caret-vertical"
-                                  height="16"
-                                  role="img"
-                                  viewBox="0 0 16 16"
-                                  width="16"
-                                >
-                                  <title
-                                    id="iconTitle-5"
-                                  >
-                                    Open dropdown
-                                  </title>
-                                  <path
-                                    d="M5 7h6a1.003 1.003 0 
00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 
2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 
1.003 0 0011 9z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
-                            </div>
-                            <button
-                              class="bp4-button bp4-minimal"
-                              style="pointer-events: none;"
-                              type="button"
-                            >
-                              <span
-                                class="bp4-button-text"
-                              >
-                                Replicants:
-                              </span>
-                            </button>
                             <div
-                              class="bp4-control-group bp4-numeric-input"
+                              class="bp4-form-content"
                             >
                               <div
-                                class="bp4-input-group"
-                              >
-                                <input
-                                  aria-valuemax="256"
-                                  aria-valuemin="0"
-                                  aria-valuenow="2"
-                                  autocomplete="off"
-                                  class="bp4-input"
-                                  id="numericInput-0"
-                                  max="256"
-                                  min="0"
-                                  role="spinbutton"
-                                  type="text"
-                                  value="2"
-                                />
-                              </div>
-                              <div
-                                class="bp4-button-group bp4-vertical bp4-fixed"
+                                class="bp4-control-group"
                               >
                                 <button
-                                  aria-controls="numericInput-0"
-                                  aria-label="increment"
-                                  class="bp4-button"
+                                  class="bp4-button bp4-minimal"
+                                  style="pointer-events: none;"
                                   type="button"
                                 >
                                   <span
-                                    aria-hidden="true"
-                                    class="bp4-icon bp4-icon-chevron-up"
-                                    icon="chevron-up"
+                                    class="bp4-button-text"
+                                  >
+                                    Tier:
+                                  </span>
+                                </button>
+                                <div
+                                  class="bp4-html-select bp4-fill"
+                                >
+                                  <select>
+                                    <option
+                                      value="_default_tier"
+                                    >
+                                      _default_tier
+                                    </option>
+                                  </select>
+                                  <span
+                                    class="bp4-icon 
bp4-icon-double-caret-vertical"
+                                    icon="double-caret-vertical"
                                   >
                                     <svg
-                                      data-icon="chevron-up"
+                                      aria-labelledby="iconTitle-5"
+                                      data-icon="double-caret-vertical"
                                       height="16"
                                       role="img"
                                       viewBox="0 0 16 16"
                                       width="16"
                                     >
+                                      <title
+                                        id="iconTitle-5"
+                                      >
+                                        Open dropdown
+                                      </title>
                                       <path
-                                        d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 
5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 
3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
+                                        d="M5 7h6a1.003 1.003 0 
00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 
2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 
1.003 0 0011 9z"
                                         fill-rule="evenodd"
                                       />
                                     </svg>
                                   </span>
+                                </div>
+                                <button
+                                  class="bp4-button bp4-minimal"
+                                  style="pointer-events: none;"
+                                  type="button"
+                                >
+                                  <span
+                                    class="bp4-button-text"
+                                  >
+                                    Replicants:
+                                  </span>
                                 </button>
+                                <div
+                                  class="bp4-control-group bp4-numeric-input"
+                                >
+                                  <div
+                                    class="bp4-input-group"
+                                  >
+                                    <input
+                                      aria-valuemax="256"
+                                      aria-valuemin="0"
+                                      aria-valuenow="2"
+                                      autocomplete="off"
+                                      class="bp4-input"
+                                      id="numericInput-0"
+                                      max="256"
+                                      min="0"
+                                      role="spinbutton"
+                                      type="text"
+                                      value="2"
+                                    />
+                                  </div>
+                                  <div
+                                    class="bp4-button-group bp4-vertical 
bp4-fixed"
+                                  >
+                                    <button
+                                      aria-controls="numericInput-0"
+                                      aria-label="increment"
+                                      class="bp4-button"
+                                      type="button"
+                                    >
+                                      <span
+                                        aria-hidden="true"
+                                        class="bp4-icon bp4-icon-chevron-up"
+                                        icon="chevron-up"
+                                      >
+                                        <svg
+                                          data-icon="chevron-up"
+                                          height="16"
+                                          role="img"
+                                          viewBox="0 0 16 16"
+                                          width="16"
+                                        >
+                                          <path
+                                            d="M12.71 9.29l-4-4C8.53 5.11 8.28 
5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 
3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
+                                            fill-rule="evenodd"
+                                          />
+                                        </svg>
+                                      </span>
+                                    </button>
+                                    <button
+                                      aria-controls="numericInput-0"
+                                      aria-label="decrement"
+                                      class="bp4-button"
+                                      type="button"
+                                    >
+                                      <span
+                                        aria-hidden="true"
+                                        class="bp4-icon bp4-icon-chevron-down"
+                                        icon="chevron-down"
+                                      >
+                                        <svg
+                                          data-icon="chevron-down"
+                                          height="16"
+                                          role="img"
+                                          viewBox="0 0 16 16"
+                                          width="16"
+                                        >
+                                          <path
+                                            d="M12 5c-.28 0-.53.11-.71.29L8 
8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 
4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"
+                                            fill-rule="evenodd"
+                                          />
+                                        </svg>
+                                      </span>
+                                    </button>
+                                  </div>
+                                </div>
                                 <button
-                                  aria-controls="numericInput-0"
-                                  aria-label="decrement"
                                   class="bp4-button"
                                   type="button"
                                 >
                                   <span
                                     aria-hidden="true"
-                                    class="bp4-icon bp4-icon-chevron-down"
-                                    icon="chevron-down"
+                                    class="bp4-icon bp4-icon-trash"
+                                    icon="trash"
                                   >
                                     <svg
-                                      data-icon="chevron-down"
+                                      data-icon="trash"
                                       height="16"
                                       role="img"
                                       viewBox="0 0 16 16"
                                       width="16"
                                     >
                                       <path
-                                        d="M12 5c-.28 0-.53.11-.71.29L8 
8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 
4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"
+                                        d="M14.49 3.99h-13c-.28 
0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 
.5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 
1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 
1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 
1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 
1v1h14v-1c0-.55-.45-1-1-1z"
                                         fill-rule="evenodd"
                                       />
                                     </svg>
@@ -473,424 +504,401 @@ exports[`RetentionDialog matches snapshot 1`] = `
                                 </button>
                               </div>
                             </div>
-                            <button
-                              class="bp4-button"
-                              type="button"
+                          </div>
+                          <div
+                            class="bp4-form-group"
+                          >
+                            <div
+                              class="bp4-form-content"
                             >
-                              <span
-                                aria-hidden="true"
-                                class="bp4-icon bp4-icon-trash"
-                                icon="trash"
+                              <button
+                                class="bp4-button bp4-disabled bp4-minimal"
+                                disabled=""
+                                tabindex="-1"
+                                title="There are no tiers left to assign"
+                                type="button"
                               >
-                                <svg
-                                  data-icon="trash"
-                                  height="16"
-                                  role="img"
-                                  viewBox="0 0 16 16"
-                                  width="16"
+                                <span
+                                  aria-hidden="true"
+                                  class="bp4-icon bp4-icon-plus"
+                                  icon="plus"
+                                >
+                                  <svg
+                                    data-icon="plus"
+                                    height="16"
+                                    role="img"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                  >
+                                    <path
+                                      d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 
1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 
1-1s-.45-1-1-1z"
+                                      fill-rule="evenodd"
+                                    />
+                                  </svg>
+                                </span>
+                                <span
+                                  class="bp4-button-text"
                                 >
-                                  <path
-                                    d="M14.49 3.99h-13c-.28 
0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 
.5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 
1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 
1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 
1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 
1v1h14v-1c0-.55-.45-1-1-1z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
-                            </button>
+                                  Add historical tier replication
+                                </span>
+                              </button>
+                            </div>
                           </div>
                         </div>
                       </div>
-                      <div
-                        class="bp4-form-group"
+                    </div>
+                  </div>
+                  <div>
+                    <button
+                      class="bp4-button"
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                        class="bp4-icon bp4-icon-plus"
+                        icon="plus"
                       >
-                        <div
-                          class="bp4-form-content"
+                        <svg
+                          data-icon="plus"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
                         >
-                          <button
-                            class="bp4-button bp4-disabled bp4-minimal"
-                            disabled=""
-                            tabindex="-1"
-                            title="There are no tiers left to assign"
-                            type="button"
-                          >
-                            <span
-                              aria-hidden="true"
-                              class="bp4-icon bp4-icon-plus"
-                              icon="plus"
-                            >
-                              <svg
-                                data-icon="plus"
-                                height="16"
-                                role="img"
-                                viewBox="0 0 16 16"
-                                width="16"
-                              >
-                                <path
-                                  d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 
1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 
1-1s-.45-1-1-1z"
-                                  fill-rule="evenodd"
-                                />
-                              </svg>
-                            </span>
-                            <span
-                              class="bp4-button-text"
-                            >
-                              Add historical tier replication
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
+                          <path
+                            d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 
0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 
1-1s-.45-1-1-1z"
+                            fill-rule="evenodd"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="bp4-button-text"
+                      >
+                        New rule
+                      </span>
+                    </button>
                   </div>
                 </div>
               </div>
-              <div>
-                <button
-                  class="bp4-button"
-                  type="button"
-                >
-                  <span
-                    aria-hidden="true"
-                    class="bp4-icon bp4-icon-plus"
-                    icon="plus"
-                  >
-                    <svg
-                      data-icon="plus"
-                      height="16"
-                      role="img"
-                      viewBox="0 0 16 16"
-                      width="16"
-                    >
-                      <path
-                        d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 
.45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="bp4-button-text"
-                  >
-                    New rule
-                  </span>
-                </button>
-              </div>
-            </div>
-          </div>
-          <div
-            class="bp4-divider"
-          />
-          <div
-            class="bp4-form-group"
-          >
-            <label
-              class="bp4-label"
-            >
-              Cluster defaults (
-              <a>
-                edit
-              </a>
-              )
-               
-              <span
-                class="bp4-text-muted"
+              <div
+                class="bp4-divider"
               />
-            </label>
-            <div
-              class="bp4-form-content"
-            >
-              <p>
-                The cluster default rules are evaluated if none of the above 
rules match.
-              </p>
               <div
-                class="rule-editor"
+                class="bp4-form-group"
               >
-                <div
-                  class="title"
+                <label
+                  class="bp4-label"
                 >
-                  <button
-                    class="bp4-button bp4-minimal left"
-                    type="button"
-                  >
-                    <span
-                      class="bp4-button-text"
-                    >
-                      loadForever(2x)
-                    </span>
-                    <span
-                      aria-hidden="true"
-                      class="bp4-icon bp4-icon-caret-down"
-                      icon="caret-down"
-                    >
-                      <svg
-                        data-icon="caret-down"
-                        height="16"
-                        role="img"
-                        viewBox="0 0 16 16"
-                        width="16"
-                      >
-                        <path
-                          d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 
00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                          fill-rule="evenodd"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                  <div
-                    class="spacer"
+                  Cluster defaults (
+                  <a>
+                    edit
+                  </a>
+                  )
+                   
+                  <span
+                    class="bp4-text-muted"
                   />
-                </div>
+                </label>
                 <div
-                  class="bp4-collapse"
-                  style="height: auto; overflow-y: visible; transition: none;"
+                  class="bp4-form-content"
                 >
+                  <p>
+                    The cluster default rules are evaluated if none of the 
above rules match.
+                  </p>
                   <div
-                    aria-hidden="false"
-                    class="bp4-collapse-body"
-                    style="transform: translateY(0); transition: none;"
+                    class="rule-editor"
                   >
                     <div
-                      class="bp4-card bp4-elevation-2"
+                      class="title"
                     >
-                      <div
-                        class="bp4-form-group"
+                      <button
+                        class="bp4-button bp4-minimal left"
+                        type="button"
                       >
-                        <div
-                          class="bp4-form-content"
+                        <span
+                          class="bp4-button-text"
                         >
-                          <div
-                            class="bp4-control-group"
+                          loadForever(2x)
+                        </span>
+                        <span
+                          aria-hidden="true"
+                          class="bp4-icon bp4-icon-caret-down"
+                          icon="caret-down"
+                        >
+                          <svg
+                            data-icon="caret-down"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
                           >
-                            <div
-                              class="bp4-html-select bp4-disabled"
-                            >
-                              <select
-                                disabled=""
-                              >
-                                <option
-                                  value="loadForever"
-                                >
-                                  loadForever
-                                </option>
-                                <option
-                                  value="loadByInterval"
-                                >
-                                  loadByInterval
-                                </option>
-                                <option
-                                  value="loadByPeriod"
-                                >
-                                  loadByPeriod
-                                </option>
-                                <option
-                                  value="dropForever"
-                                >
-                                  dropForever
-                                </option>
-                                <option
-                                  value="dropByInterval"
-                                >
-                                  dropByInterval
-                                </option>
-                                <option
-                                  value="dropByPeriod"
-                                >
-                                  dropByPeriod
-                                </option>
-                                <option
-                                  value="dropBeforeByPeriod"
-                                >
-                                  dropBeforeByPeriod
-                                </option>
-                                <option
-                                  value="broadcastForever"
-                                >
-                                  broadcastForever
-                                </option>
-                                <option
-                                  value="broadcastByInterval"
-                                >
-                                  broadcastByInterval
-                                </option>
-                                <option
-                                  value="broadcastByPeriod"
-                                >
-                                  broadcastByPeriod
-                                </option>
-                              </select>
-                              <span
-                                class="bp4-icon bp4-icon-double-caret-vertical"
-                                icon="double-caret-vertical"
-                              >
-                                <svg
-                                  aria-labelledby="iconTitle-12"
-                                  data-icon="double-caret-vertical"
-                                  height="16"
-                                  role="img"
-                                  viewBox="0 0 16 16"
-                                  width="16"
-                                >
-                                  <title
-                                    id="iconTitle-12"
-                                  >
-                                    Open dropdown
-                                  </title>
-                                  <path
-                                    d="M5 7h6a1.003 1.003 0 
00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 
2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 
1.003 0 0011 9z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
+                            <path
+                              d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 
00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                              fill-rule="evenodd"
+                            />
+                          </svg>
+                        </span>
+                      </button>
                       <div
-                        class="bp4-form-group"
+                        class="spacer"
+                      />
+                    </div>
+                    <div
+                      class="bp4-collapse"
+                      style="height: auto; overflow-y: visible; transition: 
none;"
+                    >
+                      <div
+                        aria-hidden="false"
+                        class="bp4-collapse-body"
+                        style="transform: translateY(0); transition: none;"
                       >
                         <div
-                          class="bp4-form-content"
+                          class="bp4-card bp4-elevation-2"
                         >
                           <div
-                            class="bp4-control-group"
+                            class="bp4-form-group"
                           >
-                            <button
-                              class="bp4-button bp4-disabled bp4-minimal"
-                              disabled=""
-                              style="pointer-events: none;"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              <span
-                                class="bp4-button-text"
-                              >
-                                Tier:
-                              </span>
-                            </button>
-                            <div
-                              class="bp4-html-select bp4-disabled bp4-fill"
-                            >
-                              <select
-                                disabled=""
-                              >
-                                <option
-                                  value="_default_tier"
-                                >
-                                  _default_tier
-                                </option>
-                              </select>
-                              <span
-                                class="bp4-icon bp4-icon-double-caret-vertical"
-                                icon="double-caret-vertical"
-                              >
-                                <svg
-                                  aria-labelledby="iconTitle-13"
-                                  data-icon="double-caret-vertical"
-                                  height="16"
-                                  role="img"
-                                  viewBox="0 0 16 16"
-                                  width="16"
-                                >
-                                  <title
-                                    id="iconTitle-13"
-                                  >
-                                    Open dropdown
-                                  </title>
-                                  <path
-                                    d="M5 7h6a1.003 1.003 0 
00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 
2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 
1.003 0 0011 9z"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
-                            </div>
-                            <button
-                              class="bp4-button bp4-disabled bp4-minimal"
-                              disabled=""
-                              style="pointer-events: none;"
-                              tabindex="-1"
-                              type="button"
-                            >
-                              <span
-                                class="bp4-button-text"
-                              >
-                                Replicants:
-                              </span>
-                            </button>
                             <div
-                              class="bp4-control-group bp4-numeric-input"
+                              class="bp4-form-content"
                             >
                               <div
-                                class="bp4-input-group bp4-disabled"
+                                class="bp4-control-group"
                               >
-                                <input
-                                  aria-valuemax="256"
-                                  aria-valuemin="0"
-                                  aria-valuenow="2"
-                                  autocomplete="off"
-                                  class="bp4-input"
-                                  disabled=""
-                                  id="numericInput-1"
-                                  max="256"
-                                  min="0"
-                                  role="spinbutton"
-                                  type="text"
-                                  value="2"
-                                />
-                              </div>
-                              <div
-                                class="bp4-button-group bp4-vertical bp4-fixed"
-                              >
-                                <button
-                                  aria-controls="numericInput-1"
-                                  aria-label="increment"
-                                  class="bp4-button bp4-disabled"
-                                  disabled=""
-                                  tabindex="-1"
-                                  type="button"
+                                <div
+                                  class="bp4-html-select bp4-disabled"
                                 >
+                                  <select
+                                    disabled=""
+                                  >
+                                    <option
+                                      value="loadForever"
+                                    >
+                                      loadForever
+                                    </option>
+                                    <option
+                                      value="loadByInterval"
+                                    >
+                                      loadByInterval
+                                    </option>
+                                    <option
+                                      value="loadByPeriod"
+                                    >
+                                      loadByPeriod
+                                    </option>
+                                    <option
+                                      value="dropForever"
+                                    >
+                                      dropForever
+                                    </option>
+                                    <option
+                                      value="dropByInterval"
+                                    >
+                                      dropByInterval
+                                    </option>
+                                    <option
+                                      value="dropByPeriod"
+                                    >
+                                      dropByPeriod
+                                    </option>
+                                    <option
+                                      value="dropBeforeByPeriod"
+                                    >
+                                      dropBeforeByPeriod
+                                    </option>
+                                    <option
+                                      value="broadcastForever"
+                                    >
+                                      broadcastForever
+                                    </option>
+                                    <option
+                                      value="broadcastByInterval"
+                                    >
+                                      broadcastByInterval
+                                    </option>
+                                    <option
+                                      value="broadcastByPeriod"
+                                    >
+                                      broadcastByPeriod
+                                    </option>
+                                  </select>
                                   <span
-                                    aria-hidden="true"
-                                    class="bp4-icon bp4-icon-chevron-up"
-                                    icon="chevron-up"
+                                    class="bp4-icon 
bp4-icon-double-caret-vertical"
+                                    icon="double-caret-vertical"
                                   >
                                     <svg
-                                      data-icon="chevron-up"
+                                      aria-labelledby="iconTitle-12"
+                                      data-icon="double-caret-vertical"
                                       height="16"
                                       role="img"
                                       viewBox="0 0 16 16"
                                       width="16"
                                     >
+                                      <title
+                                        id="iconTitle-12"
+                                      >
+                                        Open dropdown
+                                      </title>
                                       <path
-                                        d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 
5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 
3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
+                                        d="M5 7h6a1.003 1.003 0 
00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 
2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 
1.003 0 0011 9z"
                                         fill-rule="evenodd"
                                       />
                                     </svg>
                                   </span>
-                                </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="bp4-form-group"
+                          >
+                            <div
+                              class="bp4-form-content"
+                            >
+                              <div
+                                class="bp4-control-group"
+                              >
                                 <button
-                                  aria-controls="numericInput-1"
-                                  aria-label="decrement"
-                                  class="bp4-button bp4-disabled"
+                                  class="bp4-button bp4-disabled bp4-minimal"
                                   disabled=""
+                                  style="pointer-events: none;"
                                   tabindex="-1"
                                   type="button"
                                 >
                                   <span
-                                    aria-hidden="true"
-                                    class="bp4-icon bp4-icon-chevron-down"
-                                    icon="chevron-down"
+                                    class="bp4-button-text"
+                                  >
+                                    Tier:
+                                  </span>
+                                </button>
+                                <div
+                                  class="bp4-html-select bp4-disabled bp4-fill"
+                                >
+                                  <select
+                                    disabled=""
+                                  >
+                                    <option
+                                      value="_default_tier"
+                                    >
+                                      _default_tier
+                                    </option>
+                                  </select>
+                                  <span
+                                    class="bp4-icon 
bp4-icon-double-caret-vertical"
+                                    icon="double-caret-vertical"
                                   >
                                     <svg
-                                      data-icon="chevron-down"
+                                      aria-labelledby="iconTitle-13"
+                                      data-icon="double-caret-vertical"
                                       height="16"
                                       role="img"
                                       viewBox="0 0 16 16"
                                       width="16"
                                     >
+                                      <title
+                                        id="iconTitle-13"
+                                      >
+                                        Open dropdown
+                                      </title>
                                       <path
-                                        d="M12 5c-.28 0-.53.11-.71.29L8 
8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 
4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"
+                                        d="M5 7h6a1.003 1.003 0 
00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 
2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 
1.003 0 0011 9z"
                                         fill-rule="evenodd"
                                       />
                                     </svg>
                                   </span>
+                                </div>
+                                <button
+                                  class="bp4-button bp4-disabled bp4-minimal"
+                                  disabled=""
+                                  style="pointer-events: none;"
+                                  tabindex="-1"
+                                  type="button"
+                                >
+                                  <span
+                                    class="bp4-button-text"
+                                  >
+                                    Replicants:
+                                  </span>
                                 </button>
+                                <div
+                                  class="bp4-control-group bp4-numeric-input"
+                                >
+                                  <div
+                                    class="bp4-input-group bp4-disabled"
+                                  >
+                                    <input
+                                      aria-valuemax="256"
+                                      aria-valuemin="0"
+                                      aria-valuenow="2"
+                                      autocomplete="off"
+                                      class="bp4-input"
+                                      disabled=""
+                                      id="numericInput-1"
+                                      max="256"
+                                      min="0"
+                                      role="spinbutton"
+                                      type="text"
+                                      value="2"
+                                    />
+                                  </div>
+                                  <div
+                                    class="bp4-button-group bp4-vertical 
bp4-fixed"
+                                  >
+                                    <button
+                                      aria-controls="numericInput-1"
+                                      aria-label="increment"
+                                      class="bp4-button bp4-disabled"
+                                      disabled=""
+                                      tabindex="-1"
+                                      type="button"
+                                    >
+                                      <span
+                                        aria-hidden="true"
+                                        class="bp4-icon bp4-icon-chevron-up"
+                                        icon="chevron-up"
+                                      >
+                                        <svg
+                                          data-icon="chevron-up"
+                                          height="16"
+                                          role="img"
+                                          viewBox="0 0 16 16"
+                                          width="16"
+                                        >
+                                          <path
+                                            d="M12.71 9.29l-4-4C8.53 5.11 8.28 
5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 001.42 1.42L8 7.41l3.29 
3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71z"
+                                            fill-rule="evenodd"
+                                          />
+                                        </svg>
+                                      </span>
+                                    </button>
+                                    <button
+                                      aria-controls="numericInput-1"
+                                      aria-label="decrement"
+                                      class="bp4-button bp4-disabled"
+                                      disabled=""
+                                      tabindex="-1"
+                                      type="button"
+                                    >
+                                      <span
+                                        aria-hidden="true"
+                                        class="bp4-icon bp4-icon-chevron-down"
+                                        icon="chevron-down"
+                                      >
+                                        <svg
+                                          data-icon="chevron-down"
+                                          height="16"
+                                          role="img"
+                                          viewBox="0 0 16 16"
+                                          width="16"
+                                        >
+                                          <path
+                                            d="M12 5c-.28 0-.53.11-.71.29L8 
8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42l4 
4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0012 5z"
+                                            fill-rule="evenodd"
+                                          />
+                                        </svg>
+                                      </span>
+                                    </button>
+                                  </div>
+                                </div>
                               </div>
                             </div>
                           </div>
diff --git a/web-console/src/dialogs/retention-dialog/retention-dialog.scss 
b/web-console/src/dialogs/retention-dialog/retention-dialog.scss
index fb55a8d4455..e2db98ee8a9 100644
--- a/web-console/src/dialogs/retention-dialog/retention-dialog.scss
+++ b/web-console/src/dialogs/retention-dialog/retention-dialog.scss
@@ -29,10 +29,26 @@
     display: flex;
     flex-direction: column;
 
-    .rule-editor {
+    .rule-form {
+      position: relative;
+      flex: 1;
+
+      .rule-form-content {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+      }
+    }
+
+    .rule-editor:not(:last-child) {
       margin-bottom: 15px;
     }
 
+    .json-input {
+      margin-bottom: 10px;
+    }
+
     .no-rules-message {
       font-style: italic;
     }
diff --git a/web-console/src/dialogs/retention-dialog/retention-dialog.tsx 
b/web-console/src/dialogs/retention-dialog/retention-dialog.tsx
index cc9645bd79f..ac231e8e991 100644
--- a/web-console/src/dialogs/retention-dialog/retention-dialog.tsx
+++ b/web-console/src/dialogs/retention-dialog/retention-dialog.tsx
@@ -114,6 +114,24 @@ ORDER BY 1`,
     setCurrentRules(swapElements(currentRules, index, index + direction));
   }
 
+  const defaultRuleRender =
+    datasource !== CLUSTER_DEFAULT_FAKE_DATASOURCE ? (
+      <FormGroup
+        label={
+          <>
+            Cluster defaults (<a onClick={onEditDefaults}>edit</a>)
+          </>
+        }
+      >
+        <p>The cluster default rules are evaluated if none of the above rules 
match.</p>
+        {currentTab === 'form' ? (
+          defaultRules.map((rule, index) => <RuleEditor key={index} 
rule={rule} tiers={tiers} />)
+        ) : (
+          <JsonInput value={defaultRules} />
+        )}
+      </FormGroup>
+    ) : undefined;
+
   return (
     <SnitchDialog
       className="retention-dialog"
@@ -142,61 +160,51 @@ ORDER BY 1`,
         }}
       />
       {currentTab === 'form' ? (
-        <FormGroup>
-          {currentRules.length ? (
-            currentRules.map((rule, index) => (
-              <RuleEditor
-                key={index}
-                rule={rule}
-                tiers={tiers}
-                onChange={r => changeRule(r, index)}
-                onDelete={() => deleteRule(index)}
-                moveUp={index > 0 ? () => moveRule(index, -1) : undefined}
-                moveDown={index < currentRules.length - 1 ? () => 
moveRule(index, 1) : undefined}
-              />
-            ))
-          ) : datasource !== CLUSTER_DEFAULT_FAKE_DATASOURCE ? (
-            <p className="no-rules-message">
-              This datasource currently has no rules, it will use the cluster 
defaults.
-            </p>
-          ) : undefined}
-          <div>
-            <Button
-              icon={IconNames.PLUS}
-              onClick={addRule}
-              intent={currentRules.length ? undefined : Intent.PRIMARY}
-            >
-              New rule
-            </Button>
+        <div className="rule-form">
+          <div className="rule-form-content">
+            <FormGroup>
+              {currentRules.length ? (
+                currentRules.map((rule, index) => (
+                  <RuleEditor
+                    key={index}
+                    rule={rule}
+                    tiers={tiers}
+                    onChange={r => changeRule(r, index)}
+                    onDelete={() => deleteRule(index)}
+                    moveUp={index > 0 ? () => moveRule(index, -1) : undefined}
+                    moveDown={
+                      index < currentRules.length - 1 ? () => moveRule(index, 
1) : undefined
+                    }
+                  />
+                ))
+              ) : datasource !== CLUSTER_DEFAULT_FAKE_DATASOURCE ? (
+                <p className="no-rules-message">
+                  This datasource currently has no rules, it will use the 
cluster defaults.
+                </p>
+              ) : undefined}
+              <div>
+                <Button
+                  icon={IconNames.PLUS}
+                  onClick={addRule}
+                  intent={currentRules.length ? undefined : Intent.PRIMARY}
+                >
+                  New rule
+                </Button>
+              </div>
+            </FormGroup>
+            {defaultRuleRender && <Divider />}
+            {defaultRuleRender}
           </div>
-        </FormGroup>
+        </div>
       ) : (
-        <JsonInput
-          value={currentRules}
-          onChange={setCurrentRules}
-          setError={setJsonError}
-          height="100%"
-        />
-      )}
-      {datasource !== CLUSTER_DEFAULT_FAKE_DATASOURCE && (
         <>
-          <Divider />
-          <FormGroup
-            label={
-              <>
-                Cluster defaults (<a onClick={onEditDefaults}>edit</a>)
-              </>
-            }
-          >
-            <p>The cluster default rules are evaluated if none of the above 
rules match.</p>
-            {currentTab === 'form' ? (
-              defaultRules.map((rule, index) => (
-                <RuleEditor key={index} rule={rule} tiers={tiers} />
-              ))
-            ) : (
-              <JsonInput value={defaultRules} />
-            )}
-          </FormGroup>
+          <JsonInput
+            value={currentRules}
+            onChange={setCurrentRules}
+            setError={setJsonError}
+            height="100%"
+          />
+          {defaultRuleRender}
         </>
       )}
     </SnitchDialog>
diff --git a/web-console/src/druid-models/stages/stages.spec.ts 
b/web-console/src/druid-models/stages/stages.spec.ts
index 8bf60d414e9..ad8f2e77408 100644
--- a/web-console/src/druid-models/stages/stages.spec.ts
+++ b/web-console/src/druid-models/stages/stages.spec.ts
@@ -27,8 +27,7 @@ describe('Stages', () => {
 
   describe('#getByPartitionCountersForStage', () => {
     it('works for input', () => {
-      expect(STAGES.getByPartitionCountersForStage(STAGES.stages[2], 'input'))
-        .toMatchInlineSnapshot(`
+      expect(STAGES.getByPartitionCountersForStage(STAGES.stages[2], 
'in')).toMatchInlineSnapshot(`
         [
           {
             "index": 0,
@@ -45,8 +44,7 @@ describe('Stages', () => {
     });
 
     it('works for output', () => {
-      expect(STAGES.getByPartitionCountersForStage(STAGES.stages[2], 'output'))
-        .toMatchInlineSnapshot(`
+      expect(STAGES.getByPartitionCountersForStage(STAGES.stages[2], 
'out')).toMatchInlineSnapshot(`
         [
           {
             "index": 0,
diff --git a/web-console/src/druid-models/stages/stages.ts 
b/web-console/src/druid-models/stages/stages.ts
index 2f97e7bc96f..04cf22be8f9 100644
--- a/web-console/src/druid-models/stages/stages.ts
+++ b/web-console/src/druid-models/stages/stages.ts
@@ -22,8 +22,10 @@ import { deleteKeys, filterMap, oneOf, zeroDivide } from 
'../../utils';
 import type { InputFormat } from '../input-format/input-format';
 import type { InputSource } from '../input-source/input-source';
 
-const SORT_WEIGHT = 0.5;
-const READING_INPUT_WITH_SORT_WEIGHT = 1 - SORT_WEIGHT;
+const SHUFFLE_WEIGHT = 0.5;
+const READING_INPUT_WITH_SHUFFLE_WEIGHT = 1 - SHUFFLE_WEIGHT;
+
+export type InOut = 'in' | 'out';
 
 export type StageInput =
   | {
@@ -261,13 +263,13 @@ export class Stages {
     return Stages.stageType(stage) !== 'segmentGenerator';
   }
 
-  stageHasSort(stage: StageDefinition): boolean {
+  stageHasShuffle(stage: StageDefinition): boolean {
     if (!this.stageHasOutput(stage)) return false;
-    return Boolean(stage.sort);
+    return Boolean(stage.sort) || this.hasCounterForStage(stage, 'shuffle');
   }
 
-  stageOutputCounterName(stage: StageDefinition): ChannelCounterName {
-    return this.stageHasSort(stage) ? 'shuffle' : 'output';
+  stageFinalCounterName(stage: StageDefinition): ChannelCounterName {
+    return this.stageHasShuffle(stage) ? 'shuffle' : 'output';
   }
 
   overallProgress(): number {
@@ -286,12 +288,14 @@ export class Stages {
     switch (stage.phase) {
       case 'READING_INPUT':
         return (
-          (this.stageHasSort(stage) ? READING_INPUT_WITH_SORT_WEIGHT : 1) *
+          (this.stageHasShuffle(stage) ? READING_INPUT_WITH_SHUFFLE_WEIGHT : 
1) *
           this.readingInputPhaseProgress(stage)
         );
 
       case 'POST_READING':
-        return READING_INPUT_WITH_SORT_WEIGHT + SORT_WEIGHT * 
this.postReadingPhaseProgress(stage);
+        return (
+          READING_INPUT_WITH_SHUFFLE_WEIGHT + SHUFFLE_WEIGHT * 
this.postReadingPhaseProgress(stage)
+        );
 
       case 'RESULTS_READY':
       case 'FINISHED':
@@ -415,7 +419,7 @@ export class Stages {
   }
 
   getTotalOutputForStage(stage: StageDefinition, field: 'frames' | 'rows' | 
'bytes'): number {
-    return this.getTotalCounterForStage(stage, 
this.stageOutputCounterName(stage), field);
+    return this.getTotalCounterForStage(stage, 
this.stageFinalCounterName(stage), field);
   }
 
   getSortProgressForStage(stage: StageDefinition): number {
@@ -445,7 +449,7 @@ export class Stages {
 
     const channelCounters = definition.input.map((_, i) => `input${i}` as 
ChannelCounterName);
     if (this.stageHasOutput(stage)) channelCounters.push('output');
-    if (this.stageHasSort(stage)) channelCounters.push('shuffle');
+    if (this.stageHasShuffle(stage)) channelCounters.push('shuffle');
     return channelCounters;
   }
 
@@ -479,9 +483,9 @@ export class Stages {
 
   getPartitionChannelCounterNamesForStage(
     stage: StageDefinition,
-    type: 'input' | 'output',
+    inOut: InOut,
   ): ChannelCounterName[] {
-    if (type === 'input') {
+    if (inOut === 'in') {
       const { input, broadcast } = stage.definition;
       return filterMap(input, (input, i) =>
         input.type === 'stage' && !broadcast?.includes(i)
@@ -489,31 +493,28 @@ export class Stages {
           : undefined,
       );
     } else {
-      return [this.stageOutputCounterName(stage)];
+      return [this.stageFinalCounterName(stage)];
     }
   }
 
-  getByPartitionCountersForStage(
-    stage: StageDefinition,
-    type: 'input' | 'output',
-  ): SimpleWideCounter[] {
-    const counterNames = this.getPartitionChannelCounterNamesForStage(stage, 
type);
+  getByPartitionCountersForStage(stage: StageDefinition, inOut: InOut): 
SimpleWideCounter[] {
+    const counterNames = this.getPartitionChannelCounterNamesForStage(stage, 
inOut);
     if (!counterNames.length) return [];
 
     if (!this.hasCounterForStage(stage, counterNames[0])) return [];
     const stageCounters = this.getCountersForStage(stage);
 
-    const { partitionCount } = stage;
-    const partitionNumber =
-      type === 'output'
-        ? partitionCount
-        : max(stageCounters, stageCounter =>
-            max(counterNames, counterName => {
-              const channelCounter = stageCounter[counterName];
-              if (channelCounter?.type !== 'channel') return 0;
-              return channelCounter.rows?.length || 0;
-            }),
-          );
+    let partitionNumber = max(stageCounters, stageCounter =>
+      max(counterNames, counterName => {
+        const channelCounter = stageCounter[counterName];
+        if (channelCounter?.type !== 'channel') return 0;
+        return channelCounter.rows?.length || 0;
+      }),
+    );
+
+    if (inOut === 'out') {
+      partitionNumber = Math.max(partitionNumber || 0, stage.partitionCount || 
0);
+    }
 
     if (!partitionNumber) return [];
 
diff --git a/web-console/src/utils/basic-action.tsx 
b/web-console/src/utils/basic-action.tsx
index 7cb591b6322..5194d26fa1b 100644
--- a/web-console/src/utils/basic-action.tsx
+++ b/web-console/src/utils/basic-action.tsx
@@ -17,7 +17,7 @@
  */
 
 import type { IconName, Intent } from '@blueprintjs/core';
-import { Menu, MenuItem } from '@blueprintjs/core';
+import { Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
 import type { JSX } from 'react';
 import React from 'react';
 
@@ -29,10 +29,14 @@ export interface BasicAction {
   disabledReason?: string;
 }
 
-export function basicActionsToMenu(basicActions: BasicAction[]): JSX.Element | 
undefined {
+export function basicActionsToMenu(
+  basicActions: BasicAction[],
+  title?: string,
+): JSX.Element | undefined {
   if (!basicActions.length) return;
   return (
     <Menu>
+      {title && <MenuDivider title={title} />}
       {basicActions.map(({ icon, title, intent, onAction, disabledReason }, i) 
=> (
         <MenuItem
           key={i}
diff --git a/web-console/src/views/datasources-view/datasources-view.tsx 
b/web-console/src/views/datasources-view/datasources-view.tsx
index 54b11a5a0cb..da5f8dbbff1 100644
--- a/web-console/src/views/datasources-view/datasources-view.tsx
+++ b/web-console/src/views/datasources-view/datasources-view.tsx
@@ -1212,7 +1212,7 @@ GROUP BY 1, 2`;
                       num_segments !== num_zero_replica_segments
                         ? `Fully ${descriptor}`
                         : undefined,
-                      hasZeroReplicationRule ? `${percentZeroReplica}% async 
only` : '',
+                      hasZeroReplicationRule ? `${percentZeroReplica}% deep 
storage only` : '',
                     ).join(', ')}{' '}
                     ({segmentsEl})
                   </span>
@@ -1228,7 +1228,7 @@ GROUP BY 1, 2`;
                       {numAvailableSegments ? '\u25cf' : '\u25cb'}&nbsp;
                     </span>
                     {`${percentAvailable}% ${descriptor}${
-                      hasZeroReplicationRule ? `, ${percentZeroReplica}% async 
only` : ''
+                      hasZeroReplicationRule ? `, ${percentZeroReplica}% deep 
storage only` : ''
                     }`}{' '}
                     ({segmentsEl})
                   </span>
@@ -1614,6 +1614,7 @@ GROUP BY 1, 2`;
                   }}
                   disableDetail={unused}
                   actions={datasourceActions}
+                  menuTitle={datasource}
                 />
               );
             },
diff --git a/web-console/src/views/lookups-view/lookups-view.tsx 
b/web-console/src/views/lookups-view/lookups-view.tsx
index caeee7d3466..b3df25717fe 100644
--- a/web-console/src/views/lookups-view/lookups-view.tsx
+++ b/web-console/src/views/lookups-view/lookups-view.tsx
@@ -464,6 +464,7 @@ export class LookupsView extends 
React.PureComponent<LookupsViewProps, LookupsVi
                     this.onDetail(original);
                   }}
                   actions={lookupActions}
+                  menuTitle={lookupId}
                 />
               );
             },
diff --git a/web-console/src/views/segments-view/segments-view.tsx 
b/web-console/src/views/segments-view/segments-view.tsx
index 7d7bcaeec46..c266e7bd994 100644
--- a/web-console/src/views/segments-view/segments-view.tsx
+++ b/web-console/src/views/segments-view/segments-view.tsx
@@ -886,6 +886,7 @@ END AS "time_span"`,
                     this.onDetail(id, datasource);
                   }}
                   actions={this.getSegmentActions(id, datasource)}
+                  menuTitle={id}
                 />
               );
             },
diff --git a/web-console/src/views/services-view/services-view.tsx 
b/web-console/src/views/services-view/services-view.tsx
index 52de53f80de..86693f85fcf 100644
--- a/web-console/src/views/services-view/services-view.tsx
+++ b/web-console/src/views/services-view/services-view.tsx
@@ -656,7 +656,7 @@ ORDER BY
               const { worker } = value;
               const disabled = worker.version === '';
               const workerActions = this.getWorkerActions(worker.host, 
disabled);
-              return <ActionCell actions={workerActions} />;
+              return <ActionCell actions={workerActions} 
menuTitle={worker.host} />;
             },
             Aggregated: () => '',
           },
diff --git a/web-console/src/views/supervisors-view/supervisors-view.tsx 
b/web-console/src/views/supervisors-view/supervisors-view.tsx
index 68654cbce79..792b16a58ce 100644
--- a/web-console/src/views/supervisors-view/supervisors-view.tsx
+++ b/web-console/src/views/supervisors-view/supervisors-view.tsx
@@ -898,6 +898,7 @@ export class SupervisorsView extends React.PureComponent<
                 <ActionCell
                   onDetail={() => this.onSupervisorDetail(row.original)}
                   actions={supervisorActions}
+                  menuTitle={id}
                 />
               );
             },
diff --git a/web-console/src/views/tasks-view/tasks-view.tsx 
b/web-console/src/views/tasks-view/tasks-view.tsx
index 49a66b71cb1..5e3d59f06a1 100644
--- a/web-console/src/views/tasks-view/tasks-view.tsx
+++ b/web-console/src/views/tasks-view/tasks-view.tsx
@@ -505,6 +505,7 @@ ORDER BY
                 <ActionCell
                   onDetail={() => this.onTaskDetail(row.original)}
                   actions={this.getTaskActions(id, datasource, status, type, 
true)}
+                  menuTitle={id}
                 />
               );
             },
diff --git a/web-console/src/views/workbench-view/column-tree/column-tree.tsx 
b/web-console/src/views/workbench-view/column-tree/column-tree.tsx
index 839bd2b5ca4..6684dd356d3 100644
--- a/web-console/src/views/workbench-view/column-tree/column-tree.tsx
+++ b/web-console/src/views/workbench-view/column-tree/column-tree.tsx
@@ -339,7 +339,8 @@ export class ColumnTree extends 
React.PureComponent<ColumnTreeProps, ColumnTreeS
                                       F.max(C('__time')).as('max_time'),
                                     ])
                                     .changeGroupByExpressions([])
-                                    .changeWhereExpression(getWhere(true)),
+                                    .changeWhereExpression(getWhere(true))
+                                    .removeColumnFromWhere('__time'),
                                   true,
                                 );
                               }}
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 88cefa045ad..47d85e16f3f 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
@@ -32,6 +32,7 @@ import type {
   ClusterBy,
   CounterName,
   Execution,
+  InOut,
   SegmentGenerationProgressFields,
   SimpleWideCounter,
   StageDefinition,
@@ -179,9 +180,9 @@ export const ExecutionStagesPane = React.memo(function 
ExecutionStagesPane(
     const phaseIsWorking = oneOf(phase, 'NEW', 'READING_INPUT', 
'POST_READING');
     return (
       <div className="execution-stage-detail-pane">
-        {detailedCountersForPartitions(stage, 'input', phase === 
'READING_INPUT')}
+        {detailedCountersForPartitions(stage, 'in', phase === 'READING_INPUT')}
         {detailedCountersForWorkers(stage)}
-        {detailedCountersForPartitions(stage, 'output', phaseIsWorking)}
+        {detailedCountersForPartitions(stage, 'out', phaseIsWorking)}
       </div>
     );
   }
@@ -320,15 +321,15 @@ export const ExecutionStagesPane = React.memo(function 
ExecutionStagesPane(
 
   function detailedCountersForPartitions(
     stage: StageDefinition,
-    type: 'input' | 'output',
+    inOut: InOut,
     inProgress: boolean,
   ) {
-    const wideCounters = stages.getByPartitionCountersForStage(stage, type);
+    const wideCounters = stages.getByPartitionCountersForStage(stage, inOut);
     if (!wideCounters.length) return;
 
     const counterNames: ChannelCounterName[] = 
stages.getPartitionChannelCounterNamesForStage(
       stage,
-      type,
+      inOut,
     );
 
     const bracesRows: Record<ChannelCounterName, string[]> = {} as any;
@@ -349,7 +350,7 @@ export const ExecutionStagesPane = React.memo(function 
ExecutionStagesPane(
         showPagination={wideCounters.length > MAX_DETAIL_ROWS}
         columns={[
           {
-            Header: `${capitalizeFirst(type)} partitions` + (inProgress ? '*' 
: ''),
+            Header: `${capitalizeFirst(inOut)} partitions` + (inProgress ? '*' 
: ''),
             id: 'partition',
             accessor: d => d.index,
             className: 'padded',


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@druid.apache.org
For additional commands, e-mail: commits-h...@druid.apache.org


Reply via email to