Front-End Development for Schedule Panel

[ChuanyuXue]

Description

Our focus is the front-end development of the Schedule panel, as depicted in the top-left section of the linked image. The Schedule is essentially a table, implemented for sw device links in the topology, with each link possessing its unique schedule. For simplicity, we'll start with a single, dummy link.

Panel layout

Below is a mockup of the proposed schedule panel layout:

I have draw a draft of the expected schedule panel layout in the example/schedule_layout/gcl.drawio.pdf file. The colored areas mark data to be fetched from the backend, temporarily stored in local JSON files under example/json_format. Specifically, the Schedule panel data is from gcl.json and prio2q.json. Note: this layout is a functional draft and is subject to change.

Data format

• gcl.json: The 'cycle' field marks the maximum time on the arrow; the minimum is always 0. The list represents bar status, with [0, 0, 10000] indicating that the 0th bar has a block from 0 to 10000, represented by the yellow area in our diagram.
• prio2q.json: [0, 0] corresponds to the 0:0 in the priority mapping section.

As a first step, let's concentrate on link (0, 8) and aim to have a working demo displaying the panel on the webpage.