GUI/grim
1
1
Fork 0
Code Issues 6 Pull requests Projects Releases 8 Packages Wiki Activity Actions

gui: optimize network metrics and node ui

Browse source
This commit is contained in:
ardocrat 2023-05-18 22:48:36 +03:00
parent 28e798795d
commit 1fa3904011
6 changed files with 96 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
locales/en.yml
View file

@ -36,4 +36,4 @@ inflation: Inflation
supply: Supply
block_time: Block time
reward: Reward
difficulty_at_blocks: 'Difficulty on %{size} blocks'
difficulty_at_window: 'Difficulty at window %{size}'

2
locales/ru.yml
View file

@ -36,4 +36,4 @@ inflation: Инфляция
supply: Предложение
block_time: Время блока
reward: Награда
difficulty_at_blocks: 'Сложность на %{size} блоках'
difficulty_at_window: 'Сложность в окне %{size}'

3
src/gui/colors.rs
View file

@ -16,4 +16,5 @@ pub const COLOR_YELLOW: egui::Color32 = egui::Color32::from_rgb(254, 241, 2);
pub const COLOR_LIGHT: egui::Color32 = egui::Color32::from_gray(240);
pub const COLOR_DARK: egui::Color32 = egui::Color32::from_gray(60);
pub const COLOR_GRAY: egui::Color32 = egui::Color32::from_gray(120);
// pub const COLOR_LIGHT_GRAY: egui::Color32 = egui::Color32::from_gray(230);
pub const COLOR_GRAY_LIGHT: egui::Color32 = egui::Color32::from_gray(220);
pub const COLOR_GRAY_DARK: egui::Color32 = egui::Color32::from_gray(80);

36
src/gui/views/network_metrics.rs
View file

@ -17,7 +17,7 @@ use eframe::epaint::{Color32, Rounding, Stroke};
use egui::{RichText, ScrollArea, Spinner, Widget};
use grin_servers::DiffBlock;
use crate::gui::colors::{COLOR_DARK, COLOR_GRAY};
use crate::gui::colors::{COLOR_DARK, COLOR_GRAY, COLOR_GRAY_LIGHT};
use crate::gui::icons::{AT, CALENDAR_PLUS, COINS, CUBE, CUBE_TRANSPARENT, HASH, HOURGLASS_LOW, HOURGLASS_MEDIUM, TIMER};
use crate::gui::views::{NetworkTab, View};
use crate::node::Node;
@ -56,7 +56,7 @@ impl NetworkTab for NetworkMetrics {
// Show emission info
ui.vertical_centered_justified(|ui| {
View::sub_title(ui, format!("{} {}", COINS, t!("emission")), COLOR_DARK);
View::sub_title(ui, format!("{} {}", COINS, t!("emission")));
});
ui.add_space(4.0);
@ -83,12 +83,12 @@ impl NetworkTab for NetworkMetrics {
[false, true, false, true]);
});
});
ui.add_space(5.0);
ui.add_space(6.0);
// Show difficulty window info
ui.vertical_centered_justified(|ui| {
let title = t!("difficulty_at_blocks", "size" => stats.diff_stats.window_size);
View::sub_title(ui, format!("{} {}", HOURGLASS_MEDIUM, title), COLOR_DARK);
let title = t!("difficulty_at_window", "size" => stats.diff_stats.window_size);
View::sub_title(ui, format!("{} {}", HOURGLASS_MEDIUM, title));
});
ui.add_space(4.0);
ui.columns(3, |columns| {
@ -117,7 +117,7 @@ impl NetworkTab for NetworkMetrics {
let blocks_size = stats.diff_stats.last_blocks.len();
ScrollArea::vertical().auto_shrink([false; 2]).stick_to_bottom(true).show_rows(
ui,
DIFF_BLOCK_HEIGHT,
DIFF_BLOCK_UI_HEIGHT,
blocks_size,
|ui, row_range| {
for index in row_range {
@ -138,20 +138,19 @@ impl NetworkTab for NetworkMetrics {
}
}
const DIFF_BLOCK_HEIGHT: f32 = 75.0;
const DIFF_BLOCK_UI_HEIGHT: f32 = 77.0;
fn draw_diff_block(ui: &mut egui::Ui, db: &DiffBlock, rounding: [bool; 2]) {
// Add space before first item
if rounding[0] {
ui.add_space(5.0);
ui.add_space(4.0);
}
ui.horizontal(|ui| {
ui.add_space(6.0);
ui.vertical(|ui| {
let mut rect = ui.available_rect_before_wrap();
rect.set_height(DIFF_BLOCK_HEIGHT);
rect.set_height(DIFF_BLOCK_UI_HEIGHT);
ui.painter().rect(
rect,
Rounding {
@ -161,21 +160,21 @@ fn draw_diff_block(ui: &mut egui::Ui, db: &DiffBlock, rounding: [bool; 2]) {
se: if rounding[1] { 8.0 } else { 0.0 },
},
Color32::WHITE,
Stroke { width: 1.0, color: Color32::from_gray(230) }
Stroke { width: 1.0, color: COLOR_GRAY_LIGHT }
);
ui.add_space(2.0);
ui.horizontal_top(|ui| {
ui.add_space(6.0);
ui.add_space(5.0);
ui.heading(RichText::new(HASH)
.color(Color32::BLACK)
.size(16.0));
ui.add_space(3.0);
.size(18.0));
ui.add_space(2.0);
// Draw block hash
ui.heading(RichText::new(db.block_hash.to_string())
.color(Color32::BLACK)
.size(16.0));
.size(18.0));
});
ui.horizontal_top(|ui| {
ui.add_space(6.0);
@ -218,12 +217,7 @@ fn draw_diff_block(ui: &mut egui::Ui, db: &DiffBlock, rounding: [bool; 2]) {
.size(16.0));
}
});
ui.add_space(4.0);
ui.add_space(2.0);
});
});
// Add space after last item
if rounding[1] {
ui.add_space(5.0);
}
}

136
src/gui/views/network_node.rs
View file

@ -17,7 +17,7 @@ use egui::{Color32, RichText, Rounding, ScrollArea, Spinner, Widget};
use grin_servers::common::stats::TxStats;
use grin_servers::PeerStats;
use crate::gui::colors::{COLOR_DARK, COLOR_GRAY};
use crate::gui::colors::{COLOR_DARK, COLOR_GRAY, COLOR_GRAY_LIGHT};
use crate::gui::icons::{AT, CUBE, DEVICES, FLOW_ARROW, HANDSHAKE, PACKAGE, PLUGS_CONNECTED, SHARE_NETWORK};
use crate::gui::views::{NetworkTab, View};
use crate::node::Node;
@ -55,7 +55,7 @@ impl NetworkTab for NetworkNode {
.show(ui, |ui| {
// Show header stats
ui.vertical_centered_justified(|ui| {
View::sub_title(ui, format!("{} {}", FLOW_ARROW, t!("header")), COLOR_DARK);
View::sub_title(ui, format!("{} {}", FLOW_ARROW, t!("header")));
});
ui.add_space(4.0);
ui.columns(2, |columns| {
@ -89,9 +89,9 @@ impl NetworkTab for NetworkNode {
});
// Show block stats
ui.add_space(5.0);
ui.add_space(6.0);
ui.vertical_centered_justified(|ui| {
View::sub_title(ui, format!("{} {}", CUBE, t!("block")), COLOR_DARK);
View::sub_title(ui, format!("{} {}", CUBE, t!("block")));
});
ui.add_space(4.0);
ui.columns(2, |columns| {
@ -125,9 +125,9 @@ impl NetworkTab for NetworkNode {
});
// Show data stats
ui.add_space(5.0);
ui.add_space(6.0);
ui.vertical_centered_justified(|ui| {
View::sub_title(ui, format!("{} {}", SHARE_NETWORK, t!("data")), COLOR_DARK);
View::sub_title(ui, format!("{} {}", SHARE_NETWORK, t!("data")));
});
ui.add_space(4.0);
ui.columns(2, |columns| {
@ -174,13 +174,14 @@ impl NetworkTab for NetworkNode {
// Show peers stats when available
if stats.peer_count > 0 {
ui.add_space(5.0);
ui.add_space(6.0);
ui.vertical_centered_justified(|ui| {
View::sub_title(ui,format!("{} {}", HANDSHAKE, t!("peers")), COLOR_DARK);
View::sub_title(ui,format!("{} {}", HANDSHAKE, t!("peers")));
});
ui.add_space(4.0);
for (index, ps) in stats.peer_stats.iter().enumerate() {
for index in 0..stats.peer_stats.len() {
let ps = stats.peer_stats.get(index).unwrap();
let rounding = if stats.peer_count == 1 {
[true, true]
} else if index == 0 {
@ -200,64 +201,73 @@ impl NetworkTab for NetworkNode {
}
fn draw_peer_stats(ui: &mut egui::Ui, peer: &PeerStats, rounding: [bool; 2]) {
let mut rect = ui.available_rect_before_wrap();
rect.set_height(77.0);
ui.vertical(|ui| {
let mut rect = ui.available_rect_before_wrap();
rect.set_height(77.0);
ui.painter().rect(
rect,
Rounding {
nw: if rounding[0] { 8.0 } else { 0.0 },
ne: if rounding[0] { 8.0 } else { 0.0 },
sw: if rounding[1] { 8.0 } else { 0.0 },
se: if rounding[1] { 8.0 } else { 0.0 },
},
Color32::WHITE,
Stroke { width: 1.0, color: Color32::from_gray(230) }
);
ui.painter().rect(
rect,
Rounding {
nw: if rounding[0] { 8.0 } else { 0.0 },
ne: if rounding[0] { 8.0 } else { 0.0 },
sw: if rounding[1] { 8.0 } else { 0.0 },
se: if rounding[1] { 8.0 } else { 0.0 },
},
Color32::WHITE,
Stroke { width: 1.0, color: COLOR_GRAY_LIGHT }
);
ui.add_space(2.0);
ui.horizontal_top(|ui| {
ui.add_space(6.0);
ui.heading(RichText::new(PLUGS_CONNECTED)
.color(Color32::BLACK)
.size(18.0));
ui.add_space(6.0);
// Draw peer address
ui.heading(RichText::new(&peer.addr)
.color(Color32::BLACK)
.size(18.0));
});
ui.horizontal_top(|ui| {
ui.add_space(6.0);
ui.heading(RichText::new(PACKAGE)
.color(COLOR_DARK)
.size(16.0));
ui.add_space(6.0);
// Draw peer difficulty and height
ui.heading(RichText::new(peer.total_difficulty.to_string())
.color(COLOR_DARK)
.size(16.0));
ui.add_space(2.0);
ui.heading(RichText::new(AT).color(COLOR_DARK).size(16.0));
ui.horizontal_top(|ui| {
ui.add_space(5.0);
ui.heading(RichText::new(PLUGS_CONNECTED)
.color(Color32::BLACK)
.size(18.0));
ui.add_space(3.0);
// Draw peer address
ui.heading(RichText::new(&peer.addr)
.color(Color32::BLACK)
.size(18.0));
});
ui.horizontal_top(|ui| {
ui.add_space(6.0);
ui.heading(RichText::new(PACKAGE)
.color(COLOR_DARK)
.size(16.0));
ui.add_space(4.0);
// Draw peer difficulty and height
ui.heading(RichText::new(peer.total_difficulty.to_string())
.color(COLOR_DARK)
.size(16.0));
ui.add_space(2.0);
ui.heading(RichText::new(AT).color(COLOR_DARK).size(16.0));
ui.add_space(2.0);
ui.heading(RichText::new(peer.height.to_string())
.color(COLOR_DARK)
.size(16.0));
});
ui.horizontal_top(|ui| {
ui.add_space(6.0);
ui.heading(RichText::new(DEVICES)
.color(COLOR_GRAY)
.size(16.0));
ui.add_space(4.0);
// Draw peer user-agent
ui.heading(RichText::new(&peer.user_agent)
.color(COLOR_GRAY)
.size(16.0));
});
ui.add_space(2.0);
ui.heading(RichText::new(peer.height.to_string())
.color(COLOR_DARK)
.size(16.0));
});
ui.horizontal_top(|ui| {
ui.add_space(6.0);
ui.heading(RichText::new(DEVICES)
.color(COLOR_GRAY)
.size(16.0));
ui.add_space(6.0);
// Draw peer user-agent
ui.heading(RichText::new(&peer.user_agent)
.color(COLOR_GRAY)
.size(16.0));
});
ui.add_space(2.0);
// Add space after last item
if !rounding[0] && rounding[1] {
ui.add_space(5.0);
} else if rounding[0] && rounding[1] {
ui.add_space(2.0);
}
}

8
src/gui/views/views.rs
View file

@ -16,7 +16,7 @@ use eframe::epaint::{Color32, FontId, Rounding, Stroke};
use eframe::epaint::text::{LayoutJob, TextFormat, TextWrapping};
use egui::{RichText, Sense, Widget};
use crate::gui::colors::{COLOR_DARK, COLOR_GRAY, COLOR_LIGHT};
use crate::gui::colors::{COLOR_DARK, COLOR_GRAY, COLOR_LIGHT, COLOR_GRAY_LIGHT, COLOR_GRAY_DARK};
pub struct View;
@ -64,8 +64,8 @@ impl View {
};
}
pub fn sub_title(ui: &mut egui::Ui, text: String, color: Color32) {
ui.label(RichText::new(text).size(17.0).color(color));
pub fn sub_title(ui: &mut egui::Ui, text: String) {
ui.label(RichText::new(text.to_uppercase()).size(16.0).color(COLOR_GRAY_DARK));
}
/// Draw rounded box with some value and label in the middle
@ -86,7 +86,7 @@ impl View {
se: if r[3] { 8.0 } else { 0.0 },
},
Color32::WHITE,
Stroke { width: 1.0, color: Color32::from_gray(230) },
Stroke { width: 1.0, color: COLOR_GRAY_LIGHT },
);
ui.vertical_centered_justified(|ui| {