Annotation saving/fetching from a dashboard to sqlite db

This change makes possible saving information related to a job status in a database from the dashboard
by adding three vertical dots button next to a job status box (e.g when indicates failure).
That enables opening a dialog box fetching/saving any note (usually a link to the issue) from/to the sqlite db.

    <project, branch, pipline, job> -> note

This is the first change in order to enable to establish effective triaging  process using Zuul dashboard.
It adds modal dialog box. I.e.

  <project, branch, pipline, job> -> <textarea, cancel btn, save btn>

Next chage is supposed to connect buttons to fetching/saving operations from/to sqlite db.

zjb.yml

@@ -23,7 +23,6 @@ url_prefix: '/'
 api_url: 'https://zuul.example.com/api/'
 api_tenant: 'tenant-name'
 
-
 #
 # Viewing options
 #

zjb/db.py

@@ -1,5 +1,6 @@
 #!/usr/bin/env python3
 
+import datetime
 import os
 
 from sqlalchemy import Boolean
@@ -41,6 +42,10 @@ class Build(Base):
     updated = Column(DateTime(timezone=True),
                      default=func.now(),
                      onupdate=func.now())
+    notes = Column(String)
+    notes_updated = Column(DateTime(timezone=True),
+                     default=func.now(),
+                     onupdate=func.now())
 
     def __init__(self, project, branch, pipeline, job,
                  uuid, status, URL, voting):
@@ -52,6 +57,7 @@ def __init__(self, project, branch, pipeline, job,
         self.status = status
         self.URL = URL
         self.voting = voting
+        self.notes = ""
 
     @classmethod
     def create_or_update(cls, session, project, branch, pipeline, job,
@@ -74,5 +80,32 @@ def create_or_update(cls, session, project, branch, pipeline, job,
         session.commit()
         return instance
 
+    @classmethod
+    def update_note(cls, session, project, branch, pipeline, job, note):
+        instance = session.query(cls).filter_by(project=project,
+                                                branch=branch,
+                                                pipeline=pipeline,
+                                                job=job).one_or_none()
+        if instance:
+            instance.note = note
+            instance.note_updated = datetime.datetime.now()
+            session.commit()
+        else:
+            print('Error: Can not find a record corresponding to the project: {}, branch: {}, pipeline: {}, job:{}'.format(
+                project, branch, pipeline, job, note))
+        return True
+
+    @classmethod
+    def get_note(cls, session, project, branch, pipeline, job, note):
+        instance = session.query(cls).filter_by(project=project,
+                                                branch=branch,
+                                                pipeline=pipeline,
+                                                job=job).one_or_none()
+        if instance:
+            return instance.note
+        else:
+            print('Error: Can not find a record corresponding to the project: {}, branch: {}, pipeline: {}, job:{}'.format(
+                project, branch, pipeline, job, note))
+        return ""
 
 Base.metadata.create_all(engine)

zjb/templates/results.html.j2

@@ -1,4 +1,5 @@
 {% extends "base.html.j2" %}
+
 {% block content %}
             {%- for pipeline in results %}
             <table>
@@ -24,7 +25,23 @@
                     <tr>
                         <td>{{ project_name }}</td>
                         {%- for job in project_jobs %}
-                        <td><a class="status {{ job.status }} {% if job.voting %}voting{% else %}non-voting{% endif %}"{% if job.URL %} href="{{ job.URL }}"{% endif %}>{{ job.status }}</a></td>
+                        <td>
+                            <!-- A modal dialog containing a form -->
+                            <dialog id="favDialog">
+                            <form>
+                                <p>
+                                <textarea id="notes" name="notes" rows="4" cols="50">
+                                </textarea>
+                                </p>
+                                <div>
+                                <button value="cancel" formmethod="dialog">Cancel</button>
+                                <button id="confirmBtn" value="default">Save</button>
+                                </div>
+                            </form>
+                            </dialog>
+                            <a class="status {{ job.status }} {% if job.voting %}voting{% else %}non-voting{% endif %}"{% if job.URL %} href="{{ job.URL }}"{% endif %}>{{ job.status }}</a>
+                            <button id="showDialog" onclick=openModalDialog()>&#8942;</button>
+                        </td>
                         {%- endfor -%}
                     </tr>
                     {%- endfor -%}
@@ -36,4 +53,12 @@
                 </tfoot>
             </table>
             {%- endfor -%}
+
+            <script>
+                function openModalDialog(){
+                    const favDialog = document.getElementById('favDialog');
+                    favDialog.showModal();
+                }
+            </script>
+
 {% endblock %}