[
https://issues.apache.org/jira/browse/HDDS-13133?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=18001243#comment-18001243
]
Wei-Chiu Chuang commented on HDDS-13133:
----------------------------------------
Any updates here? [~parkerchang] I'd like to take over if no activities on this
one.
Shouldn't take more than an hour to develop with AI tools.
> Display Ratis state machine event timeline in OM web UI
> -------------------------------------------------------
>
> Key: HDDS-13133
> URL: https://issues.apache.org/jira/browse/HDDS-13133
> Project: Apache Ozone
> Issue Type: Improvement
> Components: Ozone Manager
> Affects Versions: 2.1.0
> Reporter: Wei-Chiu Chuang
> Assignee: Cheng Yi Chang
> Priority: Major
> Attachments: ChatGPT Image May 27, 2025, 01_56_15 PM.png, ChatGPT
> Image May 27, 2025, 12_52_42 PM.png
>
>
> I would like to see Ratis state machine events displayed in a chronological
> order. Having such a visualization helps troubleshoot OM problems such as
> leader election, snapshot installation.
> Please see a few mockups below: both of them adds a new tab "Ratis event
> timeline". The first one is a simple table, and the second one outputs a
> chart, for example, it can be rendered using d3.js
> !ChatGPT Image May 27, 2025, 12_52_42 PM.png!
> !ChatGPT Image May 27, 2025, 01_56_15 PM.png!
> How this can be built:
> (1) Backend/data source:
> The OM state machine implementation OzoneManagerStateMachine has several
> Ratis EventApi, LeaderEventApi, FollowerEventApi interface callbacks :
> notifyLeaderReady(), notifyLeaderChanged().
> In each callbacks, it can append a string description of the event to an
> array list inside OMMetrics.
> Note: \@Metric annotation can both annotate a method or a variable. You may
> want to expose a method instead of a simple variable to create a more complex
> output.
> (2) Front end:
> Visualize the data source. The data source is exposed as JMX servlet end
> point. (check out ozoneManager.js for details). As a first step, expose the
> data as a simple table.
> Once the events are shown, use d3.js or other javascript libraries to create
> a timeline chart.
> Example:
> {code}
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <meta charset="UTF-8">
> <title>Ozone Manager - Ratis Event Timeline</title>
> <script src="https://d3js.org/d3.v7.min.js";></script>
> <link
> href="https://ccycloud-2.nightly7310-xt.root.comops.site:9875/static/bootstrap-3.4.1/css/bootstrap.min.css";
> rel="stylesheet">
> <link
> href="https://ccycloud-2.nightly7310-xt.root.comops.site:9875/static/hadoop.css";
> rel="stylesheet">
> <link
> href="https://ccycloud-2.nightly7310-xt.root.comops.site:9875/static/ozone.css";
> rel="stylesheet">
> <style>
> .timeline {
> margin: 50px;
> position: relative;
> background-color: white;
> padding: 20px;
> border-radius: 8px;
> box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
> }
> .event-line {
> stroke: #4CAF50;
> stroke-width: 2px;
> }
> .circle {
> fill: #4CAF50;
> r: 6;
> }
> .label {
> font-size: 14px;
> margin-left: 20px;
> }
> </style>
> </head>
> <body>
> <!-- Include the existing Ozone Manager layout -->
> <div class="container-fluid">
> <div class="row">
> <div class="col-md-12">
> <h2>Ratis Event Timeline</h2>
> <svg width="500" height="600"></svg>
> </div>
> </div>
> </div>
> <script>
> const data = [
> { description: "Install snapshot completed", timestamp: "May 27 2025
> 13:01:55PM" },
> { description: "Install snapshot initiated", timestamp: "May 27 2025
> 13:09:55PM" },
> { description: "New peer om2 added", timestamp: "May 27 2025
> 12:49:55PM" },
> { description: "Term index updated to (1, 1)", timestamp: "May 27 2025
> 12:48:53PM" },
> { description: "leader om1 ready", timestamp: "May 27 2025 12:48:51PM"
> },
> { description: "leader changed to om1", timestamp: "May 27 2025
> 12:48:50PM" }
> ];
> const svg = d3.select("svg");
> const timeline = svg.append("g").attr("class",
> "timeline").attr("transform", "translate(100,50)");
> timeline.append("line")
> .attr("x1", 0)
> .attr("y1", 0)
> .attr("x2", 0)
> .attr("y2", data.length * 100)
> .attr("class", "event-line");
> data.forEach((d, i) => {
> const y = i * 100;
> timeline.append("circle")
> .attr("cx", 0)
> .attr("cy", y)
> .attr("r", 6)
> .attr("class", "circle");
> timeline.append("text")
> .attr("x", 20)
> .attr("y", y + 5)
> .attr("class", "label")
> .text(`${d.description} (${d.timestamp})`);
> });
> </script>
> </body>
> </html>
> {code}
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
