Merge remote-tracking branch 'origin' into enterprise-features

src/main/middlewares/passportAuthenticate.ts

@@ -29,20 +29,20 @@ export default {
             if (!user) {
                 return res.redirect(`${baseURL}/login`);
             }
-            req.login(user, (loginErr) => {
+            return req.login(user, (loginErr) => {
                 if (loginErr) {
                     return next(loginErr);
                 }
-                generateToken(user)
+                return generateToken(user)
                     .then((token: any) => {
                         req.session.token = token;
+                        req.session.roles = _.get(user, ['roles']);
+                        req.session.userDetails = _.pick(user, ['id', 'user_name', 'email_address', 'roles']);
+                        return res.redirect(baseURL || '/');
                     })
                     .catch((tokenError) => {
                         return next(tokenError);
                     });
-                req.session.roles = _.get(user, ['roles']);
-                req.session.userDetails = _.pick(user, ['id', 'user_name', 'email_address', 'roles']);
-                res.redirect(baseURL || '/');
             });
         })(req, res, next);
     },

web-console-v2/src/components/Dropzone/PlaceholderContent.tsx

@@ -15,7 +15,6 @@ const PlaceholderContent = ({ imageUrl, mainText, subText, type }: PlaceholderCo
             {type !== DropzopType.standard && (
                 <Card
                     sx={{
-                        width: '22rem',
                         height: '11rem',
                         margin: 4,
                         boxShadow: '0.625rem 0.625rem 2.75rem 0 rgba(0, 0, 0, 0.1)'
@@ -24,7 +23,7 @@ const PlaceholderContent = ({ imageUrl, mainText, subText, type }: PlaceholderCo
                     <CardMedia
                         component="img"
                         image={imageUrl}
-                        sx={{ width: '64px', height: '4rem', marginLeft: 15, marginTop: 3 }}
+                        sx={{ width: '64px', height: '4rem', margin: "auto", marginTop: 3 }}
                     />
                     <CardContent>
                         <Stack

web-console-v2/src/components/Sidebar/Sidebar.tsx

@@ -104,9 +104,10 @@ const Sidebar: React.FC<Props> = ({ onExpandToggle, expand }) => {
     };
 
     const handleLogout = () => {
-            http.get(apiEndpoints.logout).then(() => {
-                navigate(`/login`);
-            }).catch(() => {
+        http.get(apiEndpoints.logout).then(() => {
+            localStorage.clear();
+            navigate(`/login`);
+        }).catch(() => {
             showAlert('Failed to logout', 'error');
         })
     };

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}

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>

web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx

@@ -18,10 +18,12 @@ const QueryBuilder = (props: any) => {
         if (!_.isEmpty(existingState)) {
             const operatorType = _.get(existingState, "operator")
             const thresholdValue = _.get(existingState, "threshold")
+            const metricId = _.get(existingState, "id") || ""
+
             if (_.includes(["within_range", "outside_range"], operatorType)) {
-                return { ..._.omit(existingState, ["threshold"]), threshold_from: _.get(thresholdValue, 0), threshold_to: _.get(thresholdValue, 1) }
+                return { ..._.omit(existingState, ["threshold"]), threshold_from: _.get(thresholdValue, 0), threshold_to: _.get(thresholdValue, 1), metric: metricId }
             }
-            return { ..._.omit(existingState, ["threshold_from", "threshold_to"]), threshold: _.get(thresholdValue, 0) }
+            return { ..._.omit(existingState, ["threshold_from", "threshold_to"]), threshold: _.get(thresholdValue, 0), metric: metricId }
         }
         return {}
     });
@@ -68,18 +70,18 @@ const QueryBuilder = (props: any) => {
         if (selectedSubComponent) {
             const filteredMetrics = _.filter(supportedMetrics, (supportedMetric) => supportedMetric.subComponent == selectedSubComponent);
             return _.map(filteredMetrics, (supportedMetric) => {
-                const { alias, metric } = supportedMetric;
+                const { alias, id } = supportedMetric;
                 return {
                     label: alias,
-                    value: metric
+                    value: id
                 };
             });
         }
         return _.map(supportedMetrics, (supportedMetric) => {
-            const { alias, metric } = supportedMetric;
+            const { alias, id } = supportedMetric;
             return {
                 label: alias,
-                value: metric
+                value: id
             };
         });
     };
@@ -264,7 +266,7 @@ const QueryBuilder = (props: any) => {
                 </Grid>
                 {runQuery && (
                     <Grid item xs={12}>
-                        <RunQuery random={Math.random()} handleClose={updateRunQuery} queryBuilderContext={value} />
+                        <RunQuery random={Math.random()} handleClose={updateRunQuery} queryBuilderContext={value} component={_.get(components, _.get(value, 'category'))} />
                     </Grid>
                 )}
             </>
@@ -301,4 +303,4 @@ const QueryBuilder = (props: any) => {
     </>
 }
 
-export default QueryBuilder;
+export default React.memo(QueryBuilder);

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);

web-console-v2/src/pages/alertManager/components/RunQuery.tsx

@@ -10,8 +10,9 @@ import { useEffect, useState } from "react";
 import Loader from "components/Loader";
 
 const RunQuery = (props: any) => {
-    const { handleClose, queryBuilderContext } = props;
+    const { handleClose, queryBuilderContext, component } = props;
     const { metric, threshold, threshold_from, threshold_to, operator } = queryBuilderContext
+    const metricValue = _.filter(component, field => _.get(field, "id") == metric)
     const [metadata, setMetadata] = useState<Record<string, any> | null>(null);
     const [loading, setLoading] = useState(false)
 
@@ -139,7 +140,7 @@ const RunQuery = (props: any) => {
                 headers: {},
                 body: {},
                 params: {
-                    query: metric,
+                    query: _.get(metricValue, [0, "metric"]) || metric,
                     step: '5m',
                     start: dayjs().unix(),
                     end: dayjs().subtract(1, 'day').unix()

web-console-v2/src/pages/alertManager/services/utils.tsx

@@ -8,6 +8,7 @@ import { LocalizationProvider, DateTimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { searchAlert } from 'services/alerts';
 import { fetchChannels } from 'services/notificationChannels';
+import { getMetricsGroupedByComponents } from './queryBuilder';
 
 export const validateForm = (config: Record<string, any>) => {
     if (!config) return false;
@@ -196,10 +197,10 @@ const DatePicker = (props: any) => {
         <DateTimePicker
             label={label}
             value={date}
-            onChange={(newValue:any) => {
+            onChange={(newValue: any) => {
                 setDate(newValue, alertId);
             }}
-            renderInput={(params:any) => <TextField {...params} />}
+            renderInput={(params: any) => <TextField {...params} />}
         />
     );
 };
@@ -240,7 +241,7 @@ export const asyncValidation = () => {
 export const getStatusComponent = (props: any) => {
     return () => {
         const { statusData, setSilenceStatus, fetchDataHandler, toggleFilter, removeFilter } = props;
-        return _.map(statusData, (value:any, status:any) => (
+        return _.map(statusData, (value: any, status: any) => (
             <Chip
                 key={status}
                 size="small"
@@ -326,7 +327,7 @@ export const getStatusColor = (value: string) => {
     return _.get(valueToColorMapping, value?.toLowerCase()) || 'success';
 };
 
-export const transformRulePayload = (formData: Record<string, any>) => {
+export const transformRulePayload = async (formData: Record<string, any>) => {
     const {
         name,
         description,
@@ -340,7 +341,10 @@ export const transformRulePayload = (formData: Record<string, any>) => {
         context,
         severity
     } = formData;
-    const { threshold, threshold_from, threshold_to, operator } = queryBuilderContext
+    const { threshold, threshold_from, threshold_to, operator, metric } = queryBuilderContext
+    const components = await getMetricsGroupedByComponents();
+    const selectedComponent = _.get(components, category)
+    const metricValue = _.filter(selectedComponent, field => _.get(field, "id") == metric)
     const updatedThreshold = !_.includes(["within_range", "outside_range"], operator) ? [threshold] : [threshold_from, threshold_to]
     const rulePayload = {
         name,
@@ -356,7 +360,7 @@ export const transformRulePayload = (formData: Record<string, any>) => {
             type: category
         },
         metadata: {
-            queryBuilderContext: { ...queryBuilderContext, threshold: updatedThreshold }
+            queryBuilderContext: { ...queryBuilderContext, threshold: updatedThreshold, metric: _.get(metricValue, [0, "metric"]), id: metric }
         },
         context: {
             ...context

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,18 +58,12 @@ 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' }} />
             }
         ];
     }, []);
 
     const addAlertRule: any = async () => {
-        const rulePayload = transformRulePayload({ ...formData, context: { alertType: 'CUSTOM' } });
+        const rulePayload = await transformRulePayload({ ...formData, context: { alertType: 'CUSTOM' } });
         return addAlert(rulePayload);
     };
 

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,17 +76,11 @@ 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]);
 
-    const editAlertRule = () => {
-        const rulePayload = transformRulePayload({ ...formData, context: { alertType: alertType } });
+    const editAlertRule = async () => {
+        const rulePayload = await transformRulePayload({ ...formData, context: { alertType: alertType } });
         return editAlert({ id: id, data: rulePayload });
     };