From 175cb6968b297169fe93c440bc051a617fa892a6 Mon Sep 17 00:00:00 2001
From: yashashk <yashashk@sanketika.in>
Date: Wed, 13 Nov 2024 21:12:25 +0530
Subject: [PATCH 1/3] #OBS-I304 : p1 issues fix after test

---
 .../StepsPages/Processing/Processing.tsx      |  1 +
 .../AddTransformationExpression.tsx           |  8 ++
 .../ProcessingSection/Derived/AddNewField.tsx | 13 +++-
 .../Processing/ProcessingSection/Pii/Pii.tsx  |  8 +-
 .../ProcessingSection/ProcessingSection.tsx   | 73 +++++++++----------
 .../pages/dashboardV1/draftDatasetsList.tsx   |  2 +-
 .../src/pages/datasetV1/ImportDialog.tsx      |  2 +-
 7 files changed, 61 insertions(+), 46 deletions(-)

diff --git a/web-console-v2/src/pages/StepsPages/Processing/Processing.tsx b/web-console-v2/src/pages/StepsPages/Processing/Processing.tsx
index 176cddcc..bf819841 100644
--- a/web-console-v2/src/pages/StepsPages/Processing/Processing.tsx
+++ b/web-console-v2/src/pages/StepsPages/Processing/Processing.tsx
@@ -324,6 +324,7 @@ const Processing: React.FC = () => {
                         dialog={<AddPIIDialog />}
                         transformationOptions={transformationOptions}
                         addedSuggestions={piiSuggestions}
+                        setPiiSuggestions={setPiiSuggestions}
                         data={_.map(_.get(processingData, 'pii'), (obj1) => {
                             const matchingObj = _.find(piiSuggestions, {
                                 column: _.get(obj1, 'column')
diff --git a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/AddTransformationExpression/AddTransformationExpression.tsx b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/AddTransformationExpression/AddTransformationExpression.tsx
index 90f7e2fe..42a694fa 100644
--- a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/AddTransformationExpression/AddTransformationExpression.tsx
+++ b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/AddTransformationExpression/AddTransformationExpression.tsx
@@ -82,6 +82,7 @@ const AddTransformationExpression = (props: any) => {
     }, [data]);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setEvaluationData(transformationType)
         setAnchorEl(event.currentTarget);
     };
 
@@ -100,6 +101,13 @@ const AddTransformationExpression = (props: any) => {
     };
 
     const closeTransformations = () => {
+        setFormData((prevState: any) => ({
+            ...prevState,
+            section: {
+                ...prevState.section,
+                transformationType: ''
+            }
+        }));
         setAnchorEl(null);
     };
 
diff --git a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Derived/AddNewField.tsx b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Derived/AddNewField.tsx
index 686da555..55198729 100644
--- a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Derived/AddNewField.tsx
+++ b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Derived/AddNewField.tsx
@@ -47,6 +47,8 @@ const AddNewField = (props: any) => {
     const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
     const [evaluationData, setEvaluationData] = useState<string>('');
     const [transformErrors, setTransformErrors] = useState<boolean>(false);
+    const [transformationError, setTransformationError] = useState<string | null>(null);
+    const [transformationTypeError, setTransformationTypeError] = useState<string | null>(null);
 
     const open = Boolean(anchorEl);
 
@@ -74,6 +76,7 @@ const AddNewField = (props: any) => {
     }, [data]);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setEvaluationData(transformationType)
         setAnchorEl(event.currentTarget);
     };
 
@@ -92,6 +95,13 @@ const AddNewField = (props: any) => {
     };
 
     const closeTransformations = () => {
+        setFormData((prevState: any) => ({
+            ...prevState,
+            section: {
+                ...prevState.section,
+                transformationType: ''
+            }
+        }));
         setAnchorEl(null);
     };
 
@@ -131,9 +141,6 @@ const AddNewField = (props: any) => {
         onClose();
     };
 
-    const [transformationError, setTransformationError] = useState<string | null>(null);
-    const [transformationTypeError, setTransformationTypeError] = useState<string | null>(null);
-
     const transformation = _.get(formData, ['section', 'transformations']);
     const transformationType = _.get(formData, ['section', 'transformationType']);
 
diff --git a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx
index 7fc9c52d..9a9dc7a7 100644
--- a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx
+++ b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx
@@ -62,13 +62,13 @@ const AddPIIDialog = (props: any) => {
 
     useEffect(() => {
         const transformations = _.get(data, ['column'], '');
-
+        console.log({data})
         if (!_.isEmpty(data)) {
             const existingData = {
                 section: {
-                    transformations,
-                    transformationType: _.get(data, ['transformationType']),
-                    transformationMode: _.get(data, ['transformationMode'])
+                    transformations: transformations,
+                    transformationType: _.capitalize(_.get(data, ['transformationType'])),
+                    transformationMode: _.capitalize(_.get(data, ['transformationMode']))
                 }
             };
 
diff --git a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/ProcessingSection.tsx b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/ProcessingSection.tsx
index 0e4b03f8..85c395f6 100644
--- a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/ProcessingSection.tsx
+++ b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/ProcessingSection.tsx
@@ -19,7 +19,8 @@ const ProcessingSection = (props: any) => {
         dialog,
         transformationOptions,
         jsonData,
-        addedSuggestions
+        addedSuggestions,
+        setPiiSuggestions
     } = props;
 
     const [dialogOpen, setDialogOpen] = useState(false);
@@ -180,43 +181,41 @@ const ProcessingSection = (props: any) => {
     const renderSuggestedFields = () => {
         const suggestedFields = _.differenceBy(addedSuggestions, data, 'column');
 
-        if (!_.isEmpty(suggestedFields))
+        const handleRemoveSuggestion = (suggestion: any) => {
+            setPiiSuggestions((prevSuggestions:any) =>
+              prevSuggestions.filter((item:any) => !_.isEqual(_.get(item, 'column'), _.get(suggestion, 'column')))
+            );
+          };
+
+          if (!_.isEmpty(suggestedFields))
             return (
-                <Grid>
-                    <Box sx={{ pt: 1, textAlign: 'start' }}>
-                        <Typography variant="body2" fontWeight="500">
-                            Add suggested fields :
-                        </Typography>
-                    </Box>
-                    <Box
-                        sx={{
-                            textAlign: 'start',
-                            overflowY: 'scroll',
-                            scrollbarWidth: 'none',
-                            height: '5rem',
-                            mt: 2
-                        }}
-                    >
-                        {_.map(suggestedFields, (ele: any) => (
-                            <Chip
-                                onDelete={() => {
-                                    addedSuggestions.filter(
-                                        (item: any) =>
-                                            !_.isEqual(
-                                                _.get(item, ['column']),
-                                                _.get(ele, ['column'])
-                                            )
-                                    );
-                                }}
-                                key={_.get(ele, ['column'])}
-                                label={_.get(ele, ['column'])}
-                                onClick={() => handleEditValues(ele)}
-                                sx={{ ml: 1, mb: 1 }}
-                                variant="outlined"
-                            />
-                        ))}
-                    </Box>
-                </Grid>
+              <Grid>
+                <Box sx={{ pt: 1, textAlign: 'start' }}>
+                  <Typography variant="body2" fontWeight="500">
+                    Add suggested fields:
+                  </Typography>
+                </Box>
+                <Box
+                  sx={{
+                    textAlign: 'start',
+                    overflowY: 'scroll',
+                    scrollbarWidth: 'none',
+                    height: '5rem',
+                    mt: 2
+                  }}
+                >
+                  {_.map(suggestedFields, (ele: any) => (
+                    <Chip
+                      onDelete={() => handleRemoveSuggestion(ele)}
+                      key={_.get(ele, ['column'])}
+                      label={_.get(ele, ['column'])}
+                      onClick={() => handleEditValues(ele)}
+                      sx={{ ml: 1, mb: 1 }}
+                      variant="outlined"
+                    />
+                  ))}
+                </Box>
+              </Grid>
             );
     };
 
diff --git a/web-console-v2/src/pages/dashboardV1/draftDatasetsList.tsx b/web-console-v2/src/pages/dashboardV1/draftDatasetsList.tsx
index fb5abc81..d5df80d9 100644
--- a/web-console-v2/src/pages/dashboardV1/draftDatasetsList.tsx
+++ b/web-console-v2/src/pages/dashboardV1/draftDatasetsList.tsx
@@ -71,7 +71,7 @@ const DraftDatasetsList = (props: any) => {
             setIsLoading(true);
             try {
                 await deleteDataset({ id: _.get(selection, "dataset_id") })
-                showAlert("Dataset retired successfully", 'success');
+                showAlert("Dataset deleted successfully", 'success');
             } catch (err: any) {
                 const errMessage = _.get(err, 'response.data.params.errmsg') || en["dataset-delete-failure"];
                 showAlert(errMessage, 'error');
diff --git a/web-console-v2/src/pages/datasetV1/ImportDialog.tsx b/web-console-v2/src/pages/datasetV1/ImportDialog.tsx
index ac172dca..25a12f11 100644
--- a/web-console-v2/src/pages/datasetV1/ImportDialog.tsx
+++ b/web-console-v2/src/pages/datasetV1/ImportDialog.tsx
@@ -96,7 +96,7 @@ const ImportDailog = (props: any) => {
         <Box sx={{ p: 1, py: 1.5 }}>
             <DialogTitle>
                 <Alert severity="error" sx={{ lineHeight: 0, display: "flex", justifyContent: "flex-start", mt: 1 }}>
-                    <Typography variant="caption" fontSize={14}>
+                    <Typography variant="body1" fontSize={14}>
                         Dataset Already Exists. Please select the option given below.
                     </Typography>
                 </Alert>

From 57d217789382ed7db92b723fa512eee7b52b61f4 Mon Sep 17 00:00:00 2001
From: yashashk <yashashk@sanketika.in>
Date: Wed, 13 Nov 2024 21:30:14 +0530
Subject: [PATCH 2/3] #OBS-I304 : Removed log

---
 .../pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx
index 9a9dc7a7..164d68c9 100644
--- a/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx
+++ b/web-console-v2/src/pages/StepsPages/Processing/ProcessingSection/Pii/Pii.tsx
@@ -62,7 +62,6 @@ const AddPIIDialog = (props: any) => {
 
     useEffect(() => {
         const transformations = _.get(data, ['column'], '');
-        console.log({data})
         if (!_.isEmpty(data)) {
             const existingData = {
                 section: {

From 1d6e5f9dfffd28666fb3a47cf1153bd1861aae5e Mon Sep 17 00:00:00 2001
From: Kartheek Palla <kartheek@sanketika.in>
Date: Wed, 13 Nov 2024 21:37:21 +0530
Subject: [PATCH 3/3] #OBS-I304: Alert UI fixes

---
 .../components/NotificationComponent.tsx      |  30 +++--
 .../alertManager/components/QueryBuilder.tsx  |  10 +-
 .../components/QueryChartDialog.tsx           |   1 +
 .../alertManager/components/RuleLabels.tsx    |  12 +-
 .../components/ViewRuleHeader.tsx             |   3 +-
 .../src/pages/alertManager/services/utils.tsx |  24 +++-
 .../src/pages/alertManager/views/AddRule.tsx  |  18 ++-
 .../pages/alertManager/views/Alert.module.css |   5 +
 .../pages/alertManager/views/AlertRules.tsx   |   2 +-
 .../src/pages/alertManager/views/EditRule.tsx |  20 +++-
 .../src/pages/alertManager/views/ViewRule.tsx |  80 +++++++-------
 .../notificationChannels/UpdateChannel.tsx    |  20 +++-
 .../notificationChannels/ViewChannel.tsx      | 104 +++++++++---------
 .../components/ConfigureChannel.tsx           |   2 +-
 .../components/SendTestMessage.tsx            |   4 +-
 15 files changed, 220 insertions(+), 115 deletions(-)
 create mode 100644 web-console-v2/src/pages/alertManager/views/Alert.module.css

diff --git a/web-console-v2/src/pages/alertManager/components/NotificationComponent.tsx b/web-console-v2/src/pages/alertManager/components/NotificationComponent.tsx
index 9a132eac..bf1a3900 100644
--- a/web-console-v2/src/pages/alertManager/components/NotificationComponent.tsx
+++ b/web-console-v2/src/pages/alertManager/components/NotificationComponent.tsx
@@ -89,7 +89,15 @@ const NotificationComponent = (props: any) => {
                 />
             </Grid>
             <Grid item xs={6}>
-                <Button variant="contained" onClick={() => navigate("/alertChannels")}>Create Notification Channel</Button>
+                <Button size="small" variant="outlined" sx={{
+                borderColor: 'primary.main',
+                color: 'primary.main',
+                '&:hover': {
+                    backgroundColor: 'primary.main',
+                    color: 'white',
+                    borderColor: 'primary.main',
+                },
+            }} onClick={() => navigate("/alertChannels")}>Create Notification Channel</Button>
             </Grid>
         </Grid>
     }
@@ -101,17 +109,15 @@ const NotificationComponent = (props: any) => {
                     There are no live notification channels yet. Please create/publish one to proceed further
                 </Typography>
                 <Box>
-                    <StandardWidthButton
-                        data-edataid={interactIds.add_notification_channel}
-                        onClick={() => navigate('/alertChannels/new')}
-                        variant="contained"
-                        size="large"
-                        sx={{ width: 'auto' }}
-                    >
-                        <Typography variant="button">
-                            Create Notification Channel
-                        </Typography>
-                    </StandardWidthButton>
+                    <Button size="small" variant="outlined" sx={{
+                    borderColor: 'primary.main',
+                    color: 'primary.main',
+                    '&:hover': {
+                        backgroundColor: 'primary.main',
+                        color: 'white',
+                        borderColor: 'primary.main',
+                    },
+                }} data-edataid={interactIds.add_notification_channel} onClick={() => navigate("/alertChannels/new")}>Create Notification Channel</Button>
                 </Box>
             </Stack>
         </Grid>
diff --git a/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx b/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx
index 170243b8..62ec1693 100644
--- a/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx
+++ b/web-console-v2/src/pages/alertManager/components/QueryBuilder.tsx
@@ -262,7 +262,15 @@ const QueryBuilder = (props: any) => {
         return (
             <>
                 <Grid item xs={12}>
-                    <Button disabled={!validQuery} startIcon={<PlayArrowOutlined />} variant="contained" onClick={(_) => updateRunQuery()}>
+                    <Button size="small" sx={{
+                    borderColor: 'primary.main',
+                    color: 'primary.main',
+                    '&:hover': {
+                        backgroundColor: 'primary.main',
+                        color: 'white',
+                        borderColor: 'primary.main',
+                    },
+                }} disabled={!validQuery} startIcon={<PlayArrowOutlined />} variant="outlined" onClick={(_) => updateRunQuery()}>
                         Run Query
                     </Button>
                 </Grid>
diff --git a/web-console-v2/src/pages/alertManager/components/QueryChartDialog.tsx b/web-console-v2/src/pages/alertManager/components/QueryChartDialog.tsx
index 0ca73a0e..1c59e0e7 100644
--- a/web-console-v2/src/pages/alertManager/components/QueryChartDialog.tsx
+++ b/web-console-v2/src/pages/alertManager/components/QueryChartDialog.tsx
@@ -16,6 +16,7 @@ const QueryChart = ({ handleClose, open = false, context = {} }: any) => {
                             color="error"
                             sx={{ marginX: '0.5rem' }}
                             variant="contained"
+                            size="small"
                             onClick={(e) => handleClose()}
                         >
                             Close
diff --git a/web-console-v2/src/pages/alertManager/components/RuleLabels.tsx b/web-console-v2/src/pages/alertManager/components/RuleLabels.tsx
index d8838f0d..7720fa1f 100644
--- a/web-console-v2/src/pages/alertManager/components/RuleLabels.tsx
+++ b/web-console-v2/src/pages/alertManager/components/RuleLabels.tsx
@@ -164,7 +164,17 @@ const LabelComponent = (props: any) => {
                 {renderCreateLabelsForm()}
                 <Grid item xs={12}>
                     <Button
-                        variant="contained"
+                        size="small"
+                        variant="outlined"
+                        sx={{
+                            borderColor: 'primary.main',
+                            color: 'primary.main',
+                            '&:hover': {
+                                backgroundColor: 'primary.main',
+                                color: 'white',
+                                borderColor: 'primary.main',
+                            },
+                        }}
                         color="primary"
                         disabled={formErrors}
                         onClick={() => {
diff --git a/web-console-v2/src/pages/alertManager/components/ViewRuleHeader.tsx b/web-console-v2/src/pages/alertManager/components/ViewRuleHeader.tsx
index fb9d4700..e11ab3b8 100644
--- a/web-console-v2/src/pages/alertManager/components/ViewRuleHeader.tsx
+++ b/web-console-v2/src/pages/alertManager/components/ViewRuleHeader.tsx
@@ -259,9 +259,10 @@ const RuleHeader = (props: any) => {
                         if (!configuration?.allowedActions?.includes(button.name)) return null;
                         return (
                             <Button
+                                size="small"
                                 id={button.id}
                                 key={button.name}
-                                variant={button.variant}
+                                variant="outlined"
                                 startIcon={button.icon}
                                 onClick={button.onClick}
                                 color={button.color}
diff --git a/web-console-v2/src/pages/alertManager/services/utils.tsx b/web-console-v2/src/pages/alertManager/services/utils.tsx
index 2cbd3723..e9ae1256 100644
--- a/web-console-v2/src/pages/alertManager/services/utils.tsx
+++ b/web-console-v2/src/pages/alertManager/services/utils.tsx
@@ -33,7 +33,17 @@ export const renderSections = (context: Record<string, any>) => {
                         <Stack direction="row" spacing={2}>
                             {context.actionHandler && context.actionLabel && (
                                 <Button
-                                    variant="contained"
+                                    size="small"
+                                    variant="outlined"
+                                    sx={{
+                                        borderColor: 'primary.main',
+                                        color: 'primary.main',
+                                        '&:hover': {
+                                            backgroundColor: 'primary.main',
+                                            color: 'white',
+                                            borderColor: 'primary.main',
+                                        },
+                                    }}
                                     disabled={
                                         !validateForm(_.get(context.formData, 'error')) ||
                                         !testChannel
@@ -45,7 +55,17 @@ export const renderSections = (context: Record<string, any>) => {
                             )}
                             {context.notificationTestHandler && (
                                 <Button
-                                    variant="contained"
+                                    size="small"
+                                    variant="outlined"
+                                    sx={{
+                                        borderColor: 'primary.main',
+                                        color: 'primary.main',
+                                        '&:hover': {
+                                            backgroundColor: 'primary.main',
+                                            color: 'white',
+                                            borderColor: 'primary.main',
+                                        },
+                                    }}
                                     disabled={!validateForm(_.get(context.formData, 'error'))}
                                     onClick={(_) => context.notificationTestHandler()}
                                 >
diff --git a/web-console-v2/src/pages/alertManager/views/AddRule.tsx b/web-console-v2/src/pages/alertManager/views/AddRule.tsx
index 570e45c4..8743a61e 100644
--- a/web-console-v2/src/pages/alertManager/views/AddRule.tsx
+++ b/web-console-v2/src/pages/alertManager/views/AddRule.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid } from '@mui/material';
+import { Grid, Box, Button } from '@mui/material';
 import _ from 'lodash';
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -12,6 +12,8 @@ import { useAlert } from 'contexts/AlertContextProvider';
 import { validateForm } from '../services/queryBuilder';
 import { transformRulePayload, renderSections } from '../services/utils';
 import Loader from 'components/Loader';
+import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
+import { default as alertStyle} from '../views/Alert.module.css'
 
 const AddAlertrules = () => {
     const navigate = useNavigate();
@@ -89,7 +91,21 @@ const AddAlertrules = () => {
             ?
             <Loader loading={loading} />
             :
+            <>
+            <Box mx={4}>
+                <Button variant="back"
+                    startIcon={
+                        <KeyboardBackspaceIcon
+                            className={alertStyle.backIcon}
+                        />
+                    }
+                    onClick={() => { navigate(`/alertRules/custom`) }}
+                >
+                    Back
+                </Button>
+            </Box>
             <Grid>{renderSections({ sections: sections, formData: formData, actionHandler: createAlertRule, actionLabel: "Create Rule" })}</Grid>
+            </>
         }
     </>
 };
diff --git a/web-console-v2/src/pages/alertManager/views/Alert.module.css b/web-console-v2/src/pages/alertManager/views/Alert.module.css
new file mode 100644
index 00000000..0ee8b5c8
--- /dev/null
+++ b/web-console-v2/src/pages/alertManager/views/Alert.module.css
@@ -0,0 +1,5 @@
+.backIcon {
+    color: black;
+    width: 1.5rem;
+    height: 1.5rem;
+}
\ No newline at end of file
diff --git a/web-console-v2/src/pages/alertManager/views/AlertRules.tsx b/web-console-v2/src/pages/alertManager/views/AlertRules.tsx
index 528fa967..bf8560b5 100644
--- a/web-console-v2/src/pages/alertManager/views/AlertRules.tsx
+++ b/web-console-v2/src/pages/alertManager/views/AlertRules.tsx
@@ -47,7 +47,7 @@ const AlertRules = () => {
 
   const renderAlertRules = () => {
     return (
-      <Grid container spacing={3}>
+      <Grid container spacing={3} sx={{width: '100%'}}>
         <Grid item xs={12} id="tabSectionStart">
           <Box sx={{ width: '100%', margin: '1rem' }}>
             {renderTabs()}
diff --git a/web-console-v2/src/pages/alertManager/views/EditRule.tsx b/web-console-v2/src/pages/alertManager/views/EditRule.tsx
index 85f63d7a..c07248f6 100644
--- a/web-console-v2/src/pages/alertManager/views/EditRule.tsx
+++ b/web-console-v2/src/pages/alertManager/views/EditRule.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid } from '@mui/material';
+import { Button, Grid, Box } from '@mui/material';
 import MainCard from 'components/MainCard';
 import _ from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
@@ -15,6 +15,8 @@ import { getConfiguration } from '../services/configuration';
 import { Alert } from '@mui/material';
 import { renderSkeleton } from 'services/skeleton';
 import { useAlert } from 'contexts/AlertContextProvider';
+import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
+import { default as alertStyle} from '../views/Alert.module.css'
 
 const EditRule = () => {
     const { id } = useParams();
@@ -108,13 +110,25 @@ const EditRule = () => {
     }
 
     return (
-        <MainCard content={false}>
+        <>
+            <Box mx={4}>
+                <Button variant="back"
+                    startIcon={
+                        <KeyboardBackspaceIcon
+                            className={alertStyle.backIcon}
+                        />
+                    }
+                    onClick={() => { alertType ? navigate(`/alertRules/${_.toLower(alertType)}`) : navigate(`/alertRules/custom`) }}
+                >
+                    Back
+                </Button>
+            </Box>
             {renderWarningMessage()}
             <Grid>{loading ?
                 renderSkeleton({ config: { type: "card", loader: true, height: 80 } }) :
                 renderSections({ sections: sections, formData: formData, actionHandler: updateRule, actionLabel: "Update Rule" })
             }</Grid>
-        </MainCard>
+        </>
     );
 };
 
diff --git a/web-console-v2/src/pages/alertManager/views/ViewRule.tsx b/web-console-v2/src/pages/alertManager/views/ViewRule.tsx
index 84903f19..27c01a24 100644
--- a/web-console-v2/src/pages/alertManager/views/ViewRule.tsx
+++ b/web-console-v2/src/pages/alertManager/views/ViewRule.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Button, Chip, Grid, Typography } from '@mui/material';
+import { Box, Button, Chip, Grid, Typography, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
 import MainCard from 'components/MainCard';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
@@ -20,6 +20,7 @@ import { renderSkeleton } from 'services/skeleton';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { useAlert } from 'contexts/AlertContextProvider';
+import { styled } from '@mui/material/styles';
 dayjs.extend(relativeTime);
 
 const getChipVariant = (value: string) => {
@@ -98,8 +99,7 @@ const ViewRule = () => {
         sx={{ marginRight: '0.5rem' }}
     />
 
-    const renderCell = (context: Record<string, any>) => {
-        const row = context?.cell?.row?.original || {};
+    const renderCell = (row: any) => {
         const key = row?.key;
         let value = row?.value;
 
@@ -161,34 +161,6 @@ const ViewRule = () => {
         }
     };
 
-    const columns = [
-        {
-            Header: 'Labels',
-            accessor: 'key',
-            disableFilters: true,
-            style: {
-                width: '20vw'
-            },
-            Cell: (value: any) => {
-                const row = value?.cell?.row?.original || {};
-                const rowValue = row?.key;
-                return (
-                    <Box>
-                        <Typography variant='h6'>{_.capitalize(getKeyAlias(rowValue))}</Typography>
-                    </Box>)
-            }
-        },
-        {
-            Header: 'Value',
-            accessor: 'value',
-            style: {
-                width: 'auto'
-            },
-            disableFilters: true,
-            Cell: renderCell
-        }
-    ];
-
     const renderHeader = () => {
         return (
             <Box sx={{ p: 2, pb: 0 }} textAlign="end">
@@ -210,17 +182,51 @@ const ViewRule = () => {
         content: renderQueryChart()
     }
 
+    const StyledTableRow = styled(TableRow)(({ theme }) => ({
+        '&:nth-of-type(odd)': {
+            backgroundColor: theme.palette.action.hover,
+        },
+        // hide last border
+        '&:last-child td, &:last-child th': {
+            border: 0,
+        },
+    }));
+
     const handleClose = () => { setRunQuery(false) }
 
     const renderAlerts = () => {
         return (
             <Box>
-                <Grid>
-                    <MainCard content={false} boxShadow>
-                        <ScrollX>
-                            <TableWithCustomHeader renderHeader={renderHeader} columns={columns} data={data || []} />
-                        </ScrollX>
-                    </MainCard>
+                <Grid item xs={14} sm={7} lg={7}>
+                    {renderHeader && renderHeader()}
+                </Grid>
+                <Grid justifyContent={'flex-start'} p={3}>
+                    <Grid item xs={14} sm={7} lg={7}>
+                        <TableContainer component={Paper} >
+                            <Table size="small" aria-label="a dense table">
+                            <TableHead>
+                                <TableRow>
+                                    <TableCell align="left" colSpan={2}>
+                                        Configuration
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableCell align="left" width={'50%'} sx={{ borderRight: '1px solid #ddd !important' }}>Labels</TableCell>
+                                    <TableCell align="left" width={'50%'} >Value</TableCell>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                            {data && data.map( (record:any) => (
+                                <StyledTableRow key={_.get(record,'key')} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                    <TableCell align="left" sx={{ borderRight: '1px solid #ddd !important' }}>{_.capitalize(_.get(record,'key'))}</TableCell>
+                                    <TableCell align="left" sx={{ borderRight: '1px solid #ddd !important' }}>{renderCell(record)}</TableCell>
+                                </StyledTableRow>
+                            ))}
+                                
+                            </TableBody>
+                            </Table>
+                        </TableContainer>
+                    </Grid>
                 </Grid>
                 <QueryChart open={runQuery} handleClose={handleClose} context={dialogContext}></QueryChart>
             </Box>
diff --git a/web-console-v2/src/pages/notificationChannels/UpdateChannel.tsx b/web-console-v2/src/pages/notificationChannels/UpdateChannel.tsx
index 815eeefd..71917548 100644
--- a/web-console-v2/src/pages/notificationChannels/UpdateChannel.tsx
+++ b/web-console-v2/src/pages/notificationChannels/UpdateChannel.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import * as _ from 'lodash';
-import { Dialog, Grid } from '@mui/material';
+import { Dialog, Button, Grid, Box } from '@mui/material';
 import { useEffect, useState } from 'react';
 import SelectChannelType from './components/SelectChannelType';
 import ConfigureChannel from './components/ConfigureChannel';
@@ -11,6 +11,8 @@ import MainCard from 'components/MainCard';
 import SendTestMessage from './components/SendTestMessage';
 import { renderSkeleton } from 'services/skeleton';
 import { useAlert } from 'contexts/AlertContextProvider';
+import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
+import { default as alertStyle} from '../alertManager/views/Alert.module.css'
 
 const isValid = (config: Record<string, any>) => {
     if (!config) return false;
@@ -135,7 +137,19 @@ const UpdateChannel = () => {
     };
 
     return (
-        <MainCard content={false}>
+            <>
+            <Box mx={4}>
+                <Button variant="back"
+                    startIcon={
+                        <KeyboardBackspaceIcon
+                            className={alertStyle.backIcon}
+                        />
+                    }
+                    onClick={() => { navigate(`/alertChannels`)}}
+                >
+                    Back
+                </Button>
+            </Box>
             {loading ?
                 renderSkeleton({ config: { type: "card", height: 80 } }) :
                 (<>
@@ -143,7 +157,7 @@ const UpdateChannel = () => {
                     <Grid>{renderTestChannelDialog()}</Grid></>
                 )
             }
-        </MainCard>
+            </>
     );
 };
 
diff --git a/web-console-v2/src/pages/notificationChannels/ViewChannel.tsx b/web-console-v2/src/pages/notificationChannels/ViewChannel.tsx
index 874d4a0d..7cd40eb5 100644
--- a/web-console-v2/src/pages/notificationChannels/ViewChannel.tsx
+++ b/web-console-v2/src/pages/notificationChannels/ViewChannel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Dialog, Grid, Tooltip } from "@mui/material";
+import { Box, Dialog, Grid, Tooltip, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
 import MainCard from "components/MainCard";
 import ScrollX from "components/ScrollX";
 import TableWithCustomHeader from "components/TableWithCustomHeader";
@@ -19,6 +19,7 @@ import { dialogBoxContext } from "pages/alertManager/services/utils";
 import AlertDialog from "components/AlertDialog";
 import { renderSkeleton } from "services/skeleton";
 import { useAlert } from "contexts/AlertContextProvider";
+import { styled } from '@mui/material/styles';
 
 const ViewChannel = () => {
 
@@ -152,8 +153,7 @@ const ViewChannel = () => {
         return dayjs(payload).format('MMMM D, YYYY h:mm A');
     }
 
-    const renderCell = (context: Record<string, any>) => {
-        const row = context?.cell?.row?.original || {};
+    const renderCell = (row: Record<string, any>) => {
         const rowKey = row?.label;
         let rowValue = row?.value;
 
@@ -195,39 +195,10 @@ const ViewChannel = () => {
         }
     };
 
-    const columns = useMemo(() => {
-        return [
-            {
-                Header: 'Key',
-                accessor: 'label',
-                disableFilters: true,
-                style: {
-                    width: '20vw'
-                },
-                Cell(context: any) {
-                    return (<Box>
-                        <Typography variant='h6'>
-                            {_.capitalize(getKeyAlias(context?.value))}
-                        </Typography>
-                    </Box>)
-                }
-            },
-            {
-                Header: 'Value',
-                accessor: 'value',
-                disableFilters: true,
-                style: {
-                    width: 'auto'
-                },
-                Cell: renderCell
-            }
-        ]
-    }, []);
-
     const renderActionButton = (btn: Record<string, any>) => {
         const { label, isDisabled, icon, onClick, color, variant = 'contained' } = btn;
         const context = { payload: channelMetadata, showAlert, navigate };
-        return <> <Button onClick={_ => onClick(context)} startIcon={icon} color={color} variant={variant} disabled={isDisabled({ payload: channelMetadata })}>{label}</Button></>
+        return <> <Button size="small" onClick={_ => onClick(context)} startIcon={icon} color={color} variant="outlined" disabled={isDisabled({ payload: channelMetadata })}>{label}</Button></>
     }
 
     useEffect(() => {
@@ -239,7 +210,7 @@ const ViewChannel = () => {
 
     const renderActions = () => {
         return (
-            <Stack direction="row" justifyContent="center" alignItems="center" spacing={1}>
+            <Stack direction="row" justifyContent="right" alignItems="center" p={1} spacing={1}>
                 {_.map(actions, renderActionButton)}
             </Stack>
         );
@@ -277,13 +248,52 @@ const ViewChannel = () => {
         </Dialog>
     }
 
-    const renderViewTable = () => {
-        return <MainCard title={renderTitle()} secondary={renderActions()} contentSX={{ px: 3, background: 'inherit' }} content={false} >
-            <Grid container rowSpacing={2} columnSpacing={2}>
-                <Grid item xs={12}>
-                    <ScrollX>
-                        <TableWithCustomHeader columns={columns} data={tableInputData} />
-                    </ScrollX>
+
+    const StyledTableRow = styled(TableRow)(({ theme }) => ({
+        '&:nth-of-type(odd)': {
+            backgroundColor: theme.palette.action.hover,
+        },
+        // hide last border
+        '&:last-child td, &:last-child th': {
+            border: 0,
+        },
+    }));
+
+    return <>{loading ?
+        <MainCard content={false}>
+            {renderSkeleton({ config: { type: 'table', width: "100%", totallines: 6 } })}
+        </MainCard> :
+        (
+            <Box>
+                <Grid item xs={14} sm={7} lg={7}>
+                    {renderActions && renderActions()}
+                </Grid>
+                <Grid justifyContent={'flex-start'} p={3}>
+                    <Grid item xs={14} sm={7} lg={7}>
+                        <TableContainer component={Paper} >
+                            <Table size="small" aria-label="a dense table">
+                            <TableHead>
+                                <TableRow>
+                                    <TableCell align="left" colSpan={2}>
+                                        {renderTitle()}
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableCell align="left" width={'50%'} sx={{ borderRight: '1px solid #ddd !important' }}>Key</TableCell>
+                                    <TableCell align="left" width={'50%'} >Value</TableCell>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                {tableInputData && tableInputData.map( (record:any) => (
+                                    <StyledTableRow key={_.get(record,'label')} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                                        <TableCell align="left" sx={{ borderRight: '1px solid #ddd !important' }}>{_.capitalize(_.get(record,'label'))}</TableCell>
+                                        <TableCell align="left" sx={{ borderRight: '1px solid #ddd !important' }}>{renderCell(record)}</TableCell>
+                                    </StyledTableRow>
+                                ))}
+                            </TableBody>
+                            </Table>
+                        </TableContainer>
+                    </Grid>
                 </Grid>
                 <Grid item xs={12}>
                     {renderTestChannelDialog()}
@@ -291,15 +301,9 @@ const ViewChannel = () => {
                 <Grid>
                     {renderDialog()}
                 </Grid>
-            </Grid>
-        </MainCard>
-    }
-
-    return <>{loading ?
-        <MainCard content={false}>
-            {renderSkeleton({ config: { type: 'table', width: "100%", totallines: 6 } })}
-        </MainCard> :
-        renderViewTable()}
+            </Box>
+        )
+        }
     </>
 }
 
diff --git a/web-console-v2/src/pages/notificationChannels/components/ConfigureChannel.tsx b/web-console-v2/src/pages/notificationChannels/components/ConfigureChannel.tsx
index 1e357d88..39d5ea45 100644
--- a/web-console-v2/src/pages/notificationChannels/components/ConfigureChannel.tsx
+++ b/web-console-v2/src/pages/notificationChannels/components/ConfigureChannel.tsx
@@ -57,7 +57,7 @@ const ConfigureChannel = (props: any) => {
     const channelDescription = () => {
         const selectedChannelDescription = _.get(channelConfigurations, [selectedType, 'description']);
         if (!selectedChannelDescription) return null;
-        return <Alert severity="info" sx={{ lineHeight: 0 }}><Typography variant="caption">{selectedChannelDescription}</Typography></Alert>
+        return <Alert severity="info" sx={{ lineHeight: 0 }}><Typography variant="body1">{selectedChannelDescription}</Typography></Alert>
     }
 
     return <>
diff --git a/web-console-v2/src/pages/notificationChannels/components/SendTestMessage.tsx b/web-console-v2/src/pages/notificationChannels/components/SendTestMessage.tsx
index 60f259e1..f38a819d 100644
--- a/web-console-v2/src/pages/notificationChannels/components/SendTestMessage.tsx
+++ b/web-console-v2/src/pages/notificationChannels/components/SendTestMessage.tsx
@@ -75,10 +75,10 @@ const SendTestMessage = (props: any) => {
                 </Grid>
             </DialogContent>
             <DialogActions>
-                <Button color="error" onClick={onClose}>
+                <Button size="small" color="error" onClick={onClose}>
                     Cancel
                 </Button>
-                <Button variant="contained" autoFocus onClick={_ => sendMessage()}>
+                <Button size="small" variant="contained" autoFocus onClick={_ => sendMessage()}>
                     Send Message
                 </Button>
             </DialogActions>