diff mbox series

[ovs-dev,v2,11/12] python: ovs: flowviz: Support html dark style.

Message ID 20240313090334.414226-12-amorenoz@redhat.com
State Superseded
Headers show
Series Add flow visualization utility. | expand

Checks

Context Check Description
ovsrobot/apply-robot success apply and check: success
ovsrobot/github-robot-_Build_and_Test success github build: passed
ovsrobot/intel-ovs-compilation success test: success

Commit Message

Adrian Moreno March 13, 2024, 9:03 a.m. UTC
In order to support dark style in html outputs, allow the config file to
express the background color and set it in a top style object.

Acked-by: Eelco Chaudron <echaudro@redhat.com>
Signed-off-by: Adrian Moreno <amorenoz@redhat.com>
---
 python/ovs/flowviz/html_format.py   |  4 +++-
 python/ovs/flowviz/odp/html.py      | 30 ++++++++++++++++++++++++-----
 python/ovs/flowviz/ofp/html.py      | 28 ++++++++++++++++++++++-----
 python/ovs/flowviz/ovs-flowviz.conf | 20 +++++++++++++++++++
 4 files changed, 71 insertions(+), 11 deletions(-)
diff mbox series

Patch

diff --git a/python/ovs/flowviz/html_format.py b/python/ovs/flowviz/html_format.py
index ebfa65c34..3f3550da5 100644
--- a/python/ovs/flowviz/html_format.py
+++ b/python/ovs/flowviz/html_format.py
@@ -48,7 +48,9 @@  class HTMLBuffer(FlowBuffer):
         style = ' style="color:{}"'.format(color) if color else ""
         self._text += "<span{}>".format(style)
         if href:
-            self._text += "<a href={}>".format(href)
+            self._text += "<a href={} {}> ".format(
+                href, 'style="color:{}"'.format(color) if color else ""
+            )
         self._text += string
         if href:
             self._text += "</a>"
diff --git a/python/ovs/flowviz/odp/html.py b/python/ovs/flowviz/odp/html.py
index 4aa08dc70..b2855bf40 100644
--- a/python/ovs/flowviz/odp/html.py
+++ b/python/ovs/flowviz/odp/html.py
@@ -55,10 +55,18 @@  class HTMLTree(FlowTree):
         flows(dict[int, list[DPFlow]): Optional; initial flows
     """
 
+    html_body_style = """
+    <style>
+    body {{
+        background-color: {bg};
+        color: {fg};
+    }}
+    </style>"""
+
     html_header = """
     <style>
     .flow{
-        background-color:white;
+        background-color:inherit;
         display: inline-block;
         text-align: left;
         font-family: monospace;
@@ -177,9 +185,9 @@  class HTMLTree(FlowTree):
         append()
         """
 
-        def __init__(self, parent_name, flow=None, opts=None):
+        def __init__(self, parent_name, flow=None, fmt=None, opts=None):
             self._parent_name = parent_name
-            self._formatter = HTMLFormatter(opts)
+            self._formatter = fmt
             self._opts = opts
             super(HTMLTree.HTMLTreeElem, self).__init__(flow)
 
@@ -232,13 +240,14 @@  class HTMLTree(FlowTree):
     def __init__(self, name, opts, flows=None):
         self.opts = opts
         self.name = name
+        self._formatter = HTMLFormatter(opts)
         super(HTMLTree, self).__init__(
             flows, self.HTMLTreeElem("", flow=None, opts=self.opts)
         )
 
     def _new_elem(self, flow, _):
         """Override _new_elem to provide HTMLTreeElems."""
-        return self.HTMLTreeElem(self.name, flow, self.opts)
+        return self.HTMLTreeElem(self.name, flow, self._formatter, self.opts)
 
     def render(self):
         """Render the Tree in HTML.
@@ -247,10 +256,21 @@  class HTMLTree(FlowTree):
             an html string representing the element
         """
         name = self.name.replace(" ", "_")
+        bg = (
+            self._formatter.style.get("background").color
+            if self._formatter.style.get("background")
+            else "white"
+        )
+        fg = (
+            self._formatter.style.get("default").color
+            if self._formatter.style.get("default")
+            else "black"
+        )
 
         html_text = """<input id="collapsible_main-{name}" class="toggle" type="checkbox" onclick="toggle_checkbox(this)" checked>
 <label for="collapsible_main-{name}" class="lbl-toggle lbl-toggle-main">Flow Table</label>"""  # noqa: E501
-        html_obj = self.html_header + html_text.format(name=name)
+        html_obj = self.html_body_style.format(bg=bg, fg=fg)
+        html_obj += self.html_header + html_text.format(name=name)
 
         html_obj += "<div id=flow_list-{name}>".format(name=name)
         (html_elem, _) = self.root.render()
diff --git a/python/ovs/flowviz/ofp/html.py b/python/ovs/flowviz/ofp/html.py
index a66f5fe8e..b00ca58f0 100644
--- a/python/ovs/flowviz/ofp/html.py
+++ b/python/ovs/flowviz/ofp/html.py
@@ -24,6 +24,7 @@  class HTMLProcessor(OpenFlowFactory, FileProcessor):
 
     def __init__(self, opts):
         super().__init__(opts)
+        self.formatter = HTMLFormatter(self.opts)
         self.data = dict()
 
     def start_file(self, name, filename):
@@ -39,21 +40,38 @@  class HTMLProcessor(OpenFlowFactory, FileProcessor):
         self.tables[table].append(flow)
 
     def html(self):
-        html_obj = ""
+        bg = (
+            self.formatter.style.get("background").color
+            if self.formatter.style.get("background")
+            else "white"
+        )
+        fg = (
+            self.formatter.style.get("default").color
+            if self.formatter.style.get("default")
+            else "black"
+        )
+        html_obj = """
+        <style>
+        body {{
+            background-color: {bg};
+            color: {fg};
+        }}
+        </style>""".format(
+            bg=bg, fg=fg
+        )
         for name, tables in self.data.items():
             name = name.replace(" ", "_")
             html_obj += "<h1>{}</h1>".format(name)
             html_obj += "<div id=flow_list>"
             for table, flows in tables.items():
-                formatter = HTMLFormatter(self.opts)
 
                 def anchor(x):
                     return "#table_%s_%s" % (name, x.value["table"])
 
-                formatter.style.set_value_style(
+                self.formatter.style.set_value_style(
                     "resubmit",
                     HTMLStyle(
-                        formatter.style.get("value.resubmit"),
+                        self.formatter.style.get("value.resubmit").color,
                         anchor_gen=anchor,
                     ),
                 )
@@ -71,7 +89,7 @@  class HTMLProcessor(OpenFlowFactory, FileProcessor):
                         if result:
                             highlighted = result.kv
                     buf = HTMLBuffer()
-                    formatter.format_flow(buf, flow, highlighted)
+                    self.formatter.format_flow(buf, flow, highlighted)
                     html_obj += buf.text
                     html_obj += "</li>"
                 html_obj += "</ul>"
diff --git a/python/ovs/flowviz/ovs-flowviz.conf b/python/ovs/flowviz/ovs-flowviz.conf
index 165c453ec..82b5b47d2 100644
--- a/python/ovs/flowviz/ovs-flowviz.conf
+++ b/python/ovs/flowviz/ovs-flowviz.conf
@@ -28,6 +28,8 @@ 
 #
 # HTML Styles
 # ==============
+#   * PORTION: An extra portion is supported: "backgroud" which defines the
+#   background color of the page.
 #   * ELEMENT:
 #     - color: defines the color in hex format
 
@@ -65,6 +67,23 @@  console.key.highlighted.underline = true
 console.value.highlighted.underline = true
 console.delim.highlighted.underline = true
 
+# html
+html.background.color = #23282e
+html.default.color = white
+html.key.color = #5D86BA
+html.value.color = #B0C4DE
+html.delim.color = #B0C4DE
+
+html.key.resubmit.color = #005f00
+html.key.recirc.color = #005f00
+html.value.resubmit.color = #005f00
+html.value.recirc.color = #005f00
+html.key.output.color = #00d700
+html.value.output.color = #00d700
+html.key.highlighted.color = #FF00FF
+html.value.highlighted.color = #FF00FF
+html.key.drop.color = red
+
 
 [styles.light]
 # If a color is omitted, the default terminal color will be used
@@ -99,6 +118,7 @@  console.value.highlighted.underline = true
 console.delim.highlighted.underline = true
 
 # html
+html.background.color = white
 html.key.color =  #00005f
 html.value.color = #870000
 html.key.resubmit.color = #00d700