feat: improved visualization controls

Barklarm · Aug 4, 2024 · 3f5f33b · 3f5f33b
1 parent 65f55b2
commit 3f5f33b
Show file tree

Hide file tree

Showing 12 changed files with 385 additions and 211 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,11 +52,12 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@faker-js/faker": "8.0.2",
-    "@mui/icons-material": "5.14.1",
-    "@mui/material": "5.14.2",
+    "@mui/icons-material": "5.15.14",
+    "@mui/material": "5.15.14",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
     "@types/jest": "29.5.3",
+    "@types/luxon": "^3.4.2",
     "@types/react": "18.2.17",
     "@types/react-dom": "18.2.7",
     "@typescript-eslint/eslint-plugin": "6.2.0",
@@ -91,7 +92,9 @@
     "update-electron-app": "2.0.1"
   },
   "dependencies": {
+    "@mui/x-date-pickers": "^7.12.0",
     "cz-format-extension": "1.5.1",
+    "luxon": "^3.5.0",
     "react-router-dom": "6.14.2",
     "react-time-picker": "6.5.0"
   }

diff --git a/src/extensions/cctray/component/index.tsx b/src/extensions/cctray/component/index.tsx
@@ -5,13 +5,13 @@ export const CCTray = ({ observable, index, updateFieldWithValue, translate }: a
   <>
     <TextField
       label={translate('URL')}
-      variant="outlined"
+      variant="standard"
       value={observable.url}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) => updateFieldWithValue('url', index, event.target.value)}
     />
     <TextField
       label={translate('Project')}
-      variant="outlined"
+      variant="standard"
       value={observable.name}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) => updateFieldWithValue('name', index, event.target.value)}
     />

diff --git a/src/extensions/datadog/component/index.tsx b/src/extensions/datadog/component/index.tsx
@@ -8,6 +8,7 @@ export const DatadogMonitor = ({ observable, index, updateFieldWithValue, transl
     <Select
       value={observable.site}
       label={translate('Site')}
+      variant="standard"
       onChange={(event: React.ChangeEvent<HTMLInputElement>) => updateFieldWithValue('site', index, event.target.value)}
     >
       <MenuItem value={'datadoghq.eu'}>EU</MenuItem>
@@ -18,15 +19,15 @@ export const DatadogMonitor = ({ observable, index, updateFieldWithValue, transl
     </Select>
     <TextField
       label={translate('Monitor ID')}
-      variant="outlined"
+      variant="standard"
       value={observable.monitorId}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
         updateFieldWithValue('monitorId', index, event.target.value)
       }
     />
     <TextField
       label={translate('API Key')}
-      variant="outlined"
+      variant="standard"
       type="password"
       value={observable.apiKey}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
@@ -35,7 +36,7 @@ export const DatadogMonitor = ({ observable, index, updateFieldWithValue, transl
     />
     <TextField
       label={translate('Application Key')}
-      variant="outlined"
+      variant="standard"
       type="password"
       value={observable.appKey}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>

diff --git a/src/extensions/github/component/index.tsx b/src/extensions/github/component/index.tsx
@@ -5,29 +5,29 @@ export const GithubAction = ({ observable, index, updateFieldWithValue, translat
   <>
     <TextField
       label={translate('Owner')}
-      variant="outlined"
+      variant="standard"
       value={observable.owner}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
         updateFieldWithValue('owner', index, event.target.value)
       }
     />
     <TextField
       label={translate('Repository')}
-      variant="outlined"
+      variant="standard"
       value={observable.repo}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) => updateFieldWithValue('repo', index, event.target.value)}
     />
     <TextField
       label={translate('Workflow ID')}
-      variant="outlined"
+      variant="standard"
       value={observable.workflowId}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
         updateFieldWithValue('workflowId', index, event.target.value)
       }
     />
     <TextField
       label={translate('Authorization Token')}
-      variant="outlined"
+      variant="standard"
       type="password"
       value={observable.authToken}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>

diff --git a/src/extensions/grafana/component/index.tsx b/src/extensions/grafana/component/index.tsx
@@ -5,13 +5,13 @@ export const Grafana = ({ observable, index, updateFieldWithValue, translate }:
   <>
     <TextField
       label={translate('URL')}
-      variant="outlined"
+      variant="standard"
       value={observable.url}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) => updateFieldWithValue('url', index, event.target.value)}
     />
     <TextField
       label={translate('Authorization Token')}
-      variant="outlined"
+      variant="standard"
       type="password"
       value={observable.authToken}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>

diff --git a/src/extensions/newRelic/component/index.tsx b/src/extensions/newRelic/component/index.tsx
@@ -8,14 +8,15 @@ export const NewRelic = ({ observable, index, updateFieldWithValue, translate }:
     <Select
       value={observable.site}
       label={translate('Site')}
+      variant="standard"
       onChange={(event: React.ChangeEvent<HTMLInputElement>) => updateFieldWithValue('site', index, event.target.value)}
     >
       <MenuItem value={'eu.newrelic.com'}>EU</MenuItem>
       <MenuItem value={'newrelic.com'}>OTHERS</MenuItem>
     </Select>
     <TextField
       label={translate('API Key')}
-      variant="outlined"
+      variant="standard"
       type="password"
       value={observable.apiKey}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>

diff --git a/src/extensions/sentry/component/index.tsx b/src/extensions/sentry/component/index.tsx
@@ -5,23 +5,23 @@ export const Sentry = ({ observable, index, updateFieldWithValue, translate }: a
   <>
     <TextField
       label={translate('Organization')}
-      variant="outlined"
+      variant="standard"
       value={observable.organization}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
         updateFieldWithValue('organization', index, event.target.value)
       }
     />
     <TextField
       label={translate('Project')}
-      variant="outlined"
+      variant="standard"
       value={observable.project}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
         updateFieldWithValue('project', index, event.target.value)
       }
     />
     <TextField
       label={translate('Authorization Token')}
-      variant="outlined"
+      variant="standard"
       type="password"
       value={observable.authToken}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>

diff --git a/src/renderer/components/NotificationSchedule/index.tsx b/src/renderer/components/NotificationSchedule/index.tsx
@@ -4,8 +4,11 @@ import Button from '@mui/material/Button';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import { NotificationConfiguration } from '../../../types/NotificationEnabled';
-import { TimePicker } from 'react-time-picker';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import './style.css';
+import { DateTime } from 'luxon';
+import { IconButton } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 export const NotificationSchedule = ({ schedules, translate, updateSchedules }: any) => {
   const [localSchedule, setLocalSchedule] = useState(schedules);
@@ -28,9 +31,8 @@ export const NotificationSchedule = ({ schedules, translate, updateSchedules }:
           key={`notification-schedule-${index}`}
         >
           <Select
-            sx={{
-              flexBasis: '25%',
-            }}
+            sx={{ width: 170 }}
+            variant="standard"
             value={schedule.weekday}
             label={translate('Weekday')}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) => update('weekday', index, event.target.value)}
@@ -44,37 +46,30 @@ export const NotificationSchedule = ({ schedules, translate, updateSchedules }:
             <MenuItem value={0}>{translate('Sunday')}</MenuItem>
           </Select>
           <TimePicker
-            disableClock
-            clearIcon={null}
-            value={`${schedule.enableTime.hour}:${schedule.enableTime.minute}`}
-            onChange={(value) =>
-              update('enableTime', index, { hour: Number(value.substring(0, 2)), minute: Number(value.substring(3)) })
-            }
+            sx={{ width: 170 }}
+            slotProps={{ textField: { variant: 'standard' } }}
+            value={DateTime.fromObject({ hour: schedule.enableTime.hour, minute: schedule.enableTime.minute })}
+            onChange={(value) => update('enableTime', index, { hour: value.hour, minute: value.minute })}
           />
           <TimePicker
-            disableClock
-            clearIcon={null}
-            value={`${schedule.disableTime.hour}:${schedule.disableTime.minute}`}
-            onChange={(value) =>
-              update('disableTime', index, { hour: Number(value.substring(0, 2)), minute: Number(value.substring(3)) })
-            }
+            sx={{ width: 170 }}
+            slotProps={{ textField: { variant: 'standard' } }}
+            value={DateTime.fromObject({ hour: schedule.disableTime.hour, minute: schedule.disableTime.minute })}
+            onChange={(value) => update('disableTime', index, { hour: value.hour, minute: value.minute })}
           />
-          <Button
-            variant="contained"
-            sx={{
-              flexBasis: '20%',
-            }}
+          <IconButton
+            size="small"
+            sx={{ padding: '0.15rem' }}
             onClick={() =>
               setLocalSchedule(localSchedule.filter((_: any, currentIndex: number) => currentIndex != index))
             }
           >
-            {translate('Delete')}
-          </Button>
+            <DeleteIcon fontSize="small" />
+          </IconButton>
         </Stack>
       ))}
       <Stack spacing={2} direction="row">
         <Button
-          variant="contained"
           onClick={() =>
             setLocalSchedule([
               ...localSchedule,