450 lines
15 KiB
Dart
450 lines
15 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||
import 'package:it0_app/l10n/app_localizations.dart';
|
||
import '../../../../core/config/api_endpoints.dart';
|
||
import '../../../../core/network/dio_client.dart';
|
||
import '../../../../core/theme/app_colors.dart';
|
||
import '../../../../core/widgets/empty_state.dart';
|
||
import '../../../../core/widgets/error_view.dart';
|
||
import '../../../../core/widgets/status_badge.dart';
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Provider – fetch servers from inventory API
|
||
// ---------------------------------------------------------------------------
|
||
|
||
/// Fetches the full list of servers from the backend.
|
||
final serversProvider =
|
||
FutureProvider<List<Map<String, dynamic>>>((ref) async {
|
||
final dio = ref.watch(dioClientProvider);
|
||
final response = await dio.get(ApiEndpoints.servers);
|
||
final data = response.data;
|
||
if (data is List) {
|
||
return data.cast<Map<String, dynamic>>();
|
||
}
|
||
if (data is Map && data.containsKey('items')) {
|
||
return (data['items'] as List).cast<Map<String, dynamic>>();
|
||
}
|
||
return [];
|
||
});
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Servers page – ConsumerStatefulWidget (needs local filter state)
|
||
// ---------------------------------------------------------------------------
|
||
|
||
class ServersPage extends ConsumerStatefulWidget {
|
||
const ServersPage({super.key});
|
||
|
||
@override
|
||
ConsumerState<ServersPage> createState() => _ServersPageState();
|
||
}
|
||
|
||
class _ServersPageState extends ConsumerState<ServersPage> {
|
||
String _envFilter = 'all';
|
||
|
||
static const _environments = ['all', 'dev', 'staging', 'prod'];
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final serversAsync = ref.watch(serversProvider);
|
||
|
||
return Scaffold(
|
||
appBar: AppBar(
|
||
title: Text(AppLocalizations.of(context).serversPageTitle),
|
||
),
|
||
body: RefreshIndicator(
|
||
onRefresh: () async => ref.invalidate(serversProvider),
|
||
child: Column(
|
||
children: [
|
||
// Environment filter chips
|
||
_buildFilterBar(),
|
||
// Server list
|
||
Expanded(
|
||
child: serversAsync.when(
|
||
data: (servers) {
|
||
final filtered = _filterServers(servers);
|
||
if (filtered.isEmpty) {
|
||
return EmptyState(
|
||
icon: Icons.dns_outlined,
|
||
title: AppLocalizations.of(context).noServersTitle,
|
||
subtitle: AppLocalizations.of(context).noServersFiltered,
|
||
);
|
||
}
|
||
return ListView.builder(
|
||
padding: const EdgeInsets.all(12),
|
||
itemCount: filtered.length,
|
||
itemBuilder: (context, index) {
|
||
final server = filtered[index];
|
||
return _ServerCard(
|
||
server: server,
|
||
onTap: () => _showServerDetails(context, server),
|
||
);
|
||
},
|
||
);
|
||
},
|
||
loading: () =>
|
||
const Center(child: CircularProgressIndicator()),
|
||
error: (e, _) => ErrorView(
|
||
error: e,
|
||
onRetry: () => ref.invalidate(serversProvider),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
// ---- Environment filter bar -----------------------------------------------
|
||
|
||
Widget _buildFilterBar() {
|
||
return SingleChildScrollView(
|
||
scrollDirection: Axis.horizontal,
|
||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||
child: Row(
|
||
children: _environments.map((env) {
|
||
final selected = _envFilter == env;
|
||
return Padding(
|
||
padding: const EdgeInsets.only(right: 8),
|
||
child: FilterChip(
|
||
label: Text(env == 'all' ? AppLocalizations.of(context).allEnvironments : env),
|
||
selected: selected,
|
||
onSelected: (_) => setState(() => _envFilter = env),
|
||
selectedColor: _envColor(env).withOpacity(0.25),
|
||
checkmarkColor: _envColor(env),
|
||
labelStyle: TextStyle(
|
||
color: selected ? _envColor(env) : AppColors.textSecondary,
|
||
fontWeight: selected ? FontWeight.w600 : FontWeight.normal,
|
||
),
|
||
side: BorderSide(
|
||
color: selected
|
||
? _envColor(env).withOpacity(0.5)
|
||
: AppColors.surfaceLight,
|
||
),
|
||
backgroundColor: AppColors.surface,
|
||
),
|
||
);
|
||
}).toList(),
|
||
),
|
||
);
|
||
}
|
||
|
||
List<Map<String, dynamic>> _filterServers(
|
||
List<Map<String, dynamic>> servers) {
|
||
if (_envFilter == 'all') return servers;
|
||
return servers.where((s) {
|
||
final env = (s['environment'] as String? ?? '').toLowerCase();
|
||
return env == _envFilter;
|
||
}).toList();
|
||
}
|
||
|
||
// ---- Server details bottom sheet ------------------------------------------
|
||
|
||
void _showServerDetails(
|
||
BuildContext context, Map<String, dynamic> server) {
|
||
final hostname =
|
||
server['hostname'] as String? ?? server['name'] as String? ?? AppLocalizations.of(context).unknownLabel;
|
||
final ip = server['ip_address'] as String? ??
|
||
server['ipAddress'] as String? ??
|
||
server['ip'] as String? ??
|
||
'N/A';
|
||
final env = server['environment'] as String? ?? 'unknown';
|
||
final status = server['status'] as String? ?? 'unknown';
|
||
final role = server['role'] as String? ?? '';
|
||
final os = server['os'] as String? ??
|
||
server['operating_system'] as String? ??
|
||
'';
|
||
final cpu = server['cpu'] as String? ?? server['cpu_cores']?.toString() ?? '';
|
||
final memory =
|
||
server['memory'] as String? ?? server['memory_gb']?.toString() ?? '';
|
||
final region = server['region'] as String? ?? '';
|
||
final provider = server['provider'] as String? ??
|
||
server['cloud_provider'] as String? ??
|
||
'';
|
||
final createdAt =
|
||
server['created_at'] as String? ?? server['createdAt'] as String? ?? '';
|
||
|
||
showModalBottomSheet(
|
||
context: context,
|
||
isScrollControlled: true,
|
||
backgroundColor: AppColors.surface,
|
||
shape: const RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
|
||
),
|
||
builder: (context) => DraggableScrollableSheet(
|
||
initialChildSize: 0.55,
|
||
minChildSize: 0.3,
|
||
maxChildSize: 0.85,
|
||
expand: false,
|
||
builder: (context, scrollController) => SingleChildScrollView(
|
||
controller: scrollController,
|
||
padding: const EdgeInsets.fromLTRB(20, 12, 20, 32),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// Handle bar
|
||
Center(
|
||
child: Container(
|
||
width: 40,
|
||
height: 4,
|
||
decoration: BoxDecoration(
|
||
color: AppColors.textMuted,
|
||
borderRadius: BorderRadius.circular(2),
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(height: 16),
|
||
|
||
// Hostname + status
|
||
Row(
|
||
children: [
|
||
Expanded(
|
||
child: Text(
|
||
hostname,
|
||
style: const TextStyle(
|
||
fontSize: 20, fontWeight: FontWeight.bold),
|
||
),
|
||
),
|
||
StatusBadge(status: status),
|
||
],
|
||
),
|
||
const SizedBox(height: 16),
|
||
|
||
// Environment + Role row
|
||
Row(
|
||
children: [
|
||
_EnvironmentTag(environment: env),
|
||
if (role.isNotEmpty) ...[
|
||
const SizedBox(width: 8),
|
||
StatusBadge(status: role, color: AppColors.info),
|
||
],
|
||
],
|
||
),
|
||
const SizedBox(height: 20),
|
||
|
||
// Detail rows
|
||
_DetailRow(label: AppLocalizations.of(context).ipAddressLabel, value: ip),
|
||
if (os.isNotEmpty) _DetailRow(label: AppLocalizations.of(context).osLabel, value: os),
|
||
if (cpu.isNotEmpty) _DetailRow(label: 'CPU', value: cpu),
|
||
if (memory.isNotEmpty)
|
||
_DetailRow(label: AppLocalizations.of(context).memoryLabel, value: memory),
|
||
if (region.isNotEmpty)
|
||
_DetailRow(label: AppLocalizations.of(context).regionLabel, value: region),
|
||
if (provider.isNotEmpty)
|
||
_DetailRow(label: AppLocalizations.of(context).cloudProviderLabel, value: provider),
|
||
if (createdAt.isNotEmpty)
|
||
_DetailRow(label: AppLocalizations.of(context).createdAtLabel, value: createdAt),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
// ---- Helpers --------------------------------------------------------------
|
||
|
||
static Color _envColor(String env) {
|
||
switch (env.toLowerCase()) {
|
||
case 'dev':
|
||
return AppColors.info;
|
||
case 'staging':
|
||
return AppColors.warning;
|
||
case 'prod':
|
||
return AppColors.error;
|
||
default:
|
||
return AppColors.primary;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Server card widget
|
||
// ---------------------------------------------------------------------------
|
||
|
||
class _ServerCard extends StatelessWidget {
|
||
final Map<String, dynamic> server;
|
||
final VoidCallback onTap;
|
||
|
||
const _ServerCard({required this.server, required this.onTap});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final hostname =
|
||
server['hostname'] as String? ?? server['name'] as String? ?? AppLocalizations.of(context).unknownLabel;
|
||
final ip = server['ip_address'] as String? ??
|
||
server['ipAddress'] as String? ??
|
||
server['ip'] as String? ??
|
||
'N/A';
|
||
final env = server['environment'] as String? ?? 'unknown';
|
||
final status = server['status'] as String? ?? 'unknown';
|
||
final role = server['role'] as String? ?? '';
|
||
final isOnline = _isOnline(status);
|
||
|
||
return Card(
|
||
color: AppColors.surface,
|
||
margin: const EdgeInsets.only(bottom: 10),
|
||
child: InkWell(
|
||
onTap: onTap,
|
||
borderRadius: BorderRadius.circular(12),
|
||
child: Padding(
|
||
padding: const EdgeInsets.all(14),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// Hostname + status dot
|
||
Row(
|
||
children: [
|
||
// Status indicator dot
|
||
Container(
|
||
width: 10,
|
||
height: 10,
|
||
decoration: BoxDecoration(
|
||
shape: BoxShape.circle,
|
||
color: isOnline ? AppColors.success : AppColors.error,
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: (isOnline ? AppColors.success : AppColors.error)
|
||
.withOpacity(0.4),
|
||
blurRadius: 6,
|
||
spreadRadius: 1,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
const SizedBox(width: 10),
|
||
Expanded(
|
||
child: Text(
|
||
hostname,
|
||
style: const TextStyle(
|
||
fontSize: 15, fontWeight: FontWeight.w600),
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
),
|
||
const SizedBox(width: 8),
|
||
_EnvironmentTag(environment: env),
|
||
],
|
||
),
|
||
const SizedBox(height: 8),
|
||
|
||
// IP + role row
|
||
Row(
|
||
children: [
|
||
const Icon(Icons.lan_outlined,
|
||
size: 14, color: AppColors.textMuted),
|
||
const SizedBox(width: 4),
|
||
Text(
|
||
ip,
|
||
style: const TextStyle(
|
||
color: AppColors.textSecondary, fontSize: 13),
|
||
),
|
||
if (role.isNotEmpty) ...[
|
||
const Spacer(),
|
||
Icon(Icons.workspaces_outline,
|
||
size: 14, color: AppColors.textMuted),
|
||
const SizedBox(width: 4),
|
||
Text(
|
||
role,
|
||
style: const TextStyle(
|
||
color: AppColors.textSecondary, fontSize: 13),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
bool _isOnline(String status) {
|
||
final lower = status.toLowerCase();
|
||
return lower == 'online' ||
|
||
lower == 'running' ||
|
||
lower == 'active' ||
|
||
lower == 'healthy';
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Environment tag chip
|
||
// ---------------------------------------------------------------------------
|
||
|
||
class _EnvironmentTag extends StatelessWidget {
|
||
final String environment;
|
||
const _EnvironmentTag({required this.environment});
|
||
|
||
Color get _color {
|
||
switch (environment.toLowerCase()) {
|
||
case 'dev':
|
||
return AppColors.info;
|
||
case 'staging':
|
||
return AppColors.warning;
|
||
case 'prod':
|
||
return AppColors.error;
|
||
default:
|
||
return AppColors.textMuted;
|
||
}
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||
decoration: BoxDecoration(
|
||
color: _color.withOpacity(0.15),
|
||
borderRadius: BorderRadius.circular(12),
|
||
border: Border.all(color: _color.withOpacity(0.3)),
|
||
),
|
||
child: Text(
|
||
environment.toUpperCase(),
|
||
style: TextStyle(
|
||
color: _color,
|
||
fontSize: 11,
|
||
fontWeight: FontWeight.w600,
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Detail row for bottom sheet
|
||
// ---------------------------------------------------------------------------
|
||
|
||
class _DetailRow extends StatelessWidget {
|
||
final String label;
|
||
final String value;
|
||
const _DetailRow({required this.label, required this.value});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Padding(
|
||
padding: const EdgeInsets.only(bottom: 12),
|
||
child: Row(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
SizedBox(
|
||
width: 100,
|
||
child: Text(
|
||
label,
|
||
style: const TextStyle(
|
||
color: AppColors.textMuted,
|
||
fontSize: 13,
|
||
fontWeight: FontWeight.w500),
|
||
),
|
||
),
|
||
Expanded(
|
||
child: Text(
|
||
value,
|
||
style: const TextStyle(
|
||
color: AppColors.textPrimary, fontSize: 13),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|