Create UI components to run L2, L3 and full traces in a new `k-toolbar`

This is for creating a k-toolbar component allowing operators to perform sdntrace (which are run in the data plane). This UI is somewhat similar to https://github.com/kytos-ng/sdntrace_cp/issues/66, except how the data is displayed is asynchronous.

The result is supposed to be shown on a new k-info-panel that will be implemented on https://github.com/amlight/sdntrace/issues/7

We need a new k-tool-bar with inputs to send a request to PUT /api/amlight/sdntrace/trace

The following components are recommended:

k-input and k-input-auto to insert the mandatory dpid with autocompletion (any of the switches that are available in the topology). For each dpid, if metadata.node_name is defined, then it should display metadata.node_name, otherwise just the dpid value.
k-input and k-input-auto to insert the mandatory in_port with autocompletion (any of the interfaces of the dpid that will be selected first). For each port value, if metadata.port_name is defined, then it should display metadata.port_name, otherwise just the port value.

If you need a reference how to implement k-input with autocompletion and also displaying the specific metadata when applicable check out these components on pathfinder:

https://github.com/kytos-ng/pathfinder/blob/master/ui/k-toolbar/main.kytos#L7-L15
https://github.com/kytos-ng/pathfinder/blob/master/ui/k-info-panel/best_path.kytos#L30
k-accordion to group optional items such as eth, and then k-input to add dl_vlan, dl_type, dl_src, and dl_dst.
In the future, ip, ipv6, tcp and udp will be supported when the backends fully supports it.
k-button to submit the request. When the request is sent, the trace_id of the response should be stored to subsequently load a new k-info-panel that will be built on https://github.com/kytos-ng/sdntrace/issues/59, this component will make a request to GET /api/amlight/sdntrace/trace/<trace_id> with the given trace id and show the result. Since the result is asynchronous, then there must be a button that allows the user to refresh it (for more information check out the linked issue)
k-button to clear the component input values. It's not always desirable to automatically clear the inputs once the request is submitted since users might want to reuse or just change again one value and submit another request shortly after.

Scenarios

For local tests, you'll probably want to use a topology such as linear,3 and with mef_eline and create an EVC, just so you have at least one expected completing trace result (since sdntrace would be tracing the current path of this EVC).

You can use topology linear,3:

mn --controller=remote,ip=127.0.0.1,port=6653 --switch=ovsk,protocols=OpenFlow13 --topo=linear,3

Start kytosd:

kytosd -f -E --database mongodb

Wait for switches to connect and then create this EVC:

curl -H 'Content-type: application/json' -X POST http://127.0.0.1:8181/api/kytos/mef_eline/v2/evc/ -d '{"name": "inter_evpl", "dynamic_backup_path": true, "uni_a": {"interface_id": "00:00:00:00:00:00:00:01:1", "tag": {"tag_type": "vlan", "value": 2221}}, "uni_z": { "interface_id": "00:00:00:00:00:00:00:03:1", "tag": {"tag_type": "vlan", "value": 2221}}}'

Send a sdntrace request with curl

❯ curl -X PUT http://127.0.0.1:8181/api/amlight/sdntrace/trace \      
     -H "Content-Type: application/json" \
     -d '{"trace": {"switch": {"dpid": "00:00:00:00:00:00:00:01", "in_port": 1}, "eth": {"dl_type": 2048, "dl_vlan": 2221}, "ip": {"nw_proto": 6}}}' | jq
{
  "result": {
    "trace_id": 30001
  }
}

Get the response by making a request to GET /api/amlight/sdntrace/trace/<trace_id> (notice that this request will be implemented in another component)

❯ curl http://127.0.0.1:8181/api/amlight/sdntrace/trace/30001 | jq
{
  "request_id": 30001,
  "result": [
    {
      "type": "starting",
      "dpid": "00:00:00:00:00:00:00:01",
      "port": 1,
      "time": "2024-01-16 15:23:44.131888"
    },
    {
      "type": "trace",
      "dpid": "00:00:00:00:00:00:00:02",
      "port": 2,
      "time": "0:00:00.521440"
    },
    {
      "type": "trace",
      "dpid": "00:00:00:00:00:00:00:03",
      "port": 2,
      "time": "0:00:01.041600"
    },
    {
      "type": "last",
      "reason": "done",
      "msg": "none",
      "time": "0:00:02.560983"
    }
  ],
  "start_time": "2024-01-16 15:23:44.131888",
  "total_time": "0:00:02.561487",
  "request": {
    "trace": {
      "switch": {
        "dpid": "00:00:00:00:00:00:00:01",
        "in_port": 1
      },
      "eth": {
        "dl_type": 2048,
        "dl_vlan": 2221
      },
      "ip": {
        "nw_proto": 6
      }
    }
  }
}

kytos-ng / sdntrace

Create UI components to run L2, L3 and full traces in a new `k-toolbar` #6

Scenarios