feat: [SIG-582]: added planned maintenance create dialog

frontend/src/api/plannedDowntime/createDowntimeSchedule.ts

@@ -0,0 +1,44 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+
+import { Recurrence } from './getAllDowntimeSchedules';
+
+export interface DowntimeSchedulePayload {
+ name: string;
+ description?: string;
+ alertIds: string[];
+ schedule: {
+ timezone?: string;
+ startTime?: string;
+ endTime?: string;
+ recurrence?: Recurrence;
+ };
+}
+
+export interface PayloadProps {
+ status: string;
+ data: string;
+}
+
+const createDowntimeSchedule = async (
+ props: DowntimeSchedulePayload,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+ try {
+ const response = await axios.post('/downtime_schedules', {
+ ...props,
+ });
+
+ return {
+ statusCode: 200,
+ error: null,
+ message: response.data.status,
+ payload: response.data.data,
+ };
+ } catch (error) {
+ return ErrorResponseHandler(error as AxiosError);
+ }
+};
+
+export default createDowntimeSchedule;

frontend/src/api/plannedDowntime/deleteDowntimeSchedule.ts

@@ -0,0 +1,19 @@
+import axios from 'api';
+import { useMutation, UseMutationResult } from 'react-query';
+
+export interface DeleteDowntimeScheduleProps {
+ id?: number;
+}
+
+export interface DeleteSchedulePayloadProps {
+ status: string;
+ data: string;
+}
+
+export const useDeleteDowntimeSchedule = (
+ props: DeleteDowntimeScheduleProps,
+): UseMutationResult<DeleteSchedulePayloadProps, Error, number> =>
+ useMutation({
+ mutationKey: [props.id],
+ mutationFn: () => axios.delete(`/downtime_schedules/${props.id}`),
+ });

frontend/src/api/plannedDowntime/getAllDowntimeSchedules.ts

@@ -0,0 +1,50 @@
+import axios from 'api';
+import { AxiosError, AxiosResponse } from 'axios';
+import { Option } from 'container/PlannedDowntime/DropdownWithSubMenu/DropdownWithSubMenu';
+import { useQuery, UseQueryResult } from 'react-query';
+
+export type Recurrence = {
+ startTime?: string | null;
+ endTime?: string | null;
+ duration?: number | string | null;
+ repeatType?: string | Option | null;
+ repeatOn?: string[] | null;
+};
+
+type Schedule = {
+ timezone: string | null;
+ startTime: string | null;
+ endTime: string | null;
+ recurrence: Recurrence | null;
+};
+
+export interface DowntimeSchedules {
+ id: number;
+ name: string | null;
+ description: string | null;
+ schedule: Schedule | null;
+ alertIds: string[] | null;
+ createdAt: string | null;
+ createdBy: string | null;
+ updatedAt: string | null;
+ updatedBy: string | null;
+}
+export type PayloadProps = { data: DowntimeSchedules[] };
+
+export const getAllDowntimeSchedules = async (
+ props?: GetAllDowntimeSchedulesPayloadProps,
+): Promise<AxiosResponse<PayloadProps>> =>
+ axios.get('/downtime_schedules', { params: props });
+
+export interface GetAllDowntimeSchedulesPayloadProps {
+ active?: boolean;
+ recurrence?: boolean;
+}
+
+export const useGetAllDowntimeSchedules = (
+ props?: GetAllDowntimeSchedulesPayloadProps,
+): UseQueryResult<AxiosResponse<PayloadProps>, AxiosError> =>
+ useQuery<AxiosResponse<PayloadProps>, AxiosError>({
+ queryKey: ['getAllDowntimeSchedules', props],
+ queryFn: () => getAllDowntimeSchedules(props),
+ });

frontend/src/api/plannedDowntime/updateDowntimeSchedule.ts

@@ -0,0 +1,37 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+
+import { DowntimeSchedulePayload } from './createDowntimeSchedule';
+
+export interface DowntimeScheduleUpdatePayload {
+ data: DowntimeSchedulePayload;
+ id?: number;
+}
+
+export interface PayloadProps {
+ status: string;
+ data: string;
+}
+
+const updateDowntimeSchedule = async (
+ props: DowntimeScheduleUpdatePayload,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+ try {
+ const response = await axios.put(`/downtime_schedules/${props.id}`, {
+ ...props.data,
+ });
+
+ return {
+ statusCode: 200,
+ error: null,
+ message: response.data.status,
+ payload: response.data.data,
+ };
+ } catch (error) {
+ return ErrorResponseHandler(error as AxiosError);
+ }
+};
+
+export default updateDowntimeSchedule;

frontend/src/constants/features.ts

@@ -19,4 +19,5 @@ export enum FeatureKeys {
  OSS = 'OSS',
  ONBOARDING = 'ONBOARDING',
  CHAT_SUPPORT = 'CHAT_SUPPORT',
+ PLANNED_MAINTENANCE = 'PLANNED_MAINTENANCE',
 }

frontend/src/container/PlannedDowntime/DropdownWithSubMenu/DropdownWithSubMenu.styles.scss

@@ -0,0 +1,127 @@
+.options {
+ width: 100%;
+}
+
+.option {
+ padding: 8px 10px;
+ cursor: pointer;
+ overflow: auto;
+}
+
+.option:hover {
+ background-color: var(--bg-slate-200);
+}
+
+.submenu-container {
+ position: absolute;
+ top: 0;
+ right: 50%;
+ z-index: 1;
+ background-color: var(--bg-ink-400);
+ border: 1px solid var(--bg-slate-500);
+ max-height: 300px;
+ overflow-y: auto;
+ width: 160px;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ padding: 12px;
+ border-radius: 4px;
+
+ .submenu-checkbox {
+ padding: 0px;
+ }
+}
+
+.dropdown-submenu {
+ .dropdown-input {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 4.5px 11px;
+ color: rgba(255, 255, 255, 0.85);
+ font-size: 13px;
+ line-height: 1.6153846153846154;
+ list-style: none;
+ font-family: Inter;
+ position: relative;
+ display: inline-block;
+ min-width: 0;
+ transition: all 0.2s;
+ }
+
+ .ant-popover-inner {
+ padding: 0px;
+ }
+}
+
+.options-container {
+ position: relative;
+ --arrow-x: 175px;
+ --arrow-y: 266px;
+ width: 350px;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 4px;
+ color: var(--bg-vanilla-400);
+ font-size: 12px;
+ line-height: 1.6153846153846154;
+ list-style: none;
+ font-family: Inter;
+ z-index: 1050;
+ overflow: hidden;
+ font-variant: initial;
+ background-color: var(--bg-ink-400);
+ border-radius: 2px;
+ outline: none;
+ box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.3);
+}
+
+.submenu-popover {
+ .ant-popover-inner {
+ padding: 0px;
+ }
+}
+
+.save-option-btn {
+ height: 24px;
+ padding: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ align-self: flex-end;
+ width: 60px;
+}
+
+.submenu-header {
+ color: var(--bg-vanilla-200);
+ font-family: Inter;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ padding-bottom: 8px;
+ text-transform: uppercase;
+}
+
+.lightMode {
+ .option:hover {
+ background-color: var(--bg-vanilla-200);
+ }
+
+ .submenu-container {
+ background-color: var(--bg-vanilla-100);
+ border: 1px solid var(--bg-vanilla-300);
+ }
+
+ .dropdown-submenu {
+ .dropdown-input {
+ color: var(--bg-slate-100);
+ }
+ }
+ .options-container {
+ color: var(--bg-slate-100);
+ background-color: var(--bg-vanilla-100);
+ }
+ .submenu-header {
+ color: var(--bg-slate-200);
+ }
+}