fix(ui): upgrade tui to latest version and fix breaking changes (#190)

* fix(ui): upgrade tui to latest version and fix for breaking changes in the api * fix(style): address PR comments
imsnif · Sep 29, 2020 · 19b956e · 19b956e
1 parent 8020b94
commit 19b956e
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 193 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -21,7 +21,7 @@ exclude = ["src/tests/*", "demo.gif"]
 [dependencies]
 pnet = "0.26.0"
 ipnetwork = "0.16.0"
-tui = { version = "0.6", default-features = false, features = ["crossterm"]}
+tui = { version = "0.12", default-features = false, features = ["crossterm"]}
 crossterm = "0.17.7"
 structopt = "0.3"
 failure = "0.1.6"

diff --git a/src/display/components/header_details.rs b/src/display/components/header_details.rs
@@ -4,7 +4,8 @@ use ::tui::backend::Backend;
 use ::tui::layout::{Alignment, Rect};
 use ::tui::style::{Color, Modifier, Style};
 use ::tui::terminal::Frame;
-use ::tui::widgets::{Paragraph, Text, Widget};
+use ::tui::text::Span;
+use ::tui::widgets::Paragraph;
 
 const SECONDS_IN_DAY: u64 = 86400;
 
@@ -53,16 +54,13 @@ impl<'a> HeaderDetails<'a> {
         bandwidth: &str,
         color: Color,
     ) {
-        let bandwidth_text = {
-            [Text::styled(
-                bandwidth,
-                Style::default().fg(color).modifier(Modifier::BOLD),
-            )]
-        };
+        let bandwidth_text = Span::styled(
+            bandwidth,
+            Style::default().fg(color).add_modifier(Modifier::BOLD),
+        );
 
-        Paragraph::new(bandwidth_text.iter())
-            .alignment(Alignment::Left)
-            .render(frame, rect);
+        let paragraph = Paragraph::new(bandwidth_text).alignment(Alignment::Left);
+        frame.render_widget(paragraph, rect);
     }
 
     fn bandwidth_string(&self) -> String {
@@ -88,13 +86,12 @@ impl<'a> HeaderDetails<'a> {
         elapsed_time: &str,
         color: Color,
     ) {
-        let elapsed_time_text = [Text::styled(
+        let elapsed_time_text = Span::styled(
             elapsed_time,
-            Style::default().fg(color).modifier(Modifier::BOLD),
-        )];
-        Paragraph::new(elapsed_time_text.iter())
-            .alignment(Alignment::Right)
-            .render(frame, rect);
+            Style::default().fg(color).add_modifier(Modifier::BOLD),
+        );
+        let paragraph = Paragraph::new(elapsed_time_text).alignment(Alignment::Right);
+        frame.render_widget(paragraph, rect);
     }
 
     fn days_string(&self) -> String {

diff --git a/src/display/components/help_text.rs b/src/display/components/help_text.rs
@@ -2,7 +2,8 @@ use ::tui::backend::Backend;
 use ::tui::layout::{Alignment, Rect};
 use ::tui::style::{Modifier, Style};
 use ::tui::terminal::Frame;
-use ::tui::widgets::{Paragraph, Text, Widget};
+use ::tui::text::Span;
+use ::tui::widgets::Paragraph;
 
 pub struct HelpText {
     pub paused: bool,
@@ -20,34 +21,31 @@ const TEXT_TAB_TIP: &str = " Use <TAB> to rearrange tables.";
 
 impl HelpText {
     pub fn render(&self, frame: &mut Frame<impl Backend>, rect: Rect) {
-        let text = {
-            let pause_content = if self.paused {
-                TEXT_WHEN_PAUSED
-            } else {
-                TEXT_WHEN_NOT_PAUSED
-            };
-
-            let dns_content = if rect.width <= FIRST_WIDTH_BREAKPOINT {
-                ""
-            } else if self.show_dns {
-                TEXT_WHEN_DNS_SHOWN
-            } else {
-                TEXT_WHEN_DNS_NOT_SHOWN
-            };
+        let pause_content = if self.paused {
+            TEXT_WHEN_PAUSED
+        } else {
+            TEXT_WHEN_NOT_PAUSED
+        };
 
-            let tab_text = if rect.width <= SECOND_WIDTH_BREAKPOINT {
-                ""
-            } else {
-                TEXT_TAB_TIP
-            };
+        let dns_content = if rect.width <= FIRST_WIDTH_BREAKPOINT {
+            ""
+        } else if self.show_dns {
+            TEXT_WHEN_DNS_SHOWN
+        } else {
+            TEXT_WHEN_DNS_NOT_SHOWN
+        };
 
-            [Text::styled(
-                format!("{}{}{}", pause_content, tab_text, dns_content),
-                Style::default().modifier(Modifier::BOLD),
-            )]
+        let tab_text = if rect.width <= SECOND_WIDTH_BREAKPOINT {
+            ""
+        } else {
+            TEXT_TAB_TIP
         };
-        Paragraph::new(text.iter())
-            .alignment(Alignment::Left)
-            .render(frame, rect);
+
+        let text = Span::styled(
+            [pause_content, tab_text, dns_content].concat(),
+            Style::default().add_modifier(Modifier::BOLD),
+        );
+        let paragraph = Paragraph::new(text).alignment(Alignment::Left);
+        frame.render_widget(paragraph, rect);
     }
 }
diff --git a/src/display/components/table.rs b/src/display/components/table.rs
@@ -3,10 +3,10 @@ use ::std::iter::FromIterator;
 use ::unicode_width::UnicodeWidthChar;
 
 use ::tui::backend::Backend;
-use ::tui::layout::Rect;
+use ::tui::layout::{Constraint, Rect};
 use ::tui::style::{Color, Style};
 use ::tui::terminal::Frame;
-use ::tui::widgets::{Block, Borders, Row, Widget};
+use ::tui::widgets::{Block, Borders, Row};
 
 use crate::display::{Bandwidth, DisplayBandwidth, UIState};
 use crate::network::{display_connection_string, display_ip_or_host};
@@ -216,7 +216,7 @@ impl<'a> Table<'a> {
             0,
             ColumnData {
                 column_count: ColumnCount::Two,
-                column_widths: vec![12, 23],
+                column_widths: vec![15, 20],
             },
         );
         breakpoints.insert(
@@ -290,13 +290,14 @@ impl<'a> Table<'a> {
         });
 
         let table_rows = rows.map(|row| Row::StyledData(row.into_iter(), Style::default()));
-
-        ::tui::widgets::Table::new(column_names.into_iter(), table_rows)
+        let width_constraints: Vec<Constraint> =
+            widths.iter().map(|w| Constraint::Length(*w)).collect();
+        let table = ::tui::widgets::Table::new(column_names.into_iter(), table_rows)
             .block(Block::default().title(self.title).borders(Borders::ALL))
             .header_style(Style::default().fg(Color::Yellow))
-            .widths(&widths[..])
+            .widths(&width_constraints)
             .style(Style::default())
-            .column_spacing(column_spacing)
-            .render(frame, rect);
+            .column_spacing(column_spacing);
+        frame.render_widget(table, rect);
     }
 }
diff --git a/src/main.rs b/src/main.rs
@@ -84,7 +84,8 @@ fn try_main() -> Result<(), failure::Error> {
     } else {
         match terminal::enable_raw_mode() {
             Ok(()) => {
-                let terminal_backend = CrosstermBackend::new();
+                let stdout = std::io::stdout();
+                let terminal_backend = CrosstermBackend::new(stdout);
                 start(terminal_backend, os_input, opts);
             }
             Err(_) => failure::bail!(

diff --git a/src/tests/cases/snapshots/ui__layout_under_50_width_under_50_height-2.snap b/src/tests/cases/snapshots/ui__layout_under_50_width_under_50_height-2.snap
@@ -29,10 +29,10 @@ expression: "&terminal_draw_events_mirror[1]"
 
 
 
- 3.3.3.3            0Bps / 28Bps                 
- 2.2.2.2            0Bps / 26Bps                 
- 1.1.1.1            0Bps / 22Bps                 
- 4.4.4.4            0Bps / 21Bps                 
+ 3.3.3.3               0Bps / 28Bps              
+ 2.2.2.2               0Bps / 26Bps              
+ 1.1.1.1               0Bps / 22Bps              
+ 4.4.4.4               0Bps / 21Bps              
 
 
 

diff --git a/src/tests/cases/snapshots/ui__layout_under_50_width_under_50_height.snap b/src/tests/cases/snapshots/ui__layout_under_50_width_under_50_height.snap
@@ -27,7 +27,7 @@ expression: "&terminal_draw_events_mirror[0]"
 │                                               │
 └───────────────────────────────────────────────┘
 ┌Utilization by remote address──────────────────┐
-│Remote Address     Up / Down                   │
+│Remote Address        Up / Down                │
 │                                               │
 │                                               │
 │                                               │

diff --git a/src/tests/cases/snapshots/ui__two_windows_split_horizontally.snap b/src/tests/cases/snapshots/ui__two_windows_split_horizontally.snap
@@ -4,7 +4,7 @@ expression: "&terminal_draw_events_mirror[0]"
 ---
  Total Up / Down: 0Bps / 0Bps                               
 ┌Utilization by remote address─────────────────────────────┐
-│Remote Address          Up / Down                         │
+│Remote Address             Up / Down                      │
 │                                                          │
 │                                                          │
 │                                                          │