mirror of
https://github.com/johndoe6345789/docker-swarm-termina.git
synced 2026-05-01 00:56:01 +00:00
- Added backend API endpoints for start/stop/restart/remove container operations - Updated frontend API client with new container control methods - Added start/stop/restart/remove buttons to ContainerCard with status-based visibility - Added confirmation dialog for container removal - Improved AppBar responsiveness with icon-only buttons on mobile screens - Enhanced TerminalModal responsiveness: * Fullscreen mode on mobile devices * Stacked input layout on small screens * Icon-only send button on mobile * Responsive font sizes and spacing - Added responsive typography using clamp() for fluid scaling - Improved spacing and layout for mobile devices: * Reduced padding on small screens * Responsive grid layout for container metadata * Adaptive title sizes - Added real-time notifications with Snackbar for operation feedback https://claude.ai/code/session_01UFVy14uUD5Q7DjkUSgUFXC
205 lines
4.9 KiB
TypeScript
205 lines
4.9 KiB
TypeScript
export const API_BASE_URL =
|
|
typeof window !== 'undefined' && (window as any).__ENV__?.NEXT_PUBLIC_API_URL
|
|
? (window as any).__ENV__.NEXT_PUBLIC_API_URL
|
|
: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000';
|
|
|
|
export interface Container {
|
|
id: string;
|
|
name: string;
|
|
image: string;
|
|
status: string;
|
|
uptime: string;
|
|
}
|
|
|
|
export interface AuthResponse {
|
|
success: boolean;
|
|
token?: string;
|
|
username?: string;
|
|
message?: string;
|
|
}
|
|
|
|
export interface ContainersResponse {
|
|
containers: Container[];
|
|
}
|
|
|
|
class ApiClient {
|
|
private token: string | null = null;
|
|
|
|
setToken(token: string | null) {
|
|
this.token = token;
|
|
if (token) {
|
|
localStorage.setItem('auth_token', token);
|
|
} else {
|
|
localStorage.removeItem('auth_token');
|
|
}
|
|
}
|
|
|
|
getToken(): string | null {
|
|
if (!this.token && typeof window !== 'undefined') {
|
|
this.token = localStorage.getItem('auth_token');
|
|
}
|
|
return this.token;
|
|
}
|
|
|
|
async login(username: string, password: string): Promise<AuthResponse> {
|
|
const response = await fetch(`${API_BASE_URL}/api/auth/login`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ username, password }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success && data.token) {
|
|
this.setToken(data.token);
|
|
}
|
|
return data;
|
|
}
|
|
|
|
async logout(): Promise<void> {
|
|
const token = this.getToken();
|
|
if (token) {
|
|
await fetch(`${API_BASE_URL}/api/auth/logout`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
},
|
|
});
|
|
}
|
|
this.setToken(null);
|
|
}
|
|
|
|
async getContainers(): Promise<Container[]> {
|
|
const token = this.getToken();
|
|
if (!token) {
|
|
throw new Error('Not authenticated');
|
|
}
|
|
|
|
const response = await fetch(`${API_BASE_URL}/api/containers`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
if (response.status === 401) {
|
|
this.setToken(null);
|
|
throw new Error('Session expired');
|
|
}
|
|
throw new Error('Failed to fetch containers');
|
|
}
|
|
|
|
const data: ContainersResponse = await response.json();
|
|
return data.containers;
|
|
}
|
|
|
|
async executeCommand(containerId: string, command: string): Promise<any> {
|
|
const token = this.getToken();
|
|
if (!token) {
|
|
throw new Error('Not authenticated');
|
|
}
|
|
|
|
const response = await fetch(`${API_BASE_URL}/api/containers/${containerId}/exec`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ command }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to execute command');
|
|
}
|
|
|
|
return response.json();
|
|
}
|
|
|
|
async startContainer(containerId: string): Promise<any> {
|
|
const token = this.getToken();
|
|
if (!token) {
|
|
throw new Error('Not authenticated');
|
|
}
|
|
|
|
const response = await fetch(`${API_BASE_URL}/api/containers/${containerId}/start`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to start container');
|
|
}
|
|
|
|
return response.json();
|
|
}
|
|
|
|
async stopContainer(containerId: string): Promise<any> {
|
|
const token = this.getToken();
|
|
if (!token) {
|
|
throw new Error('Not authenticated');
|
|
}
|
|
|
|
const response = await fetch(`${API_BASE_URL}/api/containers/${containerId}/stop`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to stop container');
|
|
}
|
|
|
|
return response.json();
|
|
}
|
|
|
|
async restartContainer(containerId: string): Promise<any> {
|
|
const token = this.getToken();
|
|
if (!token) {
|
|
throw new Error('Not authenticated');
|
|
}
|
|
|
|
const response = await fetch(`${API_BASE_URL}/api/containers/${containerId}/restart`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to restart container');
|
|
}
|
|
|
|
return response.json();
|
|
}
|
|
|
|
async removeContainer(containerId: string): Promise<any> {
|
|
const token = this.getToken();
|
|
if (!token) {
|
|
throw new Error('Not authenticated');
|
|
}
|
|
|
|
const response = await fetch(`${API_BASE_URL}/api/containers/${containerId}`, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to remove container');
|
|
}
|
|
|
|
return response.json();
|
|
}
|
|
}
|
|
|
|
export const apiClient = new ApiClient();
|