Merge pull request #112 from Sanketika-Obsrv/enterprise_fix

#OBS-l304: Rollup ui fix
Sanketika-Obsrv · Nov 12, 2024 · 84198e6 · 84198e6
2 parents c4e48f3 + 30d718c
commit 84198e6
Show file tree

Hide file tree

Showing 17 changed files with 120 additions and 140 deletions.
diff --git a/web-console-v2/src/components/Accordian/AccordionSection.tsx b/web-console-v2/src/components/Accordian/AccordionSection.tsx
@@ -64,7 +64,7 @@ const FieldSection = (props: any) => {
                     </Typography>
                 }
                 contentSX={{ px: 3, background: 'inherit' }}
-                sx={{ border: '1px solid #D6D6D6' }}
+                sx={{ border: '1px solid #D6D6D6', borderColor: '#d6d6d6'}}
             >
                 {sectionDetails()}
             </MainCard>

diff --git a/web-console-v2/src/components/Styled/Cards.tsx b/web-console-v2/src/components/Styled/Cards.tsx
@@ -6,6 +6,7 @@ const GenericCard = styled(Card)(({ theme }) => ({
     outline: 'none',
     padding: theme.spacing(3, 3),
     margin: theme.spacing(1, 0),
+    boxShadow: 'none'
 }));
 
 const CardTitle = styled(Typography)(({ theme }) => ({

diff --git a/web-console-v2/src/pages/ConnectorConfiguration/ConnectorConfiguration.module.css b/web-console-v2/src/pages/ConnectorConfiguration/ConnectorConfiguration.module.css
@@ -21,6 +21,7 @@
 [class*='MuiTypography-root'][class*='MuiTypography-h5'] {
     font-size: 1.125rem;
     margin-bottom: -0.375rem;
+    font-weight: 600;
 }
 
 .button {

diff --git a/web-console-v2/src/pages/Dataset/wizard/components/WizardNavigator.tsx b/web-console-v2/src/pages/Dataset/wizard/components/WizardNavigator.tsx
@@ -1,51 +1,46 @@
 import React from 'react';
 import { DownloadOutlined } from '@ant-design/icons';
 import _ from 'lodash';
-import { Stack, Typography, Box, } from '@mui/material';
+import { Stack, Typography, Box, Button } from '@mui/material';
+
 import AnimateButton from 'components/@extended/AnimateButton';
 import { StandardWidthButton } from 'components/Styled/Buttons';
 
 const WizardNavigator = ({ showPrevious, gotoPreviousSection, gotoNextSection, enableDownload, handleDownload, master, section = undefined, nextDisabled = false, edit }: any) => {
 
-    return <Stack direction="row" justifyContent={showPrevious ? 'space-between' : 'flex-end'}>
+    return <Stack direction="row" justifyContent={showPrevious ? 'space-between' : 'flex-end'} mx={6}>
 
         {showPrevious && gotoPreviousSection &&
-            <AnimateButton>
-                <StandardWidthButton
-                    variant="outlined"
-                    type="button"
-                    onClick={gotoPreviousSection}
-                >
-                    <Typography variant="h5">Previous</Typography>
-                </StandardWidthButton>
-            </AnimateButton>
+            <Button
+                variant="outlined"
+                type="button"
+                onClick={gotoPreviousSection}
+            >
+                <Typography variant="buttonSecondaryCTA">Previous</Typography>
+            </Button>
         }
 
         <Box display="flex" justifyContent="space-evenly" alignItems="center">
             {enableDownload && handleDownload &&
-                <AnimateButton>
-                    <StandardWidthButton
-                        startIcon={<DownloadOutlined style={{ fontSize: '1.25rem' }} />}
-                        sx={{ width: 'auto' }}
-                        type="button"
-                        onClick={handleDownload}
-                        variant='outlined'
-                    >
-                        <Typography variant="h5">Download JSON Schema</Typography>
-                    </StandardWidthButton>
-                </AnimateButton>
+                <Button
+                    startIcon={<DownloadOutlined style={{ fontSize: '1.25rem' }} />}
+                    sx={{ width: 'auto' }}
+                    type="button"
+                    onClick={handleDownload}
+                    variant='outlined'
+                >
+                    <Typography variant="buttonSecondaryCTA">Download JSON Schema</Typography>
+                </Button>
             }
 
             {gotoNextSection &&
-                <AnimateButton>
-                    <StandardWidthButton
-                        variant="contained"
-                        type="button"
-                        onClick={gotoNextSection}
-                        disabled={nextDisabled}>
-                        <Typography variant="h5">Proceed</Typography>
-                    </StandardWidthButton>
-                </AnimateButton>
+                <Button
+                    variant="contained"
+                    type="button"
+                    onClick={gotoNextSection}
+                    disabled={nextDisabled}>
+                    <Typography variant="button">Proceed</Typography>
+                </Button>
             }
         </Box>
     </Stack>

diff --git a/web-console-v2/src/pages/DatasetManagement/DatasetManagement.tsx b/web-console-v2/src/pages/DatasetManagement/DatasetManagement.tsx
@@ -3,7 +3,7 @@ import AccordionSection from "components/Accordian/AccordionSection";
 import _ from "lodash";
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useEffect, useState } from "react";
-import { Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { DatasetStatus } from "types/datasets";
 import Loader from "components/Loader";
 import ReviewAllCongurations from "pages/datasetV1/ReviewAllConfigurations";
@@ -68,7 +68,8 @@ const DatasetManagement = () => {
     }
 
     return <>
-        {loading ? <Loader loading={loading} /> : <AccordionSection sections={datasetSection()} />}
+        {loading ? <Loader loading={loading} /> : <Box sx={{padding: '2rem'}}><AccordionSection sections={datasetSection()} /></Box>}
+
     </>
 }
 

diff --git a/web-console-v2/src/pages/Rollup/components/CustomGranularity.tsx b/web-console-v2/src/pages/Rollup/components/CustomGranularity.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Autocomplete, Button, Dialog, Grid, TextField } from '@mui/material';
+import { Autocomplete, Button, Dialog, Grid, TextField, Typography } from '@mui/material';
 import { Box, DialogTitle } from '@mui/material';
 import { useEffect } from 'react';
 import { useLocation } from 'react-router';
@@ -27,12 +27,13 @@ const CustomGranularity = ({ setDisableCustomGranularity, customGranularity, set
             {
                 _.isEmpty(filteredGranularityOptions) ? "" : <>
                     <Button
-                        size="medium"
+                        size="small"
                         startIcon={<PlusOutlined />}
                         sx={{ fontWeight: 500, position: 'absolute', right: 0 }}
                         onClick={() => setOpen(true)}
+                        variant='outlined'
                     >
-                        Custom granularity
+                        <Typography variant='buttonSecondaryCTA'>Custom granularity</Typography>
                     </Button>
                     <Dialog open={open} onClose={handleClose} fullWidth={true}>
                         <Box sx={{ p: 1, paddingBottom: 3 }}>

diff --git a/web-console-v2/src/pages/Rollup/components/FilteredRollUp.tsx b/web-console-v2/src/pages/Rollup/components/FilteredRollUp.tsx
@@ -17,7 +17,6 @@ import { useAlert } from "contexts/AlertContextProvider";
 import Loader from "components/Loader";
 import Skeleton from 'components/Skeleton';
 
-
 const sampleFilterQuery = JSON.stringify({
     "filter": {
         "type": "and",
@@ -210,19 +209,15 @@ const FilteredRollUps = (props: Record<string, any>) => {
         </>
     }
 
-    const sections = [
-        {
-            id: 'filteredRollups',
-            title: <Typography variant="h6" fontWeight={500} mt={0.5}>Add Filters</Typography>,
-            component: loading ?  
-                        <Skeleton/>
-                        : filteredRollupForm(),
-            description: <Typography variant="body2" fontWeight={500}>Set up filters to selectively process input data during ingestion. Only the data that meets the specified conditions will be ingested</Typography>,
-            noGrid: true,
-        },
-    ];
-
-    return <AccordionSection sections={sections} />
+    return (
+        <>
+            <Typography variant="h5">Add Filters</Typography>
+            <Typography variant="body2" sx={{ my: 1 }}>Set up filters to selectively process input data during ingestion. Only the data that meets the specified conditions will be ingested</Typography>
+            {loading
+                ? <Skeleton/>
+                : filteredRollupForm()}
+        </>
+    )
 }
 
 export default FilteredRollUps;
diff --git a/web-console-v2/src/pages/Rollup/components/Granularity.tsx b/web-console-v2/src/pages/Rollup/components/Granularity.tsx
@@ -5,6 +5,7 @@ import { useLocation } from 'react-router';
 import AccordionSection from 'components/Accordian/AccordionSection';
 import GranularityOptions from './GranularityOptions';
 import Loader from 'components/Loader';
+import { Box, Typography } from '@mui/material';
 
 const Granularity = (props: any) => {
     const {
@@ -19,27 +20,23 @@ const Granularity = (props: any) => {
     const [loading, setLoading] = useState(false);
     const isEditing = location.state?.edit;
 
-    const sections = [
-        {
-            id: 'granularity',
-            title: 'Granularity *',
-            component: (!isEditing ?
-                <GranularityOptions
-                    setSelectedOptions={setSelectedOptions}
-                    selectedOptions={selectedOptions}
-                    setCustomGranularity={setCustomGranularity}
-                    customGranularity={customGranularity}
-                    setProceedToListPage={setProceedToListPage}
-                    setSelectedGranularityOptions={setSelectedGranularityOptions}
-                /> : null),
-            componentType: 'box',
-        },
-    ];
-
     return (
         <>
             {loading && <Loader loading={loading} />}
-            {!loading && <AccordionSection sections={sections} />}
+            {!loading &&
+                <Box sx={{ mx:6, px:2.5, pt:2, background: '#ffffff', border: '1px solid #d6d6d6', borderRadius: '8px'}}>
+                    <Typography variant='h5' sx={{pb:2}}>Granularity *</Typography>
+                    {!isEditing ?
+                    <GranularityOptions
+                        setSelectedOptions={setSelectedOptions}
+                        selectedOptions={selectedOptions}
+                        setCustomGranularity={setCustomGranularity}
+                        customGranularity={customGranularity}
+                        setProceedToListPage={setProceedToListPage}
+                        setSelectedGranularityOptions={setSelectedGranularityOptions}
+                    /> : null}
+                </Box>
+            }
         </>
     );
 };

diff --git a/web-console-v2/src/pages/Rollup/components/GranularityOptions.tsx b/web-console-v2/src/pages/Rollup/components/GranularityOptions.tsx
@@ -73,13 +73,13 @@ const GranularityOptions = ({ selectedOptions, setSelectedOptions, setSelectedGr
                 <Grid item style={{ display: 'flex', flexDirection: 'row', gap: 10 }}>
                     {granularityOptions.map((option: any) => {
                         if (option.checkbox === true) {
-                            return <Grid style={{ display: 'flex', alignItems: 'center' }} key={option.value}>
+                            return <Grid style={{ display: 'flex', alignItems: 'center' }} key={option?.value}>
                                 <Checkbox
-                                    checked={location.state?.edit ? true : selectedOptions.includes(option.value) || existingGranularity.includes(option.value)}
-                                    onChange={() => handleCheckboxChange(option.value)}
-                                    disabled={location.state?.edit ? true : existingGranularity.includes(option.value)}
+                                    checked={location.state?.edit ? true : selectedOptions.includes(option?.value) || existingGranularity.includes(option?.value)}
+                                    onChange={() => handleCheckboxChange(option?.value)}
+                                    disabled={location.state?.edit ? true : existingGranularity.includes(option?.value)}
                                 />
-                                {_.capitalize(option.label)}
+                                <Typography variant='body1'>{_.capitalize(option?.label)}</Typography>
                             </Grid>
                         }
                     })}

diff --git a/web-console-v2/src/pages/Rollup/components/GranuralityInfo.tsx b/web-console-v2/src/pages/Rollup/components/GranuralityInfo.tsx
@@ -29,11 +29,11 @@ const GranuralityInfo = (props: any) => {
         <Box>
             <Grid spacing={1}>
                 {_.map(sections, (item) => {
-                    return <Box display={'flex'} gap={1} alignItems={'center'}>
-                        <Typography mb={0.5} flexShrink={0} variant="h5">
+                    return <Box display={'flex'} gap={1} alignItems={'center'} mb={1}>
+                        <Typography flexShrink={0} variant="h5">
                             {item.lable}
                         </Typography>
-                        <Typography mb={0.5} width="100%" flexShrink={0}>
+                        <Typography  flexShrink={0} mt={1}>
                             {item.value}
                         </Typography>
                     </Box>

diff --git a/web-console-v2/src/pages/Rollup/components/ListDimensions.tsx b/web-console-v2/src/pages/Rollup/components/ListDimensions.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useEffect, useMemo, useState } from 'react';
-import { Grid, Box, useTheme, Typography, Alert } from '@mui/material';
+import { Grid, Box, useTheme, Typography, Alert, Button } from '@mui/material';
 import * as _ from 'lodash';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
@@ -178,7 +178,7 @@ const ListDimensions = (props: any) => {
     }, [flattenedData])
 
     return (
-        <>
+        <Box sx={{py:2}}>
             {isEditing ? <></> : <Granularity
                 proceedToListPage={proceedToListPage}
                 setProceedToListPage={setProceedToListPage}
@@ -189,46 +189,42 @@ const ListDimensions = (props: any) => {
                 setSelectedOptions={setSelectedOptions}
                 selectedOptions={selectedOptions}
             />}
-            <GenericCard elevation={1}>
+            <GenericCard elevation={1} sx={{mx: 6, border: '1px solid #d6d6d6'}}>
                 <Grid container spacing={2}>
-                    <Grid item xs={12} sm={12}>
+                    <Grid item xs={12} sm={12} paddingTop={0}>
+
                         {isEditing ? <Alert sx={{ display: "flex", alignItems: "center", mb: 2 }} severity="info">{en.newlyAddedFieldsAlertMessage}</Alert> : <></>}
                         <ExpandingTable
                             columns={columns}
                             data={getNestingV1(flattenedData, jsonSchema) as []}
                             limitHeight
                             tHeadHeight={52}
                             showSearchBar={false}
-                            styles={{ '&.MuiTableCell-root': { border: '1px solid #D9D9D9' } }}
                         // context={{ disableRowColor: true }}
                         />
                     </Grid>
                 </Grid>
             </GenericCard>
-            <GenericCard elevation={1}>
+            <GenericCard elevation={1} sx={{mx:6, border: '1px solid #d6d6d6'}}>
                 <FilteredRollUps {...props} />
-            </GenericCard>
-            <Stack direction="row" justifyContent="space-between">
-                <AnimateButton>
-                    <StandardWidthButton
-                        variant="outlined"
-                        type="button"
-                        onClick={() => navigate(-1)}
-                    >
-                        <Typography variant="h5">Previous</Typography>
-                    </StandardWidthButton>
-                </AnimateButton>
-                <AnimateButton>
-                    <StandardWidthButton
-                        variant="contained"
-                        type="button"
-                        onClick={() => gotoNextSection()}
-                    >
-                        <Typography variant="h5">Proceed</Typography>
-                    </StandardWidthButton>
-                </AnimateButton>
+            </GenericCard>  
+            <Stack direction="row" justifyContent="space-between" sx={{mx:6, mb:4}}>
+                <Button
+                    variant="outlined"
+                    type="button"
+                    onClick={() => navigate(-1)}
+                >
+                    <Typography variant="buttonSecondaryCTA">Previous</Typography>
+                </Button>
+                <Button
+                    variant="contained"
+                    type="button"
+                    onClick={() => gotoNextSection()}
+                >
+                    <Typography variant="button">Proceed</Typography>
+                </Button>
             </Stack>
-        </>
+        </Box>
     );
 };
 

diff --git a/web-console-v2/src/pages/Rollup/components/ListMetrics.tsx b/web-console-v2/src/pages/Rollup/components/ListMetrics.tsx
@@ -141,18 +141,17 @@ const ListMetrics = (props: any) => {
     const flattenedDataWithDefaultMetric = [...flattenedData, defaultMetric]
     return (
         <>
-            <GenericCard elevation={1}>
+            <GenericCard elevation={1} sx={{mx:6, border: '1px solid #d6d6d6'}}>
                 <Grid container spacing={2}>
                     <Grid item xs={12} sm={12}>
-                        <Alert sx={{ display: "flex", alignItems: "center", mb: 2 }} severity="info">{en.selectAggregateFunctionAlert}</Alert>
+                        <Alert sx={{ display: "flex", alignItems: "center" }} severity="info">{en.selectAggregateFunctionAlert}</Alert>
                         <ExpandingTable
                             type={"metrics"}
                             columns={columns}
                             data={getNestingV1(getFilteredMetricData(flattenedDataWithDefaultMetric), jsonSchema)}
                             limitHeight
                             tHeadHeight={52}
                             showSearchBar={false}
-                            styles={{ '&.MuiTableCell-root': { border: '1px solid #D9D9D9' } }}
                             context={{ disableRowColor: true }}
                         />
                     </Grid>

diff --git a/web-console-v2/src/pages/Rollup/components/ListRollups.tsx b/web-console-v2/src/pages/Rollup/components/ListRollups.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { DeleteOutlined, EditOutlined, PlusOutlined, ArrowLeftOutlined } from "@ant-design/icons";
-import { Alert, Button, Grid, Stack, Box } from "@mui/material";
+import { Alert, Button, Grid, Stack, Box, Typography } from "@mui/material";
 import { useNavigate, useParams } from "react-router";
 import _ from 'lodash';
 import MainCard from "components/MainCard";
@@ -147,11 +147,11 @@ const ListRollups = () => {
             </> : renderRollups()}
             <Grid item xs={12}>
                 {rollups.length === granularityOptions.length ? <></> : <Stack direction="row" justifyContent="space-between" alignItems="center" mt={1}>
-                    <Button size="medium" startIcon={<ArrowLeftOutlined />} sx={{ fontWeight: 500 }} onClick={() => navigate(`/datasets?status=${DatasetStatus.ReadyToPublish}`)}>
-                        Previous
+                    <Button size="medium" startIcon={<ArrowLeftOutlined />} sx={{ fontWeight: 500 }} onClick={() => navigate(`/datasets?status=${DatasetStatus.ReadyToPublish}`)} variant='outlined'>
+                        <Typography variant='buttonSecondaryCTA'>Previous</Typography>
                     </Button>
-                    <Button size="medium" startIcon={<PlusOutlined />} sx={{ fontWeight: 500 }} onClick={addNewRollup}>
-                        Add Rollup
+                    <Button size="medium" startIcon={<PlusOutlined />} sx={{ fontWeight: 500 }} onClick={addNewRollup} variant='outlined'>
+                        <Typography variant='buttonSecondaryCTA'>Add Rollup</Typography>
                     </Button>
                 </Stack>}
                 <AlertDialog open={open} handleClose={handleClose} action={handleAction} context={dialogContext} />