diff --git a/content/posts/2025-08-27-cli_ui_refactor/columns.png b/content/posts/2025-08-27-cli_ui_refactor/columns.png new file mode 100644 index 0000000..5da1ba0 Binary files /dev/null and b/content/posts/2025-08-27-cli_ui_refactor/columns.png differ diff --git a/content/posts/2025-08-27-cli_ui_refactor/filters.png b/content/posts/2025-08-27-cli_ui_refactor/filters.png new file mode 100644 index 0000000..648acac Binary files /dev/null and b/content/posts/2025-08-27-cli_ui_refactor/filters.png differ diff --git a/content/posts/2025-08-27-cli_ui_refactor/gallery1.png b/content/posts/2025-08-27-cli_ui_refactor/gallery1.png new file mode 100644 index 0000000..563e86e Binary files /dev/null and b/content/posts/2025-08-27-cli_ui_refactor/gallery1.png differ diff --git a/content/posts/2025-08-27-cli_ui_refactor/gallery2.png b/content/posts/2025-08-27-cli_ui_refactor/gallery2.png new file mode 100644 index 0000000..e8e0335 Binary files /dev/null and b/content/posts/2025-08-27-cli_ui_refactor/gallery2.png differ diff --git a/content/posts/2025-08-27-cli_ui_refactor/gallery3.png b/content/posts/2025-08-27-cli_ui_refactor/gallery3.png new file mode 100644 index 0000000..27aa08b Binary files /dev/null and b/content/posts/2025-08-27-cli_ui_refactor/gallery3.png differ diff --git a/content/posts/2025-08-27-cli_ui_refactor/gallery4.png b/content/posts/2025-08-27-cli_ui_refactor/gallery4.png new file mode 100644 index 0000000..6b654e1 Binary files /dev/null and b/content/posts/2025-08-27-cli_ui_refactor/gallery4.png differ diff --git a/content/posts/2025-08-27-cli_ui_refactor/gallery5.png b/content/posts/2025-08-27-cli_ui_refactor/gallery5.png new file mode 100644 index 0000000..80a47ac Binary files /dev/null and b/content/posts/2025-08-27-cli_ui_refactor/gallery5.png differ diff --git a/content/posts/2025-08-27-cli_ui_refactor/gallery6.png b/content/posts/2025-08-27-cli_ui_refactor/gallery6.png new file mode 100644 index 0000000..f1e9828 Binary files /dev/null and b/content/posts/2025-08-27-cli_ui_refactor/gallery6.png differ diff --git a/content/posts/2025-08-27-cli_ui_refactor/graphs.png b/content/posts/2025-08-27-cli_ui_refactor/graphs.png new file mode 100644 index 0000000..ae851de Binary files /dev/null and b/content/posts/2025-08-27-cli_ui_refactor/graphs.png differ diff --git a/content/posts/2025-08-27-cli_ui_refactor/index.md b/content/posts/2025-08-27-cli_ui_refactor/index.md new file mode 100644 index 0000000..20fe782 --- /dev/null +++ b/content/posts/2025-08-27-cli_ui_refactor/index.md @@ -0,0 +1,62 @@ +--- +layout: :theme/post +title: "Network Observability On Demand UI Refactor" +description: Enhanced command-line interface in NetObserv 1.10 +tags: CLI,Monitoring,Troubleshooting +authors: [jpinsonneau] +--- + +The NetObserv 1.10 release introduces a sleek, interactive command-line interface powered by the excellent [tview library](https://github.com/rivo/tview) and one of its extension [tvxwidgets](https://github.com/navidys/tvxwidgets). + +These open-source Go packages bring a rich set of UI components such as buttons, dropdowns, popups and tables, all seamlessly integrated into your terminal. + +![tview](tview.gif)
+Figure 1: Tview examples + +# Key Capabilities + +## Table View Enhancements + +The flow and packet capture keeps the same abilities, showing the flow table, cycling between `displays` and `enrichments` and applying `live filters`. + +![table](table.png)
+Figure 2: Flow table view + +New in 1.10: +- *Customizable Columns*: Click the `Manage Columns` button to select which columns to display and tailor the table to your needs.

+![manage columns](columns.png)
+Figure 3: Column selection popup + +- *Smart Filtering*: Live filters now include auto-suggestions, making it easier to select the right keys and values.

+![live filters](filters.png)
+Figure 4: Live filters suggestions + +- *Packet Preview*: When capturing packets, simply click a row to inspect the pcap content directly.

+![packet content](packet.png)
+Figure 5: Packet content display + +## Terminal-Based Line Charts + +Metrics visualization takes a leap forward with real-time graphs rendered directly in the CLI. +![graphs](graphs.png)
+Figure 6: Metrics graphs + +Features include: +- *Panel Selection*: Choose from predefined views or build your own dashboard via the `Manage Panels` popup. +- *Time Range Control*: Use the dropdown to select a time window up to the last 6 hours of data. + +![panels](panels.png)
+Figure 7: Panel management popup + +And of course, the full `NetObserv / On Demand` dashboard remains available in the OpenShift Console for deeper insights. + +# UI Gallery + +A visual tour of the new CLI experience: + +![gallery 1](gallery1.png)

+![gallery 2](gallery2.png)

+![gallery 3](gallery3.png)

+![gallery 4](gallery4.png)

+![gallery 5](gallery5.png)

+![gallery 6](gallery6.png)

diff --git a/content/posts/2025-08-27-cli_ui_refactor/packet.png b/content/posts/2025-08-27-cli_ui_refactor/packet.png new file mode 100644 index 0000000..9374b75 Binary files /dev/null and b/content/posts/2025-08-27-cli_ui_refactor/packet.png differ diff --git a/content/posts/2025-08-27-cli_ui_refactor/panels.png b/content/posts/2025-08-27-cli_ui_refactor/panels.png new file mode 100644 index 0000000..c4af541 Binary files /dev/null and b/content/posts/2025-08-27-cli_ui_refactor/panels.png differ diff --git a/content/posts/2025-08-27-cli_ui_refactor/table.png b/content/posts/2025-08-27-cli_ui_refactor/table.png new file mode 100644 index 0000000..5a45982 Binary files /dev/null and b/content/posts/2025-08-27-cli_ui_refactor/table.png differ diff --git a/content/posts/2025-08-27-cli_ui_refactor/tview.gif b/content/posts/2025-08-27-cli_ui_refactor/tview.gif new file mode 100644 index 0000000..ae9ed3a Binary files /dev/null and b/content/posts/2025-08-27-cli_ui_refactor/tview.gif differ