use std::{ error::Error, io, time::{Duration, Instant}, }; use crossterm::{ event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind}, execute, terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen}, }; use ratatui::{prelude::*, widgets::*}; struct StatefulList { state: ListState, items: Vec, } impl StatefulList { fn with_items(items: Vec) -> StatefulList { StatefulList { state: ListState::default(), items, } } fn next(&mut self) { let i = match self.state.selected() { Some(i) => { if i >= self.items.len() - 1 { 0 } else { i + 1 } } None => 0, }; self.state.select(Some(i)); } fn previous(&mut self) { let i = match self.state.selected() { Some(i) => { if i == 0 { self.items.len() - 1 } else { i - 1 } } None => 0, }; self.state.select(Some(i)); } fn unselect(&mut self) { self.state.select(None); } } /// This struct holds the current state of the app. In particular, it has the `items` field which is /// a wrapper around `ListState`. Keeping track of the items state let us render the associated /// widget with its state and have access to features such as natural scrolling. /// /// Check the event handling at the bottom to see how to change the state on incoming events. /// Check the drawing logic for items on how to specify the highlighting style for selected items. struct App<'a> { items: StatefulList<(&'a str, usize)>, events: Vec<(&'a str, &'a str)>, } impl<'a> App<'a> { fn new() -> App<'a> { App { items: StatefulList::with_items(vec![ ("Item0", 1), ("Item1", 2), ("Item2", 1), ("Item3", 3), ("Item4", 1), ("Item5", 4), ("Item6", 1), ("Item7", 3), ("Item8", 1), ("Item9", 6), ("Item10", 1), ("Item11", 3), ("Item12", 1), ("Item13", 2), ("Item14", 1), ("Item15", 1), ("Item16", 4), ("Item17", 1), ("Item18", 5), ("Item19", 4), ("Item20", 1), ("Item21", 2), ("Item22", 1), ("Item23", 3), ("Item24", 1), ]), events: vec![ ("Event1", "INFO"), ("Event2", "INFO"), ("Event3", "CRITICAL"), ("Event4", "ERROR"), ("Event5", "INFO"), ("Event6", "INFO"), ("Event7", "WARNING"), ("Event8", "INFO"), ("Event9", "INFO"), ("Event10", "INFO"), ("Event11", "CRITICAL"), ("Event12", "INFO"), ("Event13", "INFO"), ("Event14", "INFO"), ("Event15", "INFO"), ("Event16", "INFO"), ("Event17", "ERROR"), ("Event18", "ERROR"), ("Event19", "INFO"), ("Event20", "INFO"), ("Event21", "WARNING"), ("Event22", "INFO"), ("Event23", "INFO"), ("Event24", "WARNING"), ("Event25", "INFO"), ("Event26", "INFO"), ], } } /// Rotate through the event list. /// This only exists to simulate some kind of "progress" fn on_tick(&mut self) { let event = self.events.remove(0); self.events.push(event); } } fn main() -> Result<(), Box> { // setup terminal enable_raw_mode()?; let mut stdout = io::stdout(); execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?; let backend = CrosstermBackend::new(stdout); let mut terminal = Terminal::new(backend)?; // create app and run it let tick_rate = Duration::from_millis(250); let app = App::new(); let res = run_app(&mut terminal, app, tick_rate); // restore terminal disable_raw_mode()?; execute!( terminal.backend_mut(), LeaveAlternateScreen, DisableMouseCapture )?; terminal.show_cursor()?; if let Err(err) = res { println!("{err:?}"); } Ok(()) } fn run_app( terminal: &mut Terminal, mut app: App, tick_rate: Duration, ) -> io::Result<()> { let mut last_tick = Instant::now(); loop { terminal.draw(|f| ui(f, &mut app))?; let timeout = tick_rate.saturating_sub(last_tick.elapsed()); if crossterm::event::poll(timeout)? { if let Event::Key(key) = event::read()? { if key.kind == KeyEventKind::Press { match key.code { KeyCode::Char('q') => return Ok(()), KeyCode::Left | KeyCode::Char('h') => app.items.unselect(), KeyCode::Down | KeyCode::Char('j') => app.items.next(), KeyCode::Up | KeyCode::Char('k') => app.items.previous(), _ => {} } } } } if last_tick.elapsed() >= tick_rate { app.on_tick(); last_tick = Instant::now(); } } } fn ui(f: &mut Frame, app: &mut App) { // Create two chunks with equal horizontal screen space let horizontal = Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)]); let [item_list_area, event_list_area] = f.size().split(&horizontal); // Iterate through all elements in the `items` app and append some debug text to it. let items: Vec = app .items .items .iter() .map(|i| { let mut lines = vec![Line::from(i.0)]; for _ in 0..i.1 { lines.push( "Lorem ipsum dolor sit amet, consectetur adipiscing elit." .italic() .into(), ); } ListItem::new(lines).style(Style::default().fg(Color::Black).bg(Color::White)) }) .collect(); // Create a List from all list items and highlight the currently selected one let items = List::new(items) .block(Block::default().borders(Borders::ALL).title("List")) .highlight_style( Style::default() .bg(Color::LightGreen) .add_modifier(Modifier::BOLD), ) .highlight_symbol(">> "); // We can now render the item list f.render_stateful_widget(items, item_list_area, &mut app.items.state); // Let's do the same for the events. // The event list doesn't have any state and only displays the current state of the list. let events: Vec = app .events .iter() .rev() .map(|&(event, level)| { // Colorcode the level depending on its type let s = match level { "CRITICAL" => Style::default().fg(Color::Red), "ERROR" => Style::default().fg(Color::Magenta), "WARNING" => Style::default().fg(Color::Yellow), "INFO" => Style::default().fg(Color::Blue), _ => Style::default(), }; // Add a example datetime and apply proper spacing between them let header = Line::from(vec![ Span::styled(format!("{level:<9}"), s), " ".into(), "2020-01-01 10:00:00".italic(), ]); // The event gets its own line let log = Line::from(vec![event.into()]); // Here several things happen: // 1. Add a `---` spacing line above the final list entry // 2. Add the Level + datetime // 3. Add a spacer line // 4. Add the actual event ListItem::new(vec![ Line::from("-".repeat(event_list_area.width as usize)), header, Line::from(""), log, ]) }) .collect(); let events_list = List::new(events) .block(Block::default().borders(Borders::ALL).title("List")) .direction(ListDirection::BottomToTop); f.render_widget(events_list, event_list_area); }