Fix FE console errors and minor ui tweaks

AppiumTestDistribution · Apr 10, 2024 · 53d4265 · 53d4265
1 parent 9f0148d
commit 53d4265
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 66 deletions.
diff --git a/src/modules b/src/modules
diff --git a/web/src/components/build-container/build-container.css b/web/src/components/build-container/build-container.css
@@ -64,7 +64,7 @@
   justify-content: space-between;
   align-items: center;
   color: #999;
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .details-item_icon {
@@ -107,7 +107,7 @@
   gap: 4px;
   align-items: center;
   color: #999;
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .build-item_session_details_item > img {

diff --git a/web/src/components/build-container/build-container.tsx b/web/src/components/build-container/build-container.tsx
@@ -50,12 +50,11 @@ function BuildContainer({
       </div>
       <div className="build-list">
         {builds.map((build) => (
-          <>
+          <div key={`build-container-${build.id}`}>
             <div
               className={`build-item ${
                 selectedBuild?.id === build.id && !sessionId && 'build-item_selected'
               } `}
-              key={build.id}
               onClick={() => handleBuildClick(build.id)}
             >
               <p className="build-item_name">{build.name}</p>
@@ -78,7 +77,7 @@ function BuildContainer({
                   .filter((session) => session.buildId === build.id)
                   .map((session) => (
                     <div
-                      key={session.buildId}
+                      key={`build-${session.buildId}-session${session.id}`}
                       className={`build-item_session ${
                         sessionId === session.id && 'build-item_session_selected'
                       }`}
@@ -95,12 +94,15 @@ function BuildContainer({
                           />
                           <span>{session.deviceName}</span>
                         </div>
+                        <div className="build-item_session_details_item">
+                          <span>{session.status}</span>
+                        </div>
                       </div>
                     </div>
                   ))}
               </div>
             )}
-          </>
+          </div>
         ))}
       </div>
     </div>

diff --git a/web/src/components/session/capabilities/capabilities.css b/web/src/components/session/capabilities/capabilities.css
@@ -13,10 +13,12 @@
 
 .tab-header {
   cursor: pointer;
-  font-weight: bold;
   width: 100%;
   padding: 8px 16px;
+  margin: 12px 0 0 0;
   border-bottom: 1px solid gray;
+  font-size: 13px;
+  font-weight: 500;
 }
 
 .tab-header.active {

diff --git a/web/src/components/session/session-info/session-info.css b/web/src/components/session/session-info/session-info.css
@@ -1,3 +1,28 @@
+@-webkit-keyframes progress {
+  0% {
+    background-position: 0 0;
+  }
+
+  to {
+    background-position: 200px 0;
+  }
+}
+
+@keyframes progress {
+  0% {
+    background-position: 0 0;
+  }
+
+  to {
+    background-position: 200px 0;
+  }
+}
+
+.session-info-container {
+  display: flex;
+  flex-direction: column;
+}
+
 .session-info {
   display: flex;
   justify-content: space-between;
@@ -46,3 +71,17 @@ div.session-info-item_value {
   color: gray;
   width: 120px;
 }
+
+
+.session-running-indicator {
+  width: 100%;
+  height: 3px;
+  animation: progress 2s linear infinite;
+  background: repeating-linear-gradient(
+    -45deg,
+    #3d85c6,
+    #3d85c6 10px,
+    #9fc5e8 0,
+    #9fc5e8 20px
+  );
+}
diff --git a/web/src/components/session/session-info/session-info.tsx b/web/src/components/session/session-info/session-info.tsx
@@ -19,64 +19,69 @@ function SessionInfo({ session }: { session: ISession }) {
 
   function getAppName(capabilities: string) {
     const capabilitiesObject = JSON.parse(capabilities);
-    return capabilitiesObject.app.split('/').pop();
+    return capabilitiesObject.appPackage || '-';
   }
 
   return (
-    <div className="session-info">
-      <div className="session-info-column">
-        <div className="session-info-item">
-          <p className="session-info-item_title">Session Id:</p>
-          <p className="session-info-item_value">{session.id}</p>
-        </div>
-        <div className="session-info-item">
-          <p className="session-info-item_title">Start Time:</p>
-          <p className="session-info-item_value">{session.startTime}</p>
-        </div>
-        <div className="session-info-item">
-          <p className="session-info-item_title">Device Name:</p>
-          <div className="session-info-item_value">
-            <img src={MobileIcon} alt="device icon" />
-            <p>{session.deviceName}</p>
+    <div className="session-info-container">
+      <div className="session-info">
+        <div className="session-info-column">
+          <div className="session-info-item">
+            <p className="session-info-item_title">Session Id:</p>
+            <p className="session-info-item_value">{session.id}</p>
           </div>
-        </div>
-      </div>
-      <div className="session-info-column">
-        <div className="session-info-item">
-          <p className="session-info-item_title">OS:</p>
-          <div className="session-info-item_value">
-            <img
-              src={session.devicePlatform === 'android' ? AndroidIcon : AppleIcon}
-              alt="device platform"
-            />
-            <p>{session.devicePlatform}</p>
+          <div className="session-info-item">
+            <p className="session-info-item_title">Start Time:</p>
+            <p className="session-info-item_value">{session.startTime}</p>
+          </div>
+          <div className="session-info-item">
+            <p className="session-info-item_title">Device Name:</p>
+            <div className="session-info-item_value">
+              <img src={MobileIcon} alt="device icon" />
+              <p>{session.deviceName}</p>
+            </div>
           </div>
         </div>
-        <div className="session-info-item">
-          <p className="session-info-item_title">End Time:</p>
-          <p className="session-info-item_value">{session.endTime || session.status}</p>
-        </div>
-        <div className="session-info-item">
-          <p className="session-info-item_title">UDID:</p>
-          <p className="session-info-item_value">{session.deviceUDID}</p>
-        </div>
-      </div>
-      <div className="session-info-column">
-        <div className="session-info-item">
-          <p className="session-info-item_title">OS Version:</p>
-          <p className="session-info-item_value">{session.deviceVersion}</p>
-        </div>
-        <div className="session-info-item">
-          <p className="session-info-item_title">Duration:</p>
-          <p className="session-info-item_value">
-            {runningTime(session.startTime, session.endTime)}
-          </p>
+        <div className="session-info-column">
+          <div className="session-info-item">
+            <p className="session-info-item_title">OS:</p>
+            <div className="session-info-item_value">
+              <img
+                src={session.devicePlatform === 'android' ? AndroidIcon : AppleIcon}
+                alt="device platform"
+              />
+              <p>{session.devicePlatform}</p>
+            </div>
+          </div>
+          <div className="session-info-item">
+            <p className="session-info-item_title">End Time:</p>
+            <p className="session-info-item_value">{session.endTime || session.status}</p>
+          </div>
+          <div className="session-info-item">
+            <p className="session-info-item_title">UDID:</p>
+            <p className="session-info-item_value">{session.deviceUDID}</p>
+          </div>
         </div>
-        <div className="session-info-item">
-          <p className="session-info-item_title">App:</p>
-          <p className="session-info-item_value">{getAppName(session.desiredCapabilities)}</p>
+        <div className="session-info-column">
+          <div className="session-info-item">
+            <p className="session-info-item_title">OS Version:</p>
+            <p className="session-info-item_value">{session.deviceVersion}</p>
+          </div>
+          <div className="session-info-item">
+            <p className="session-info-item_title">Duration:</p>
+            <p className="session-info-item_value">
+              {runningTime(session.startTime, session.endTime)}
+            </p>
+          </div>
+          <div className="session-info-item">
+            <p className="session-info-item_title">App:</p>
+            <p className="session-info-item_value">{getAppName(session.sessionCapabilities)}</p>
+          </div>
         </div>
       </div>
+      {session.status?.toLowerCase() == 'running' && (
+        <div className="session-running-indicator"></div>
+      )}
     </div>
   );
 }

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
@@ -2,6 +2,7 @@
     background-color: #010409;
     color: #e6edf4;
     padding: 16px;
+    font-family: 'Roboto Mono';
 }
 
 .log-line {

diff --git a/web/src/components/session/session-logs/session-logs.css b/web/src/components/session/session-logs/session-logs.css
@@ -16,9 +16,9 @@
   cursor: pointer;
   font-weight: bold;
   text-align: center;
-  width: 100%;
+  max-width: 150px;
   padding: 16px;
-  border-bottom: 1px solid gray;
+  font-size: 13px;
 }
 
 .session-logs .tab-header.active {
@@ -45,4 +45,5 @@
 
 .session-logs .tab-content {
   overflow-y: auto;
+  border-top: 1px solid gray;
 }
diff --git a/web/src/components/session/session-logs/text-logs/text-logs.css b/web/src/components/session/session-logs/text-logs/text-logs.css
@@ -58,20 +58,24 @@
 }
 
 .session-logs .text-log-response span {
-  font-size: 14px;
+  font-size: 11px;
   margin: 0;
   color: rgb(203, 75, 22);
 }
 
 .session-logs .text-log-response p {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 600;
   color: #808080;
   margin: 0 0 8px 0;
 }
 
 .text-log-screenshot {
   margin: 8px;
-  width: 50%;
+  width: 220px;
   height: auto;
 }
+
+.session-logs .failed {
+  background-color: #f5eab5;
+}
diff --git a/web/src/components/session/session-logs/text-logs/text-logs.tsx b/web/src/components/session/session-logs/text-logs/text-logs.tsx
@@ -13,7 +13,7 @@ interface TextLogsProps {
 
 function TextLogs({ sessionLogs, baseUrl }: TextLogsProps) {
   const [openDropdownIndex, setOpenDropdownIndex] = useState<number | null>(null);
-  const [showImages, setShowImages] = useState(false);
+  const [showImages, setShowImages] = useState(true);
   const [showErrorsOnly, setShowErrorsOnly] = useState(false);
 
   return (
@@ -41,7 +41,7 @@ function TextLogs({ sessionLogs, baseUrl }: TextLogsProps) {
       <div className="text-logs">
         {sessionLogs
           .sort((a, b) => (a.createdAt > b.createdAt ? 1 : -1))
-          .filter((sessionLog) => (showErrorsOnly ? !sessionLog.isSuccess : sessionLog.isSuccess))
+          .filter((sessionLog) => (showErrorsOnly ? !sessionLog.isSuccess : true))
           .map((sessionLog, index, array) => {
             const currentTime = new Date(sessionLog.createdAt);
             const nextTime = index < array.length - 1 ? new Date(array[index + 1].createdAt) : null;
@@ -55,7 +55,10 @@ function TextLogs({ sessionLogs, baseUrl }: TextLogsProps) {
             const formattedBody = JSON.stringify(body, null, 2);
 
             return (
-              <div key={sessionLog.id} className="text-log">
+              <div
+                key={sessionLog.id}
+                className={`text-log ${sessionLog.isSuccess ? '' : 'failed'}`}
+              >
                 <div className="text-log-header">
                   <div className="title">{sessionLog.title}</div>
                   <div className="accessibility">

diff --git a/web/src/index.css b/web/src/index.css
@@ -1,9 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;400;500;600&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
 
 body {
   margin: 0;
-    font-family: 'Roboto Mono', monospace;
+    font-family: 'Inter', monospace;
     color: #111;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;