UI improvements

PeerDB-io · Mar 8, 2024 · 9e0604c · 9e0604c
1 parent 9c6ecbb
commit 9e0604c
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 22 deletions.
diff --git a/ui/app/alert-config/new.tsx b/ui/app/alert-config/new.tsx
@@ -10,9 +10,9 @@ import SelectTheme from '../styles/select';
 import {
   alertConfigReqSchema,
   alertConfigType,
-  emailConfigType,
-  serviceConfigType,
-  slackConfigType,
+  emailConfigType, serviceConfigType,
+  serviceTypeSchemaMap,
+  slackConfigType
 } from './validation';
 
 export type ServiceType = 'slack' | 'email';
@@ -56,6 +56,7 @@ function getSlackProps(
       <div>
         <p>Authorisation Token</p>
         <TextField
+          key={'auth_token'}
           style={{ height: '2.5rem', marginTop: '0.5rem' }}
           variant='simple'
           placeholder='Auth Token'
@@ -71,6 +72,7 @@ function getSlackProps(
       <div>
         <p>Channel IDs</p>
         <TextField
+          key={'channel_ids'}
           style={{ height: '2.5rem', marginTop: '0.5rem' }}
           variant='simple'
           placeholder='Comma separated'
@@ -96,6 +98,7 @@ function getEmailProps(
       <div>
         <p>Email Addresses</p>
         <TextField
+          key={'email_addresses'}
           style={{ height: '2.5rem', marginTop: '0.5rem' }}
           variant='simple'
           placeholder='Comma separated'
@@ -141,16 +144,25 @@ export function NewConfig(alertProps: AlertConfigProps) {
   );
 
   const [loading, setLoading] = useState(false);
+
   const handleAdd = async () => {
     if (!serviceType) {
       notifyErr('Service type must be selected');
       return;
     }
 
+    const serviceSchema = serviceTypeSchemaMap[serviceType]
+    const serviceValidity = serviceSchema.safeParse(config)
+    if(!serviceValidity?.success){
+      notifyErr("Invalid alert service configuration for "+ serviceType + ". " + serviceValidity.error.issues[0].message)
+      return;
+    }
+
+    const serviceConfig = serviceValidity.data
     const alertConfigReq: alertConfigType = {
       id: Number(alertProps.id || -1),
       serviceType: serviceType,
-      serviceConfig: config,
+      serviceConfig,
     };
 
     const alertReqValidity = alertConfigReqSchema.safeParse(alertConfigReq);
@@ -191,6 +203,7 @@ export function NewConfig(alertProps: AlertConfigProps) {
       <div style={{ width: '50%' }}>
         <p style={{ marginBottom: '0.5rem' }}>Alert Provider</p>
         <ReactSelect
+          key={'serviceType'}
           options={[
             {
               value: 'slack',
@@ -203,8 +216,8 @@ export function NewConfig(alertProps: AlertConfigProps) {
           ]}
           placeholder='Select provider'
           defaultValue={{
-            value: 'slack',
-            label: 'Slack',
+            value: serviceType,
+            label: serviceType.charAt(0).toUpperCase() + serviceType.slice(1),
           }}
           formatOptionLabel={ConfigLabel}
           onChange={(val, _) => val && setServiceType(val.value as ServiceType)}
@@ -214,6 +227,7 @@ export function NewConfig(alertProps: AlertConfigProps) {
       <div>
         <p>Slot Lag Alert Threshold (in GB)</p>
         <TextField
+          key={'slot_lag_mb_alert_threshold'}
           style={{ height: '2.5rem', marginTop: '0.5rem' }}
           variant='simple'
           type={'number'}
@@ -230,6 +244,7 @@ export function NewConfig(alertProps: AlertConfigProps) {
       <div>
         <p>Open Connections Alert Threshold</p>
         <TextField
+          key={'open_connections_alert_threshold'}
           style={{ height: '2.5rem', marginTop: '0.5rem' }}
           variant='simple'
           type={'number'}

diff --git a/ui/app/alert-config/page.tsx b/ui/app/alert-config/page.tsx
@@ -14,15 +14,8 @@ import { tableStyle } from '../peers/[peerName]/style';
 import { fetcher } from '../utils/swr';
 import { AlertConfigProps, NewConfig, ServiceType } from './new';
 
-const ServiceIcon = (serviceType: string) => {
-  switch (serviceType) {
-    case 'slack':
-      return <Image src='/images/slack.png' height={80} width={80} alt='alt' />;
-    case 'email':
-      return <Image src='/images/email.png' height={80} width={80} alt='alt' />;
-    default:
-      return <Image src='/images/slack.png' height={80} width={80} alt='alt' />;
-  }
+const ServiceIcon = ({serviceType, size}: {serviceType:string, size:number}) => {
+    return <Image src={`/images/${serviceType}.png`} height={size} width={size} alt={serviceType} />;
 };
 
 const AlertConfigPage: React.FC = () => {
@@ -86,8 +79,14 @@ const AlertConfigPage: React.FC = () => {
               {alerts?.length ? (
                 alerts.map((alertConfig: UAlertConfigResponse, index) => (
                   <TableRow key={index}>
-                    <TableCell style={{ width: '10%' }}>
-                      {ServiceIcon(alertConfig.service_type)}
+                    <TableCell style={{ width:20 }}>
+                      <div style={{display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
+                      <div style={{display:'flex', alignItems:'center', columnGap:'0.5rem'}}>
+                        <ServiceIcon serviceType={alertConfig.service_type} size={30}/>
+                        <Label>{alertConfig.service_type.charAt(0).toUpperCase() + alertConfig.service_type.slice(1)}</Label>
+                      </div>
+
+                      </div>
                     </TableCell>
                     <TableCell>
                       <div style={{ height: '10em' }}>

diff --git a/ui/app/alert-config/validation.ts b/ui/app/alert-config/validation.ts
@@ -5,7 +5,6 @@ const baseServiceConfigSchema = z.object({
     .number({
       invalid_type_error: 'Slot threshold must be a number',
     })
-    .int({ message: 'Slot threshold must be a valid integer' })
     .min(0, 'Slot threshold must be non-negative'),
   open_connections_alert_threshold: z
     .number({
@@ -15,28 +14,28 @@ const baseServiceConfigSchema = z.object({
     .min(0, 'Connections threshold must be non-negative'),
 });
 
-const slackServiceConfigSchema = z.intersection(
+export const slackServiceConfigSchema = z.intersection(
   baseServiceConfigSchema,
   z.object({
     auth_token: z
       .string({ required_error: 'Auth Token is needed.' })
       .min(1, { message: 'Auth Token cannot be empty' })
       .max(256, { message: 'Auth Token is too long' }),
     channel_ids: z
-      .array(z.string().min(1, { message: 'Channel IDs cannot be empty' }), {
+      .array(z.string().trim().min(1, { message: 'Channel IDs cannot be empty' }), {
         required_error: 'We need a channel ID',
       })
       .min(1, { message: 'Atleast one channel ID is needed' }),
   })
 );
 
-const emailServiceConfigSchema = z.intersection(
+export const emailServiceConfigSchema = z.intersection(
   baseServiceConfigSchema,
   z.object({
     email_addresses: z
       .array(
         z
-          .string()
+          .string().trim()
           .min(1, { message: 'Email Addresses cannot be empty' })
           .includes('@'),
         {
@@ -67,3 +66,8 @@ export type emailConfigType = z.infer<typeof emailServiceConfigSchema>;
 export type serviceConfigType = z.infer<typeof serviceConfigSchema>;
 
 export type alertConfigType = z.infer<typeof alertConfigReqSchema>;
+
+export const serviceTypeSchemaMap = {
+  'slack':slackServiceConfigSchema,
+  'email':emailServiceConfigSchema
+}