mirror of
https://github.com/foss42/apidash.git
synced 2025-12-02 02:39:19 +08:00
feat: improve terminal page ui
This commit is contained in:
Udhay-Adithya
44
lib/widgets/empty_message.dart
Normal file
44
lib/widgets/empty_message.dart
Normal file
@@ -0,0 +1,44 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class EmptyMessage extends StatelessWidget {
|
||||
const EmptyMessage({
|
||||
super.key,
|
||||
this.title = 'No logs yet',
|
||||
this.subtitle = 'Send a request to view its details in the console.',
|
||||
this.icon,
|
||||
});
|
||||
|
||||
final String title;
|
||||
final String subtitle;
|
||||
final IconData? icon;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (icon != null) ...[
|
||||
Icon(icon, size: 36, color: theme.colorScheme.outline),
|
||||
const SizedBox(height: 8),
|
||||
],
|
||||
Text(
|
||||
title,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
subtitle,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: theme.colorScheme.outline,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
51
lib/widgets/expandable_section.dart
Normal file
51
lib/widgets/expandable_section.dart
Normal file
@@ -0,0 +1,51 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class ExpandableSection extends StatefulWidget {
|
||||
const ExpandableSection(
|
||||
{super.key, required this.title, required this.child});
|
||||
|
||||
final String title;
|
||||
final Widget child;
|
||||
|
||||
@override
|
||||
State<ExpandableSection> createState() => _ExpandableSectionState();
|
||||
}
|
||||
|
||||
class _ExpandableSectionState extends State<ExpandableSection> {
|
||||
bool _open = false;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
InkWell(
|
||||
enableFeedback: false,
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
onTap: () => setState(() => _open = !_open),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
widget.title,
|
||||
style: Theme.of(context).textTheme.titleSmall,
|
||||
),
|
||||
),
|
||||
Icon(
|
||||
_open ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
if (_open)
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(12, 0, 12, 12),
|
||||
child: widget.child,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
46
lib/widgets/field_search.dart
Normal file
46
lib/widgets/field_search.dart
Normal file
@@ -0,0 +1,46 @@
|
||||
import 'package:apidash_design_system/apidash_design_system.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class SearchField extends StatelessWidget {
|
||||
const SearchField({
|
||||
super.key,
|
||||
this.controller,
|
||||
this.onChanged,
|
||||
this.hintText = 'Search',
|
||||
this.height = 36,
|
||||
});
|
||||
|
||||
final TextEditingController? controller;
|
||||
final ValueChanged<String>? onChanged;
|
||||
final String hintText;
|
||||
final double height;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return Container(
|
||||
height: height,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(
|
||||
color: theme.colorScheme.surfaceContainerHighest,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(Icons.search, size: 18),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: ADRawTextField(
|
||||
controller: controller,
|
||||
hintText: hintText,
|
||||
onChanged: onChanged,
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
222
lib/widgets/terminal_tiles.dart
Normal file
222
lib/widgets/terminal_tiles.dart
Normal file
@@ -0,0 +1,222 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../consts.dart';
|
||||
import '../models/terminal/models.dart';
|
||||
import 'expandable_section.dart';
|
||||
|
||||
class SystemLogTile extends StatelessWidget {
|
||||
const SystemLogTile({super.key, required this.entry});
|
||||
final TerminalEntry entry;
|
||||
@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: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 2, right: 8),
|
||||
child: Icon(icon, size: 18, color: iconColor),
|
||||
),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('[${s.category}] ${s.message}', style: titleStyle),
|
||||
if (s.stack != null && s.stack!.isNotEmpty) ...[
|
||||
const SizedBox(height: 4),
|
||||
SelectableText(s.stack!, style: subStyle),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class JsLogTile extends StatelessWidget {
|
||||
const JsLogTile({super.key, required this.entry});
|
||||
final TerminalEntry entry;
|
||||
@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;
|
||||
}
|
||||
return Container(
|
||||
color: bg,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (icon != null) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 2, right: 8),
|
||||
child: Icon(icon, size: 18, color: iconColor),
|
||||
),
|
||||
],
|
||||
Expanded(
|
||||
child: SelectableText(
|
||||
j.args.join(' '),
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class NetworkLogTile extends StatefulWidget {
|
||||
const NetworkLogTile({super.key, required this.entry});
|
||||
final TerminalEntry entry;
|
||||
@override
|
||||
State<NetworkLogTile> createState() => _NetworkLogTileState();
|
||||
}
|
||||
|
||||
class _NetworkLogTileState extends State<NetworkLogTile> {
|
||||
bool _expanded = false;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final n = widget.entry.network!;
|
||||
final methodUrl = '${n.method.name.toUpperCase()} ${n.url}';
|
||||
final status = n.responseStatus != null ? '${n.responseStatus}' : null;
|
||||
final duration =
|
||||
n.duration != null ? '${n.duration!.inMilliseconds} ms' : null;
|
||||
return Column(
|
||||
children: [
|
||||
InkWell(
|
||||
onTap: () => setState(() => _expanded = !_expanded),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
methodUrl,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: Theme.of(context).textTheme.bodyMedium,
|
||||
),
|
||||
),
|
||||
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),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class NetworkDetails extends StatelessWidget {
|
||||
const NetworkDetails({super.key, required this.n});
|
||||
final NetworkLogData n;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final tiles = <Widget>[
|
||||
ExpandableSection(
|
||||
title: 'Network',
|
||||
child: _kvBody({
|
||||
'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!,
|
||||
}),
|
||||
),
|
||||
ExpandableSection(
|
||||
title: 'Request Headers', child: _mapBody(n.requestHeaders)),
|
||||
ExpandableSection(
|
||||
title: 'Request Body', child: _textBody(n.requestBodyPreview)),
|
||||
ExpandableSection(
|
||||
title: 'Response Headers', child: _mapBody(n.responseHeaders)),
|
||||
ExpandableSection(
|
||||
title: 'Response Body', child: _textBody(n.responseBodyPreview)),
|
||||
];
|
||||
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) {
|
||||
return SelectableText(text == null || text.isEmpty ? '(empty)' : text);
|
||||
}
|
||||
|
||||
Widget _mapBody(Map<String, String>? map) {
|
||||
if (map == null || map.isEmpty) {
|
||||
return const SelectableText('(none)');
|
||||
}
|
||||
final lines = map.entries.map((e) => '${e.key}: ${e.value}').join('\n');
|
||||
return SelectableText(lines);
|
||||
}
|
||||
|
||||
Widget _kvBody(Map<String, String> map) {
|
||||
final lines = map.entries.map((e) => '${e.key}: ${e.value}').join('\n');
|
||||
return SelectableText(lines);
|
||||
}
|
||||
}
|
||||
@@ -33,6 +33,10 @@ export 'field_cell.dart';
|
||||
export 'field_json_search.dart';
|
||||
export 'field_read_only.dart';
|
||||
export 'field_text_bounded.dart';
|
||||
export 'field_search.dart';
|
||||
export 'expandable_section.dart';
|
||||
export 'empty_message.dart';
|
||||
export 'terminal_tiles.dart';
|
||||
export 'field_url.dart';
|
||||
export 'intro_message.dart';
|
||||
export 'markdown.dart';
|
||||
|
||||
Reference in New Issue
Block a user