+
+
+
+ );
+ case FILE_UPLOAD_STATE.UPLOAD_ERROR:
+ return
+
+
+ Drag 'n' drop the app (.apk, .aab, .ipa, .app, .zip) here, or click to select a file
+{statusMessage}
;
+ case FILE_UPLOAD_STATE.UPLOADING:
+ return (
+
+ {' '}
+
+ );
+ case FILE_UPLOAD_STATE.UPLOAD_SUCCESS:
+ return (
+
+ {' '}
+
+ );
+ default:
+ return <>;
+ }
+ };
+
+ useEffect(() => {
+ (async () => {
+ if (!acceptedFiles.length) {
+ return;
+ }
+ try {
+ await uploadApp(acceptedFiles[0]);
+ } catch (err: Error | any) {
+ setStatus(FILE_UPLOAD_STATE.UPLOAD_ERROR);
+ setStatusMessage(err?.message);
+ }
+ })();
+ }, [acceptedFiles]);
+
+ return (
+ <>
+ {open && (
+
+ {appFileName.includes('wda')
+ ? 'Resigned WDA has been uploaded successfully.'
+ : `App has been uploaded successfully. Pass this in your appium app capability as app:${appFileName}`}
+
+
+
+ )}
+
+ );
+}
diff --git a/dashboard-frontend/src/components/apps/Apps.tsx b/dashboard-frontend/src/components/apps/Apps.tsx
new file mode 100644
index 000000000..57f25c6f7
--- /dev/null
+++ b/dashboard-frontend/src/components/apps/Apps.tsx
@@ -0,0 +1,326 @@
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import DeviceFarmApiService from '../../api-service';
+import { IconButton, Typography } from '@mui/material';
+import { CloudUpload, Search, ChevronLeft, ChevronRight } from '@mui/icons-material';
+import { AppUploader } from './AppUploader';
+import debounce from 'lodash/debounce';
+
+interface DeletingState {
+ [key: string]: boolean;
+}
+
+export default function AppList() {
+ const [data, setData] = useState([]);
+ const [pageData, setPageData] = useState([]);
+ const [active, setActive] = React.useState(1);
+ const [isDeleting, setIsDeleting] = useState
+
+
+
+
+
+ + Upload Apps/Assets +
+ +
+
+ {getComponentToRender()}
+
+
+ {
+ setShowFileUpload(false);
+ fetchAppList();
+ }}
+ />
+
+ );
+}
diff --git a/dashboard-frontend/src/components/auth/LoginForm.tsx b/dashboard-frontend/src/components/auth/LoginForm.tsx
new file mode 100644
index 000000000..2d3111d78
--- /dev/null
+++ b/dashboard-frontend/src/components/auth/LoginForm.tsx
@@ -0,0 +1,509 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from 'flowbite-react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../contexts/AuthContext';
+import deviceFarmLogo from '../../assets/device-farm-logo.png';
+
+const LoginForm: React.FC = () => {
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [activeScreen, setActiveScreen] = useState(0); // 0: Login, 1: Dashboard, 2: Details
+ const [showClickEffect, setShowClickEffect] = useState(false);
+ const navigate = useNavigate();
+ const { login, error } = useAuth();
+
+ useEffect(() => {
+ const screenCount = 3; // Total number of screens
+ const intervalTime = 3000; // Time each screen is visible (in ms)
+ let clickTimeoutId: NodeJS.Timeout | null = null;
+
+ const interval = setInterval(() => {
+ setActiveScreen((prevScreen) => {
+ const nextScreen = (prevScreen + 1) % screenCount;
+
+ // Schedule click effect for Screen 1 (Login)
+ if (nextScreen === 0) {
+ if (clickTimeoutId) clearTimeout(clickTimeoutId); // Clear previous timeouts
+ clickTimeoutId = setTimeout(() => {
+ setShowClickEffect(true);
+ // Automatically remove the effect after a short duration
+ clickTimeoutId = setTimeout(() => {
+ setShowClickEffect(false);
+ }, 300); // Duration of the click effect
+ }, 1000); // Delay before showing click effect after screen appears
+ } else {
+ // Ensure effect is off for other screens
+ if (clickTimeoutId) clearTimeout(clickTimeoutId);
+ setShowClickEffect(false);
+ }
+
+ return nextScreen;
+ });
+ }, intervalTime);
+
+ // Initial trigger check in case component mounts on screen 0
+ if (activeScreen === 0) {
+ clickTimeoutId = setTimeout(() => {
+ setShowClickEffect(true);
+ clickTimeoutId = setTimeout(() => {
+ setShowClickEffect(false);
+ }, 300);
+ }, 1000);
+ }
+
+ return () => {
+ clearInterval(interval);
+ if (clickTimeoutId) clearTimeout(clickTimeoutId); // Cleanup timeouts on unmount
+ };
+ }, []); // Rerun effect only on mount/unmount
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setLoading(true);
+
+ try {
+ await login(username, password);
+ navigate('/device-farm/#/');
+ } catch (err) {
+ // Error is handled by the login function
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {pageData.length > 0 && (
+ | + App Name + | ++ Platform + | ++ File Size + | ++ Uploaded Date + | ++ Automation FileName + | ++ Action + | +
|---|---|---|---|---|---|
|
+
+ {app.fileName}
+
+ |
+ + {(() => { + const platform = getPlatformFromFileName(app.fileName); + if (platform === 'ios') { + return ( + + ); + } else if (platform === 'android') { + return ( + + ); + } else { + return -; + } + })()} + | ++ {(app.fileSize / (1024 * 1024)).toFixed(2)} MB + | +{readableDate} | +{app.uploadedFileName} | +
+ {isDeleting[app.uploadedFileName] ? (
+ Deleting...
+ ) : (
+
+ )}
+ |
+
|
+
+
+
+
+ No apps available ++ {searchTerm + ? 'Try adjusting your search criteria' + : 'Upload an app to get started'} + + |
+
+
+ )}
+
+
+ Showing {pageData.length} of {filteredData.length} apps
+
+ {!showAll && filteredData.length > itemsPerPage && (
+
+ )}
+ {showAll && (
+
+ )}
+
+
+ {!showAll && (
+
+
+
+
+ Page {active} of{' '}
+
+ {Math.max(1, Math.ceil(filteredData.length / itemsPerPage))}
+
+
+
+
+
+ )}
+
+ {/* Left Panel - Brand Section */}
+
+ );
+};
+
+export default LoginForm;
diff --git a/dashboard-frontend/src/components/auth/ProtectedRoute.tsx b/dashboard-frontend/src/components/auth/ProtectedRoute.tsx
new file mode 100644
index 000000000..dcd2172e0
--- /dev/null
+++ b/dashboard-frontend/src/components/auth/ProtectedRoute.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../../contexts/AuthContext';
+
+interface ProtectedRouteProps {
+ children: React.ReactNode;
+ adminOnly?: boolean;
+}
+
+const ProtectedRoute: React.FC
+ {/* Animated background elements */}
+
+
+ {/* Right Panel - Login Form */}
+
+ {/* Base grid pattern */}
+
+
+ {/* Modern gradient mesh */}
+
+
+ {/* Large gradient circles with modern positioning */}
+
+
+
+
+ {/* Modern geometric elements */}
+
+
+
+
+
+ {/* Animated floating elements */}
+
+
+
+
+
+ {/* Subtle accent lines */}
+
+
+
+ {/* Gradient overlay */}
+
+
+
+ {/* Content */}
+
+
+
+ {/* Decorative elements */}
+
+
+
+
+
+ {/* Logo and Title */}
+
+
+ 
+
+ {/* Combined Container for Phone and Orbit */}
+
+ {/* Floating Icons Container */}
+
+
+ {/* Outer Circle Icons */}
+
+
+ {/* Phone Frame - Positioned over the orbit */}
+
+ {/* iOS Icon */}
+
+
+ {/* Inner Circle Icons */}
+
+
+
+ {/* Android Icon */}
+
+
+
+
+
+
+
+
+
+ {/* JavaScript Icon */}
+
+
+ {/* Orbit Paths */}
+
+
+
+ {/* Java Icon */}
+
+
+
+
+
+
+
+
+
+
+ JAVA
+
+
+
+
+
+
+
+
+
+ {/* Notch */}
+
+
+ {/* Power Button */}
+
+
+ {/* Volume Buttons */}
+
+
+
+ {/* Screen */}
+
+
+ {/* Subtle Glare Effect */}
+
+
+ {/* Mobile App Interface */}
+
+
+ {/* Status Bar */}
+
+
+
+
+ {/* App Content */}
+
+
+ Home
+
+ 12:30
+
+ {/* App Screens Container */}
+
+
+ {/* Screen 1: Ghost Layout */}
+
+
+ {/* App Bar */}
+
+
+ {/* Screen 2: Ghost Layout */}
+
+
+
+
+
+ {/* Header */}
+
+
+
+
+
+ {/* Content */}
+
+
+
+
+
+ {/* Bottom */}
+
+ {showClickEffect && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ {/* App Bar */}
+
+
+ {/* Screen 3: Ghost Layout */}
+
+
+
+
+ {/* List Items */}
+
+
+
+
+
+
+
+ {/* Bottom Nav */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* App Bar */}
+
+
+
+
+
+
+ {/* Content */}
+
+
+
+ {/* Bottom Nav */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {error && (
+ Welcome back!
+Sign in to your account
+
+ {error}
+
+ )}
+
+
+ Loading...
;
+ }
+
+ // If not authenticated, redirect to login
+ if (!user) {
+ return
+
+
+
+
+ );
+};
+
+export default UserMenu;
diff --git a/dashboard-frontend/src/components/build-container/build-container.tsx b/dashboard-frontend/src/components/build-container/build-container.tsx
new file mode 100644
index 000000000..d60240e6c
--- /dev/null
+++ b/dashboard-frontend/src/components/build-container/build-container.tsx
@@ -0,0 +1,194 @@
+import { IBuild } from '../../interfaces/IBuild';
+import { ISession } from '../../interfaces/ISession';
+import { Clock, ChevronRight, Search } from 'lucide-react';
+import { useState, useMemo } from 'react';
+
+function BuildContainer({
+ selectedBuild,
+ handleBuildClick,
+ builds,
+ sessions,
+}: {
+ selectedBuild: IBuild | undefined;
+ handleBuildClick: (buildId: IBuild) => void;
+ builds: IBuild[];
+ sessions: ISession[];
+}) {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [dateFilter, setDateFilter] = useState('all');
+
+ const path = window.location.pathname;
+
+ function timeAgo(createdAt: string | number | Date) {
+ const currentDate = new Date();
+ const createdDate = new Date(createdAt);
+
+ const timeDifference = Number(currentDate) - Number(createdDate);
+ const seconds = Math.floor(timeDifference / 1000);
+ const minutes = Math.floor(seconds / 60);
+ const hours = Math.floor(minutes / 60);
+ const days = Math.floor(hours / 24);
+
+ if (days > 0) {
+ return `${days}d`;
+ } else if (hours > 0) {
+ return `${hours}h`;
+ } else if (minutes > 0) {
+ return `${minutes}m`;
+ } else {
+ return `${seconds}s`;
+ }
+ }
+
+ const buildId = path.match(/builds\/(.+?)\//)?.[1];
+ const sessionId = path.match(/session\/(.+?)$/)?.[1];
+ console.log({ buildId, sessionId });
+
+ const getSessionCountsByStatus = (buildId: string) => {
+ const buildSessions = sessions.filter((session) => session.buildId === buildId);
+ return {
+ total: buildSessions.length,
+ running: buildSessions.filter((s) => s.status === 'running').length,
+ passed: buildSessions.filter((s) => s.status === 'passed').length,
+ unmarked: buildSessions.filter((s) => s.status === 'unmarked').length,
+ failed: buildSessions.filter((s) => s.status === 'failed').length,
+ };
+ };
+
+ const filteredBuilds = useMemo(() => {
+ return builds.filter((build) => {
+ const matchesSearch =
+ build.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ build.id.toLowerCase().includes(searchQuery.toLowerCase());
+
+ const buildDate = new Date(build.createdAt);
+ const now = new Date();
+ const daysDiff = (now.getTime() - buildDate.getTime()) / (1000 * 60 * 60 * 24);
+
+ const matchesDate =
+ dateFilter === 'all' ||
+ (dateFilter === 'today' && daysDiff < 1) ||
+ (dateFilter === 'week' && daysDiff < 7) ||
+ (dateFilter === 'month' && daysDiff < 30);
+
+ return matchesSearch && matchesDate;
+ });
+ }, [builds, searchQuery, dateFilter]);
+
+ return (
+
+
+ );
+}
+
+export default BuildContainer;
diff --git a/dashboard-frontend/src/components/build-container/session-card/session-card.css b/dashboard-frontend/src/components/build-container/session-card/session-card.css
new file mode 100644
index 000000000..b0d2a9f01
--- /dev/null
+++ b/dashboard-frontend/src/components/build-container/session-card/session-card.css
@@ -0,0 +1,43 @@
+.build-session {
+ @apply flex items-center flex-wrap gap-[16px] mb-[16px] p-[16px] bg-[#ffffff] rounded-[4px] cursor-pointer [box-shadow:0_0_3px_rgba(33,_33,_33,_0.2)] border-[2px] border-[solid] border-[rgb(255,255,255)];
+}
+
+.build-session:hover {
+ @apply hover:[box-shadow:unset] hover:border-[#15252b];
+}
+
+.build-session-column {
+ @apply flex flex-col gap-[8px] w-1/2;
+}
+
+.build-session_name {
+ @apply text-[12px] font-semibold text-[#212121];
+}
+
+.build-session-device {
+ @apply flex items-center flex-wrap gap-[12px];
+}
+
+.build-session-device img {
+ @apply w-[16px] h-[16px];
+}
+
+.build-session-device div {
+ @apply flex items-center gap-[6px];
+}
+
+.build-session-device p {
+ @apply text-[11px] m-0 font-normal;
+}
+
+.build-session-device_last_updated {
+ @apply text-[#9e9e9e];
+}
+
+.build-session_status {
+ @apply text-[14px] font-semibold uppercase w-1/5 min-w-[140px] text-[#9e9e9e];
+}
+
+.build-session_time {
+ @apply text-[14px] font-semibold w-1/5 min-w-[140px] text-[#9e9e9e];
+}
diff --git a/dashboard-frontend/src/components/build-container/session-card/session-card.tsx b/dashboard-frontend/src/components/build-container/session-card/session-card.tsx
new file mode 100644
index 000000000..7fb4ed43d
--- /dev/null
+++ b/dashboard-frontend/src/components/build-container/session-card/session-card.tsx
@@ -0,0 +1,110 @@
+import { ISession } from '../../../interfaces/ISession';
+import { useNavigate } from 'react-router-dom';
+import { Clock, Smartphone, Timer } from 'lucide-react';
+
+function SessionCard({ session }: { session: ISession }) {
+ const navigate = useNavigate();
+
+ function timeAgo(createdAt: string | number | Date) {
+ const currentDate = new Date();
+ const createdDate = new Date(createdAt);
+
+ const timeDifference = Number(currentDate) - Number(createdDate);
+ const seconds = Math.floor(timeDifference / 1000);
+ const minutes = Math.floor(seconds / 60);
+ const hours = Math.floor(minutes / 60);
+ const days = Math.floor(hours / 24);
+
+ if (days > 0) {
+ return `${days} ${days === 1 ? 'day' : 'days'} ago`;
+ } else if (hours > 0) {
+ return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
+ } else if (minutes > 0) {
+ return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'} ago`;
+ } else {
+ return `${seconds} ${seconds === 1 ? 'second' : 'seconds'} ago`;
+ }
+ }
+
+ function runningTime(startTime: string | number | Date, endTime?: string | number | Date | null) {
+ const startDate = new Date(startTime);
+ const endDate = endTime ? new Date(endTime) : new Date();
+ const elapsedTime = Number(endDate) - Number(startDate);
+
+ const hours = Math.floor(elapsedTime / (1000 * 60 * 60));
+ const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));
+ const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);
+
+ return `${hours > 0 ? `${hours}h ` : ''}${minutes > 0 ? `${minutes}m ` : ''}${seconds}s`;
+ }
+
+ const getStatusColor = (status: string): string => {
+ if (status === 'passed') return 'text-emerald-400 bg-emerald-400/10';
+ if (status === 'failed') return 'text-red-400 bg-red-400/10';
+ return 'text-amber-400 bg-amber-400/10';
+ };
+
+ const getPlatformIcon = (platform: string): JSX.Element => {
+ if (platform === 'ios' || platform === 'tvos') {
+ return (
+
+ );
+ }
+ return
+
+
+
+ Builds
+
+
+
+
+
+
+
+
+ {filteredBuilds.map((build, index) => (
+
+
+
+ {index < filteredBuilds.length - 1 && }
+
+ ))}
+
+
+
+ );
+}
+
+export default SessionCard;
diff --git a/dashboard-frontend/src/components/cleanup-modal/cleanup-modal.tsx b/dashboard-frontend/src/components/cleanup-modal/cleanup-modal.tsx
new file mode 100644
index 000000000..d44fe5729
--- /dev/null
+++ b/dashboard-frontend/src/components/cleanup-modal/cleanup-modal.tsx
@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import Modal from 'react-modal';
+
+interface CleanupModalProps {
+ isOpen: boolean;
+ onRequestClose: () => void;
+ onConfirm: (retentionDays: number) => void;
+}
+
+function CleanupModal({ isOpen, onRequestClose, onConfirm }: CleanupModalProps) {
+ const [retentionDays, setRetentionDays] = useState(30);
+
+ const handleConfirm = () => {
+ onConfirm(retentionDays);
+ onRequestClose();
+ };
+
+ return (
+ Clean up builds
+
+
+ + This will permanently delete all builds and their associated sessions and logs older than + the selected retention period. +
+
+
+ setRetentionDays(parseInt(e.target.value, 10))}
+ className="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-sm text-gray-200 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-600"
+ />
+
+
+
+
+
+
+ {getInitials()}
+
+ );
+ }
+
+ // For future image variant support
+ return null;
+};
+
+export default Avatar;
diff --git a/dashboard-frontend/src/components/device-explorer/device-explorer.tsx b/dashboard-frontend/src/components/device-explorer/device-explorer.tsx
new file mode 100644
index 000000000..9cf37ef3e
--- /dev/null
+++ b/dashboard-frontend/src/components/device-explorer/device-explorer.tsx
@@ -0,0 +1,852 @@
+import React from 'react';
+import { IDeviceFilter } from '../../interfaces/IDeviceFilter';
+import { IDevice } from '../../interfaces/IDevice';
+import DeviceFarmApiService from '../../api-service';
+import '../session/style.css';
+import { RefreshCw } from 'lucide-react';
+import DeviceCard from '../devicecard/DeviceCard';
+
+interface IDeviceExplorerState {
+ filter: IDeviceFilter;
+ devices: IDevice[];
+ activeSessionsCount: number;
+ pendingSessionsCount: number;
+ enableDevicePolling: boolean;
+}
+
+const DEFAULT_FILTER: IDeviceFilter = {
+ platform: {
+ ios: true,
+ android: true,
+ },
+ state: {
+ ready: true,
+ offline: true,
+ busy: true,
+ },
+ name: '',
+ version: '',
+ deviceType: undefined,
+ versions: [],
+ tags: [],
+};
+
+// CustomDropdown component for custom select UI
+function CustomDropdown({
+ label,
+ value,
+ options,
+ onChange,
+ placeholder,
+ clearable,
+ onClear,
+}: {
+ label: string;
+ value: string | undefined;
+ options: { label: string; value: string | undefined }[];
+ onChange: (v: string | undefined) => void;
+ placeholder?: string;
+ clearable?: boolean;
+ onClear?: () => void;
+}) {
+ const [open, setOpen] = React.useState(false);
+ const ref = React.useRef
+
+ );
+}
+
+// MultiSelectDropdown component for custom multi-select UI
+function MultiSelectDropdown({
+ label,
+ values,
+ options,
+ onChange,
+ placeholder,
+ clearable,
+ onClear,
+}: {
+ label: string;
+ values: string[];
+ options: { label: string; value: string }[];
+ onChange: (v: string[]) => void;
+ placeholder?: string;
+ clearable?: boolean;
+ onClear?: () => void;
+}) {
+ const [open, setOpen] = React.useState(false);
+ const ref = React.useRef
+
+ {clearable && value && (
+
+ )}
+
+
+ {open && (
+
+ {options.map((opt) => (
+
+ )}
+ {
+ onChange(opt.value);
+ setOpen(false);
+ }}
+ style={{ textAlign: 'left' }}
+ >
+ {opt.label}
+
+ ))}
+
+
+ );
+}
+
+// EmptyState component for when no devices are available
+const EmptyState = () => {
+ return (
+
+
+ {clearable && values.length > 0 && (
+
+ )}
+
+
+ {open && (
+
+ {options.map((opt) => (
+
+ )}
+ {
+ if (values.includes(opt.value)) {
+ onChange(values.filter((v) => v !== opt.value));
+ } else {
+ onChange([...values, opt.value]);
+ }
+ }}
+ style={{ textAlign: 'left' }}
+ >
+
+ {opt.label}
+
+ ))}
+
+
+ );
+};
+
+// Add these styles to your existing CSS
+const styles = `
+@keyframes float {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-10px); }
+}
+
+@keyframes twinkle {
+ 0%, 100% { opacity: 0.2; }
+ 50% { opacity: 1; }
+}
+
+@keyframes orbit {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+.animate-float {
+ animation: float 6s ease-in-out infinite;
+}
+
+.animate-twinkle {
+ animation: twinkle 2s ease-in-out infinite;
+}
+
+.animate-orbit {
+ animation: orbit 20s linear infinite;
+}
+`;
+
+export default class DeviceExplorer extends React.Component<
+ object,
+ IDeviceExplorerState & { showFilterPopup: boolean }
+> {
+ private devicePolling?: NodeJS.Timeout;
+ private isMountedFlag = false;
+ filterButtonRef = React.createRef
+ {/* Animated space illustration */}
+
+
+
+
+ No Devices Found
++ It seems there are no devices available at the moment. +
+ +
+
+
+
+ );
+ }
+
+ getDeviceStateFilterComponent() {
+ const { ready, busy, offline } = this.state.filter.state;
+
+ const isAllSelected = ready && busy && offline;
+ return (
+
+
+ );
+ }
+ getStatusColor = (status: string) => {
+ if (!status) return 'text-gray-400 bg-gray-400/10';
+ if (status === 'ready') return 'text-emerald-400 bg-emerald-400/10';
+ if (status === 'busy') return 'text-amber-400 bg-amber-400/10';
+ if (status === 'offline') return 'text-red-400 bg-red-400/10';
+ return 'text-gray-400 bg-gray-400/10';
+ };
+
+ render() {
+ const devices = this.getFilteredDevice();
+ const { showFilterPopup } = this.state;
+ const { ios, android } = this.state.filter.platform;
+ // Collect unique versions for dropdown
+ const versions = Array.from(new Set(this.state.devices.map((d) => d.version).filter(Boolean)));
+ // Device types for dropdown
+ const deviceTypes = [
+ { label: 'All', value: undefined },
+ { label: 'Real', value: 'real' },
+ { label: 'Emulator', value: 'emulator' },
+ { label: 'Simulator', value: 'simulator' },
+ ];
+ // State options for dropdown
+ const stateOptions = [
+ { label: 'All', value: undefined },
+ { label: 'Ready', value: 'ready' },
+ { label: 'Busy', value: 'busy' },
+ { label: 'Offline', value: 'offline' },
+ ];
+ // Platform options for dropdown
+ const platformOptions = [
+ { label: 'All', value: undefined },
+ { label: 'iOS', value: 'ios' },
+ { label: 'Android', value: 'android' },
+ ];
+ // For versions, use sdk from filtered devices
+ const versionOptions = Array.from(new Set(devices.map((d) => d.sdk).filter(Boolean))).map(
+ (v) => ({ label: v, value: v }),
+ );
+ // For tags, collect all unique tags from all devices
+ const allTags = Array.from(new Set(this.state.devices.flatMap((d) => d.tags || []))).filter(
+ Boolean,
+ );
+ const tagOptions = allTags.map((t) => ({ label: t, value: t }));
+ return (
+
+
+ this.setFilter({
+ state: {
+ ready: true,
+ busy: true,
+ offline: true,
+ },
+ })
+ }
+ className="w-4 h-4 text-blue-600 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600"
+ />
+
+
+
+
+ this.setFilter({
+ state: {
+ ready: true,
+ busy: false,
+ offline: false,
+ },
+ })
+ }
+ className="w-4 h-4 text-blue-600 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600"
+ />
+
+
+
+
+ this.setFilter({
+ state: {
+ ready: false,
+ busy: true,
+ offline: false,
+ },
+ })
+ }
+ className="w-4 h-4 text-blue-600 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600"
+ />
+
+
+
+
+ this.setFilter({
+ state: {
+ ready: false,
+ busy: false,
+ offline: true,
+ },
+ })
+ }
+ className="w-4 h-4 text-blue-600 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600"
+ />
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/dashboard-frontend/src/components/devicecard/DeviceCard.tsx b/dashboard-frontend/src/components/devicecard/DeviceCard.tsx
new file mode 100644
index 000000000..5e99a44ba
--- /dev/null
+++ b/dashboard-frontend/src/components/devicecard/DeviceCard.tsx
@@ -0,0 +1,304 @@
+import { Clock, MapPin, Smartphone, Tag, User2Icon } from 'lucide-react';
+import prettyMilliseconds from 'pretty-ms';
+import React, { useEffect, useMemo, useState } from 'react';
+import DeviceFarmApiService from '../../api-service';
+import { useAuth } from '../../contexts/AuthContext';
+import { IDevice } from '../../interfaces/IDevice';
+import Avatar from '../common/Avatar';
+
+// Lightweight server type for fetching hub node id
+interface MinimalServerInfo {
+ id: string;
+ isHub: boolean;
+ isOnline: boolean;
+}
+
+// Simple in-memory cache to avoid N calls from multiple cards
+let HUB_NODE_ID_CACHE: string | null = null;
+let HUB_NODE_ID_PROMISE: Promise
+ {/* Search input and Filter Button */}
+
+
+
+ {devices.length === 0 ? (
+
+ this.setFilter({ name: e.target.value })}
+ />
+
+
+
+ {showFilterPopup && (
+
+ {/* Header */}
+
+ )}
+
+
+ Filter
+
+
+ {/* Platform Dropdown */}
+ {
+ if (ios && android) return undefined;
+ if (ios) return 'ios';
+ if (android) return 'android';
+ return undefined;
+ })()}
+ options={platformOptions}
+ onChange={(v) => {
+ if (!v) this.setFilter({ platform: { ios: true, android: true } });
+ else if (v === 'ios')
+ this.setFilter({ platform: { ios: true, android: false } });
+ else if (v === 'android')
+ this.setFilter({ platform: { ios: false, android: true } });
+ }}
+ placeholder="All"
+ clearable
+ onClear={() => this.setFilter({ platform: { ios: true, android: true } })}
+ />
+ {/* Version MultiSelectDropdown */}
+ this.setFilter({ versions: vals })}
+ placeholder="All"
+ clearable
+ onClear={() => this.setFilter({ versions: [] })}
+ />
+ {/* Tags MultiSelectDropdown */}
+ this.setFilter({ tags: vals })}
+ placeholder="All"
+ clearable
+ onClear={() => this.setFilter({ tags: [] })}
+ />
+ {/* Device Type Dropdown */}
+ this.setFilter({ deviceType: v as any })}
+ placeholder="All"
+ clearable
+ onClear={() => this.setFilter({ deviceType: undefined })}
+ />
+ {/* State Dropdown */}
+ {
+ const { ready, busy, offline } = this.state.filter.state;
+ if (ready && busy && offline) return undefined;
+ if (ready) return 'ready';
+ if (busy) return 'busy';
+ if (offline) return 'offline';
+ return undefined;
+ })()}
+ options={stateOptions}
+ onChange={(v) => {
+ if (!v) {
+ this.setFilter({ state: { ready: true, busy: true, offline: true } });
+ } else if (v === 'ready') {
+ this.setFilter({ state: { ready: true, busy: false, offline: false } });
+ } else if (v === 'busy') {
+ this.setFilter({ state: { ready: false, busy: true, offline: false } });
+ } else if (v === 'offline') {
+ this.setFilter({ state: { ready: false, busy: false, offline: true } });
+ }
+ }}
+ placeholder="All"
+ clearable
+ onClear={() =>
+ this.setFilter({ state: { ready: true, busy: true, offline: true } })
+ }
+ />
+
+ {/* Footer */}
+
+
+
+
+
+ {devices.map((device) => (
+ this.fetchDevices()}
+ setDevicePollingStatus={this.setPollingStatus.bind(this)}
+ />
+ ))}
+
+ )}
+
+ {/* Top: Name, icon, and version */}
+
+ );
+};
+
+export default DeviceCard;
diff --git a/dashboard-frontend/src/components/header/Header.tsx b/dashboard-frontend/src/components/header/Header.tsx
new file mode 100644
index 000000000..0cf25f1de
--- /dev/null
+++ b/dashboard-frontend/src/components/header/Header.tsx
@@ -0,0 +1,154 @@
+import { useState, useEffect } from 'react';
+import { Devices, Build, Apps, QueryStats, GitHub, DnsRounded } from '@mui/icons-material';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { logo } from './logo';
+import { useAuth } from '../../contexts/AuthContext';
+import ProfilePopup from './ProfilePopup';
+import Avatar from '../common/Avatar';
+
+export default function Header() {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const [selectedTab, setSelectedTab] = useState('devices');
+ const [isProfileOpen, setIsProfileOpen] = useState(false);
+ const { user, logout, isAdmin, isAuthDisabled } = useAuth();
+
+ useEffect(() => {
+ if (location.pathname.startsWith('/servers/') || location.pathname.includes('/server/')) {
+ setSelectedTab('servers');
+ } else {
+ // Map the current path to the corresponding tab
+ const path = location.pathname;
+ const matchingMenuItem = menuItems.find(
+ (item) => path === item.path || (item.id === 'devices' && path === '/device-farm'),
+ );
+ if (matchingMenuItem) {
+ setSelectedTab(matchingMenuItem.id);
+ }
+ }
+ }, [location]);
+
+ const menuItems = [
+ { id: 'devices', icon: Devices, label: 'Devices', path: '/' },
+ { id: 'builds', icon: Build, label: 'Builds', path: '/builds' },
+ { id: 'apps', icon: Apps, label: 'Apps', path: '/apps' },
+ { id: 'stats', icon: QueryStats, label: 'Stats', path: '/stats' },
+ { id: 'servers', icon: DnsRounded, label: 'Servers', path: '/servers' },
+ ];
+
+ const handleNavigation = (id: string, path: string) => {
+ setSelectedTab(id);
+ if (id === 'devices' && location.pathname === '/device-farm' && !location.hash) {
+ return;
+ }
+ navigate(path);
+ };
+
+ const handleProfileOpen = () => {
+ setIsProfileOpen(true);
+ };
+
+ const handleProfileClose = () => {
+ setIsProfileOpen(false);
+ };
+
+ const handleLogout = () => {
+ logout();
+ handleProfileClose();
+ navigate('/device-farm/#/');
+ };
+
+ return (
+
+
+ {device.name || 'Unnamed Device'}
+
+ {getPlatformIcon(device.platform)}
+ {/* Version number next to icon for Android/iOS */}
+ {['android', 'ios', 'tvos'].includes(device.platform) && (
+
+ {device.sdk ? `v${device.sdk}` : 'v1.0'}
+
+ )}
+
+ {/* UDID */}
+ {device.udid}
+ {/* Device type, status row (no platform text) */}
+
+ {device.deviceType === 'real' && (
+
+ Real
+
+ )}
+ {device.deviceType !== 'real' && (
+
+ {device.platform === 'android'
+ ? 'Emulator'
+ : device.platform === 'ios' || device.platform === 'tvos'
+ ? 'Simulator'
+ : 'Emulator'}
+
+ )}
+ •
+
+ {locationTypeLabel}
+
+ •
+
+ {status.charAt(0).toUpperCase() + status.slice(1)}
+
+ {(device.platform === 'ios' ||
+ device.platform === 'tvos' ||
+ device.platform === 'android') && (
+ <>
+ •
+
+ {device.platform === 'android'
+ ? 'Booted'
+ : device.deviceType === 'real'
+ ? 'Booted'
+ : device.state}
+
+
+ )}
+
+ {/* Location, Utilization */}
+
+
+
+ {/* Tags (always on a new row) */}
+
+
+
+
+
+
+ {device.activeUser && (
+ <>
+
+ {device.tags.map((tag, idx) => (
+
+ {tag}
+
+ ))}
+
+ ) : (
+ -
+ )}
+
+
+
+ )}
+ {/* Action Buttons */}
+
+ {(!device.session_id || isAdmin() || isCurrentUser(device.activeUser?.id)) && (
+ <>
+
+ {isAdmin() && (device.userBlocked || device.busy) && (
+
+ )}
+ {isAdmin() && !device.userBlocked && !device.busy && (
+
+ )}
+
+
+ )}
+
+
+
+ );
+}
diff --git a/dashboard-frontend/src/components/header/NewHeader.tsx b/dashboard-frontend/src/components/header/NewHeader.tsx
new file mode 100644
index 000000000..b26a41b20
--- /dev/null
+++ b/dashboard-frontend/src/components/header/NewHeader.tsx
@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import DevicesIcon from '@mui/icons-material/Devices';
+import HandymanIcon from '@mui/icons-material/Handyman';
+import { Apps, BarChart } from '@mui/icons-material';
+import UserMenu from '../auth/UserMenu';
+
+const NewHeader: React.FC = () => {
+ const [selectedTab, setSelectedTab] = useState('devices');
+
+ const handleTabClick = (tab: string) => {
+ setSelectedTab(tab);
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default NewHeader;
diff --git a/dashboard-frontend/src/components/header/ProfilePopup.tsx b/dashboard-frontend/src/components/header/ProfilePopup.tsx
new file mode 100644
index 000000000..f43ee698d
--- /dev/null
+++ b/dashboard-frontend/src/components/header/ProfilePopup.tsx
@@ -0,0 +1,126 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Logout, Person, Group, Devices, People } from '@mui/icons-material';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface ProfilePopupProps {
+ isOpen: boolean;
+ onClose: () => void;
+ username: string;
+ isAdmin: boolean;
+ onLogout: () => void;
+ isAuthDisabled: boolean;
+}
+
+interface Menu {
+ route: string;
+ icon: React.ReactNode;
+ label: string;
+}
+
+export default function ProfilePopup({
+ isOpen,
+ onClose,
+ username,
+ isAdmin,
+ onLogout,
+ isAuthDisabled,
+}: ProfilePopupProps) {
+ const navigate = useNavigate();
+ const [menuItems, setMenuItems] = useState
+ {menuItems.map((menu, i) => (
+
+ ))}
+
+
+ {!isAuthDisabled && (
+
+
+
+ )}
+
+
+
+ );
+};
+
+export default Navbar;
diff --git a/dashboard-frontend/src/components/session/capabilities/capabilities.css b/dashboard-frontend/src/components/session/capabilities/capabilities.css
new file mode 100644
index 000000000..3db7fab5e
--- /dev/null
+++ b/dashboard-frontend/src/components/session/capabilities/capabilities.css
@@ -0,0 +1,35 @@
+.capabilities {
+ @apply text-[12px] flex flex-col max-w-[440px] m-[16px];
+}
+
+.tabs {
+ @apply flex;
+}
+
+.tab-header {
+ @apply cursor-pointer font-bold w-full py-2 px-4 border-b border-gray-300;
+}
+
+.tab-header.active {
+ @apply text-blue-500 border-b-2 border-blue-500;
+}
+
+.tab-content {
+ @apply h-full overflow-y-auto;
+}
+
+.key-value-pair {
+ @apply flex text-sm my-16 w-full;
+}
+
+.key {
+ @apply font-bold m-0 w-48 mr-2 whitespace-nowrap overflow-hidden overflow-ellipsis;
+}
+
+.value {
+ @apply text-gray-500 m-0 w-1/2;
+}
+
+.download {
+ @apply w-1/2 text-white bg-green-500 py-2 px-5 mr-10 ml-20 rounded text-center text-base;
+}
diff --git a/dashboard-frontend/src/components/session/capabilities/capabilities.tsx b/dashboard-frontend/src/components/session/capabilities/capabilities.tsx
new file mode 100644
index 000000000..7a77d921f
--- /dev/null
+++ b/dashboard-frontend/src/components/session/capabilities/capabilities.tsx
@@ -0,0 +1,185 @@
+import { useEffect, useState } from 'react';
+import { ISession } from '../../../interfaces/ISession';
+import './capabilities.css';
+import '../style.css';
+
+interface CapabilitiesProps {
+ session: ISession;
+}
+
+enum ActiveTab {
+ DesiredCapabilities = 'desiredCapabilities',
+ SessionCapabilities = 'sessionCapabilities',
+}
+
+function Capabilities({ session }: CapabilitiesProps) {
+ const [activeTab, setActiveTab] = useState
+
+
+
+
+ );
+ };
+
+ function getVideoComponent() {
+ if (session.hasLiveVideo) {
+ return (
+ | Key | +Value | +
|---|---|
| {key} | +
+
+ {typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value)}
+
+ |
+
+
+ );
+ }
+
+ if (session.videoRecording) {
+ return (
+ {
+ if (el) {
+ el.onfullscreenchange = () => setIsFullScreen(!!document.fullscreenElement);
+ }
+ }}
+ >
+ 
+
+
+
+
+
+ );
+ }
+
+ return (
+
+ Video recording not available
+
+ );
+ }
+
+ return (
+
+ {getVideoComponent()}
+
+
+ );
+}
+
+export default Capabilities;
diff --git a/dashboard-frontend/src/components/session/session-info/session-info.tsx b/dashboard-frontend/src/components/session/session-info/session-info.tsx
new file mode 100644
index 000000000..1d6035d78
--- /dev/null
+++ b/dashboard-frontend/src/components/session/session-info/session-info.tsx
@@ -0,0 +1,62 @@
+import { ISession } from '../../../interfaces/ISession';
+
+function SessionInfo({ session }: { session: ISession }) {
+ function runningTime(startTime: string | number | Date, endTime?: string | number | Date | null) {
+ const startDate = new Date(startTime);
+ const endDate = endTime ? new Date(endTime) : new Date();
+ const elapsedTime = Number(endDate) - Number(startDate);
+
+ const hours = Math.floor(elapsedTime / (1000 * 60 * 60));
+ const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));
+ const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);
+
+ return `${hours > 0 ? `${hours}h ` : ''}${minutes > 0 ? `${minutes}m ` : ''}${seconds}s`;
+ }
+
+ function getAppName(capabilities: string) {
+ const capabilitiesObject = JSON.parse(capabilities);
+ return capabilitiesObject?.app?.split('/').pop();
+ }
+
+ const infoItems = [
+ { label: 'Device', value: session.deviceName },
+ { label: 'Platform', value: session.devicePlatform },
+ { label: 'OS Version', value: session.deviceVersion },
+ { label: 'Status', value: session.status, type: 'status' },
+ { label: 'Start Time', value: new Date(session.startTime).toLocaleString() },
+ { label: 'Duration', value: runningTime(session.startTime, session.endTime) },
+ ];
+
+ return (
+
+
+
+ {[
+ { id: ActiveTab.DesiredCapabilities, label: 'Desired Capabilities' },
+ { id: ActiveTab.SessionCapabilities, label: 'Session Capabilities' },
+ ].map((tab) => (
+
+ ))}
+
+
+
+ {activeTab === ActiveTab.DesiredCapabilities &&
+ renderKeyValuePairs(session.desiredCapabilities)}
+ {activeTab === ActiveTab.SessionCapabilities &&
+ renderKeyValuePairs(session.sessionCapabilities)}
+
+
+
+ );
+}
+
+export default SessionInfo;
diff --git a/dashboard-frontend/src/components/session/session-logs/app-profiling/app-profiling.css b/dashboard-frontend/src/components/session/session-logs/app-profiling/app-profiling.css
new file mode 100644
index 000000000..755b4ef76
--- /dev/null
+++ b/dashboard-frontend/src/components/session/session-logs/app-profiling/app-profiling.css
@@ -0,0 +1,7 @@
+.app-profiling-container {
+ @apply !max-w-[700px] flex flex-col m-auto items-center h-full;
+}
+
+.chart-row {
+ @apply ml-[0] mr-[0] my-[25px] h-full w-full px-[50px] py-[0];
+}
diff --git a/dashboard-frontend/src/components/session/session-logs/app-profiling/app-profiling.tsx b/dashboard-frontend/src/components/session/session-logs/app-profiling/app-profiling.tsx
new file mode 100644
index 000000000..35fc97080
--- /dev/null
+++ b/dashboard-frontend/src/components/session/session-logs/app-profiling/app-profiling.tsx
@@ -0,0 +1,230 @@
+import './app-profiling.css';
+import { IAppProfilingLogs } from '../../../../interfaces/IAppProfilingLogs';
+import { ISession } from '../../../../interfaces/ISession';
+import _ from 'lodash';
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend,
+ Filler,
+} from 'chart.js';
+import { Line } from 'react-chartjs-2';
+
+const colors = {
+ profiling_chart_system_cpu_border: 'rgb(194, 230, 153)',
+ profiling_chart_system_cpu_background: 'rgba(194, 230, 153, 0.5)',
+ profiling_chart_app_cpu_border: 'rgb(49, 163, 84)',
+ profiling_chart_app_cpu_background: 'rgba(49, 163, 84, 0.5)',
+ profiling_chart_system_memory_border: 'rgb(65, 182, 196)',
+ profiling_chart_system_memory_background: 'rgba(65, 182, 196, 0.5)',
+ profiling_chart_app_memory_border: 'rgb(34, 94, 168)',
+ profiling_chart_app_memory_background: 'rgba(34, 94, 168, 0.5)',
+};
+
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ PointElement,
+ LineElement,
+ Title,
+ Tooltip,
+ Legend,
+ Filler,
+);
+
+function toMegaByte(value: any) {
+ return Math.ceil(Number(value) / 1024);
+}
+
+function getTimeDiffInSecs(startDate: Date, endDate: Date) {
+ return Math.ceil((endDate.getTime() - startDate.getTime()) / 1000);
+}
+
+/* Cpu Usage data */
+function getCpuChartOptions(appProfilingLogs: IAppProfilingLogs) {
+ return {
+ responsive: true,
+ aspectRatio: 3,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ labels: {
+ usePointStyle: true,
+ },
+ },
+ title: {
+ display: true,
+ text: `CPU [${appProfilingLogs?.device_info?.total_cpu} processors = ${
+ appProfilingLogs?.device_info?.total_cpu * 100
+ } %]`,
+ },
+ tooltip: {
+ callbacks: {
+ label: function (context: any) {
+ return context.dataset.label + ' : ' + context.parsed.y;
+ },
+ },
+ },
+ },
+ parsing: {
+ xAxisKey: 'timestamp',
+ yAxisKey: 'cpu',
+ },
+ scales: {
+ y: {
+ min: -1,
+ max: appProfilingLogs?.device_info?.total_cpu * 100,
+ },
+ },
+ };
+}
+
+function getCpuChartData(appProfilingLogs: IAppProfilingLogs) {
+ return {
+ datasets: [
+ {
+ label: 'Total CPU Usage %',
+ data: appProfilingLogs?.profiling_logs.map((v: any) => {
+ return {
+ timestamp: v.timestamp,
+ cpu: v.total_cpu_used,
+ };
+ }),
+ fill: true,
+ borderColor: colors.profiling_chart_system_cpu_border,
+ backgroundColor: colors.profiling_chart_system_cpu_background,
+ },
+ {
+ label: `${appProfilingLogs?.device_info?.app_package} %`,
+ data: appProfilingLogs?.profiling_logs.map((v: any) => {
+ return {
+ timestamp: v.timestamp,
+ cpu: v.cpu,
+ };
+ }),
+ fill: true,
+ borderColor: colors.profiling_chart_app_cpu_border,
+ backgroundColor: colors.profiling_chart_app_cpu_background,
+ },
+ ],
+ };
+}
+
+/* Memory usage data */
+function getMemoryUsageChartOptions(appProfilingLogs: IAppProfilingLogs) {
+ const totalMemoryInMB = toMegaByte(appProfilingLogs?.device_info?.total_memory);
+ return {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top' as const,
+ labels: {
+ usePointStyle: true,
+ },
+ },
+ title: {
+ display: true,
+ text: `MEMORY [${totalMemoryInMB} MB]`,
+ },
+ tooltip: {
+ callbacks: {
+ label: function (context: any) {
+ return context.dataset.label + ' : ' + context.parsed.y;
+ },
+ },
+ },
+ },
+ parsing: {
+ xAxisKey: 'timestamp',
+ yAxisKey: 'memory',
+ },
+ aspectRatio: 3,
+ scales: {
+ y: {
+ min: 0,
+ max: Math.ceil(totalMemoryInMB / 500) * 500, //round to nearest five hundred
+ ticks: {
+ stepSize: 500,
+ },
+ },
+ },
+ };
+}
+
+function getMemoryChartData(appProfilingLogs: IAppProfilingLogs) {
+ return {
+ datasets: [
+ {
+ label: 'Total Memory Usage (MB)',
+ data: appProfilingLogs?.profiling_logs.map((data) => {
+ return {
+ timestamp: data.timestamp,
+ memory: Math.ceil(Number(data.total_memory_used) / 1024),
+ };
+ }),
+ fill: true,
+ borderColor: colors.profiling_chart_system_memory_border,
+ backgroundColor: colors.profiling_chart_system_memory_background,
+ },
+ {
+ label: `${appProfilingLogs?.device_info?.app_package} (MB)`,
+ data: appProfilingLogs?.profiling_logs.map((data) => {
+ return {
+ timestamp: data.timestamp,
+ memory: toMegaByte(data.memory),
+ };
+ }),
+ fill: true,
+ borderColor: colors.profiling_chart_app_memory_border,
+ backgroundColor: colors.profiling_chart_app_memory_background,
+ },
+ ],
+ };
+}
+
+function useProfiling(session: ISession, appProfiling: IAppProfilingLogs): IAppProfilingLogs {
+ const processedData = appProfiling?.profiling_logs.map((data: any) => {
+ return {
+ ...data,
+ timestamp: getTimeDiffInSecs(new Date(session.createdAt), new Date(data.timestamp)) + 's',
+ };
+ });
+ return {
+ device_info: appProfiling?.device_info,
+ profiling_logs: _.uniqBy(processedData, 'timestamp'),
+ };
+}
+
+export default function AppProfiling(props: {
+ session: ISession;
+ appProfilingLogs: IAppProfilingLogs;
+}) {
+ const { appProfilingLogs, session } = props;
+
+ const processedData = appProfilingLogs && useProfiling(session, appProfilingLogs);
+ return (
+
+ {infoItems.map((item) => (
+
+
+
+ ))}
+ {item.label}
+ {item.type === 'status' ? (
+
+
+ {item.value.toUpperCase()}
+
+
+ ) : (
+
+ {item.value}
+
+ )}
+
+ {appProfilingLogs && (
+ <>
+
+ );
+}
diff --git a/dashboard-frontend/src/components/session/session-logs/device-logs/device-log.tsx b/dashboard-frontend/src/components/session/session-logs/device-logs/device-log.tsx
new file mode 100644
index 000000000..f70ad1e6f
--- /dev/null
+++ b/dashboard-frontend/src/components/session/session-logs/device-logs/device-log.tsx
@@ -0,0 +1,174 @@
+import debounce from 'lodash/debounce';
+import { ArrowDown, ArrowUp, Search } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { IDeviceLogs } from '../../../../interfaces/IDeviceLogs';
+
+interface DeviceLogsProps {
+ deviceLogs: IDeviceLogs[] | null;
+}
+
+function DeviceLogs({ deviceLogs }: DeviceLogsProps) {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [debouncedQuery, setDebouncedQuery] = useState('');
+ const [currentMatchIndex, setCurrentMatchIndex] = useState(0);
+ const containerRef = useRef
+
+
+
+
+ )}
+
+
+ );
+}
+
+export default DeviceLogs;
diff --git a/dashboard-frontend/src/components/session/session-logs/session-logs.tsx b/dashboard-frontend/src/components/session/session-logs/session-logs.tsx
new file mode 100644
index 000000000..28a3c257d
--- /dev/null
+++ b/dashboard-frontend/src/components/session/session-logs/session-logs.tsx
@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react';
+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 { ISession } from '../../../interfaces/ISession';
+import AppProfiling from './app-profiling/app-profiling';
+import { IAppProfilingLogs } from '../../../interfaces/IAppProfilingLogs';
+
+function SessionLogs(props: { session: ISession }) {
+ const { session } = props;
+ const [url, setBaseUrl] = useState
+
+
+
+
+
+ {matches.length > 0 && (
+ <>
+
+
+ handleSearchChange(e.target.value)}
+ />
+
+ {currentMatchIndex + 1}/{matches.length}
+
+
+
+
+ )}
+
+ {deviceLogs && deviceLogs.length ? (
+
+
+ {deviceLogs.map((log, i) => (
+
+ ) : (
+
+
+ {i + 1}
+
+
+ {highlightText(log.message, i)}
+
+
+ ))}
+
+ Device log not available
+
+ )}
+
+
+ );
+}
+
+export default SessionLogs;
diff --git a/dashboard-frontend/src/components/session/session-logs/text-logs/text-logs.tsx b/dashboard-frontend/src/components/session/session-logs/text-logs/text-logs.tsx
new file mode 100644
index 000000000..996b77fcd
--- /dev/null
+++ b/dashboard-frontend/src/components/session/session-logs/text-logs/text-logs.tsx
@@ -0,0 +1,460 @@
+import { Clock, X } from 'lucide-react';
+import { Highlight, themes, type Language } from 'prism-react-renderer';
+import { useState } from 'react';
+import { ISessionLogs } from '../../../../interfaces/ISessionLogs';
+import '../../style.css';
+
+interface TextLogsProps {
+ sessionLogs: ISessionLogs[];
+ showImages: boolean;
+ showErrorsOnly: boolean;
+ baseUrl: any;
+}
+
+const isValidJSON = (str: string): boolean => {
+ if (typeof str !== 'string') return false;
+ try {
+ JSON.parse(str);
+ return true;
+ } catch (e) {
+ return false;
+ }
+};
+
+const isXMLLike = (str: string): boolean => {
+ if (typeof str !== 'string') return false;
+ return /^\s*<[^>]+>/.test(str);
+};
+
+const formatXML = (xml: string): string => {
+ let formatted = '';
+ const reg = /(>)(<)(\/*)/g;
+ xml = xml.replace(reg, '$1\r\n$2$3');
+ let pad = 0;
+
+ xml.split('\r\n').forEach((node) => {
+ let indent = 0;
+ if (node.match(/.+<\/\w[^>]*>$/)) {
+ indent = 0;
+ } else if (node.match(/^<\/\w/)) {
+ if (pad !== 0) pad -= 1;
+ } else if (node.match(new RegExp('^<\\w[^>]*[^/]>.*$'))) {
+ indent = 1;
+ } else {
+ indent = 0;
+ }
+
+ let padding = '';
+ for (let i = 0; i < pad; i++) padding += ' ';
+
+ formatted += padding + node + '\r\n';
+ pad += indent;
+ });
+
+ return formatted.trim();
+};
+
+const formatData = (data: any): any => {
+ if (!data) return '';
+
+ if (typeof data === 'object') {
+ return JSON.stringify(data, null, 2);
+ }
+
+ try {
+ if (isValidJSON(data)) {
+ return JSON.stringify(JSON.parse(data), null, 2);
+ }
+ if (isXMLLike(data)) {
+ return formatXML(data);
+ }
+ return data;
+ } catch (e) {
+ return data;
+ }
+};
+
+interface Token {
+ types: string[];
+ content: string;
+ empty?: boolean;
+}
+
+interface LineInputProps {
+ line: Token[];
+ key?: number;
+ style?: React.CSSProperties;
+ className?: string;
+}
+
+interface TokenInputProps {
+ token: Token;
+ key?: number;
+ style?: React.CSSProperties;
+ className?: string;
+}
+
+const CodeBlock = ({ code, language }: { code: string; language: string }) => {
+ // Helper function to check if a line contains error-related content
+ const isErrorLine = (line: string): boolean => {
+ const errorKeywords = ['error', 'exception', 'failed', 'failure', 'fatal', 'crash'];
+ return errorKeywords.some((keyword) => line.toLowerCase().includes(keyword));
+ };
+
+ return (
+
+
+
+
+
+
+
+ {/* Log Controls */}
+ {activeTab === 'text-logs' && (
+
+
+
+
+ )}
+
+ {/* Log Content */}
+
+ {activeTab === 'text-logs' && (
+
+
+ {tokens.map((line, i) => {
+ const lineContent = line.map((token) => token.content).join('');
+ const isError = isErrorLine(lineContent);
+
+ return (
+
+
+ {i + 1}
+
+
+ {line.map((token, key) => (
+
+ ))}
+
+
+ );
+ })}
+
+ )}
+
+
+ );
+ }
+
+ if (typeof data === 'object' && data !== null) {
+ return (
+
+
+ {data.stacktrace && (
+
+
+ {data.error}
+ {data.message}
+
+
+ )}
+
+
+ );
+ }
+
+ if (isXMLLike(formattedData)) {
+ return (
+
+
+ );
+ }
+
+ if (isValidJSON(formattedData)) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ {String(formattedData)}
+
+ );
+};
+
+interface ImageModalProps {
+ src: string;
+ alt: string;
+ onClose: () => void;
+}
+
+const ImageModal = ({ src, alt, onClose }: ImageModalProps) => {
+ return (
+
+
+ );
+};
+
+function TextLogs({ sessionLogs, showImages, showErrorsOnly, baseUrl }: TextLogsProps) {
+ const [expandedIndex, setExpandedIndex] = useState
+
+ 
+
+
+ {sessionLogs
+ .sort((a, b) => (a.createdAt > b.createdAt ? 1 : -1))
+ .filter((sessionLog) => (showErrorsOnly ? hasError(sessionLog.response) : true))
+ .map((sessionLog, index, array) => {
+ const currentTime = new Date(sessionLog.createdAt);
+ const nextTime = index < array.length - 1 ? new Date(array[index + 1].createdAt) : null;
+ const timeDifference = nextTime ? nextTime.getTime() - currentTime.getTime() : null;
+ const formattedBody = sessionLog.body ? JSON.parse(sessionLog.body) : null;
+ const formattedResponse = sessionLog.response
+ ? JSON.parse(sessionLog.response)?.value
+ : null;
+ const isExpanded = expandedIndex === index;
+ const isError = hasError(sessionLog.response);
+
+ return (
+
+
+ {selectedImage && (
+
+
+
+ {isExpanded && (
+
+ );
+ })}
+
+
+ )}
+
+ {showImages && sessionLog.screenshot && (
+
+
+
+
+ )}
+
+
+
+
+
+
+ {!isEmptyObject(formattedBody) && (
+
+ Response
+
+
+
+
+
+ )}
+
+ Parameters
+
+
+
+
+// 
navigate(deviceFarmRoute)}
+// />
+//
+// );
+// };
+
+// export default Sidebar;
diff --git a/dashboard-frontend/src/components/stats/trends.tsx b/dashboard-frontend/src/components/stats/trends.tsx
new file mode 100644
index 000000000..537b14c65
--- /dev/null
+++ b/dashboard-frontend/src/components/stats/trends.tsx
@@ -0,0 +1,763 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import {
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+ PieChart,
+ Pie,
+ Cell,
+ LineChart,
+ Line,
+ AreaChart,
+ Area,
+ CartesianGrid,
+} from 'recharts';
+import {
+ BarChart2,
+ PieChart as PieChartIcon,
+ Clock,
+ Smartphone,
+ Activity,
+ ChevronDown,
+ Search,
+ X,
+} from 'lucide-react';
+import DeviceFarmApiService from '../../api-service';
+import { IBuild } from '../../interfaces/IBuild';
+import { ISession } from '../../interfaces/ISession';
+import { format, parse, isValid } from 'date-fns';
+
+const COLORS = {
+ success: ['#22c55e', '#15803d'], // Green gradient for Pass
+ warning: ['#fbbf24', '#d97706'], // Yellow gradient for Unmarked
+ danger: ['#ef4444', '#b91c1c'], // Red gradient for Fail
+ accent: [
+ ['#8b5cf6', '#6d28d9'], // Purple gradient
+ ['#ec4899', '#be185d'], // Pink gradient
+ ['#06b6d4', '#0891b2'], // Cyan gradient
+ ['#10b981', '#047857'], // Emerald gradient
+ ['#f59e0b', '#d97706'], // Amber gradient
+ ],
+};
+
+const gradientDefs = (
+
+// {renderSidebarButton(
+// pathname === deviceFarmRoute,
+// deviceFarmRoute,
+// DevicesIcon,
+// DevicesSelectedIcon,
+// 'Devices',
+// )}
+// {renderSidebarButton(
+// pathname.startsWith(buildsRoute),
+// buildsRoute,
+// BuildsIcon,
+// BuildsSelectedIcon,
+// 'Builds',
+// )}
+//
+//
+ {/* Gradient overlay */}
+
+
+ {/* Glow effect */}
+
+
+ {/* Content */}
+
+);
+
+const CustomDropdown = ({
+ value,
+ onChange,
+ options,
+}: {
+ value: string;
+ onChange: (value: string) => void;
+ options: { value: string; label: string }[];
+}) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const [searchTerm, setSearchTerm] = useState('');
+
+ const selectedOption = options.find((opt) => opt.value === value);
+
+ const filteredOptions = options.filter((option) =>
+ option.label.toLowerCase().includes(searchTerm.toLowerCase()),
+ );
+
+ return (
+
+
+ {Icon && (
+
+ {children}
+
+
+ {Icon && (
+
+
+ {children}
+
+ {/* Selected Value Button */}
+
+
+ {/* Dropdown Panel */}
+ {isOpen && (
+
+ );
+};
+
+const safeParseDate = (dateString: string): Date | null => {
+ if (!dateString) return null;
+
+ try {
+ const date = new Date(dateString);
+ return isValid(date) ? date : null;
+ } catch {
+ return null;
+ }
+};
+
+const formatDate = (dateString: string): string => {
+ const parsedDate = safeParseDate(dateString);
+ return parsedDate instanceof Date ? format(parsedDate, 'dd/MM/yyyy HH:mm') : dateString;
+};
+
+const formatDateOnly = (dateString: string): string => {
+ const parsedDate = safeParseDate(dateString);
+ return parsedDate instanceof Date ? format(parsedDate, 'dd/MM/yyyy') : dateString;
+};
+
+const chartStyle = {
+ color: '#ffffff',
+ fontFamily: 'Inter, system-ui, sans-serif',
+};
+
+const modernChartConfig = {
+ tooltipStyle: {
+ backgroundColor: 'rgba(255, 255, 255, 0.95)',
+ backdropFilter: 'blur(8px)',
+ border: '1px solid rgba(255, 255, 255, 0.2)',
+ boxShadow: '0 8px 32px rgba(0, 0, 0, 0.2)',
+ padding: '12px 16px',
+ fontFamily: 'Inter, system-ui, sans-serif',
+ fontSize: '13px',
+ color: '#1f2937',
+ },
+ axisStyle: {
+ stroke: '#6b7280',
+ fontSize: '12px',
+ fontWeight: 500,
+ fontFamily: 'Inter, system-ui, sans-serif',
+ },
+ gridStyle: {
+ stroke: 'rgba(75, 85, 99, 0.15)',
+ strokeDasharray: '6 6',
+ },
+ legendStyle: {
+ fontSize: '13px',
+ fontWeight: 500,
+ fontFamily: 'Inter, system-ui, sans-serif',
+ },
+};
+
+export function EnhancedTrends() {
+ const [builds, setBuilds] = useState
+ {/* Search Input */}
+
+ )}
+
+
+
+ {/* Options List */}
+
+ {filteredOptions.length === 0 ? (
+
+ No builds found
+ ) : (
+ filteredOptions.map((option) => (
+
+ ))
+ )}
+
+ {/* Test Trends - Full Width */}
+
+
+
+ {gradientDefs}
+ [`${value} tests`, name]}
+ labelStyle={{ color: '#4b5563' }}
+ />
+
+
+
+
+
+ {/* Build Statistics and Device Usage */}
+
+ );
+}
+
+export default EnhancedTrends;
diff --git a/dashboard-frontend/src/components/table-filter/table-filter.tsx b/dashboard-frontend/src/components/table-filter/table-filter.tsx
new file mode 100644
index 000000000..392abcb2e
--- /dev/null
+++ b/dashboard-frontend/src/components/table-filter/table-filter.tsx
@@ -0,0 +1,173 @@
+import { useState, useEffect, useRef } from 'react';
+import { Filter, Clock, ChevronDown, X } from 'lucide-react';
+
+interface FilterCondition {
+ column: string;
+ operator: string;
+ value: string;
+}
+
+interface FilterData {
+ testName: string;
+ platform: string;
+ device: string;
+ status: string;
+}
+
+interface TableFilterProps {
+ columns: { key: string; label: string }[];
+ data: FilterData[];
+ onFilterChange: (filters: FilterCondition[]) => void;
+}
+
+const OPERATORS = ['=', '!=', 'contains', 'starts with', 'ends with'];
+
+export default function TableFilter({ columns, data, onFilterChange }: TableFilterProps) {
+ const [isOpen, setIsOpen] = useState(false);
+ const [timeRange, setTimeRange] = useState('24 hours');
+ const [filters, setFilters] = useState
+
+ ({
+ value: build.id,
+ label: build.name || build.id,
+ }))}
+ />
+
+
+ {gradientDefs}
+ `${name} ${(percent * 100).toFixed(0)}%`}
+ >
+ {getPieData.map((entry, index) => (
+ |
+ ))}
+
+ [`${value} tests`, name]}
+ labelStyle={{ color: '#4b5563' }}
+ />
+
+
+
+
+
+
+
+
+ {gradientDefs}
+ `${name} ${(percent * 100).toFixed(0)}%`}
+ >
+ {getDeviceUsageData.map((entry, index) => (
+ |
+ ))}
+
+ [`${value} tests`, 'Device Usage']}
+ labelStyle={{ color: '#4b5563' }}
+ />
+
+
+
+
+
+
+ {/* Test Duration Trend and Test Count Over Time */}
+
+
+
+
+
+
+
+
+ [
+ `${value} minutes (${props.payload.count} tests)`,
+ 'Average Duration',
+ ]}
+ labelStyle={{ color: '#4b5563' }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ [`${value} tests`, 'Test Count']}
+ labelStyle={{ color: '#4b5563' }}
+ />
+
+
+
+
+
+
+ {/* Test Duration Distribution and Device Pass Percentage */}
+
+
+
+
+ {gradientDefs}
+ [`${value} tests`, 'Duration Range']}
+ cursor={{ fill: 'rgba(255, 255, 255, 0.02)' }}
+ labelStyle={{ color: '#4b5563' }}
+ />
+
+
+
+
+
+
+
+ {gradientDefs}
+ `${value}%`}
+ />
+ [
+ `${value.toFixed(1)}% (${props.payload.total} tests)`,
+ 'Pass Rate',
+ ]}
+ cursor={{ fill: 'rgba(255, 255, 255, 0.02)' }}
+ labelStyle={{ color: '#4b5563' }}
+ />
+
+ {getDeviceSuccessRate.map((entry, index) => (
+ | = 80
+ ? '#passGradient'
+ : entry.successRate >= 60
+ ? '#unmarkedGradient'
+ : '#failGradient'
+ })`}
+ style={{
+ filter: `drop-shadow(0px 0px 10px ${
+ entry.successRate >= 80
+ ? 'rgba(34, 197, 94, 0.2)'
+ : entry.successRate >= 60
+ ? 'rgba(251, 191, 36, 0.2)'
+ : 'rgba(239, 68, 68, 0.2)'
+ })`,
+ }}
+ />
+ ))}
+ |
+
+
+
+
+
+
+
+ {isOpen && (
+
+ );
+}
diff --git a/dashboard-frontend/src/components/ui/tag-input.tsx b/dashboard-frontend/src/components/ui/tag-input.tsx
new file mode 100644
index 000000000..acad07f59
--- /dev/null
+++ b/dashboard-frontend/src/components/ui/tag-input.tsx
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { TagsInput } from 'react-tag-input-component';
+
+interface iTag {
+ tags: string[];
+ onSave: (tags: string[]) => void;
+}
+
+export const TagInput = ({ tags, onSave }: iTag) => {
+ const [_tags, setTags] = useState(tags);
+ const [tagsInEdit, setTagsInEdit] = useState('');
+
+ return (
+
+ {filters.map((filter, index) => (
+
+ )}
+
+
+
+
+ ))}
+
+
+ handleFilterChange(index, 'value', e.target.value)}
+ onFocus={() => setShowValueDropdown(index)}
+ className="w-full px-2 py-1.5 bg-gray-900 border border-gray-700 text-sm text-gray-300"
+ placeholder="Value"
+ />
+ {showValueDropdown === index &&
+ uniqueValues[filter.column] &&
+ uniqueValues[filter.column].size > 0 && (
+
+
+
+ {Array.from(uniqueValues[filter.column]).map((value) => (
+
+ ))}
+
+ )}
+
+ {
+ setTagsInEdit('');
+ setTags(newtags);
+ }}
+ onKeyUp={(e) => {
+ if (e.key.toString().length === 1) {
+ setTagsInEdit(tagsInEdit + e.key);
+ }
+ }}
+ name="device tags"
+ placeHolder="Add tags and press enter"
+ classNames={{
+ tag: '!bg-gray-700 text-gray-300 text-xs font-medium me-2 rounded',
+ input:
+ 'text-gray-700 h-3 !text-sm text-xs font-medium border-transparent focus:border-transparent focus:ring-0 !w-[100%]',
+ }}
+ />
+
+
+ );
+};
diff --git a/dashboard-frontend/src/contexts/AuthContext.tsx b/dashboard-frontend/src/contexts/AuthContext.tsx
new file mode 100644
index 000000000..74a1af383
--- /dev/null
+++ b/dashboard-frontend/src/contexts/AuthContext.tsx
@@ -0,0 +1,128 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import AuthService, { User } from '../services/AuthService';
+
+// Auth context interface
+interface AuthContextType {
+ user: User | null;
+ loading: boolean;
+ error: string | null;
+ login: (username: string, password: string) => PromiseLoading...
;
+ }
+
+ return (
+
+
+ {error}
+
+ )}
+
+ {successMessage && (
+ setSuccessMessage('')}>
+ {successMessage}
+
+ )}
+
+
+
+
+
Admin Dashboard
+ + {error && ( +Teams
+ +
+