Merge pull request #83 from Sanketika-Obsrv/test-fixes

#OBS:I304: add alert rule page fix
Sanketika-Obsrv · Nov 8, 2024 · 77ecab3 · 77ecab3
2 parents 03c3298 + ed485d3
commit 77ecab3
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 19 deletions.
diff --git a/web-console-v2/src/components/form.tsx b/web-console-v2/src/components/form.tsx
@@ -218,7 +218,6 @@ const MUIForm = forwardRef((props: any, ref: any) => {
                                         <FormControl fullWidth key={name} className={classes.formControl} required={required} disabled={disabled}>
                                             <Autocomplete
                                                 id={name}
-                                                componentsProps={{ popper: { style: { width: 'fit-content' } } }}
                                                 value={val || null}
                                                 disableClearable
                                                 options={selectOptions}

diff --git a/web-console-v2/src/pages/alertManager/components/NotificationComponent.tsx b/web-console-v2/src/pages/alertManager/components/NotificationComponent.tsx
@@ -47,7 +47,7 @@ const NotificationComponent = (props: any) => {
             label: "Notification Channels",
             type: "autocomplete",
             required: true,
-            selectOptions: _.concat([{ label: 'none', value: null }], notificationFieldOptions),
+            selectOptions: notificationFieldOptions,
             tooltip: "Select the channel for notification delivery"
         },
     ];
@@ -89,7 +89,7 @@ const NotificationComponent = (props: any) => {
                 />
             </Grid>
             <Grid item xs={6}>
-                <Button variant="contained" onClick={() => navigate("/home/alertChannels")}>Add Notification Channel</Button>
+                <Button variant="contained" onClick={() => navigate("/home/alertChannels")}>Create Notification Channel</Button>
             </Grid>
         </Grid>
     }
@@ -103,12 +103,12 @@ const NotificationComponent = (props: any) => {
                 <Box>
                     <StandardWidthButton
                         data-edataid={interactIds.add_notification_channel}
-                        onClick={() => navigate('/home/alertChannels')}
+                        onClick={() => navigate('/home/alertChannels/new')}
                         variant="contained"
                         size="large"
                         sx={{ width: 'auto' }}
                     >
-                        <Typography variant="h5">
+                        <Typography variant="button">
                             Create Notification Channel
                         </Typography>
                     </StandardWidthButton>

diff --git a/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx b/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx
@@ -301,4 +301,4 @@ const QueryBuilder = (props: any) => {
     </>
 }
 
-export default QueryBuilder;
+export default React.memo(QueryBuilder);
diff --git a/web-console-v2/src/pages/alertManager/components/RuleLabels.tsx b/web-console-v2/src/pages/alertManager/components/RuleLabels.tsx
@@ -165,7 +165,7 @@ const LabelComponent = (props: any) => {
                 <Grid item xs={12}>
                     <Button
                         variant="contained"
-                        color="success"
+                        color="primary"
                         disabled={formErrors}
                         onClick={() => {
                             const index = _.findIndex(labels, (label) => label.label === value.label);

diff --git a/web-console-v2/src/pages/alertManager/views/AddRule.tsx b/web-console-v2/src/pages/alertManager/views/AddRule.tsx
@@ -26,6 +26,12 @@ const AddAlertrules = () => {
     const sections = useMemo(() => {
         const commonProps = { formData, setFormData, showAlert, isFieldEditable };
         return [
+            {
+                id: 'notifications',
+                title: 'Notification Channel',
+                description: 'Configure notification channel for your alert',
+                component: <NotificationComponent {...{ ...commonProps, existingState: {}, sectionLabel: 'notifications' }} />
+            },
             {
                 id: 'queryBuilder',
                 title: 'Query Builder',
@@ -52,12 +58,6 @@ const AddAlertrules = () => {
                 title: 'Labels',
                 description: 'Attach labels to your alert',
                 component: <RuleLabels {...{ ...commonProps, existingState: {}, sectionLabel: 'labels', isFieldEditable }} />
-            },
-            {
-                id: 'notifications',
-                title: 'Notification Channel',
-                description: 'Configure notification channel for your alert',
-                component: <NotificationComponent {...{ ...commonProps, existingState: {}, sectionLabel: 'notifications' }} />
             }
         ];
     }, []);

diff --git a/web-console-v2/src/pages/alertManager/views/EditRule.tsx b/web-console-v2/src/pages/alertManager/views/EditRule.tsx
@@ -53,6 +53,12 @@ const EditRule = () => {
     }
 
     const sections = useMemo(() => [
+        {
+            id: 'notifications',
+            title: 'Notification Channel',
+            description: 'Configure notification channel for your alert',
+            component: <NotificationComponent {...{ ...commonProps, existingState: _.pick(ruleMetadata, 'notification'), sectionLabel: "notifications", isFieldEditable }} />
+        },
         {
             id: 'queryBuilder',
             title: 'Query Builder',
@@ -70,12 +76,6 @@ const EditRule = () => {
             title: 'Labels',
             description: 'Attach labels to your alert',
             component: <RuleLabels {...{ ...commonProps, existingState: _.pick(ruleMetadata, 'labels'), sectionLabel: "labels", isFieldEditable }} />
-        },
-        {
-            id: 'notifications',
-            title: 'Notification Channel',
-            description: 'Configure notification channel for your alert',
-            component: <NotificationComponent {...{ ...commonProps, existingState: _.pick(ruleMetadata, 'notification'), sectionLabel: "notifications", isFieldEditable }} />
         }
     ], [ruleMetadata]);
-Original file line number
+Diff line change
@@ Expand Up / @@ -301,4 +301,4 @@ const QueryBuilder = (props: any) => { @@
         </>
     }
-    export default QueryBuilder;
+    export default React.memo(QueryBuilder);