Chore: Refactor AppLogs to TS (#26938)

apps/meteor/client/views/admin/apps/AppLogs.tsx

@@ -0,0 +1,39 @@
+import { Accordion, Box } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import React, { ReactElement } from 'react';
+
+import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
+import AccordionLoading from './AccordionLoading';
+import LogItem from './LogItem';
+import { useLogs } from './hooks/useLogs';
+
+const AppLogs = ({ id }: { id: string }): ReactElement => {
+	const t = useTranslation();
+	const formatDateAndTime = useFormatDateAndTime();
+	const { data, isSuccess, isError, isLoading } = useLogs(id);
+
+	return (
+		<>
+			{isLoading && <AccordionLoading />}
+			{isError && (
+				<Box maxWidth='x600' alignSelf='center'>
+					{t('App_not_found')}
+				</Box>
+			)}
+			{isSuccess && (
+				<Accordion width='100%' alignSelf='center'>
+					{data?.logs?.map((log) => (
+						<LogItem
+							key={log._createdAt}
+							title={`${formatDateAndTime(log._createdAt)}: "${log.method}" (${log.totalTime}ms)`}
+							instanceId={log.instanceId}
+							entries={log.entries}
+						/>
+					))}
+				</Accordion>
+			)}
+		</>
+	);
+};
+
+export default AppLogs;

apps/meteor/client/views/admin/apps/LogItem.tsx

@@ -1,16 +1,12 @@
+import { ILogEntry } from '@rocket.chat/core-typings';
 import { Box, Accordion } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC } from 'react';
 
 import LogEntry from './LogEntry';
 
 type LogItemProps = {
-	entries: {
-		severity: string;
-		timestamp: string;
-		caller: string;
-		args: unknown;
-	}[];
+	entries: ILogEntry[];
 	instanceId: string;
 	title: string;
 };

apps/meteor/client/views/admin/apps/hooks/useLogs.ts

@@ -0,0 +1,9 @@
+import { OperationResult } from '@rocket.chat/rest-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+
+export const useLogs = (appId: string): UseQueryResult<OperationResult<'GET', '/apps/:id/logs'>> => {
+	const logs = useEndpoint('GET', `/apps/${appId}/logs`);
+
+	return useQuery(['MarketplaceAppLogs'], () => logs());
+};

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -447,6 +447,7 @@
   "App_Info": "App Info",
   "App_Information": "App Information",
   "App_Installation": "App Installation",
+  "App_not_found": "App not found",
   "App_status_auto_enabled": "Enabled",
   "App_status_constructed": "Constructed",
   "App_status_disabled": "Disabled",

packages/core-typings/src/ILogs.ts

@@ -0,0 +1,19 @@
+export interface ILogEntry {
+	args: string[];
+	caller: string;
+	severity: string;
+	timestamp: string;
+}
+
+export interface ILogItem {
+	appId: string;
+	endTime: string;
+	entries: ILogEntry[];
+	instanceId: string;
+	method: string;
+	startTime: string;
+	totalTime: number;
+	_createdAt: string;
+	_id: string;
+	_updatedAt: string;
+}

packages/core-typings/src/index.ts

@@ -107,6 +107,7 @@ export * from './IVoipServerConnectivityStatus';
 export * from './IOmnichannelVoipServiceResult';
 export * from './IInquiry';
 export * from './ILivechatPriority';
+export * from './ILogs';
 
 export * from './IAutoTranslate';
 export * from './IVideoConference';

packages/rest-typings/src/apps/index.ts

@@ -4,17 +4,21 @@ import type { IExternalComponent } from '@rocket.chat/apps-engine/definition/ext
 import type { IPermission } from '@rocket.chat/apps-engine/definition/permissions/IPermission';
 import type { ISetting } from '@rocket.chat/apps-engine/definition/settings';
 import type { IUIActionButton } from '@rocket.chat/apps-engine/definition/ui';
-import type { AppScreenshot, App, FeaturedAppsSection } from '@rocket.chat/core-typings';
+import type { AppScreenshot, App, FeaturedAppsSection, ILogItem } from '@rocket.chat/core-typings';
 
 export type AppsEndpoints = {
 	'/apps/externalComponents': {
 		GET: () => { externalComponents: IExternalComponent[] };
 	};
 
 	'/apps/:id': {
-		GET: (params: { marketplace?: 'true' | 'false'; version?: string; appVersion?: string; update?: 'true' | 'false' }) => {
-			app: App;
-		};
+		GET:
+			| ((params: { marketplace?: 'true' | 'false'; version?: string; appVersion?: string; update?: 'true' | 'false' }) => {
+					app: App;
+			  })
+			| (() => {
+					app: App;
+			  });
 		DELETE: () => void;
 		POST: (params: { marketplace: boolean; version: string; permissionsGranted: IPermission[]; appId: string }) => {
 			app: App;
@@ -66,6 +70,12 @@ export type AppsEndpoints = {
 		};
 	};
 
+	'/apps/:id/logs': {
+		GET: () => {
+			logs: ILogItem[];
+		};
+	};
+
 	'/apps/:id/apis': {
 		GET: () => {
 			apis: IApiEndpointMetadata[];