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

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();
+  });
 });

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}>