mirror of
https://github.com/foss42/apidash.git
synced 2025-12-02 18:57:05 +08:00
Refactor terminal and remove duplicate code.
This commit is contained in:
Ankit Mahato
405
lib/terminal/widgets/terminal_tiles.dart
Normal file
405
lib/terminal/widgets/terminal_tiles.dart
Normal file
@@ -0,0 +1,405 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:apidash_design_system/apidash_design_system.dart';
|
||||
import 'package:apidash_core/apidash_core.dart';
|
||||
import 'package:apidash/utils/utils.dart';
|
||||
import 'package:apidash/widgets/widgets.dart';
|
||||
import '../enums.dart';
|
||||
import '../models/models.dart';
|
||||
|
||||
class SystemLogTile extends StatelessWidget {
|
||||
const SystemLogTile({
|
||||
super.key,
|
||||
required this.entry,
|
||||
this.showTimestamp = false,
|
||||
this.searchQuery,
|
||||
});
|
||||
final TerminalEntry entry;
|
||||
final bool showTimestamp;
|
||||
final String? searchQuery;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
assert(entry.system != null, 'System tile requires SystemLogData');
|
||||
final s = entry.system!;
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
IconData icon;
|
||||
Color? iconColor;
|
||||
switch (entry.level) {
|
||||
case TerminalLevel.error:
|
||||
icon = Icons.error_outline_rounded;
|
||||
iconColor = cs.error;
|
||||
break;
|
||||
case TerminalLevel.warn:
|
||||
icon = Icons.warning_amber_rounded;
|
||||
iconColor = Colors.amber[800];
|
||||
break;
|
||||
case TerminalLevel.info:
|
||||
case TerminalLevel.debug:
|
||||
icon = Icons.info_outline;
|
||||
iconColor = cs.primary;
|
||||
break;
|
||||
}
|
||||
final titleStyle = Theme.of(context).textTheme.bodyMedium;
|
||||
final subStyle = Theme.of(context).textTheme.bodySmall;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (showTimestamp) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 2, right: 8),
|
||||
child: Text(_formatTs(entry.ts), style: subStyle),
|
||||
),
|
||||
] else ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 2, right: 8),
|
||||
child: Icon(icon, size: 18, color: iconColor),
|
||||
),
|
||||
],
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
HighlightedSelectableText(
|
||||
text: '[${s.category}] ${s.message}',
|
||||
style: titleStyle,
|
||||
query: searchQuery,
|
||||
),
|
||||
if (s.stack != null && s.stack!.isNotEmpty) ...[
|
||||
const SizedBox(height: 4),
|
||||
HighlightedSelectableText(
|
||||
text: s.stack!,
|
||||
style: subStyle,
|
||||
query: searchQuery,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class JsLogTile extends StatelessWidget {
|
||||
const JsLogTile({
|
||||
super.key,
|
||||
required this.entry,
|
||||
this.showTimestamp = false,
|
||||
this.requestName,
|
||||
this.searchQuery,
|
||||
});
|
||||
final TerminalEntry entry;
|
||||
final bool showTimestamp;
|
||||
final String? requestName;
|
||||
final String? searchQuery;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
assert(entry.js != null, 'JS tile requires JsLogData');
|
||||
final cs = Theme.of(context).colorScheme;
|
||||
final j = entry.js!;
|
||||
IconData? icon;
|
||||
Color? iconColor;
|
||||
Color? bg;
|
||||
switch (entry.level) {
|
||||
case TerminalLevel.error:
|
||||
icon = Icons.error_outline_rounded;
|
||||
iconColor = cs.error;
|
||||
bg = Colors.redAccent.shade200.withValues(alpha: 0.2);
|
||||
break;
|
||||
case TerminalLevel.warn:
|
||||
icon = Icons.warning_amber_rounded;
|
||||
iconColor = Colors.amber[800];
|
||||
bg = Colors.amberAccent.shade200.withValues(alpha: 0.25);
|
||||
break;
|
||||
case TerminalLevel.info:
|
||||
case TerminalLevel.debug:
|
||||
break;
|
||||
}
|
||||
final bodyParts = <String>[];
|
||||
if (requestName != null && requestName!.isNotEmpty) {
|
||||
bodyParts.add('[$requestName]');
|
||||
}
|
||||
// Add JS level/context prefix to disambiguate
|
||||
if (j.context != null && j.context!.isNotEmpty) {
|
||||
bodyParts.add('(${j.context})');
|
||||
}
|
||||
bodyParts.addAll(j.args);
|
||||
final bodyText = bodyParts.join(' ');
|
||||
return Container(
|
||||
color: bg,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (showTimestamp) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 2, right: 8),
|
||||
child: Text(_formatTs(entry.ts),
|
||||
style: Theme.of(context).textTheme.bodySmall),
|
||||
),
|
||||
] else if (icon != null) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 2, right: 8),
|
||||
child: Icon(icon, size: 18, color: iconColor),
|
||||
),
|
||||
],
|
||||
Expanded(
|
||||
child: HighlightedSelectableText(
|
||||
text: bodyText,
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
query: searchQuery,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class NetworkLogTile extends StatefulWidget {
|
||||
const NetworkLogTile({
|
||||
super.key,
|
||||
required this.entry,
|
||||
this.showTimestamp = false,
|
||||
this.requestName,
|
||||
this.searchQuery,
|
||||
});
|
||||
final TerminalEntry entry;
|
||||
final bool showTimestamp;
|
||||
final String? requestName;
|
||||
final String? searchQuery;
|
||||
@override
|
||||
State<NetworkLogTile> createState() => _NetworkLogTileState();
|
||||
}
|
||||
|
||||
class _NetworkLogTileState extends State<NetworkLogTile> {
|
||||
bool _expanded = false;
|
||||
String? _lastQuery;
|
||||
|
||||
@override
|
||||
void didUpdateWidget(covariant NetworkLogTile oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
// Auto-expand if a new non-empty search query matches hidden detail content
|
||||
final q = widget.searchQuery?.trim();
|
||||
if (q != null && q.isNotEmpty && q != _lastQuery) {
|
||||
if (!_expanded && _networkDetailsContainQuery(q)) {
|
||||
setState(() => _expanded = true);
|
||||
}
|
||||
}
|
||||
_lastQuery = q;
|
||||
}
|
||||
|
||||
bool _networkDetailsContainQuery(String q) {
|
||||
final n = widget.entry.network!;
|
||||
final lowerQ = q.toLowerCase();
|
||||
bool inMap(Map<String, String>? m) =>
|
||||
m != null &&
|
||||
m.entries.any((e) =>
|
||||
e.key.toLowerCase().contains(lowerQ) ||
|
||||
e.value.toLowerCase().contains(lowerQ));
|
||||
bool inText(String? t) =>
|
||||
t != null && t.toLowerCase().contains(lowerQ) && t.isNotEmpty;
|
||||
return inMap(n.requestHeaders) ||
|
||||
inMap(n.responseHeaders) ||
|
||||
inText(n.requestBodyPreview) ||
|
||||
inText(n.responseBodyPreview) ||
|
||||
inText(n.errorMessage);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final n = widget.entry.network!;
|
||||
final status = n.responseStatus != null ? '${n.responseStatus}' : null;
|
||||
final duration =
|
||||
n.duration != null ? '${n.duration!.inMilliseconds} ms' : null;
|
||||
final bodyStyle = Theme.of(context).textTheme.bodyMedium;
|
||||
final methodStyle = kCodeStyle.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: getAPIColor(
|
||||
APIType.rest,
|
||||
method: n.method,
|
||||
brightness: Theme.of(context).brightness,
|
||||
),
|
||||
);
|
||||
return Column(
|
||||
children: [
|
||||
InkWell(
|
||||
onTap: () => setState(() => _expanded = !_expanded),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||||
child: Row(
|
||||
children: [
|
||||
if (widget.showTimestamp) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(right: 8),
|
||||
child: Text(
|
||||
_formatTs(widget.entry.ts),
|
||||
style: Theme.of(context).textTheme.bodySmall,
|
||||
),
|
||||
),
|
||||
],
|
||||
Expanded(
|
||||
child: RichText(
|
||||
text: TextSpan(
|
||||
style: bodyStyle,
|
||||
children: [
|
||||
if (widget.requestName != null &&
|
||||
widget.requestName!.isNotEmpty) ...[
|
||||
...buildHighlightedSpans(
|
||||
'[${widget.requestName}]',
|
||||
context,
|
||||
widget.searchQuery,
|
||||
baseStyle: bodyStyle,
|
||||
),
|
||||
const TextSpan(text: ' '),
|
||||
],
|
||||
...buildHighlightedSpans(
|
||||
n.method.name.toUpperCase(),
|
||||
context,
|
||||
widget.searchQuery,
|
||||
baseStyle: methodStyle,
|
||||
),
|
||||
const TextSpan(text: ' '),
|
||||
...buildHighlightedSpans(
|
||||
n.url,
|
||||
context,
|
||||
widget.searchQuery,
|
||||
baseStyle: bodyStyle,
|
||||
),
|
||||
],
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
if (status != null) Text(status),
|
||||
if (status != null && duration != null) const Text(' | '),
|
||||
if (duration != null) Text(duration),
|
||||
const SizedBox(width: 6),
|
||||
Icon(_expanded
|
||||
? Icons.keyboard_arrow_up
|
||||
: Icons.keyboard_arrow_down),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
if (_expanded) NetworkDetails(n: n, searchQuery: widget.searchQuery),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class NetworkDetails extends StatelessWidget {
|
||||
const NetworkDetails({super.key, required this.n, this.searchQuery});
|
||||
final NetworkLogData n;
|
||||
final String? searchQuery;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final q = searchQuery?.trim();
|
||||
bool contains(String? text) =>
|
||||
q != null &&
|
||||
q.isNotEmpty &&
|
||||
text != null &&
|
||||
text.toLowerCase().contains(q.toLowerCase());
|
||||
bool mapContains(Map<String, String>? m) =>
|
||||
q != null &&
|
||||
q.isNotEmpty &&
|
||||
m != null &&
|
||||
m.entries.any((e) =>
|
||||
e.key.toLowerCase().contains(q.toLowerCase()) ||
|
||||
e.value.toLowerCase().contains(q.toLowerCase()));
|
||||
|
||||
final networkBodyMap = {
|
||||
'API Type': n.apiType.name,
|
||||
'Phase': n.phase.name,
|
||||
if (n.isStreaming) 'Streaming': 'true',
|
||||
if (n.sentAt != null) 'Sent': n.sentAt!.toIso8601String(),
|
||||
if (n.completedAt != null) 'Completed': n.completedAt!.toIso8601String(),
|
||||
if (n.duration != null) 'Duration': '${n.duration!.inMilliseconds} ms',
|
||||
'URL': n.url,
|
||||
'Method': n.method.name.toUpperCase(),
|
||||
if (n.responseStatus != null) 'Status': '${n.responseStatus}',
|
||||
if (n.errorMessage != null) 'Error': n.errorMessage!,
|
||||
};
|
||||
final networkSectionHasMatch = q != null &&
|
||||
q.isNotEmpty &&
|
||||
networkBodyMap.entries.any((e) =>
|
||||
e.key.toLowerCase().contains(q.toLowerCase()) ||
|
||||
e.value.toLowerCase().contains(q.toLowerCase()));
|
||||
|
||||
final tiles = <Widget>[
|
||||
ExpandableSection(
|
||||
title: 'Network',
|
||||
forceOpen: networkSectionHasMatch ? true : null,
|
||||
highlightQuery: searchQuery,
|
||||
child: _kvBody(networkBodyMap, query: searchQuery),
|
||||
),
|
||||
ExpandableSection(
|
||||
title: 'Request Headers',
|
||||
forceOpen: mapContains(n.requestHeaders) ? true : null,
|
||||
highlightQuery: searchQuery,
|
||||
child: _mapBody(n.requestHeaders, query: searchQuery),
|
||||
),
|
||||
ExpandableSection(
|
||||
title: 'Request Body',
|
||||
forceOpen: contains(n.requestBodyPreview) ? true : null,
|
||||
highlightQuery: searchQuery,
|
||||
child: _textBody(n.requestBodyPreview, query: searchQuery),
|
||||
),
|
||||
ExpandableSection(
|
||||
title: 'Response Headers',
|
||||
forceOpen: mapContains(n.responseHeaders) ? true : null,
|
||||
highlightQuery: searchQuery,
|
||||
child: _mapBody(n.responseHeaders, query: searchQuery),
|
||||
),
|
||||
ExpandableSection(
|
||||
title: 'Response Body',
|
||||
forceOpen: contains(n.responseBodyPreview) ? true : null,
|
||||
highlightQuery: searchQuery,
|
||||
child: _textBody(n.responseBodyPreview, query: searchQuery),
|
||||
),
|
||||
];
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.fromLTRB(12, 0, 12, 12),
|
||||
child: Column(
|
||||
children: [
|
||||
for (int i = 0; i < tiles.length; i++) ...[
|
||||
tiles[i],
|
||||
if (i != tiles.length - 1) const SizedBox(height: 8),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _textBody(String? text, {String? query}) {
|
||||
final value = text == null || text.isEmpty ? '(empty)' : text;
|
||||
return HighlightedSelectableText(text: value, query: query);
|
||||
}
|
||||
|
||||
Widget _mapBody(Map<String, String>? map, {String? query}) {
|
||||
if (map == null || map.isEmpty) {
|
||||
return const HighlightedSelectableText(text: '(none)');
|
||||
}
|
||||
final lines = map.entries.map((e) => '${e.key}: ${e.value}').join('\n');
|
||||
return HighlightedSelectableText(text: lines, query: query);
|
||||
}
|
||||
|
||||
Widget _kvBody(Map<String, String> map, {String? query}) {
|
||||
final lines = map.entries.map((e) => '${e.key}: ${e.value}').join('\n');
|
||||
return HighlightedSelectableText(text: lines, query: query);
|
||||
}
|
||||
}
|
||||
|
||||
String _formatTs(DateTime ts) {
|
||||
// Show only time (HH:mm:ss) for compactness
|
||||
final h = ts.hour.toString().padLeft(2, '0');
|
||||
final m = ts.minute.toString().padLeft(2, '0');
|
||||
final s = ts.second.toString().padLeft(2, '0');
|
||||
final ms = ts.millisecond.toString().padLeft(2, '0');
|
||||
return '$h:$m:$s.$ms';
|
||||
}
|
||||
Reference in New Issue
Block a user