feat(ground-suite): redesign observability console
This commit is contained in:
Onur Özkan committed
1 parent
c67d553076
commit
153b0bf262
12 files changed
+1145
-507
No files matched your search
@@ -1,8 +1,9 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../../../core/observations/observed_event.dart';
|
||||
import '../../../shared/widgets/surfaces.dart';
|
||||
import '../../observability/presentation/observability_controller.dart';
|
||||
import '../../../shared/widgets/glass_panel.dart';
|
||||
|
||||
class OverviewPage extends ConsumerWidget {
|
||||
const OverviewPage({super.key});
|
||||
@@ -11,95 +12,103 @@ class OverviewPage extends ConsumerWidget {
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final state = ref.watch(observabilityControllerProvider);
|
||||
final heartbeat = state.lastHeartbeat;
|
||||
final telemetry = state.observedTelemetryKinds
|
||||
.map((kind) => kind.label)
|
||||
.join(', ');
|
||||
final identity = heartbeat == null
|
||||
? 'Not observed'
|
||||
: 'System ${heartbeat.systemId} / component ${heartbeat.componentId}';
|
||||
final identityDetail = heartbeat == null
|
||||
? 'Awaiting HEARTBEAT.'
|
||||
: 'Reported by last HEARTBEAT: '
|
||||
'${heartbeat.armed ? 'Armed' : 'Disarmed'} · ${heartbeat.vehicleState}';
|
||||
final observedStreams = state.observedTelemetryKinds;
|
||||
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final horizontalPadding = constraints.maxWidth < 600 ? 16.0 : 24.0;
|
||||
final cardWidth = constraints.maxWidth < 640
|
||||
? constraints.maxWidth - (horizontalPadding * 2)
|
||||
: 280.0;
|
||||
final padding = constraints.maxWidth < 600 ? 16.0 : 28.0;
|
||||
final columns = constraints.maxWidth >= 1120
|
||||
? 3
|
||||
: constraints.maxWidth >= 700
|
||||
? 2
|
||||
: 1;
|
||||
final panelWidth =
|
||||
(constraints.maxWidth - (padding * 2) - (16 * (columns - 1))) /
|
||||
columns;
|
||||
|
||||
return ListView(
|
||||
padding: EdgeInsets.all(horizontalPadding),
|
||||
padding: EdgeInsets.all(padding),
|
||||
children: [
|
||||
Text('Overview', style: Theme.of(context).textTheme.headlineMedium),
|
||||
const ConsoleLabel('Vehicle observation'),
|
||||
const SizedBox(height: 8),
|
||||
const Text(
|
||||
'This workspace is receive-only. A link or replay never implies a '
|
||||
'safe, armed, or command-capable vehicle.',
|
||||
Text(
|
||||
'Replay session',
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'Read-only observations from the selected source.',
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Wrap(
|
||||
spacing: 16,
|
||||
runSpacing: 16,
|
||||
children: [
|
||||
_SummaryCard(
|
||||
title: 'Source',
|
||||
_MetricPanel(
|
||||
width: panelWidth,
|
||||
label: 'Replay session',
|
||||
value: state.sourceLabel,
|
||||
width: cardWidth,
|
||||
detail: state.isReplay
|
||||
? 'Deterministic replay; no physical vehicle is connected.'
|
||||
: 'Receive-only transport.',
|
||||
icon: Icons.visibility_outlined,
|
||||
accent: Theme.of(context).colorScheme.secondary,
|
||||
child: const Text(
|
||||
'Deterministic fixture. No physical vehicle is connected.',
|
||||
),
|
||||
),
|
||||
_SummaryCard(
|
||||
title: 'Vehicle identity',
|
||||
value: identity,
|
||||
detail: identityDetail,
|
||||
width: cardWidth,
|
||||
icon: Icons.memory_outlined,
|
||||
_MetricPanel(
|
||||
width: panelWidth,
|
||||
label: 'Last reported heartbeat',
|
||||
value: heartbeat == null
|
||||
? 'Awaiting heartbeat'
|
||||
: 'SYS ${heartbeat.systemId} · COMP ${heartbeat.componentId}',
|
||||
monoValue: true,
|
||||
child: _HeartbeatFacts(heartbeat: heartbeat),
|
||||
),
|
||||
_SummaryCard(
|
||||
title: 'Observed streams',
|
||||
value: telemetry.isEmpty ? 'None' : telemetry,
|
||||
detail: state.isReplay
|
||||
? '${state.events.length} replayed observation(s).'
|
||||
: '${state.events.length} observation(s).',
|
||||
width: cardWidth,
|
||||
icon: Icons.sensors_outlined,
|
||||
),
|
||||
_SummaryCard(
|
||||
title: 'Decoder accounting',
|
||||
_MetricPanel(
|
||||
width: panelWidth,
|
||||
label: 'Ingress accounting',
|
||||
value:
|
||||
'${state.parserDropCount} parser / ${state.semanticDropCount} semantic',
|
||||
detail: 'Counters are zero in the typed replay fixture.',
|
||||
width: cardWidth,
|
||||
icon: Icons.rule_outlined,
|
||||
'${state.parserDropCount} / ${state.semanticDropCount}',
|
||||
monoValue: true,
|
||||
child: Text(
|
||||
state.isReplay
|
||||
? 'Parser / semantic drops. Not evaluated for typed replay.'
|
||||
: 'Parser / semantic drops from received frames.',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
GlassPanel(
|
||||
const SizedBox(height: 16),
|
||||
InstrumentPanel(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Configuration is unavailable',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const Text(
|
||||
'Kaptan firmware does not yet accept inbound configuration '
|
||||
'authority. Ground Suite will not show upload, commit, arm, '
|
||||
'or shutdown controls until the firmware exposes reviewed '
|
||||
'authenticated ingress and safe activation.',
|
||||
const ConsoleLabel('Observed data streams'),
|
||||
const SizedBox(height: 16),
|
||||
Wrap(
|
||||
spacing: 10,
|
||||
runSpacing: 10,
|
||||
children: [
|
||||
for (final kind in TelemetryKind.values)
|
||||
_StreamIndicator(
|
||||
kind: kind,
|
||||
observed: observedStreams.contains(kind),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
InstrumentPanel(
|
||||
accent: Theme.of(context).colorScheme.outline,
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.all(20),
|
||||
child: _UnavailableSetup(),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
@@ -107,42 +116,168 @@ class OverviewPage extends ConsumerWidget {
|
||||
}
|
||||
}
|
||||
|
||||
class _SummaryCard extends StatelessWidget {
|
||||
const _SummaryCard({
|
||||
required this.title,
|
||||
required this.value,
|
||||
required this.detail,
|
||||
required this.icon,
|
||||
class _MetricPanel extends StatelessWidget {
|
||||
const _MetricPanel({
|
||||
required this.width,
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.child,
|
||||
this.accent,
|
||||
this.monoValue = false,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final String value;
|
||||
final String detail;
|
||||
final IconData icon;
|
||||
final double width;
|
||||
final String label;
|
||||
final String value;
|
||||
final Widget child;
|
||||
final Color? accent;
|
||||
final bool monoValue;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => SizedBox(
|
||||
width: width,
|
||||
child: InstrumentPanel(
|
||||
accent: accent,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
ConsoleLabel(label),
|
||||
const SizedBox(height: 14),
|
||||
Text(
|
||||
value,
|
||||
style: Theme.of(context).textTheme.titleLarge?.copyWith(
|
||||
fontFamily: monoValue ? 'monospace' : null,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
DefaultTextStyle.merge(
|
||||
style: Theme.of(context).textTheme.bodySmall,
|
||||
child: child,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class _HeartbeatFacts extends StatelessWidget {
|
||||
const _HeartbeatFacts({required this.heartbeat});
|
||||
|
||||
final HeartbeatEvent? heartbeat;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
width: width,
|
||||
child: GlassPanel(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Icon(icon),
|
||||
const SizedBox(height: 16),
|
||||
Text(title, style: Theme.of(context).textTheme.labelLarge),
|
||||
const SizedBox(height: 4),
|
||||
Text(value, style: Theme.of(context).textTheme.titleLarge),
|
||||
const SizedBox(height: 8),
|
||||
Text(detail),
|
||||
],
|
||||
if (heartbeat == null) {
|
||||
return const Text('No heartbeat has been reported by this source.');
|
||||
}
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_FactLine(
|
||||
label: 'Reported arm state',
|
||||
value: heartbeat!.armed ? 'ARMED' : 'DISARMED',
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
_FactLine(
|
||||
label: 'Reported MAV state',
|
||||
value: heartbeat!.vehicleState.toUpperCase(),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _FactLine extends StatelessWidget {
|
||||
const _FactLine({required this.label, required this.value});
|
||||
|
||||
final String label;
|
||||
final String value;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => RichText(
|
||||
text: TextSpan(
|
||||
style: Theme.of(context).textTheme.bodySmall,
|
||||
children: [
|
||||
TextSpan(text: '$label: '),
|
||||
TextSpan(
|
||||
text: value,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class _StreamIndicator extends StatelessWidget {
|
||||
const _StreamIndicator({required this.kind, required this.observed});
|
||||
|
||||
final TelemetryKind kind;
|
||||
final bool observed;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final scheme = Theme.of(context).colorScheme;
|
||||
final tone = observed ? scheme.primary : scheme.onSurfaceVariant;
|
||||
return DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: tone.withValues(alpha: observed ? 0.12 : 0.06),
|
||||
border: Border.all(
|
||||
color: tone.withValues(alpha: observed ? 0.5 : 0.32),
|
||||
),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 9),
|
||||
child: Wrap(
|
||||
crossAxisAlignment: WrapCrossAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
observed
|
||||
? Icons.check_circle_outline
|
||||
: Icons.remove_circle_outline,
|
||||
size: 17,
|
||||
color: tone,
|
||||
),
|
||||
const SizedBox(width: 7),
|
||||
Text(kind.label),
|
||||
const SizedBox(width: 7),
|
||||
Text(
|
||||
observed ? 'Observed' : 'Not observed',
|
||||
style: Theme.of(context).textTheme.bodySmall,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _UnavailableSetup extends StatelessWidget {
|
||||
const _UnavailableSetup();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Icon(Icons.lock_outline),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const ConsoleLabel('Vehicle setup · unavailable'),
|
||||
const SizedBox(height: 8),
|
||||
Text('This firmware accepts no inbound MAVLink authority.'),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user