UI debugging + git ignore

This commit is contained in:
mr
2024-08-22 15:46:16 +02:00
parent ceeebfc964
commit 1db9ef0794
26 changed files with 1568 additions and 302 deletions

View File

@@ -1,26 +1,34 @@
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_box_transform/flutter_box_transform.dart';
import 'package:oc_front/core/sections/header/header.dart';
import 'package:oc_front/core/services/specialized_services/logs_service.dart';
import 'package:oc_front/models/logs.dart';
import 'package:oc_front/models/workflow.dart';
import 'package:oc_front/widgets/logs.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:oc_front/widgets/lib/tranformablebox.dart' as fork;
import 'package:oc_front/widgets/sheduler_items/scheduler_calendar.dart';
import 'package:oc_front/widgets/sheduler_items/scheduler_item.dart';
double menuSize = 300;
// ignore: must_be_immutable
class ScheduleWidget extends StatefulWidget {
DateTime start;
DateTime end;
bool isDayPlanner = true;
bool loading = true;
Map<String, List<WorkflowExecution>> data;
bool isList = true;
ScheduleWidget ({ super.key, required this.data, required this.start, required this.end, this.isList = true });
ScheduleWidget ({ super.key, required this.data, required this.start, required this.end, this.isList = true, this.loading = false});
@override ScheduleWidgetState createState() => ScheduleWidgetState();
}
String? selected;
String? selectedReal;
class ScheduleWidgetState extends State<ScheduleWidget> {
LogsService _service = LogsService();
String? selected;
String? selectedReal;
String search = "";
String? level;
List<Color> colors = [Colors.blue, Colors.orange, Colors.red, Colors.green];
List<String> titles = ["SCHEDULED", "RUNNING", "FAILURE", "SUCCESS"];
@@ -31,7 +39,7 @@ class ScheduleWidgetState extends State<ScheduleWidget> {
@override Widget build(BuildContext context) {
bool isInfo = MediaQuery.of(context).size.width <= 600 && selected != null;
double w = selected != null ? MediaQuery.of(context).size.width - 300 : MediaQuery.of(context).size.width;
double w = selected != null ? MediaQuery.of(context).size.width - menuSize : MediaQuery.of(context).size.width;
List<Widget> children = [];
if (selected != null) {
for (var wf in widget.data[selected!] ?? (<WorkflowExecution>[])) {
@@ -40,7 +48,8 @@ class ScheduleWidgetState extends State<ScheduleWidget> {
onTap: () => setState(() { selectedReal = wf.executionData; }),
child: Container( margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: selectedReal != null && selectedReal == wf.executionData ? const Color.fromRGBO(38, 166, 154, 1) : Colors.transparent, width: 2),
border: Border.all(color: selectedReal != null && selectedReal == wf.executionData ?
const Color.fromRGBO(38, 166, 154, 1) : Colors.transparent, width: 2),
borderRadius: BorderRadius.circular(4), color: Colors.white
),
child: Container(
@@ -52,13 +61,13 @@ class ScheduleWidgetState extends State<ScheduleWidget> {
borderRadius: BorderRadius.circular(4),
),
),
Container( width: (400 - 250),
SizedBox( width: (menuSize - 140),
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(wf.name?.toUpperCase() ?? "", overflow: TextOverflow.ellipsis,
style: const TextStyle(color: Colors.black, fontSize: 12, fontWeight: FontWeight.w500)),
)),
Container(
SizedBox(
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: Text("${d2.hour > 9 ? d2.hour : "0${d2.hour}"}:${d2.minute > 9 ? d2.minute : "0${d2.minute}"}", overflow: TextOverflow.ellipsis,
@@ -70,48 +79,45 @@ class ScheduleWidgetState extends State<ScheduleWidget> {
}
}
List<Log> logs = [];
String? selectedID;
String? start;
String? end;
if (selectedReal != null) {
try {
var sel = widget.data[selected!]!.firstWhere((element) => element.executionData == selectedReal);
selectedID = sel.id;
print(sel.endDate);
if (sel.endDate != null && sel.endDate != "") {
var startD = DateTime.parse(sel.executionData!);
var endD = DateTime.parse(sel.endDate!);
var diff = endD.difference(startD);
if (diff.inDays < 30) {
var rest = ((30 - diff.inDays) ~/ 2) - 1;
start = (startD.subtract(Duration(days: rest)).microsecondsSinceEpoch).toString();
end = (endD.add(Duration(days: rest)).microsecondsSinceEpoch).toString();
} else {
start = (startD.microsecondsSinceEpoch).toString();
end = (startD.add( const Duration(days: 29)).microsecondsSinceEpoch).toString();
}
} else {
start = (DateTime.parse(sel.executionData!).subtract( const Duration(days: 14)).microsecondsSinceEpoch).toString();
end = (DateTime.parse(sel.executionData!).add( const Duration(days: 14)).microsecondsSinceEpoch).toString();
}
logs = sel.logs ?? [];
} catch(e) { /* */ }
}
menuSize = isInfo ? MediaQuery.of(context).size.width : (menuSize > MediaQuery.of(context).size.width / 2 ? MediaQuery.of(context).size.width / 2 : menuSize);
Rect rect = Rect.fromCenter( center: MediaQuery.of(context).size.center(Offset.zero),
width: selected != null ? menuSize : 0, height: (MediaQuery.of(context).size.height - HeaderConstants.height - 50) > 0 ? (MediaQuery.of(context).size.height - HeaderConstants.height - 50) : 0);
return Row( children: [
isInfo ? Container() : SizedBox( width: w,
child: widget.isList ? SchedulerItemWidget(data: widget.data, parent: this, focusedDay: getFocusedDay(), width: w)
: SchedulerCalendarWidget(data: widget.data, start: widget.start,
end: widget.end, parent: this, focusedDay: getFocusedDay(),)
),
Container(
fork.TransformableBox(
rect: rect, constraints: BoxConstraints(
maxWidth: isInfo ? MediaQuery.of(context).size.width : (selected != null ? MediaQuery.of(context).size.width / 2 : 0),
minWidth: selected != null ? 300 : 0),
handleTapSize: 1, handleTapLeftSize: 0, allowFlippingWhileResizing: false, draggable: false, flip: null,
resizeModeResolver: () => ResizeMode.freeform,
visibleHandles: const {HandlePosition.left},
enabledHandles: const {HandlePosition.left},
clampingRect: Offset.zero & MediaQuery.sizeOf(context),
handleAlignment: HandleAlignment.inside,
onChanged: (result, event) { setState(() { menuSize = result.rect.width; }); },
contentBuilder: (context, rect, flip) { return Container(
height: MediaQuery.of(context).size.height - HeaderConstants.height - 50,
width: isInfo ? MediaQuery.of(context).size.width : (selected != null ? 300 : 0),
width: isInfo ? MediaQuery.of(context).size.width : (selected != null ? menuSize : 0),
color: Colors.grey.shade300,
child: Column(
children: [
Row( children: [
InkWell( onTap: () => setState(() { widget.isDayPlanner = true; }),
child: Tooltip( message: "day planning", child:
Container( height: 50, width: (isInfo ? MediaQuery.of(context).size.width : (selected != null ? 300 : 0)) / (selectedReal != null ? 2 : 1 ),
Container( height: 50, width: (isInfo ? MediaQuery.of(context).size.width : (selected != null ? menuSize : 0)) / (selectedReal != null ? 2 : 1 ),
alignment: Alignment.center,
decoration: BoxDecoration(
color: widget.isDayPlanner ? Colors.grey : Colors.transparent,
@@ -121,7 +127,8 @@ class ScheduleWidgetState extends State<ScheduleWidget> {
)),
InkWell( onTap: () => setState(() { widget.isDayPlanner = false; }),
child: Tooltip( message: "monitor task", child:
Container( height: 50, width: selectedReal == null ? 0 : ((isInfo ? MediaQuery.of(context).size.width : (selected != null ? 300 : 0)) / 2),
Container( height: 50, width: selectedReal == null ? 0 : (
(isInfo ? MediaQuery.of(context).size.width : (selected != null ? menuSize : 0)) / 2),
alignment: Alignment.center,
decoration: BoxDecoration(
color: !widget.isDayPlanner ? Colors.grey : Colors.transparent,
@@ -132,48 +139,84 @@ class ScheduleWidgetState extends State<ScheduleWidget> {
)
))
]),
Container( width: isInfo ? MediaQuery.of(context).size.width : (selected != null ? 300 : 0), height: MediaQuery.of(context).size.height - HeaderConstants.height - 100,
child: SingleChildScrollView( child: Column(
mainAxisAlignment: children.isEmpty ? MainAxisAlignment.center : MainAxisAlignment.start,
children: [
...( widget.isDayPlanner ? children : ( selectedID != null ? [
FutureBuilder(future: _service.search(context, [], {
"workflow_execution_id": selectedID,
"start": start,
"end": end
}), builder: (ctx, as) {
var speLog = Log(level: "error", timestamp: DateTime.now());
speLog.getMessage("{\"Name\":\"oc-monitor-unonip-fauta9hswg\",\"Namespace\":\"argo\",\"Status\":\"Pending\",\"PodRunning\":false,\"Completed\":false,\"Created\":\"Tue Aug 06 11:33:52 +0200 (now)\",\"Started\":\"\",\"Duration\":\"\",\"Progress\":\"\"}");
var speLog2 = Log(level: "warning", timestamp: DateTime.now());
speLog2.getMessage("{\"Name\":\"oc-monitor-unonip-fauta9hswg\",\"Namespace\":\"argo\",\"Status\":\"Running\",\"PodRunning\":false,\"Completed\":false,\"Created\":\"Tue Aug 06 11:33:52 +0200 (now)\",\"Started\":\"Tue Aug 06 11:33:52 +0200 (now)\",\"Duration\":\"0 seconds\",\"Progress\":\"0/1\"}");
List<Log> logs = [
Log(
level: "info",
message: "No logs found",
timestamp: DateTime.now()
SizedBox( width: isInfo ? MediaQuery.of(context).size.width : (selected != null ? menuSize : 0), height: MediaQuery.of(context).size.height - HeaderConstants.height - (!widget.isDayPlanner && !widget.loading ? 150 : 100 ),
child: Stack( children: [
SingleChildScrollView( child: Column(
mainAxisAlignment: children.isEmpty || widget.loading ? MainAxisAlignment.center : MainAxisAlignment.start,
children: [
...( widget.isDayPlanner ? children : ( selectedID != null ? [
widget.loading ? const SpinKitCircle(color: Colors.white,) : LogsWidget(items: logs, search: search, level: level)
] : [])),
children.isEmpty ? Container( height: 100, alignment: Alignment.center, child: const Text("No event found", style: TextStyle(color: Colors.grey, fontSize: 20))) : Container()
]),
) ])
),
!widget.isDayPlanner && !widget.loading ?
Row( children: [
Container(
width: 150,
height: 50,
decoration: BoxDecoration(
border: Border(left: BorderSide(color: Colors.grey.shade300)),
),
child: DropdownButtonFormField(
isExpanded: true,
value: level,
style: const TextStyle(fontSize: 12),
hint: const Text("by level...", style: TextStyle(fontSize: 12)),
decoration: InputDecoration(
filled: true,
focusedBorder: const OutlineInputBorder( borderRadius: BorderRadius.zero,
borderSide: BorderSide(color: Color.fromARGB(38, 166, 154, 1), width: 0),
),
fillColor: Colors.white,
contentPadding: const EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 30),
enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.zero,
borderSide: BorderSide(color: Colors.grey.shade300, width: 0),
),
border: OutlineInputBorder( borderRadius: BorderRadius.zero,
borderSide: BorderSide(color: Colors.grey.shade300, width: 0)),
),
speLog,
speLog2
];
if (as.hasData && as.data!.data != null) {
var d = as.data!.data!;
for( var r in d.data?.result ?? <Logs> []) {
for (var element in r.logs) {
element.level = r.level;
logs.add(element);
}
}
}
logs.sort((a, b) => a.timestamp!.compareTo(b.timestamp!));
return LogsWidget(items: logs);
})
] : [])),
children.isEmpty ? Container( height: 100, alignment: Alignment.center, child: const Text("No event found", style: const TextStyle(color: Colors.grey, fontSize: 20))) : Container()
]))
)
items: [
DropdownMenuItem(value: "debug,warning,error,info", child: Row( children: [ Container( width: 10, height: 15, color: Colors.grey), Text(" all", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
DropdownMenuItem(value: "debug", child: Row( children: [ Container( width: 10, height: 15, color: Colors.blue), Text(" debug", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
DropdownMenuItem(value: "warning", child: Row( children: [ Container( width: 10, height: 15, color: Colors.orange), Text(" warning", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
DropdownMenuItem(value: "error", child: Row( children: [ Container( width: 10, height: 15, color: Colors.red), Text(" error", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
DropdownMenuItem(value: "info", child: Row( children: [ Container( width: 10, height: 15, color: Colors.green), Text(" info", style: TextStyle(fontSize: 12, color: Colors.black)) ])),
],
onChanged: (value) {
setState(() {
level = value;
});
})),
Container(
width: menuSize - 150,
height: 50,
decoration: BoxDecoration(
border: Border(left: BorderSide(color: Colors.grey.shade300)),
),
child: TextField(
onChanged: (value) { setState(() {
search = value;
});},
style: const TextStyle(fontSize: 12),
decoration: const InputDecoration(
hintText: "by logs...",
fillColor: Colors.white,
filled: true,
contentPadding: EdgeInsets.symmetric(horizontal: 30),
hintStyle: TextStyle(
color: Colors.black,
fontSize: 12,
fontWeight: FontWeight.w300
),
border: InputBorder.none
)
)) ]
) : Container( ),
],
),
)
); })
]);
}
}

View File

@@ -50,13 +50,14 @@ class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
markerBuilder: (context, day, events) {
List<Widget> children = [];
for (var ev in events) {
if (children.length == 2 && events.length > 3) {
if (children.length == 1 && events.length > 2) {
children.add( InkWell( onTap: () => widget.parent!.setState(() {
widget.parent!.selected = day.toIso8601String();
widget.parent!.selectedReal = null;
selected = day.toIso8601String();
selectedReal = null;
widget.parent!.widget.isDayPlanner = true;
}),
child: Container(
margin: const EdgeInsets.only(bottom: 5),
padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 2),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
@@ -67,13 +68,14 @@ class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
break;
}
children.add(InkWell( onTap: () => widget.parent!.setState(() {
widget.parent!.selected = day.toIso8601String();
widget.parent!.selectedReal = ev.executionData;
if (widget.parent!.selectedReal == null) {
selected = day.toIso8601String();
selectedReal = ev.executionData;
if (selectedReal == null) {
widget.parent!.widget.isDayPlanner = true;
}
}),
child: Container(
margin: const EdgeInsets.only(bottom: 2.5, top: 25),
padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 2),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
@@ -146,8 +148,8 @@ class SchedulerCalendarWidgetState extends State<SchedulerCalendarWidget> {
}),
onDaySelected: (selectedDay, focusedDay) {
widget.parent!.setState(() {
widget.parent!.selected = selectedDay.toIso8601String();
widget.parent!.selectedReal = null;
selected = selectedDay.toIso8601String();
selectedReal = null;
widget.parent!.widget.isDayPlanner = true;
});
},

View File

@@ -27,21 +27,21 @@ class SchedulerItemWidgetState extends State<SchedulerItemWidget> {
widget.keys[ev.executionData!] = GlobalKey();
var d2 = DateTime.parse(ev.executionData!);
DateTime? d3;
try {
d3 = DateTime.parse(ev.endDate!);
try { d3 = DateTime.parse(ev.endDate!);
} catch (e) { /* */ }
widgets.add(InkWell(
onTap: () => widget.parent?.setState(() {
widget.parent?.selected = widget.parent?.selected != element ? element : null;
widget.parent?.selectedReal = widget.parent?.selected == null ? null : ev.executionData;
if (widget.parent!.selectedReal == null) {
selected = selected != element || ev.executionData != selectedReal ? element : null;
selectedReal = selected == null ? null : ev.executionData;
if (selectedReal == null) {
widget.parent!.widget.isDayPlanner = true;
}
}),
child: Container( key: widget.keys[ev.executionData!],
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 50),
decoration: BoxDecoration(
border: widget.parent?.selected == element ? Border.all(color: const Color.fromRGBO(38, 166, 154, 1), width: 2)
border: selectedReal == ev.executionData ?
Border.all(color: const Color.fromRGBO(38, 166, 154, 1), width: 2)
: Border(top: BorderSide(color: Colors.grey.shade300)),
),
child: Row(children: [
@@ -79,37 +79,39 @@ class SchedulerItemWidgetState extends State<SchedulerItemWidget> {
)));
}
var date = DateTime.parse(element);
children.add(Column( children: [Container(
child: ExpansionTile(
enabled: widget.enabled,
shape: ContinuousRectangleBorder(),
iconColor: Colors.grey,
initiallyExpanded: true,
title: SizedBox(
child : Row( children: [
const Padding(padding: EdgeInsets.only(right: 10),
child: Icon(Icons.view_day, color: Colors.grey)),
Flexible(
child: Padding(
padding: const EdgeInsets.only(right: 5),
child: Text("${date.day > 9 ? date.day : "0${date.day}"}-${date.hour > 9 ? date.hour : "0${date.hour}"}-${date.year}".toUpperCase(), overflow: TextOverflow.ellipsis,
style: const TextStyle(color: Colors.black, fontWeight: FontWeight.w500))))
])
),
collapsedIconColor: Colors.grey,
children: widgets,
)),
children.add(Column( children: [ExpansionTile(
enabled: widget.enabled,
shape: const ContinuousRectangleBorder(),
iconColor: Colors.grey,
initiallyExpanded: true,
title: SizedBox(
child : Row( children: [
const Padding(padding: EdgeInsets.only(right: 10),
child: Icon(Icons.view_day, color: Colors.grey)),
Flexible(
child: Padding(
padding: const EdgeInsets.only(right: 5),
child: Text("${date.day > 9 ? date.day : "0${date.day}"}-${date.month > 9 ? date.month : "0${date.month}"}-${date.year}".toUpperCase(), overflow: TextOverflow.ellipsis,
style: const TextStyle(color: Colors.black, fontWeight: FontWeight.w500))))
])
),
collapsedIconColor: Colors.grey,
children: widgets,
),
Divider(color: Colors.grey.shade300, height: 1)
]));
}
Future.delayed( const Duration(milliseconds: 100), () {
if (widget.parent?.selectedReal != null) {
widget.keys[widget.parent!.selectedReal!]?.currentContext?.findRenderObject()?.showOnScreen();
if (selectedReal != null) {
widget.keys[selectedReal!]?.currentContext?.findRenderObject()?.showOnScreen();
}
});
return SingleChildScrollView( child: Container(
return Container(
alignment: children.isNotEmpty ? Alignment.topLeft : Alignment.center,
color: children.isNotEmpty ? Colors.transparent : Colors.grey.shade300,
width: children.isNotEmpty ? MediaQuery.of(context).size.width : null,
height: MediaQuery.of(context).size.height - HeaderConstants.height - 50,
child: Column( children: children))
child: children.isNotEmpty ? SingleChildScrollView( child: Column( children: children)) : const Text("NO DATA FOUND", style: TextStyle(color: Colors.grey, fontSize: 30))
);
}
}