Skip to content

feat: Implement notification channel based on status(multi selection) and Refactor Split ServiceForm into smaller components. #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 10, 2025
Merged

feat: Implement notification channel based on status(multi selection) and Refactor Split ServiceForm into smaller components. #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ddeb22d
Added uptime monitoring detail data and server monitoring schema
tolaleng Jul 9, 2025
917d8a6
feat: Implement notification channel based on status (Service Dialog …
tolaleng Jul 10, 2025
2d2bd79
Disable the debug console logs for production
tolaleng Jul 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions application/src/api/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,19 @@ const api = {
* Handle API requests
*/
async handleRequest(path, method, body) {
console.log(`API request: ${method} ${path}`, body);
// console.log(`API request: ${method} ${path}`, body);

// Route to the appropriate handler
if (path === '/api/realtime') {
console.log("Routing to realtime handler");
// console.log("Routing to realtime handler");
return await realtime(body);
} else if (path === '/api/settings' || path.startsWith('/api/settings/')) {
console.log("Routing to settings handler");
// console.log("Routing to settings handler");
return await settingsApi(body, path);
}

// Return 404 for unknown routes
console.error(`Endpoint not found: ${path}`);
// console.error(`Endpoint not found: ${path}`);
return {
status: 404,
json: {
Expand All @@ -40,7 +40,7 @@ const originalFetch = window.fetch;
window.fetch = async (url, options = {}) => {
// Check if this is an API request to our mock endpoints
if (typeof url === 'string' && url.startsWith('/api/')) {
console.log('Intercepting API request:', url, options);
// console.log('Intercepting API request:', url, options);

try {
let body = {};
Expand Down
4 changes: 2 additions & 2 deletions application/src/api/settings/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { testEmail } from './actions/testEmail';
* Settings API handler
*/
const settingsApi = async (body: any, path?: string) => {
console.log('Settings API called with path:', path, 'body:', body);
// console.log('Settings API called with path:', path, 'body:', body);

// Handle test email endpoint specifically
if (path === '/api/settings/test/email') {
Expand All @@ -18,7 +18,7 @@ const settingsApi = async (body: any, path?: string) => {

// Handle regular settings API with action-based routing
const action = body?.action;
console.log('Settings API called with action:', action, 'data:', body?.data);
// console.log('Settings API called with action:', action, 'data:', body?.data);

switch (action) {
case 'getSettings':
Expand Down
4 changes: 2 additions & 2 deletions application/src/components/dashboard/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const Header = ({
// Log avatar data for debugging
useEffect(() => {
if (currentUser) {
console.log("Avatar URL in Header:", currentUser.avatar);
// console.log("Avatar URL in Header:", currentUser.avatar);
}
}, [currentUser]);

Expand All @@ -66,7 +66,7 @@ export const Header = ({
} else {
avatarUrl = currentUser.avatar;
}
console.log("Final avatar URL:", avatarUrl);
// console.log("Final avatar URL:", avatarUrl);
}

return (
Expand Down
8 changes: 4 additions & 4 deletions application/src/components/schedule-incident/ScheduleIncidentContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ export const ScheduleIncidentContent = () => {

// Initialize maintenance notifications when the component mounts
useEffect(() => {
console.log("Initializing maintenance notifications");
// console.log("Initializing maintenance notifications");
initMaintenanceNotifications();

// Clean up when the component unmounts
return () => {
console.log("Cleaning up maintenance notifications");
// console.log("Cleaning up maintenance notifications");
stopMaintenanceNotifications();
};
}, []);
Expand All @@ -43,7 +43,7 @@ export const ScheduleIncidentContent = () => {
const handleMaintenanceCreated = () => {
// Refresh data by incrementing the refresh trigger
const newTriggerValue = refreshTrigger + 1;
console.log("Maintenance created, refreshing data with new trigger value:", newTriggerValue);
// console.log("Maintenance created, refreshing data with new trigger value:", newTriggerValue);
setRefreshTrigger(newTriggerValue);

// Show success toast
Expand All @@ -56,7 +56,7 @@ export const ScheduleIncidentContent = () => {
const handleIncidentCreated = () => {
// Refresh data by incrementing the refresh trigger
const newTriggerValue = incidentRefreshTrigger + 1;
console.log("Incident created, refreshing data with new trigger value:", newTriggerValue);
// console.log("Incident created, refreshing data with new trigger value:", newTriggerValue);
setIncidentRefreshTrigger(newTriggerValue);

// Show success toast
Expand Down
20 changes: 10 additions & 10 deletions application/src/components/schedule-incident/hooks/useIncidentData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@ export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) =>
const fetchIncidentData = useCallback(async (force = false) => {
// Skip if already fetching
if (isFetchingRef.current) {
console.log('Already fetching data, skipping additional request');
// console.log('Already fetching data, skipping additional request');
return;
}

// Skip if not forced and already initialized
if (initialized && !force) {
console.log('Data already initialized and no force refresh, skipping fetch');
// console.log('Data already initialized and no force refresh, skipping fetch');
return;
}

Expand All @@ -46,22 +46,22 @@ export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) =>
setError(null);

try {
console.log(`Fetching incident data (force=${force})`);
// console.log(`Fetching incident data (force=${force})`);
const allIncidents = await incidentService.getAllIncidents(force);

if (Array.isArray(allIncidents)) {
setIncidents(allIncidents);
console.log(`Successfully set ${allIncidents.length} incidents to state`);
// console.log(`Successfully set ${allIncidents.length} incidents to state`);
} else {
setIncidents([]);
console.warn('No incidents returned from service');
// console.warn('No incidents returned from service');
}

setInitialized(true);
setLoading(false);
setIsRefreshing(false);
} catch (error) {
console.error('Error fetching incident data:', error);
// console.error('Error fetching incident data:', error);
setError('Failed to load incident data. Please try again later.');
setIncidents([]);
setInitialized(true);
Expand All @@ -79,7 +79,7 @@ export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) =>
useEffect(() => {
// Skip if the refresh trigger hasn't changed (prevents duplicate effect calls)
if (refreshTrigger === lastRefreshTriggerRef.current && initialized) {
console.log('Refresh trigger unchanged, skipping fetch');
// console.log('Refresh trigger unchanged, skipping fetch');
return;
}

Expand All @@ -90,7 +90,7 @@ export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) =>
const abortController = new AbortController();
let isMounted = true;

console.log(`useIncidentData effect running, refreshTrigger: ${refreshTrigger}`);
// console.log(`useIncidentData effect running, refreshTrigger: ${refreshTrigger}`);

// Use a longer delay to ensure we don't trigger too many API calls
const fetchTimer = setTimeout(() => {
Expand All @@ -101,7 +101,7 @@ export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) =>

// Cleanup function to abort any in-flight requests and clear timers
return () => {
console.log('Cleaning up incident data fetch effect');
// console.log('Cleaning up incident data fetch effect');
isMounted = false;
clearTimeout(fetchTimer);
abortController.abort();
Expand All @@ -112,7 +112,7 @@ export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) =>
const incidentData = useMemo(() => {
if (!initialized || incidents.length === 0) return [];

console.log(`Filtering incidents by: ${filter}`);
// console.log(`Filtering incidents by: ${filter}`);

if (filter === "unresolved") {
return incidents.filter(item => {
Expand Down
40 changes: 20 additions & 20 deletions ...rc/components/schedule-incident/maintenance/form/MaintenanceNotificationSettingsField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const MaintenanceNotificationSettingsField = () => {
try {
setIsLoading(true);
const channels = await alertConfigService.getAlertConfigurations();
console.log("Fetched notification channels for form:", channels);
// console.log("Fetched notification channels for form:", channels);

// Only show enabled channels
const enabledChannels = channels.filter(channel => channel.enabled);
Expand All @@ -38,18 +38,18 @@ export const MaintenanceNotificationSettingsField = () => {
const currentChannel = getValues('notification_channel_id');
const shouldNotify = getValues('notify_subscribers');

console.log("Current notification values:", {
currentChannel,
shouldNotify,
availableChannels: enabledChannels.length
});
// console.log("Current notification values:", {
// currentChannel,
// shouldNotify,
// availableChannels: enabledChannels.length
// });

if (shouldNotify && (!currentChannel || currentChannel === 'none') && enabledChannels.length > 0) {
console.log("Setting default notification channel:", enabledChannels[0].id);
// console.log("Setting default notification channel:", enabledChannels[0].id);
setValue('notification_channel_id', enabledChannels[0].id);
}
} catch (error) {
console.error('Error fetching notification channels:', error);
// console.error('Error fetching notification channels:', error);
toast({
title: t('error'),
description: t('errorFetchingNotificationChannels'),
Expand All @@ -64,12 +64,12 @@ export const MaintenanceNotificationSettingsField = () => {
}, [t, toast, setValue, getValues]);

// Log value changes for debugging
useEffect(() => {
console.log("Current notification settings:", {
channel_id: getValues('notification_channel_id'),
notify: notifySubscribers
});
}, [notifySubscribers, notificationChannelId, getValues]);
// useEffect(() => {
// console.log("Current notification settings:", {
// channel_id: getValues('notification_channel_id'),
// notify: notifySubscribers
// });
// }, [notifySubscribers, notificationChannelId, getValues]);

return (
<div className="space-y-6">
Expand Down Expand Up @@ -98,7 +98,7 @@ export const MaintenanceNotificationSettingsField = () => {
checked={field.value}
onCheckedChange={(checked) => {
field.onChange(checked);
console.log("Notification toggle changed to:", checked);
// console.log("Notification toggle changed to:", checked);
// If notifications are disabled, also clear the notification channel
if (!checked) {
setValue('notification_channel_id', '');
Expand All @@ -120,10 +120,10 @@ export const MaintenanceNotificationSettingsField = () => {
// Make sure to handle both empty string and "none" as special cases
const displayValue = field.value || "";

console.log("Rendering notification channel field with value:", {
fieldValue: field.value,
displayValue
});
// console.log("Rendering notification channel field with value:", {
// fieldValue: field.value,
// displayValue
// });

return (
<FormItem>
Expand All @@ -135,7 +135,7 @@ export const MaintenanceNotificationSettingsField = () => {
<Select
value={displayValue}
onValueChange={(value) => {
console.log("Setting notification channel to:", value);
// console.log("Setting notification channel to:", value);
field.onChange(value === "none" ? "" : value);
}}
disabled={!notifySubscribers}
Expand Down
20 changes: 10 additions & 10 deletions application/src/components/schedule-incident/maintenance/form/config/AssignedUsersField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,28 +31,28 @@ export const AssignedUsersField = () => {
// Ensure assigned_users is initialized as an array
useEffect(() => {
const currentValue = form.getValues('assigned_users');
console.log("Initial assigned_users value:", currentValue);
// console.log("Initial assigned_users value:", currentValue);

// Initialize as empty array if no value or invalid value
if (!currentValue || !Array.isArray(currentValue)) {
console.log("Initializing assigned_users as empty array");
// console.log("Initializing assigned_users as empty array");
form.setValue('assigned_users', [], { shouldValidate: false, shouldDirty: true });
}
}, [form]);

console.log("Current form values:", form.getValues());
console.log("Current assigned_users:", form.getValues('assigned_users'));
//console.log("Current form values:", form.getValues());
//console.log("Current assigned_users:", form.getValues('assigned_users'));

// Fetch users for the assignment dropdown
const { data: users = [], isLoading } = useQuery({
queryKey: ['users'],
queryFn: async () => {
try {
const usersList = await userService.getUsers();
console.log("Fetched users for assignment:", usersList);
// console.log("Fetched users for assignment:", usersList);
return Array.isArray(usersList) ? usersList : [];
} catch (error) {
console.error("Failed to fetch users:", error);
// console.error("Failed to fetch users:", error);
return [];
}
},
Expand All @@ -64,7 +64,7 @@ export const AssignedUsersField = () => {
? form.watch('assigned_users')
: [];

console.log("Selected user IDs:", selectedUserIds);
// console.log("Selected user IDs:", selectedUserIds);

// Function to add a user
const addUser = (userId: string) => {
Expand All @@ -73,7 +73,7 @@ export const AssignedUsersField = () => {
: [];

if (!currentValues.includes(userId)) {
console.log("Adding user:", userId);
// console.log("Adding user:", userId);
form.setValue('assigned_users', [...currentValues, userId], { shouldValidate: true, shouldDirty: true });
}
};
Expand All @@ -84,7 +84,7 @@ export const AssignedUsersField = () => {
? [...form.getValues('assigned_users')]
: [];

console.log("Removing user:", userId);
// console.log("Removing user:", userId);
form.setValue(
'assigned_users',
currentValues.filter(id => id !== userId),
Expand All @@ -94,7 +94,7 @@ export const AssignedUsersField = () => {

// Get selected users data
const selectedUsers = users.filter(user => selectedUserIds.includes(user.id));
console.log("Matched selected users:", selectedUsers);
// console.log("Matched selected users:", selectedUsers);

// Function to get user initials from name
const getUserInitials = (user: any): string => {
Expand Down
2 changes: 1 addition & 1 deletion application/src/components/services/ResponseTimeChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export function ResponseTimeChart({ uptimeData }: ResponseTimeChartProps) {
if (data?.agent_id && data.agent_id !== '1') {
label = `${regionName} (${data.agent_id})`;
} else if (regionName === 'Default' && data?.agent_id === '1') {
label = `Default (Agent 1)`;
label = `Default System Check (Agent 1)`;
}

const colorIndex = index % modernColors.length;
Expand Down
12 changes: 6 additions & 6 deletions application/src/components/services/ServiceDetailContainer/hooks/useRealTimeUpdates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ export const useRealTimeUpdates = ({
useEffect(() => {
if (!serviceId) return;

console.log(`Setting up real-time updates for service: ${serviceId}`);
// console.log(`Setting up real-time updates for service: ${serviceId}`);

try {
// Subscribe to the service record for real-time updates
const subscription = pb.collection('services').subscribe(serviceId, function(e) {
console.log("Service updated:", e.record);
// console.log("Service updated:", e.record);

// Update our local state with the new data
if (e.record) {
Expand All @@ -47,7 +47,7 @@ export const useRealTimeUpdates = ({
// Subscribe to uptime data updates
const uptimeSubscription = pb.collection('uptime_data').subscribe('*', function(e) {
if (e.record && e.record.service_id === serviceId) {
console.log("New uptime data:", e.record);
// console.log("New uptime data:", e.record);

// Add the new uptime data to our list if it's within the selected date range
const timestamp = new Date(e.record.timestamp);
Expand All @@ -73,16 +73,16 @@ export const useRealTimeUpdates = ({

// Clean up the subscriptions
return () => {
console.log(`Cleaning up subscriptions for service: ${serviceId}`);
// console.log(`Cleaning up subscriptions for service: ${serviceId}`);
try {
pb.collection('services').unsubscribe(serviceId);
pb.collection('uptime_data').unsubscribe('*');
} catch (error) {
console.error("Error cleaning up subscriptions:", error);
// console.error("Error cleaning up subscriptions:", error);
}
};
} catch (error) {
console.error("Error setting up real-time updates:", error);
// console.error("Error setting up real-time updates:", error);
}
}, [serviceId, startDate, endDate, setService, setUptimeData]);
};
Loading