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
@@ -3,7 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../../../core/observations/observed_event.dart';
|
||||
import '../../../shared/widgets/severity_badge.dart';
|
||||
import '../../../shared/widgets/glass_panel.dart';
|
||||
import '../../../shared/widgets/surfaces.dart';
|
||||
import '../../observability/presentation/observability_controller.dart';
|
||||
|
||||
enum _DiagnosticFilter { all, logs, errors, shutdowns }
|
||||
@@ -22,45 +22,55 @@ class _DiagnosticsPageState extends ConsumerState<DiagnosticsPage> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final state = ref.watch(observabilityControllerProvider);
|
||||
final events = state.events.where(_matches).toList(growable: false);
|
||||
final diagnostics = state.events
|
||||
.where(_isDiagnostic)
|
||||
.toList(growable: false);
|
||||
final events = diagnostics.where(_matches).toList(growable: false);
|
||||
|
||||
return CustomScrollView(
|
||||
slivers: [
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.fromLTRB(24, 24, 24, 16),
|
||||
padding: const EdgeInsets.fromLTRB(28, 28, 28, 16),
|
||||
sliver: SliverToBoxAdapter(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const ConsoleLabel('Event stream'),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Diagnostics',
|
||||
'Event timeline',
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const Text(
|
||||
'Messages remain distinct by protocol class. A configuration '
|
||||
'result will remain authoritative when configuration support '
|
||||
'is added.',
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'Read-only decoded observations. Diagnostic delivery can be bounded and lossy.',
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Retained diagnostics ${state.events.length} · local records not retained ${state.localTimelineEvictionCount}',
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.bodySmall?.copyWith(fontFamily: 'monospace'),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: _DiagnosticFilter.values
|
||||
.map(
|
||||
(filter) => ChoiceChip(
|
||||
label: Text(_labelFor(filter)),
|
||||
selected: _filter == filter,
|
||||
onSelected: (_) => setState(() => _filter = filter),
|
||||
),
|
||||
)
|
||||
.toList(growable: false),
|
||||
children: [
|
||||
for (final filter in _DiagnosticFilter.values)
|
||||
ChoiceChip(
|
||||
label: Text(_filterLabel(filter, diagnostics)),
|
||||
selected: _filter == filter,
|
||||
onSelected: (_) => setState(() => _filter = filter),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextField(
|
||||
decoration: const InputDecoration(
|
||||
border: OutlineInputBorder(),
|
||||
labelText: 'Filter diagnostics',
|
||||
labelText: 'Search message, error path, or detail',
|
||||
prefixIcon: Icon(Icons.search),
|
||||
),
|
||||
onChanged: (value) {
|
||||
@@ -73,23 +83,23 @@ class _DiagnosticsPageState extends ConsumerState<DiagnosticsPage> {
|
||||
),
|
||||
if (events.isEmpty)
|
||||
const SliverPadding(
|
||||
padding: EdgeInsets.fromLTRB(24, 0, 24, 24),
|
||||
padding: EdgeInsets.fromLTRB(28, 0, 28, 28),
|
||||
sliver: SliverToBoxAdapter(
|
||||
child: GlassPanel(
|
||||
child: InstrumentPanel(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(20),
|
||||
child: Text('No diagnostic observations match this filter.'),
|
||||
child: Text('No events match this view.'),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
else
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.fromLTRB(24, 0, 24, 24),
|
||||
padding: const EdgeInsets.fromLTRB(28, 0, 28, 28),
|
||||
sliver: SliverList.builder(
|
||||
itemCount: events.length,
|
||||
itemBuilder: (context, index) =>
|
||||
_DiagnosticCard(event: events[index]),
|
||||
_DiagnosticRow(event: events[index]),
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -98,79 +108,85 @@ class _DiagnosticsPageState extends ConsumerState<DiagnosticsPage> {
|
||||
|
||||
bool _matches(ObservedEvent event) {
|
||||
final typeMatches = switch (_filter) {
|
||||
_DiagnosticFilter.all =>
|
||||
event is LogEvent || event is ErrorEvent || event is ShutdownEvent,
|
||||
_DiagnosticFilter.all => true,
|
||||
_DiagnosticFilter.logs => event is LogEvent,
|
||||
_DiagnosticFilter.errors => event is ErrorEvent,
|
||||
_DiagnosticFilter.shutdowns => event is ShutdownEvent,
|
||||
};
|
||||
if (!typeMatches) {
|
||||
return false;
|
||||
}
|
||||
if (_query.isEmpty) {
|
||||
return true;
|
||||
}
|
||||
return _searchableText(event).toLowerCase().contains(_query);
|
||||
return typeMatches &&
|
||||
(_query.isEmpty ||
|
||||
_searchableText(event).toLowerCase().contains(_query));
|
||||
}
|
||||
}
|
||||
|
||||
class _DiagnosticCard extends StatelessWidget {
|
||||
const _DiagnosticCard({required this.event});
|
||||
class _DiagnosticRow extends StatelessWidget {
|
||||
const _DiagnosticRow({required this.event});
|
||||
|
||||
final ObservedEvent event;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final content = switch (event) {
|
||||
LogEvent(:final level, :final message, :final flags) => _LogContent(
|
||||
level: level,
|
||||
message: message,
|
||||
flags: flags,
|
||||
),
|
||||
ErrorEvent(:final path, :final additionalInformation, :final flags) =>
|
||||
_ErrorContent(
|
||||
path: path,
|
||||
additionalInformation: additionalInformation,
|
||||
flags: flags,
|
||||
),
|
||||
ShutdownEvent(:final reason) => _ShutdownContent(reason: reason),
|
||||
_ => null,
|
||||
};
|
||||
if (content == null) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
final content = _contentFor(
|
||||
event,
|
||||
Theme.of(context).brightness == Brightness.dark,
|
||||
);
|
||||
|
||||
return Semantics(
|
||||
container: true,
|
||||
label: content.semanticLabel,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(bottom: 12),
|
||||
child: GlassListItem(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: InstrumentPanel(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
content.leading,
|
||||
Container(width: 3, height: 56, color: content.tone),
|
||||
const SizedBox(width: 12),
|
||||
SizedBox(
|
||||
width: 92,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
ConsoleLabel(content.kind, color: content.tone),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
_timelineTimestamp(event.receivedAt),
|
||||
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
||||
fontFamily: 'monospace',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
content.icon,
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: SelectionArea(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(content.title, style: theme.textTheme.titleMedium),
|
||||
Text(
|
||||
content.title,
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(content.detail),
|
||||
Text(
|
||||
content.detail,
|
||||
style: content.monoDetail
|
||||
? Theme.of(context).textTheme.bodyMedium
|
||||
?.copyWith(fontFamily: 'monospace')
|
||||
: null,
|
||||
),
|
||||
if (content.additionalDetail case final detail?) ...[
|
||||
const SizedBox(height: 8),
|
||||
Text(detail),
|
||||
Text(
|
||||
detail,
|
||||
style: Theme.of(context).textTheme.bodySmall,
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
event.receivedAt.toIso8601String(),
|
||||
style: theme.textTheme.bodySmall,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -186,65 +202,88 @@ class _DiagnosticCard extends StatelessWidget {
|
||||
|
||||
class _DiagnosticContent {
|
||||
const _DiagnosticContent({
|
||||
required this.leading,
|
||||
required this.kind,
|
||||
required this.tone,
|
||||
required this.icon,
|
||||
required this.title,
|
||||
required this.detail,
|
||||
required this.semanticLabel,
|
||||
this.additionalDetail,
|
||||
this.monoDetail = false,
|
||||
});
|
||||
|
||||
final Widget leading;
|
||||
final String kind;
|
||||
final Color tone;
|
||||
final Widget icon;
|
||||
final String title;
|
||||
final String detail;
|
||||
final String? additionalDetail;
|
||||
final String semanticLabel;
|
||||
final bool monoDetail;
|
||||
}
|
||||
|
||||
class _LogContent extends _DiagnosticContent {
|
||||
_LogContent({
|
||||
required MavSeverity level,
|
||||
required String message,
|
||||
required int flags,
|
||||
}) : super(
|
||||
leading: SeverityBadge(level: level),
|
||||
title: 'Log — ${level.label}',
|
||||
detail: message,
|
||||
additionalDetail: _formatLogFlags(flags),
|
||||
semanticLabel: _semanticLogLabel(level, message, flags),
|
||||
);
|
||||
}
|
||||
|
||||
class _ErrorContent extends _DiagnosticContent {
|
||||
_ErrorContent({
|
||||
required String path,
|
||||
required String additionalInformation,
|
||||
required int flags,
|
||||
}) : super(
|
||||
leading: const SeverityBadge(level: MavSeverity.error),
|
||||
title: 'Error',
|
||||
detail: path,
|
||||
additionalDetail: _formatErrorDetail(additionalInformation, flags),
|
||||
semanticLabel: _semanticErrorLabel(path, additionalInformation, flags),
|
||||
);
|
||||
}
|
||||
|
||||
class _ShutdownContent extends _DiagnosticContent {
|
||||
_ShutdownContent({required KaptanShutdownReason reason})
|
||||
: super(
|
||||
leading: const Icon(Icons.power_settings_new_outlined),
|
||||
title: 'Orderly shutdown observed',
|
||||
detail: 'Reason: ${reason.label}',
|
||||
semanticLabel: 'Orderly shutdown observed: ${reason.label}',
|
||||
);
|
||||
}
|
||||
|
||||
String _labelFor(_DiagnosticFilter filter) => switch (filter) {
|
||||
_DiagnosticFilter.all => 'All',
|
||||
_DiagnosticFilter.logs => 'Logs',
|
||||
_DiagnosticFilter.errors => 'Errors',
|
||||
_DiagnosticFilter.shutdowns => 'Shutdowns',
|
||||
_DiagnosticContent _contentFor(
|
||||
ObservedEvent event,
|
||||
bool dark,
|
||||
) => switch (event) {
|
||||
LogEvent(:final level, :final message, :final flags) => _DiagnosticContent(
|
||||
kind: 'Log',
|
||||
tone: _toneForSeverity(level, dark),
|
||||
icon: SeverityBadge(level: level),
|
||||
title: level.label,
|
||||
detail: message,
|
||||
additionalDetail: _formatLogFlags(flags),
|
||||
semanticLabel: _semanticLogLabel(level, message, flags),
|
||||
),
|
||||
ErrorEvent(:final path, :final additionalInformation, :final flags) =>
|
||||
_DiagnosticContent(
|
||||
kind: 'Error',
|
||||
tone: dark ? const Color(0xffff6b63) : const Color(0xffd92d20),
|
||||
icon: Icon(
|
||||
Icons.error_outline,
|
||||
color: dark ? const Color(0xffff6b63) : const Color(0xffd92d20),
|
||||
),
|
||||
title: 'Runtime error observed',
|
||||
detail: path,
|
||||
additionalDetail: _formatErrorDetail(additionalInformation, flags),
|
||||
semanticLabel: _semanticErrorLabel(path, additionalInformation, flags),
|
||||
monoDetail: true,
|
||||
),
|
||||
ShutdownEvent(:final reason) => _DiagnosticContent(
|
||||
kind: 'Shutdown',
|
||||
tone: dark ? const Color(0xfff7b955) : const Color(0xffb54708),
|
||||
icon: Icon(
|
||||
Icons.power_settings_new_outlined,
|
||||
color: dark ? const Color(0xfff7b955) : const Color(0xffb54708),
|
||||
),
|
||||
title: 'Orderly shutdown report',
|
||||
detail: 'Reason: ${reason.label}',
|
||||
additionalDetail:
|
||||
'Completed orderly, output-inhibited report; not a command, panic, hard-fault, or reset.',
|
||||
semanticLabel: 'Orderly shutdown report: ${reason.label}',
|
||||
),
|
||||
_ => throw StateError('only diagnostic events reach the timeline'),
|
||||
};
|
||||
|
||||
bool _isDiagnostic(ObservedEvent event) =>
|
||||
event is LogEvent || event is ErrorEvent || event is ShutdownEvent;
|
||||
|
||||
String _filterLabel(_DiagnosticFilter filter, List<ObservedEvent> events) {
|
||||
final count = switch (filter) {
|
||||
_DiagnosticFilter.all => events.length,
|
||||
_DiagnosticFilter.logs => events.whereType<LogEvent>().length,
|
||||
_DiagnosticFilter.errors => events.whereType<ErrorEvent>().length,
|
||||
_DiagnosticFilter.shutdowns => events.whereType<ShutdownEvent>().length,
|
||||
};
|
||||
final label = switch (filter) {
|
||||
_DiagnosticFilter.all => 'All events',
|
||||
_DiagnosticFilter.logs => 'Logs',
|
||||
_DiagnosticFilter.errors => 'Errors',
|
||||
_DiagnosticFilter.shutdowns => 'Shutdown reports',
|
||||
};
|
||||
return '$label $count';
|
||||
}
|
||||
|
||||
String _searchableText(ObservedEvent event) => switch (event) {
|
||||
LogEvent(:final level, :final message) => '${level.label} $message',
|
||||
ErrorEvent(:final path, :final additionalInformation) =>
|
||||
@@ -253,6 +292,18 @@ String _searchableText(ObservedEvent event) => switch (event) {
|
||||
_ => '',
|
||||
};
|
||||
|
||||
Color _toneForSeverity(MavSeverity level, bool dark) =>
|
||||
switch (level.wireValue) {
|
||||
0 ||
|
||||
1 ||
|
||||
2 ||
|
||||
3 => dark ? const Color(0xffff6b63) : const Color(0xffd92d20),
|
||||
4 => dark ? const Color(0xfff7b955) : const Color(0xffb54708),
|
||||
5 || 6 => dark ? const Color(0xff70b8ff) : const Color(0xff175cd3),
|
||||
7 => dark ? const Color(0xffa8b5ac) : const Color(0xff546258),
|
||||
_ => dark ? const Color(0xffa8b5ac) : const Color(0xff546258),
|
||||
};
|
||||
|
||||
String? _formatLogFlags(int flags) {
|
||||
final labels = <String>[
|
||||
if (flags & LogEvent.traceFlag != 0) 'Trace',
|
||||
@@ -261,7 +312,7 @@ String? _formatLogFlags(int flags) {
|
||||
if (flags & ~LogEvent.knownFlags != 0)
|
||||
'Unknown bits 0x${(flags & ~LogEvent.knownFlags).toRadixString(16)}',
|
||||
];
|
||||
return labels.isEmpty ? null : 'Flags: ${labels.join(', ')}';
|
||||
return labels.isEmpty ? null : 'Flags: ${labels.join(' · ')}';
|
||||
}
|
||||
|
||||
String? _formatErrorDetail(String additionalInformation, int flags) {
|
||||
@@ -280,7 +331,7 @@ String? _formatErrorFlags(int flags) {
|
||||
if (flags & ~ErrorEvent.knownFlags != 0)
|
||||
'Unknown bits 0x${(flags & ~ErrorEvent.knownFlags).toRadixString(16)}',
|
||||
];
|
||||
return labels.isEmpty ? null : 'Flags: ${labels.join(', ')}';
|
||||
return labels.isEmpty ? null : 'Flags: ${labels.join(' · ')}';
|
||||
}
|
||||
|
||||
String _semanticLogLabel(MavSeverity level, String message, int flags) {
|
||||
@@ -298,3 +349,8 @@ String _semanticErrorLabel(
|
||||
final detail = _formatErrorDetail(additionalInformation, flags);
|
||||
return detail == null ? 'Error: $path' : 'Error: $path. $detail';
|
||||
}
|
||||
|
||||
String _timelineTimestamp(DateTime value) =>
|
||||
'${value.hour.toString().padLeft(2, '0')}:'
|
||||
'${value.minute.toString().padLeft(2, '0')}:'
|
||||
'${value.second.toString().padLeft(2, '0')}Z';
|
||||
Reference in new issue
Block a user