loading spinner added to accordian (opensearch-project#343) (opensear…

…ch-project#344) Signed-off-by: Amardeepsingh Siglani <[email protected]> Signed-off-by: Amardeepsingh Siglani <[email protected]> (cherry picked from commit 23a22be) Co-authored-by: Amardeepsingh Siglani <[email protected]> Signed-off-by: AWSHurneyt <[email protected]>
AWSHurneyt · Oct 12, 2023 · cd2d007 · cd2d007
1 parent dfef47d
commit cd2d007
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/...ges/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx b/...ges/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRules.tsx
@@ -28,13 +28,15 @@ export interface CreateDetectorRulesState {
 
 export interface DetectionRulesProps {
   rulesState: CreateDetectorRulesState;
+  loading?: boolean;
   onRuleToggle: (changedItem: RuleItem, isActive: boolean) => void;
   onAllRulesToggle: (enabled: boolean) => void;
   onPageChange: (page: { index: number; size: number }) => void;
 }
 
 export const DetectionRules: React.FC<DetectionRulesProps> = ({
   rulesState,
+  loading,
   onPageChange,
   onRuleToggle,
   onAllRulesToggle,
@@ -103,6 +105,7 @@ export const DetectionRules: React.FC<DetectionRulesProps> = ({
         buttonProps={{ style: { paddingLeft: '10px', paddingRight: '10px' } }}
         id={'detectorRulesAccordion'}
         initialIsOpen={false}
+        isLoading={loading}
       >
         <EuiHorizontalRule margin={'xs'} />
         <DetectionRulesTable

diff --git a/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx b/public/pages/CreateDetector/components/DefineDetector/containers/DefineDetector.tsx
@@ -28,6 +28,7 @@ interface DefineDetectorProps extends RouteComponentProps {
   indexService: IndexService;
   rulesState: CreateDetectorRulesState;
   notifications: NotificationsStart;
+  loadingRules?: boolean;
   changeDetector: (detector: Detector) => void;
   updateDataValidState: (step: DetectorCreationStep, isValid: boolean) => void;
   onPageChange: (page: { index: number; size: number }) => void;
@@ -203,6 +204,7 @@ export default class DefineDetector extends Component<DefineDetectorProps, Defin
 
         <DetectionRules
           rulesState={rulesState}
+          loading={this.props.loadingRules}
           onPageChange={onPageChange}
           onRuleToggle={onRuleToggle}
           onAllRulesToggle={onAllRulesToggle}

diff --git a/public/pages/CreateDetector/containers/CreateDetector.tsx b/public/pages/CreateDetector/containers/CreateDetector.tsx
@@ -51,6 +51,7 @@ interface CreateDetectorState {
   creatingDetector: boolean;
   rulesState: CreateDetectorRulesState;
   plugins: string[];
+  loadingRules: boolean;
 }
 
 export default class CreateDetector extends Component<CreateDetectorProps, CreateDetectorState> {
@@ -73,6 +74,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
       creatingDetector: false,
       rulesState: { page: { index: 0 }, allRules: [] },
       plugins: [],
+      loadingRules: false,
     };
   }
 
@@ -182,7 +184,9 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
 
   async setupRulesState() {
     const { detector_type } = this.state.detector;
-
+    this.setState({
+      loadingRules: true,
+    });
     const allRules = await this.rulesViewModelActor.fetchRules(undefined, {
       bool: {
         must: [{ match: { 'rule.category': `${detector_type}` } }],
@@ -212,6 +216,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
           },
         ],
       },
+      loadingRules: false,
     });
   }
 
@@ -299,6 +304,7 @@ export default class CreateDetector extends Component<CreateDetectorProps, Creat
             detector={this.state.detector}
             indexService={services.indexService}
             rulesState={this.state.rulesState}
+            loadingRules={this.state.loadingRules}
             onRuleToggle={this.onRuleToggle}
             onAllRulesToggle={this.onAllRulesToggle}
             onPageChange={this.onPageChange}