feat: use hex formatted ids in telemetry-ui

Signed-off-by: Wim Looman <[email protected]>

Author: Nemo157

veecle-telemetry-ui/src/store/mod.rs

@@ -23,6 +23,13 @@ use web_time::Instant;
 #[derive(Debug, Copy, Clone, Ord, PartialOrd, Eq, PartialEq, Hash)]
 pub struct LogId(usize);
 
+impl std::fmt::Display for LogId {
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+        let Self(id) = self;
+        write!(f, "{id:05x}")
+    }
+}
+
 impl From<usize> for LogId {
     fn from(value: usize) -> Self {
         LogId(value)

veecle-telemetry-ui/src/ui/selection_panel.rs

@@ -50,7 +50,7 @@ fn selection_content_ui(
             panel_content_ui(ui, |ui| {
                 ui.horizontal(|ui| {
                     ui.strong("Span");
-                    ui.monospace(format!("{span_id:?}"));
+                    ui.monospace(format!("{span_id}"));
                 });
             });
 
@@ -70,7 +70,7 @@ fn selection_content_ui(
             panel_content_ui(ui, |ui| {
                 ui.horizontal(|ui| {
                     ui.strong("Log");
-                    ui.monospace(format!("{log_id:?}"));
+                    ui.monospace(format!("{log_id}"));
                 });
             });
 
@@ -224,9 +224,9 @@ fn optional_label_ui(ui: &mut egui::Ui, value: Option<impl std::fmt::Display>) {
 
 fn reference_link_ui<T>(ui: &mut egui::Ui, selection_state: &SelectionState, item: T)
 where
-    T: Into<Item> + std::fmt::Debug,
+    T: Into<Item> + std::fmt::Display,
 {
-    let text = egui::RichText::new(format!("{item:?}")).monospace();
+    let text = egui::RichText::new(format!("{item}")).monospace();
     let response = ui.link(text);
 
     let item = item.into();

veecle-telemetry-ui/src/ui/timeline/traces.rs

@@ -290,7 +290,7 @@ fn paint_scope_details(ui: &mut egui::Ui, span: SpanRef, max: Timestamp) {
         .num_columns(2)
         .show(ui, |ui| {
             ui.monospace("id");
-            ui.monospace(format!("{:?}", span.context));
+            ui.monospace(format!("{}", span.context));
             ui.end_row();
 
             ui.monospace("operation name");