Add device log functionality

AppiumTestDistribution · Apr 10, 2024 · 41a995d · 41a995d
1 parent 3e5d49c
commit 41a995d
Show file tree

Hide file tree

Showing 17 changed files with 1,751 additions and 1,661 deletions.
diff --git a/prisma/migrations/20240409102733_device_logs/migration.sql b/prisma/migrations/20240409102733_device_logs/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Session" ADD COLUMN "device_logs" TEXT;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -8,49 +8,50 @@ generator client {
 }
 
 model Build {
-  id                String    @id @default(uuid()) @map("id")
-  name              String?   @map("name")
-  sessions          Session[] @relation("BuildToSession")
-  createdAt         DateTime  @default(now()) @map("created_at")
-  updatedAt         DateTime  @updatedAt @map("updated_at")
+  id        String    @id @default(uuid()) @map("id")
+  name      String?   @map("name")
+  sessions  Session[] @relation("BuildToSession")
+  createdAt DateTime  @default(now()) @map("created_at")
+  updatedAt DateTime  @updatedAt @map("updated_at")
 }
 
 model Session {
-  id                 String       @id @map("id")
-  buildId            String?      @map("build_id")
-  build              Build?       @relation("BuildToSession", fields: [buildId], references: [id])
-  name               String?      @map("name")
-  status             String       @default("running") @map("status")
+  id                  String       @id @map("id")
+  buildId             String?      @map("build_id")
+  build               Build?       @relation("BuildToSession", fields: [buildId], references: [id])
+  name                String?      @map("name")
+  status              String       @default("running") @map("status")
   desiredCapabilities String       @map("desired_capabilities")
   sessionCapabilities String       @map("session_capabilities")
-  nodeId             String       @map("node_id")
-  hasLiveVideo       Boolean      @map("has_live_video")
-  videoRecording     String?      @map("video_recording")
-  startTime          DateTime     @default(now()) @map("start_time")
-  endTime            DateTime?    @map("end_time")
-  failureReason      String?      @map("failure_reason")
-  deviceUdid         String       @map("device_udid")
-  devicePlatform     String       @map("device_platform")
-  deviceVersion      String       @map("device_version")
-  deviceName         String?      @map("device_name")
-  createdAt          DateTime     @default(now()) @map("created_at")
-  updatedAt          DateTime     @updatedAt @map("updated_at")
-  sessionLogs        SessionLog[] @relation("SessionToSessionLog")
+  nodeId              String       @map("node_id")
+  hasLiveVideo        Boolean      @map("has_live_video")
+  videoRecording      String?      @map("video_recording")
+  deviceLogs          String?      @map("device_logs")
+  startTime           DateTime     @default(now()) @map("start_time")
+  endTime             DateTime?    @map("end_time")
+  failureReason       String?      @map("failure_reason")
+  deviceUdid          String       @map("device_udid")
+  devicePlatform      String       @map("device_platform")
+  deviceVersion       String       @map("device_version")
+  deviceName          String?      @map("device_name")
+  createdAt           DateTime     @default(now()) @map("created_at")
+  updatedAt           DateTime     @updatedAt @map("updated_at")
+  sessionLogs         SessionLog[] @relation("SessionToSessionLog")
 }
 
 model SessionLog {
-  id           String   @id @default(uuid()) @map("id")
-  sessionId    String   @map("session_id")
-  session      Session  @relation("SessionToSessionLog", fields: [sessionId], references: [id])
-  commandName  String?  @map("command_name")
-  url          String   @map("url")
-  method       String   @map("method")
-  title        String   @map("title")
-  subtitle     String?  @map("subtitle")
-  body         String?  @map("body")
-  response     String   @map("response")
-  screenshot   String?  @map("screenshot")
-  isSuccess    Boolean? @map("is_success")
-  createdAt    DateTime @default(now()) @map("created_at")
-  updatedAt    DateTime @updatedAt @map("updated_at")
+  id          String   @id @default(uuid()) @map("id")
+  sessionId   String   @map("session_id")
+  session     Session  @relation("SessionToSessionLog", fields: [sessionId], references: [id])
+  commandName String?  @map("command_name")
+  url         String   @map("url")
+  method      String   @map("method")
+  title       String   @map("title")
+  subtitle    String?  @map("subtitle")
+  body        String?  @map("body")
+  response    String   @map("response")
+  screenshot  String?  @map("screenshot")
+  isSuccess   Boolean? @map("is_success")
+  createdAt   DateTime @default(now()) @map("created_at")
+  updatedAt   DateTime @updatedAt @map("updated_at")
 }
diff --git a/src/CapabilityManager.ts b/src/CapabilityManager.ts
@@ -19,6 +19,7 @@ export enum DEVICE_FARM_CAPABILITIES {
   MIN_SDK = 'minSDK',
   MAX_SDK = 'maxSDK',
   FILTER_BY_HOST = 'filterByHost',
+  SAVE_DEVICE_LOGS = 'saveDeviceLogs',
 }
 
 function isCapabilityAlreadyPresent(caps: ISessionCapability, capabilityName: string) {

diff --git a/src/modules b/src/modules
diff --git a/web/src/api-service/index.ts b/web/src/api-service/index.ts
@@ -6,11 +6,15 @@ export default class DeviceFarmApiService {
   }
 
   public static androidStreamingAppInstalled(udid: string, systemPort: number) {
-    return apiClient.makePOSTRequest('/installAndroidStreamingApp', {}, {udid, systemPort});
+    return apiClient.makePOSTRequest('/installAndroidStreamingApp', {}, { udid, systemPort });
   }
 
   public static createSession(udid: string, systemPort: number) {
-    return apiClient.makePOSTRequest('/appiumSession', {}, {udid, systemPort, origin: window.location.origin});
+    return apiClient.makePOSTRequest(
+      '/appiumSession',
+      {},
+      { udid, systemPort, origin: window.location.origin },
+    );
   }
   public static installWDAOnDevice(udid: string) {
     return apiClient.makePOSTRequest('/installiOSWDA', {}, { udid });
@@ -48,6 +52,14 @@ export default class DeviceFarmApiService {
   }
 
   public static closeSession(udid: string) {
-    return apiClient.makePOSTRequest('/closeSession', {}, {udid, origin: window.location.origin});
+    return apiClient.makePOSTRequest('/closeSession', {}, { udid, origin: window.location.origin });
+  }
+
+  public static async getDeviceLogs(sessionId: string) {
+    const response = await apiClient.makeGETRequest(
+      `/dashboard/session/${sessionId}/device_logs`,
+      {},
+    );
+    return response?.logs || [];
   }
 }
diff --git a/web/src/components/build-container/build-container.tsx b/web/src/components/build-container/build-container.tsx
@@ -5,7 +5,7 @@ import AndroidIcon from '../../assets/android-new-icon.svg';
 import AppleIcon from '../../assets/apple-new-icon.svg';
 import { IBuild } from '../../interfaces/IBuild';
 import { ISession } from '../../interfaces/ISession';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 function BuildContainer({
   selectedBuild,
@@ -18,8 +18,8 @@ function BuildContainer({
   builds: IBuild[];
   sessions: ISession[];
 }) {
-  const path = window.location.pathname;
   const navigate = useNavigate();
+  const { sessionId } = useParams();
 
   function timeAgo(createdAt: string | number | Date) {
     const currentDate = new Date();
@@ -42,10 +42,6 @@ function BuildContainer({
     }
   }
 
-  const buildId = path.match(/builds\/(.+?)\//)?.[1];
-  const sessionId = path.match(/session\/(.+?)$/)?.[1];
-  console.log({ buildId, sessionId });
-
   return (
     <div className="build-container">
       <div className="build-header">

diff --git a/web/src/components/session/capabilities/capabilities.css b/web/src/components/session/capabilities/capabilities.css
@@ -4,6 +4,7 @@
   flex-direction: column;
   max-width: 440px;
   margin: 16px;
+  width:30%;
 }
 
 .tabs {
@@ -24,7 +25,7 @@
 }
 
 .tab-content {
-  max-height: 300px;
+  height: 100%;
   overflow-y: auto;
 }
 

diff --git a/web/src/components/session/capabilities/capabilities.tsx b/web/src/components/session/capabilities/capabilities.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ISession } from '../../../interfaces/ISession';
 import './capabilities.css';
 
@@ -14,6 +14,10 @@ enum ActiveTab {
 function Capabilities({ session }: CapabilitiesProps) {
   const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.DesiredCapabilities);
 
+  useEffect(() => {
+    setActiveTab(ActiveTab.DesiredCapabilities);
+  }, [session]);
+
   const renderKeyValuePairs = (data: string) => {
     const parsedData = JSON.parse(data);
     return Object.entries(parsedData).map(([key, value]) => (
@@ -37,11 +41,13 @@ function Capabilities({ session }: CapabilitiesProps) {
         <img
           src={source}
           style={{
-            maxHeight: '40%',
+            width: '250px',
+            height: 'auto',
+            margin: 'auto',
           }}
         />
       );
-    } else {
+    } else if (session.videoRecording) {
       return (
         <video
           controls
@@ -50,14 +56,27 @@ function Capabilities({ session }: CapabilitiesProps) {
           }`}
         />
       );
+    } else {
+      return (
+        <div
+          style={{
+            width: '100%',
+            height: '300px',
+            paddingTop: '25%',
+            textAlign: 'center',
+            fontSize: '18px',
+          }}
+        >
+          <b>Video recording not available</b>
+        </div>
+      );
     }
   }
 
   return (
     <div className="capabilities">
       {getVideoCompoment()}
-      console.log(session);
-      <div className="download">
+      {/* <div className="download">
         <a
           href={`${window.location.protocol + '//' + window.location.host}/device-farm/assets/${
             session.videoRecording
@@ -66,7 +85,7 @@ function Capabilities({ session }: CapabilitiesProps) {
         >
           Download
         </a>
-      </div>
+      </div> */}
       <div className="tabs">
         <div
           className={`tab-header ${activeTab === ActiveTab.DesiredCapabilities ? 'active' : ''}`}

diff --git a/web/src/components/session/session-logs/device-logs/device-log.css b/web/src/components/session/session-logs/device-logs/device-log.css
@@ -0,0 +1,16 @@
+.device-logs {
+    background-color: #010409;
+    color: #e6edf4;
+    padding: 16px;
+}
+
+.log-line {
+    word-wrap: break-word;
+    padding-right: 10px;
+    margin-right: 10px;
+}
+
+.log-line-number {
+    color: #848d97;
+    margin-right: 10px;
+}
diff --git a/web/src/components/session/session-logs/device-logs/device-log.tsx b/web/src/components/session/session-logs/device-logs/device-log.tsx
@@ -0,0 +1,21 @@
+import { IDeviceLogs } from '../../../../interfaces/IDeviceLogs';
+import './device-log.css';
+
+interface DeviceLogsProps {
+  deviceLogs: IDeviceLogs[] | null;
+}
+
+function DeviceLogs({ deviceLogs }: DeviceLogsProps) {
+  return (
+    <div className="device-logs">
+      {deviceLogs?.map((log, i) => (
+        <div className="log-line" key={`log-line-${i}`}>
+          <span className="log-line-number">{i + 1}</span>
+          {log.message}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default DeviceLogs;
diff --git a/web/src/components/session/session-logs/session-logs.css b/web/src/components/session/session-logs/session-logs.css
@@ -2,9 +2,10 @@
   font-size: 12px;
   display: flex;
   flex-direction: column;
-  width: 100%;
+  width: 70%;
   margin: 16px;
   border: 1px solid #808080;
+  height: calc(100% - 30px);
 }
 
 .session-logs .tabs {
@@ -43,6 +44,5 @@
 }
 
 .session-logs .tab-content {
-  max-height: 400px;
   overflow-y: auto;
 }
diff --git a/web/src/components/session/session-logs/session-logs.tsx b/web/src/components/session/session-logs/session-logs.tsx
@@ -3,6 +3,10 @@ import './session-logs.css';
 import { ISessionLogs } from '../../../interfaces/ISessionLogs';
 import TextLogs from './text-logs/text-logs';
 import DeviceFarmApiService from '../../../api-service';
+import DeviceLogs from './device-logs/device-log';
+import { IDeviceLogs } from '../../../interfaces/IDeviceLogs';
+import { useParams } from 'react-router-dom';
+import { ISession } from '../../../interfaces/ISession';
 
 enum ActiveTab {
   TextLogs = 'textLogs',
@@ -11,18 +15,27 @@ enum ActiveTab {
   AppProfiling = 'appProfiling',
 }
 
-function SessionLogs({ sessionId }: any) {
+function SessionLogs(props: { session: ISession }) {
+  const { session } = props;
   const [url, setBaseUrl] = useState<string>();
+  const { sessionId } = useParams();
   const [sessionLogs, setSessionLogs] = useState<ISessionLogs[]>([]);
+  const [deviceLogs, setDeviceLogs] = useState<IDeviceLogs[]>([]);
   const [showImages, setShowImages] = useState(false);
   const [showErrorsOnly, setShowErrorsOnly] = useState(false);
   const [activeTab, setActiveTab] = useState<ActiveTab>(ActiveTab.TextLogs);
 
   useEffect(() => {
     async function init() {
       try {
-        const sessionLogs = await DeviceFarmApiService.getSessionLogs(sessionId);
+        const sessionLogs = await DeviceFarmApiService.getSessionLogs(sessionId as string);
         setSessionLogs(sessionLogs);
+        if (session.deviceLogs) {
+          const deviceLogs = await DeviceFarmApiService.getDeviceLogs(sessionId as string);
+          setDeviceLogs(deviceLogs);
+        } else {
+          setDeviceLogs([]);
+        }
         const baseURL = window.location.protocol + '//' + window.location.host;
         setBaseUrl(baseURL);
         console.log('Base URL:', url);
@@ -31,7 +44,7 @@ function SessionLogs({ sessionId }: any) {
       }
     }
     init();
-  }, []);
+  }, [sessionId, url]);
 
   const handleTabClick = (tab: ActiveTab) => {
     setActiveTab(tab);
@@ -94,6 +107,7 @@ function SessionLogs({ sessionId }: any) {
             baseUrl={url}
           />
         )}
+        {activeTab === ActiveTab.DeviceLogs && <DeviceLogs deviceLogs={deviceLogs} />}
       </div>
     </div>
   );

diff --git a/web/src/interfaces/IDeviceLogs.ts b/web/src/interfaces/IDeviceLogs.ts
@@ -0,0 +1,5 @@
+export interface IDeviceLogs {
+  timestamp: string;
+  level: string;
+  message: string;
+}
diff --git a/web/src/interfaces/ISession.ts b/web/src/interfaces/ISession.ts
@@ -9,6 +9,7 @@ export interface ISession {
   hasLiveVideo: boolean;
   videoRecording: string | null;
   startTime: string;
+  deviceLogs: string;
   endTime: string | null;
   failureReason: string | null;
   deviceUDID: string;

diff --git a/web/src/pages/Session/index.tsx b/web/src/pages/Session/index.tsx
@@ -66,7 +66,7 @@ function Session() {
             <SessionInfo session={selectedSession} />
             <div className="session-body">
               <Capabilities session={selectedSession} />
-              <SessionLogs sessionId={selectedSession.id} />
+              <SessionLogs session={selectedSession} />
             </div>
           </div>
         )}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		-- AlterTable
		ALTER TABLE "Session" ADD COLUMN "device_logs" TEXT;