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

ccaominh 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 f470bcd  Fix deleting a data node tier causes load rules to display 
incorrectly (#9891)
f470bcd is described below

commit f470bcd11fbf1be98e364a7acbb20757d91e6e0b
Author: Maytas Monsereenusorn <52679095+mayt...@users.noreply.github.com>
AuthorDate: Wed May 20 13:49:28 2020 -1000

    Fix deleting a data node tier causes load rules to display incorrectly 
(#9891)
    
    * Fix Deleting a data node tier causes load rules to malfunction & display 
incorrectly
    
    * add tests
    
    * fix style
---
 .../__snapshots__/rule-editor.spec.tsx.snap        | 1322 +++++++++++++++++++-
 .../components/rule-editor/rule-editor.spec.tsx    |   62 +-
 .../src/components/rule-editor/rule-editor.tsx     |    5 +-
 3 files changed, 1386 insertions(+), 3 deletions(-)

diff --git 
a/web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap
 
b/web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap
index e1e7c49..43d59de 100644
--- 
a/web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap
+++ 
b/web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`rule editor matches snapshot 1`] = `
+exports[`rule editor matches snapshot no tier in rule 1`] = `
 <div
   class="rule-editor"
 >
@@ -213,3 +213,1323 @@ exports[`rule editor matches snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`rule editor matches snapshot with existing tier and non existing tier 
in rule 1`] = `
+<div
+  class="rule-editor"
+>
+  <div
+    class="title"
+  >
+    <button
+      class="bp3-button bp3-minimal left"
+      type="button"
+    >
+      <span
+        class="bp3-button-text"
+      >
+        loadByInterval(2010-01-01/2015-01-01)
+      </span>
+      <span
+        class="bp3-icon bp3-icon-caret-down"
+        icon="caret-down"
+      >
+        <svg
+          data-icon="caret-down"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <desc>
+            caret-down
+          </desc>
+          <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="bp3-button bp3-minimal"
+      type="button"
+    >
+      <span
+        class="bp3-icon bp3-icon-trash"
+        icon="trash"
+      >
+        <svg
+          data-icon="trash"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <desc>
+            trash
+          </desc>
+          <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="bp3-collapse"
+    style="height: auto; overflow-y: visible; transition: none;"
+  >
+    <div
+      aria-hidden="false"
+      class="bp3-collapse-body"
+      style="transform: translateY(0); transition: none;"
+    >
+      <div
+        class="bp3-card bp3-elevation-0"
+      >
+        <div
+          class="bp3-form-group"
+        >
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-control-group"
+            >
+              <div
+                class="bp3-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="bp3-icon bp3-icon-double-caret-vertical"
+                  icon="double-caret-vertical"
+                >
+                  <svg
+                    data-icon="double-caret-vertical"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      double-caret-vertical
+                    </desc>
+                    <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="bp3-input-group"
+              >
+                <input
+                  class="bp3-input"
+                  placeholder="2010-01-01/2020-01-01"
+                  style="padding-right: 10px;"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="bp3-form-group"
+        >
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-control-group"
+            >
+              <button
+                class="bp3-button bp3-minimal"
+                style="pointer-events: none;"
+                type="button"
+              >
+                <span
+                  class="bp3-button-text"
+                >
+                  Replicants:
+                </span>
+              </button>
+              <div
+                class="bp3-control-group bp3-numeric-input"
+              >
+                <div
+                  class="bp3-input-group"
+                >
+                  <input
+                    autocomplete="off"
+                    class="bp3-input"
+                    max="256"
+                    min="1"
+                    style="padding-right: 10px;"
+                    type="text"
+                    value="1"
+                  />
+                </div>
+                <div
+                  class="bp3-button-group bp3-vertical bp3-fixed"
+                >
+                  <button
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-up"
+                      icon="chevron-up"
+                    >
+                      <svg
+                        data-icon="chevron-up"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-up
+                        </desc>
+                        <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
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-down"
+                      icon="chevron-down"
+                    >
+                      <svg
+                        data-icon="chevron-down"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-down
+                        </desc>
+                        <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
+                class="bp3-button bp3-minimal"
+                style="pointer-events: none;"
+                type="button"
+              >
+                <span
+                  class="bp3-button-text"
+                >
+                  Tier:
+                </span>
+              </button>
+              <div
+                class="bp3-html-select bp3-fill"
+              >
+                <select>
+                  <option
+                    value="nonexist"
+                  >
+                    nonexist
+                  </option>
+                  <option
+                    value="test2"
+                  >
+                    test2
+                  </option>
+                  <option
+                    value="test3"
+                  >
+                    test3
+                  </option>
+                </select>
+                <span
+                  class="bp3-icon bp3-icon-double-caret-vertical"
+                  icon="double-caret-vertical"
+                >
+                  <svg
+                    data-icon="double-caret-vertical"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      double-caret-vertical
+                    </desc>
+                    <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="bp3-button"
+                type="button"
+              >
+                <span
+                  class="bp3-icon bp3-icon-trash"
+                  icon="trash"
+                >
+                  <svg
+                    data-icon="trash"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      trash
+                    </desc>
+                    <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="bp3-control-group"
+            >
+              <button
+                class="bp3-button bp3-minimal"
+                style="pointer-events: none;"
+                type="button"
+              >
+                <span
+                  class="bp3-button-text"
+                >
+                  Replicants:
+                </span>
+              </button>
+              <div
+                class="bp3-control-group bp3-numeric-input"
+              >
+                <div
+                  class="bp3-input-group"
+                >
+                  <input
+                    autocomplete="off"
+                    class="bp3-input"
+                    max="256"
+                    min="1"
+                    style="padding-right: 10px;"
+                    type="text"
+                    value="2"
+                  />
+                </div>
+                <div
+                  class="bp3-button-group bp3-vertical bp3-fixed"
+                >
+                  <button
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-up"
+                      icon="chevron-up"
+                    >
+                      <svg
+                        data-icon="chevron-up"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-up
+                        </desc>
+                        <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
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-down"
+                      icon="chevron-down"
+                    >
+                      <svg
+                        data-icon="chevron-down"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-down
+                        </desc>
+                        <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
+                class="bp3-button bp3-minimal"
+                style="pointer-events: none;"
+                type="button"
+              >
+                <span
+                  class="bp3-button-text"
+                >
+                  Tier:
+                </span>
+              </button>
+              <div
+                class="bp3-html-select bp3-fill"
+              >
+                <select>
+                  <option
+                    value="test1"
+                  >
+                    test1
+                  </option>
+                  <option
+                    value="test2"
+                  >
+                    test2
+                  </option>
+                  <option
+                    value="test3"
+                  >
+                    test3
+                  </option>
+                </select>
+                <span
+                  class="bp3-icon bp3-icon-double-caret-vertical"
+                  icon="double-caret-vertical"
+                >
+                  <svg
+                    data-icon="double-caret-vertical"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      double-caret-vertical
+                    </desc>
+                    <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="bp3-button"
+                type="button"
+              >
+                <span
+                  class="bp3-icon bp3-icon-trash"
+                  icon="trash"
+                >
+                  <svg
+                    data-icon="trash"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      trash
+                    </desc>
+                    <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="bp3-form-group right"
+            >
+              <div
+                class="bp3-form-content"
+              >
+                <button
+                  class="bp3-button bp3-minimal"
+                  type="button"
+                >
+                  <span
+                    class="bp3-icon bp3-icon-plus"
+                    icon="plus"
+                  >
+                    <svg
+                      data-icon="plus"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                    >
+                      <desc>
+                        plus
+                      </desc>
+                      <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="bp3-button-text"
+                  >
+                    Add a tier
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`rule editor matches snapshot with existing tier in rule 1`] = `
+<div
+  class="rule-editor"
+>
+  <div
+    class="title"
+  >
+    <button
+      class="bp3-button bp3-minimal left"
+      type="button"
+    >
+      <span
+        class="bp3-button-text"
+      >
+        loadByInterval(2010-01-01/2015-01-01)
+      </span>
+      <span
+        class="bp3-icon bp3-icon-caret-down"
+        icon="caret-down"
+      >
+        <svg
+          data-icon="caret-down"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <desc>
+            caret-down
+          </desc>
+          <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="bp3-button bp3-minimal"
+      type="button"
+    >
+      <span
+        class="bp3-icon bp3-icon-trash"
+        icon="trash"
+      >
+        <svg
+          data-icon="trash"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <desc>
+            trash
+          </desc>
+          <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="bp3-collapse"
+    style="height: auto; overflow-y: visible; transition: none;"
+  >
+    <div
+      aria-hidden="false"
+      class="bp3-collapse-body"
+      style="transform: translateY(0); transition: none;"
+    >
+      <div
+        class="bp3-card bp3-elevation-0"
+      >
+        <div
+          class="bp3-form-group"
+        >
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-control-group"
+            >
+              <div
+                class="bp3-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="bp3-icon bp3-icon-double-caret-vertical"
+                  icon="double-caret-vertical"
+                >
+                  <svg
+                    data-icon="double-caret-vertical"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      double-caret-vertical
+                    </desc>
+                    <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="bp3-input-group"
+              >
+                <input
+                  class="bp3-input"
+                  placeholder="2010-01-01/2020-01-01"
+                  style="padding-right: 10px;"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="bp3-form-group"
+        >
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-control-group"
+            >
+              <button
+                class="bp3-button bp3-minimal"
+                style="pointer-events: none;"
+                type="button"
+              >
+                <span
+                  class="bp3-button-text"
+                >
+                  Replicants:
+                </span>
+              </button>
+              <div
+                class="bp3-control-group bp3-numeric-input"
+              >
+                <div
+                  class="bp3-input-group"
+                >
+                  <input
+                    autocomplete="off"
+                    class="bp3-input"
+                    max="256"
+                    min="1"
+                    style="padding-right: 10px;"
+                    type="text"
+                    value="2"
+                  />
+                </div>
+                <div
+                  class="bp3-button-group bp3-vertical bp3-fixed"
+                >
+                  <button
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-up"
+                      icon="chevron-up"
+                    >
+                      <svg
+                        data-icon="chevron-up"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-up
+                        </desc>
+                        <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
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-down"
+                      icon="chevron-down"
+                    >
+                      <svg
+                        data-icon="chevron-down"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-down
+                        </desc>
+                        <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
+                class="bp3-button bp3-minimal"
+                style="pointer-events: none;"
+                type="button"
+              >
+                <span
+                  class="bp3-button-text"
+                >
+                  Tier:
+                </span>
+              </button>
+              <div
+                class="bp3-html-select bp3-fill"
+              >
+                <select>
+                  <option
+                    value="test1"
+                  >
+                    test1
+                  </option>
+                  <option
+                    value="test2"
+                  >
+                    test2
+                  </option>
+                  <option
+                    value="test3"
+                  >
+                    test3
+                  </option>
+                </select>
+                <span
+                  class="bp3-icon bp3-icon-double-caret-vertical"
+                  icon="double-caret-vertical"
+                >
+                  <svg
+                    data-icon="double-caret-vertical"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      double-caret-vertical
+                    </desc>
+                    <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="bp3-button bp3-disabled"
+                disabled=""
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="bp3-icon bp3-icon-trash"
+                  icon="trash"
+                >
+                  <svg
+                    data-icon="trash"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      trash
+                    </desc>
+                    <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="bp3-form-group right"
+            >
+              <div
+                class="bp3-form-content"
+              >
+                <button
+                  class="bp3-button bp3-minimal"
+                  type="button"
+                >
+                  <span
+                    class="bp3-icon bp3-icon-plus"
+                    icon="plus"
+                  >
+                    <svg
+                      data-icon="plus"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                    >
+                      <desc>
+                        plus
+                      </desc>
+                      <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="bp3-button-text"
+                  >
+                    Add a tier
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`rule editor matches snapshot with non existing tier in rule 1`] = `
+<div
+  class="rule-editor"
+>
+  <div
+    class="title"
+  >
+    <button
+      class="bp3-button bp3-minimal left"
+      type="button"
+    >
+      <span
+        class="bp3-button-text"
+      >
+        loadByInterval(2010-01-01/2015-01-01)
+      </span>
+      <span
+        class="bp3-icon bp3-icon-caret-down"
+        icon="caret-down"
+      >
+        <svg
+          data-icon="caret-down"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <desc>
+            caret-down
+          </desc>
+          <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="bp3-button bp3-minimal"
+      type="button"
+    >
+      <span
+        class="bp3-icon bp3-icon-trash"
+        icon="trash"
+      >
+        <svg
+          data-icon="trash"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <desc>
+            trash
+          </desc>
+          <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="bp3-collapse"
+    style="height: auto; overflow-y: visible; transition: none;"
+  >
+    <div
+      aria-hidden="false"
+      class="bp3-collapse-body"
+      style="transform: translateY(0); transition: none;"
+    >
+      <div
+        class="bp3-card bp3-elevation-0"
+      >
+        <div
+          class="bp3-form-group"
+        >
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-control-group"
+            >
+              <div
+                class="bp3-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="bp3-icon bp3-icon-double-caret-vertical"
+                  icon="double-caret-vertical"
+                >
+                  <svg
+                    data-icon="double-caret-vertical"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      double-caret-vertical
+                    </desc>
+                    <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="bp3-input-group"
+              >
+                <input
+                  class="bp3-input"
+                  placeholder="2010-01-01/2020-01-01"
+                  style="padding-right: 10px;"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="bp3-form-group"
+        >
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-control-group"
+            >
+              <button
+                class="bp3-button bp3-minimal"
+                style="pointer-events: none;"
+                type="button"
+              >
+                <span
+                  class="bp3-button-text"
+                >
+                  Replicants:
+                </span>
+              </button>
+              <div
+                class="bp3-control-group bp3-numeric-input"
+              >
+                <div
+                  class="bp3-input-group"
+                >
+                  <input
+                    autocomplete="off"
+                    class="bp3-input"
+                    max="256"
+                    min="1"
+                    style="padding-right: 10px;"
+                    type="text"
+                    value="2"
+                  />
+                </div>
+                <div
+                  class="bp3-button-group bp3-vertical bp3-fixed"
+                >
+                  <button
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-up"
+                      icon="chevron-up"
+                    >
+                      <svg
+                        data-icon="chevron-up"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-up
+                        </desc>
+                        <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
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-down"
+                      icon="chevron-down"
+                    >
+                      <svg
+                        data-icon="chevron-down"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-down
+                        </desc>
+                        <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
+                class="bp3-button bp3-minimal"
+                style="pointer-events: none;"
+                type="button"
+              >
+                <span
+                  class="bp3-button-text"
+                >
+                  Tier:
+                </span>
+              </button>
+              <div
+                class="bp3-html-select bp3-fill"
+              >
+                <select>
+                  <option
+                    value="nonexist"
+                  >
+                    nonexist
+                  </option>
+                  <option
+                    value="test1"
+                  >
+                    test1
+                  </option>
+                  <option
+                    value="test2"
+                  >
+                    test2
+                  </option>
+                  <option
+                    value="test3"
+                  >
+                    test3
+                  </option>
+                </select>
+                <span
+                  class="bp3-icon bp3-icon-double-caret-vertical"
+                  icon="double-caret-vertical"
+                >
+                  <svg
+                    data-icon="double-caret-vertical"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      double-caret-vertical
+                    </desc>
+                    <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="bp3-button bp3-disabled"
+                disabled=""
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="bp3-icon bp3-icon-trash"
+                  icon="trash"
+                >
+                  <svg
+                    data-icon="trash"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      trash
+                    </desc>
+                    <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="bp3-form-group right"
+            >
+              <div
+                class="bp3-form-content"
+              >
+                <button
+                  class="bp3-button bp3-minimal"
+                  type="button"
+                >
+                  <span
+                    class="bp3-icon bp3-icon-plus"
+                    icon="plus"
+                  >
+                    <svg
+                      data-icon="plus"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                    >
+                      <desc>
+                        plus
+                      </desc>
+                      <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="bp3-button-text"
+                  >
+                    Add a tier
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/web-console/src/components/rule-editor/rule-editor.spec.tsx 
b/web-console/src/components/rule-editor/rule-editor.spec.tsx
index fc945a3..36aeb1c 100644
--- a/web-console/src/components/rule-editor/rule-editor.spec.tsx
+++ b/web-console/src/components/rule-editor/rule-editor.spec.tsx
@@ -22,7 +22,7 @@ import React from 'react';
 import { RuleEditor } from './rule-editor';
 
 describe('rule editor', () => {
-  it('matches snapshot', () => {
+  it('matches snapshot no tier in rule', () => {
     const ruleEditor = (
       <RuleEditor
         rule={{ type: 'loadForever' }}
@@ -36,4 +36,64 @@ describe('rule editor', () => {
     const { container } = render(ruleEditor);
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it('matches snapshot with non existing tier in rule', () => {
+    const ruleEditor = (
+      <RuleEditor
+        rule={{
+          type: 'loadByInterval',
+          period: '2010-01-01/2015-01-01',
+          tieredReplicants: { nonexist: 2 },
+        }}
+        tiers={['test1', 'test2', 'test3']}
+        onChange={() => {}}
+        onDelete={() => {}}
+        moveUp={null}
+        moveDown={null}
+      />
+    );
+    const { container } = render(ruleEditor);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('matches snapshot with existing tier in rule', () => {
+    const ruleEditor = (
+      <RuleEditor
+        rule={{
+          type: 'loadByInterval',
+          period: '2010-01-01/2015-01-01',
+          tieredReplicants: { test1: 2 },
+        }}
+        tiers={['test1', 'test2', 'test3']}
+        onChange={() => {}}
+        onDelete={() => {}}
+        moveUp={null}
+        moveDown={null}
+      />
+    );
+    const { container } = render(ruleEditor);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('matches snapshot with existing tier and non existing tier in rule', () 
=> {
+    const ruleEditor = (
+      <RuleEditor
+        rule={{
+          type: 'loadByInterval',
+          period: '2010-01-01/2015-01-01',
+          tieredReplicants: {
+            test1: 2,
+            nonexist: 1,
+          },
+        }}
+        tiers={['test1', 'test2', 'test3']}
+        onChange={() => {}}
+        onDelete={() => {}}
+        moveUp={null}
+        moveDown={null}
+      />
+    );
+    const { container } = render(ruleEditor);
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });
diff --git a/web-console/src/components/rule-editor/rule-editor.tsx 
b/web-console/src/components/rule-editor/rule-editor.tsx
index f811adc..cf861c0 100644
--- a/web-console/src/components/rule-editor/rule-editor.tsx
+++ b/web-console/src/components/rule-editor/rule-editor.tsx
@@ -102,8 +102,11 @@ export const RuleEditor = React.memo(function 
RuleEditor(props: RuleEditorProps)
               onChange(RuleUtil.renameTieredReplicants(rule, tier, 
e.target.value))
             }
           >
+            <option key={tier} value={tier}>
+              {tier}
+            </option>
             {tiers
-              .filter(t => t === tier || !tieredReplicants[t])
+              .filter(t => t !== tier && !tieredReplicants[t])
               .map(t => {
                 return (
                   <option key={t} value={t}>


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

Reply via email to