Release

apps/server-web/src/main/helpers/constant.ts

@@ -50,7 +50,8 @@ export const ServerPageTypeMessage = {
 
 export const LOG_TYPES = {
   UPDATE_LOG: 'UPDATE-LOG',
-  SERVER_LOG: 'SERVER-LOG'
+  SERVER_LOG: 'SERVER-LOG',
+  SERVER_LOG_ERROR: 'SERVER-LOG-ERROR'
 }
 
 export const IPC_TYPES: {

apps/server-web/src/main/helpers/services/libs/server-task.ts

@@ -43,9 +43,8 @@ export abstract class ServerTask {
 
 		this.loggerObserver = new Observer((msg: string) => {
 			console.log('Sending log_state:', msg);
-			if (!this.window?.isDestroyed()) {
-				// this.window.webContents.send('log_state', { msg });
-			}
+			const logType = this.isErrorMessage(msg) ? LOG_TYPES.SERVER_LOG_ERROR : LOG_TYPES.SERVER_LOG;
+			console.log(logType, msg);
 		});
 
 		this.stateObserver = new Observer((state: boolean) => {
@@ -64,6 +63,11 @@ export abstract class ServerTask {
 		});
 	}
 
+	private isErrorMessage(msg: string): boolean {
+		return msg.includes('stderr:') ||
+			   this.criticalMessageError.some(error => msg.includes(error));
+	  }
+
 	protected async runTask(signal: AbortSignal): Promise<void> {
 		console.log('Run Server Task');
 		return new Promise<void>((resolve, reject) => {
@@ -72,16 +76,20 @@ export abstract class ServerTask {
 
 				const service = ChildProcessFactory.createProcess(this.processPath, this.args, signal);
 
-				console.log(LOG_TYPES.SERVER_LOG, 'Service created', service.pid);
+				this.loggerObserver.notify(`Service created ${service.pid}`)
 
 				service.stdout?.on('data', (data: any) => {
 					const msg = data.toString();
 					this.loggerObserver.notify(msg);
 					if (msg.includes(this.successMessage)) {
 						const name = String(this.args.serviceName);
 						this.stateObserver.notify(true);
+						console.log(this.args)
 						this.loggerObserver.notify(
-							`☣︎ ${name.toUpperCase()} server listen to ${this.config.setting[`${name}Url`]}`
+							`☣︎ ${name.toUpperCase()} running on http://${this.args.DESKTOP_WEB_SERVER_HOSTNAME}:${this.args.PORT}`
+						);
+						this.loggerObserver.notify(
+							`☣︎ ${name.toUpperCase()} connected to api ${this.args.GAUZY_API_SERVER_URL}`
 						);
 						resolve();
 					}
@@ -92,20 +100,12 @@ export abstract class ServerTask {
 					}
 				});
 
-				service.stderr?.on('data', (data: any) => {
-					console.log(LOG_TYPES.SERVER_LOG, 'stderr:', data.toString());
-					this.loggerObserver.notify(data.toString());
-				});
+				service.stderr?.on('data', this.handleStdErr.bind(this));
 
-				service.on('disconnect', () => {
-					console.log(LOG_TYPES.SERVER_LOG, 'Webserver disconnected');
-					if (this.eventEmitter) {
-						this.eventEmitter.emit(EventLists.webServerStopped);
-					}
-				})
+				service.on('disconnect', this.handleDisconnect.bind(this));
 
 				service.on('error', (err) => {
-					console.log('child process error', err);
+					this.handleError(err, false);
 				})
 
 				if (this.eventEmitter) {
@@ -168,6 +168,19 @@ export abstract class ServerTask {
 		}
 	}
 
+	private handleStdErr(data: any): void {
+		const errorMessage: string = data.toString();
+		this.loggerObserver.notify(`stderr: ${errorMessage}`);
+	}
+
+	private handleDisconnect(): void {
+		this.loggerObserver.notify('Webserver disconnected')
+		if (this.eventEmitter) {
+			this.eventEmitter.emit(EventLists.webServerStopped);
+		}
+		this.stateObserver.notify(false);
+	}
+
 	protected handleError(error: any, attemptKill = true) {
 		if (attemptKill) {
 			this.kill(false); // Pass false to indicate that handleError should not attempt to kill again

apps/server-web/src/main/main.ts

@@ -68,6 +68,16 @@ Log.hooks.push((message: any, transport) => {
     }
   }
 
+  if (message.data[0] === LOG_TYPES.SERVER_LOG_ERROR) {
+    if (logWindow) {
+      const msg = message.data.join(' ');
+      logWindow.webContents.send(IPC_TYPES.SERVER_PAGE, {
+        type: LOG_TYPES.SERVER_LOG_ERROR,
+        msg
+      });
+    }
+  }
+
   if (message.data[0] === LOG_TYPES.UPDATE_LOG) {
     if (settingWindow) {
       const msg = `${message.data.join(' ')}`;

apps/server-web/src/renderer/pages/Server.tsx

@@ -1,25 +1,54 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, ReactNode } from 'react';
 import { ServerPageTypeMessage } from '../../main/helpers/constant';
 import { IPC_TYPES, LOG_TYPES } from '../../main/helpers/constant';
 import { EverTeamsLogo } from '../components/svgs';
 import { useTranslation } from 'react-i18next';
 
+const LogView = ({ children }: { children: ReactNode }) => {
+  return <div className="py-1">{children}</div>;
+};
+
 export function ServerPage() {
+  const logRef = useRef<HTMLDivElement>(null);
   const [isRun, setIsRun] = useState<boolean>(false);
-  const [logs, setLogs] = useState<string[]>([]);
+  const [logs, setLogs] = useState<
+    {
+      message: string;
+      type: 'error-log' | 'log';
+    }[]
+  >([]);
   const [loading, setLoading] = useState<boolean>(false);
   const { t } = useTranslation();
+  const [logOpen, setLogOpen] = useState<boolean>(false);
 
   useEffect(() => {
     window.electron.ipcRenderer.removeEventListener(IPC_TYPES.SERVER_PAGE);
     window.electron.ipcRenderer.on(IPC_TYPES.SERVER_PAGE, (arg: any) => {
       switch (arg.type) {
         case LOG_TYPES.SERVER_LOG:
-          setLogs((prev) => [...prev, arg.msg]);
+          setLogs((prev) => [
+            ...prev,
+            {
+              message: arg.msg,
+              type: 'log',
+            },
+          ]);
+          scrollToLast();
+          break;
+        case LOG_TYPES.SERVER_LOG_ERROR:
+          setLogs((prev) => [
+            ...prev,
+            {
+              message: arg.msg,
+              type: 'error-log',
+            },
+          ]);
+          scrollToLast();
           break;
         case ServerPageTypeMessage.SERVER_STATUS:
           if (arg.data.isRun) {
             setIsRun(true);
+            setLogOpen(true);
           } else {
             setIsRun(false);
           }
@@ -41,6 +70,12 @@ export function ServerPage() {
     });
   };
 
+  const scrollToLast = () => {
+    logRef.current?.scrollIntoView({
+      behavior: 'smooth',
+    });
+  };
+
   return (
     <div className="min-h-screen flex flex-col flex-auto flex-shrink-0 antialiased text-gray-800">
       <div className="rounded-lg px-16 py-10">
@@ -60,7 +95,14 @@ export function ServerPage() {
       </button>
       <div className="grid divide-y divide-neutral-200 dark:bg-[#25272D] dark:text-white mx-auto w-10/12 rounded-lg border-2 border-gray-200 dark:border-gray-600">
         <div className="py-5 px-5">
-          <details className="group">
+          <details
+            className="group"
+            open={logOpen}
+            onClick={(e) => {
+              e.preventDefault();
+              setLogOpen((prev) => !prev);
+            }}
+          >
             <summary className="flex justify-between items-center font-medium cursor-pointer list-none">
               <span className="p-2"> Server Logs</span>
               <span className="transition group-open:rotate-180">
@@ -90,11 +132,16 @@ export function ServerPage() {
               <div className="ml-1 mt-1 p-2">
                 {logs.length > 0 &&
                   logs.map((log, i) => (
-                    <div className="py-1" key={i}>
-                      <span>{log}</span>
-                    </div>
+                    <LogView key={i}>
+                      {log.type === 'error-log' ? (
+                        <span className="text-red-600">{log.message}</span>
+                      ) : (
+                        <span className="text-white">{log.message}</span>
+                      )}
+                    </LogView>
                   ))}
               </div>
+              <div className="py-1" ref={logRef}></div>
             </div>
           </details>
         </div>

apps/web/app/[locale]/all-teams/component.tsx

@@ -5,7 +5,7 @@ import { useAtomValue } from 'jotai';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { withAuthentication } from 'lib/app/authenticator';
 import { Breadcrumb, Container } from 'lib/components';
-import { MainHeader, MainLayout } from 'lib/layout';
+import { MainLayout } from 'lib/layout';
 import { useOrganizationAndTeamManagers } from '@app/hooks/features/useOrganizationTeamManagers';
 import { useEffect } from 'react';
 import { useTranslations } from 'next-intl';
@@ -18,55 +18,57 @@ import { MemberFilter } from 'lib/features/all-teams/all-team-members-filter';
 import { useOrganizationTeams } from '@app/hooks';
 
 function AllTeamsPage() {
-  const t = useTranslations();
-  const fullWidth = useAtomValue(fullWidthState);
-  const view = useAtomValue(allTeamsHeaderTabs);
-  const { filteredTeams, userManagedTeams } = useOrganizationAndTeamManagers();
-  const { isTrackingEnabled } = useOrganizationTeams();
+	const t = useTranslations();
+	const fullWidth = useAtomValue(fullWidthState);
+	const view = useAtomValue(allTeamsHeaderTabs);
+	const { filteredTeams, userManagedTeams } = useOrganizationAndTeamManagers();
+	const { isTrackingEnabled } = useOrganizationTeams();
 
-  const breadcrumb = [
-    { title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
-    { title: t('common.ALL_TEAMS'), href: '/all-teams' }
-  ];
+	const breadcrumb = [
+		{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
+		{ title: t('common.ALL_TEAMS'), href: '/all-teams' }
+	];
 
-  /* If the user is not a manager in any team or if he's
+	/* If the user is not a manager in any team or if he's
 		manager in only one team, then redirect him to the home page
 	*/
-  if (userManagedTeams.length < 2) return <RedirectUser />;
+	if (userManagedTeams.length < 2) return <RedirectUser />;
 
-  return (
-    <MainLayout showTimer={isTrackingEnabled} className="items-start">
-      <MainHeader
-        fullWidth={fullWidth}
-        className={'pb-2 pt-10 sticky top-20 z-50'}
-      >
-        {/* Breadcrumb */}
-        <div className="flex flex-row items-start justify-between mb-5">
-          <Breadcrumb paths={breadcrumb} className="text-sm" />
-          <div className="flex flex-col items-end gap-2">
-            <div className="flex items-center justify-center h-10 gap-1 w-max">
-              <HeaderTabs />
-            </div>
-            <MemberFilter />
-          </div>
-        </div>
-        <TeamMemberHeader view={IssuesView.CARDS} />
-      </MainHeader>
-      <Container fullWidth={fullWidth} className="flex py-10 pt-20">
-        <AllTeamsMembers teams={filteredTeams} view={view} />
-      </Container>
-    </MainLayout>
-  );
+	return (
+		<MainLayout
+			showTimer={isTrackingEnabled}
+			className="items-start"
+			mainHeaderSlot={
+				<div className="flex w-full flex-col items-start  justify-between">
+					<div className="w-full flex items-center justify-between py-2 px-4">
+						<Breadcrumb paths={breadcrumb} className="text-sm" />
+						<div className="flex self-end items-center gap-2">
+							<div className="flex items-center justify-center h-10 gap-1 w-max">
+								<HeaderTabs />
+							</div>
+							<MemberFilter />
+						</div>
+					</div>
+
+					{view == IssuesView.CARDS && <TeamMemberHeader view={IssuesView.CARDS} />}
+				</div>
+			}
+		>
+			<Container fullWidth={fullWidth} className="mx-auto mt-5">
+				<AllTeamsMembers teams={filteredTeams} view={view} />
+			</Container>
+		</MainLayout>
+	);
 }
 
 function RedirectUser() {
-  const router = useRouter();
-  useEffect(() => {
-    router.push('/');
-  }, [router]);
-  return <></>;
+	const router = useRouter();
+	useEffect(() => {
+		router.push('/');
+	}, [router]);
+	return <></>;
 }
 
 export default withAuthentication(AllTeamsPage, {
-  displayName: 'AllManagedTeams'
+	displayName: 'AllManagedTeams'
 });

apps/web/app/[locale]/kanban/page.tsx

@@ -31,6 +31,7 @@ import { useAtomValue } from 'jotai';
 import { fullWidthState } from '@app/stores/fullWidth';
 import { CircleIcon } from 'lucide-react';
 import { XMarkIcon } from '@heroicons/react/20/solid';
+import { cn } from '@/lib/utils';
 
 const Kanban = () => {
 	const {
@@ -161,11 +162,10 @@ const Kanban = () => {
 										<div
 											key={tab.name}
 											onClick={() => setActiveTab(tab.value)}
-											className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${
-												activeTab === tab.value
-													? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white'
-													: 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'
-											}`}
+											className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${activeTab === tab.value
+												? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white'
+												: 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'
+												}`}
 											style={{
 												borderBottomWidth: '3px',
 												borderBottomStyle: 'solid'
@@ -259,18 +259,22 @@ const Kanban = () => {
 				}
 			>
 				{/** TODO:fetch teamtask based on days */}
+
+
 				<div className="pt-10">
 					{activeTab &&
 						(Object.keys(data).length > 0 ? (
-							<KanbanView isLoading={isLoading} kanbanBoardTasks={data} />
+							<Container fullWidth={fullWidth} className={cn("!pt-0 px-5")}>
+								<KanbanView isLoading={isLoading} kanbanBoardTasks={data} />
+							</Container>
 						) : (
 							// add filter for today, yesterday and tomorrow
 							<div className="flex flex-col flex-1 w-full h-full">
 								<KanbanBoardSkeleton />
 							</div>
 						))}
 				</div>
-			</MainLayout>
+			</MainLayout >
 			<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
 		</>
 	);