Update function history view

routes/timer.py

@@ -425,7 +425,7 @@ def logs(function_id):
 def history(function_id):
     # Fetch the timer function to verify ownership
     timer_function = db.execute("""
-        SELECT id, name, code, version_number
+        SELECT id, name, code AS script, version_number
         FROM timer_functions
         WHERE id = %s AND user_id = %s
     """, [function_id, current_user.id], one=True)
@@ -450,7 +450,8 @@ def history(function_id):
         'user_id': current_user.id,
         'function_id': function_id,
         'timer_function': timer_function,
-        'versions': versions
+        'versions': versions,
+        'title': timer_function['name']
     }
 
     if htmx:

static/js/mithril/FunctionHistory.js

@@ -1,96 +1,170 @@
 const FunctionHistory = {
-    oninit: function(vnode) {
+  oninit: function (vnode) {
-        // Initialize indices in state
-        vnode.state.leftIndex = vnode.attrs.versions.length - 1;  // Earliest
-        vnode.state.rightIndex = 0;  // Latest
-    },
-    view: function (vnode) {
     const versions = vnode.attrs.versions;
-        return m("div", [
+    vnode.state.mode = "view"; // 'view' or 'diff'
-            m("div.flex.gap-4.mb-4", [
+    vnode.state.selectedVersion = versions[0];
-                m("div.flex-1", [
+    vnode.state.leftVersion = versions.length > 1 ? versions[1] : versions[0];
-                    m("label.block.text-sm.font-medium.text-gray-700", "Left Version"),
+    vnode.state.rightVersion = versions[0];
-                    m("select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm", {
+    vnode.state.editor = null;
-                        onchange: (e) => {
+    vnode.state.aceDiffer = null;
-                            vnode.state.leftIndex = parseInt(e.target.value);
-                            vnode.state.leftVersion = versions[vnode.state.leftIndex];
-                            vnode.state.updateDiff();
   },
-                        value: vnode.state.leftIndex
+
-                    }, versions.map((v, idx) =>
+  view: function (vnode) {
-                        m("option", { value: idx }, `Version ${v.version_number} (${new Date(v.versioned_at).toLocaleString()})`)
+    const { versions } = vnode.attrs;
-                    ))
+    const { mode, selectedVersion, leftVersion, rightVersion } = vnode.state;
-                ]),
+
-                m("div.flex-1", [
+    return m(".flex.flex-col.md:flex-row.h-full", [
-                    m("label.block.text-sm.font-medium.text-gray-700", "Right Version"),
+      // Vertical Timeline
-                    m("select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm", {
+      m(".w-full.md:w-64.border-b.md:border-r.md:border-b-0.overflow-y-auto", [
-                        onchange: (e) => {
+        m("div.p-4.border-b.flex.justify-between.items-center", [
-                            vnode.state.rightIndex = parseInt(e.target.value);
+          m("h3.text-lg.font-semibold", "History"),
-                            vnode.state.rightVersion = versions[vnode.state.rightIndex];
+          m(
-                            vnode.state.updateDiff();
+            "button.text-sm.bg-gray-200.hover:bg-gray-300.text-gray-800.font-semibold.py-1.px-2.rounded",
+            {
+              onclick: () => {
+                vnode.state.mode = mode === "view" ? "diff" : "view";
               },
-                        value: vnode.state.rightIndex
+            },
-                    }, versions.map((v, idx) =>
+            mode === "view" ? "Compare" : "View"
-                        m("option", { value: idx }, `Version ${v.version_number} (${new Date(v.versioned_at).toLocaleString()})`)
+          ),
-                    ))
-                ])
         ]),
-            m("div", {
+        m(
-                id: "diff-container",
+          "ul.p-2",
-                style: "height: 500px; position: relative;"
+          versions.map((version) => {
+            const isActive =
+              selectedVersion &&
+              version.version_number === selectedVersion.version_number;
+            return m(
+              "li.p-2.cursor-pointer",
+              {
+                class: isActive
+                  ? "bg-gray-200 rounded"
+                  : "hover:bg-gray-100 rounded",
+                onclick: () => {
+                  vnode.state.selectedVersion = version;
+                  if (mode === "diff") {
+                    vnode.state.rightVersion = version;
+                  }
+                },
+              },
+              [
+                m("div.font-bold", `Version ${version.version_number}`),
+                m(
+                  "div.text-sm.text-gray-600",
+                  new Date(version.versioned_at).toLocaleString()
+                ),
+              ]
+            );
           })
+        ),
+      ]),
+
+      // Code Viewer or Differ
+      m(".flex-1.p-4", [
+        mode === "view"
+          ? m("div", [
+              m(
+                "h3.text-lg.font-semibold.mb-2",
+                `Version ${selectedVersion.version_number}`
+              ),
+              m("div#editor-history", { style: "height: 600px;" }),
+            ])
+          : m("div", [
+              m(".flex.flex-col.md:flex-row.gap-4.mb-4", [
+                m(".flex-1", [
+                  m("label.block.text-sm.font-medium.text-gray-700", "Left"),
+                  m(
+                    "select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm",
+                    {
+                      onchange: (e) =>
+                        (vnode.state.leftVersion = versions.find(
+                          (v) => v.version_number == e.target.value
+                        )),
+                      value: leftVersion.version_number,
+                    },
+                    versions.map((v) =>
+                      m(
+                        "option",
+                        { value: v.version_number },
+                        `Version ${v.version_number}`
+                      )
+                    )
+                  ),
+                ]),
+                m(".flex-1", [
+                  m("label.block.text-sm.font-medium.text-gray-700", "Right"),
+                  m(
+                    "select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm",
+                    {
+                      onchange: (e) =>
+                        (vnode.state.rightVersion = versions.find(
+                          (v) => v.version_number == e.target.value
+                        )),
+                      value: rightVersion.version_number,
+                    },
+                    versions.map((v) =>
+                      m(
+                        "option",
+                        { value: v.version_number },
+                        `Version ${v.version_number}`
+                      )
+                    )
+                  ),
+                ]),
+              ]),
+              m("#diff-container", { style: "height: 600px;" }),
+            ]),
+      ]),
     ]);
   },
+
   oncreate: function (vnode) {
-        const versions = vnode.attrs.versions;
+    this.updateEditorOrDiffer(vnode);
-        // Initialize with the earliest and most recent versions if available
+  },
-        if (versions.length >= 2) {
-            vnode.state.leftVersion = versions[versions.length - 1];  // Earliest version
-            vnode.state.rightVersion = versions[0];                   // Latest version
-        } else if (versions.length === 1) {
-            vnode.state.leftVersion = versions[0];
-            vnode.state.rightVersion = versions[0];
-        }
 
-        vnode.state.updateDiff = function () {
+  onupdate: function (vnode) {
+    this.updateEditorOrDiffer(vnode);
+  },
+
+  updateEditorOrDiffer: function (vnode) {
+    const { mode, selectedVersion, leftVersion, rightVersion } = vnode.state;
+
+    if (mode === "view") {
+      if (vnode.state.aceDiffer) {
+        vnode.state.aceDiffer.destroy();
+        vnode.state.aceDiffer = null;
+      }
+      if (!vnode.state.editor) {
+        vnode.state.editor = ace.edit("editor-history");
+        vnode.state.editor.setTheme("ace/theme/monokai");
+        vnode.state.editor.session.setMode("ace/mode/javascript");
+        vnode.state.editor.setReadOnly(true);
+      }
+      vnode.state.editor.setValue(selectedVersion.script, -1);
+    } else {
+      // diff mode
+      if (vnode.state.editor) {
+        vnode.state.editor.destroy();
+        vnode.state.editor = null;
+      }
       if (vnode.state.aceDiffer) {
-                // Clean up previous instance
         vnode.state.aceDiffer.destroy();
       }
-
       vnode.state.aceDiffer = new AceDiff({
-                element: '#diff-container',
+        element: "#diff-container",
         mode: "ace/mode/javascript",
-                left: {
+        left: { content: leftVersion.script, editable: false },
-                    content: vnode.state.leftVersion ? vnode.state.leftVersion.script : "",
+        right: { content: rightVersion.script, editable: false },
-                    editable: false,
+      });
-                },
-                right: {
-                    content: vnode.state.rightVersion ? vnode.state.rightVersion.script : "",
-                    editable: false,
     }
-            });
-
-            // Configure both editors
-            const editors = vnode.state.aceDiffer.getEditors();
-            ['left', 'right'].forEach(side => {
-                editors[side].setOptions({
-                    maxLines: 20,
-                    autoScrollEditorIntoView: true,
-                });
-                editors[side].session.setOption("useWorker", false);
-            });
-        };
-
-        // Initial diff setup
-        vnode.state.updateDiff();
   },
+
   onremove: function (vnode) {
-        // Clean up AceDiff when component is removed
+    if (vnode.state.editor) {
+      vnode.state.editor.destroy();
+    }
     if (vnode.state.aceDiffer) {
       vnode.state.aceDiffer.destroy();
     }
-    }
+  },
 };
-
-export default FunctionHistory;

static/js/mithril/diffView.js

@@ -1,5 +1,5 @@
 const DiffView = {
-    oninit: function(vnode) {
+  oninit: function (vnode) {
     // Initialize indices in state
     vnode.state.leftIndex = vnode.attrs.versions.length - 1; // Earliest
     vnode.state.rightIndex = 0; // Latest
@@ -10,35 +10,55 @@ const DiffView = {
       m("div.flex.gap-4.mb-4", [
         m("div.flex-1", [
           m("label.block.text-sm.font-medium.text-gray-700", "Left Version"),
-                    m("select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm", {
+          m(
+            "select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm",
+            {
               onchange: (e) => {
                 vnode.state.leftIndex = parseInt(e.target.value);
                 vnode.state.leftVersion = versions[vnode.state.leftIndex];
                 vnode.state.updateDiff();
               },
-                        value: vnode.state.leftIndex
+              value: vnode.state.leftIndex,
-                    }, versions.map((v, idx) =>
+            },
-                        m("option", { value: idx }, `Version ${v.version_number} (${new Date(v.versioned_at).toLocaleString()})`)
+            versions.map((v, idx) =>
-                    ))
+              m(
+                "option",
+                { value: idx },
+                `Version ${v.version_number} (${new Date(
+                  v.versioned_at
+                ).toLocaleString()})`
+              )
+            )
+          ),
         ]),
         m("div.flex-1", [
           m("label.block.text-sm.font-medium.text-gray-700", "Right Version"),
-                    m("select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm", {
+          m(
+            "select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm",
+            {
               onchange: (e) => {
                 vnode.state.rightIndex = parseInt(e.target.value);
                 vnode.state.rightVersion = versions[vnode.state.rightIndex];
                 vnode.state.updateDiff();
               },
-                        value: vnode.state.rightIndex
+              value: vnode.state.rightIndex,
-                    }, versions.map((v, idx) =>
+            },
-                        m("option", { value: idx }, `Version ${v.version_number} (${new Date(v.versioned_at).toLocaleString()})`)
+            versions.map((v, idx) =>
-                    ))
+              m(
-                ])
+                "option",
+                { value: idx },
+                `Version ${v.version_number} (${new Date(
+                  v.versioned_at
+                ).toLocaleString()})`
+              )
+            )
+          ),
+        ]),
       ]),
       m("div", {
         id: "diff-container",
-                style: "height: 500px; position: relative;"
+        style: "height: 500px; position: relative;",
-            })
+      }),
     ]);
   },
   oncreate: function (vnode) {
@@ -59,21 +79,25 @@ const DiffView = {
       }
 
       vnode.state.aceDiffer = new AceDiff({
-                element: '#diff-container',
+        element: "#diff-container",
         mode: "ace/mode/javascript",
         left: {
-                    content: vnode.state.leftVersion ? vnode.state.leftVersion.script : "",
+          content: vnode.state.leftVersion
+            ? vnode.state.leftVersion.script
+            : "",
           editable: false,
         },
         right: {
-                    content: vnode.state.rightVersion ? vnode.state.rightVersion.script : "",
+          content: vnode.state.rightVersion
+            ? vnode.state.rightVersion.script
+            : "",
           editable: false,
-                }
+        },
       });
 
       // Configure both editors
       const editors = vnode.state.aceDiffer.getEditors();
-            ['left', 'right'].forEach(side => {
+      ["left", "right"].forEach((side) => {
         editors[side].setOptions({
           maxLines: 20,
           autoScrollEditorIntoView: true,
@@ -90,5 +114,5 @@ const DiffView = {
     if (vnode.state.aceDiffer) {
       vnode.state.aceDiffer.destroy();
     }
-    }
+  },
 };

templates/base.html

@@ -27,6 +27,7 @@
     <script src="/static/js/mithril/responseView.js"></script>
     <script src="/static/js/mithril/alert.js"></script>
     <script src="/static/js/mithril/diffView.js"></script>
+    <script src="/static/js/mithril/FunctionHistory.js"></script>
 
     <script src="https://unpkg.com/ace-diff@^2"></script>
     <link href="https://unpkg.com/ace-diff@^2/dist/ace-diff.min.css" rel="stylesheet">

templates/dashboard/http_functions/history.html

@@ -13,12 +13,12 @@ cancel_url=url_for('http.overview'),
 logs_url=url_for('http.logs', function_id=function_id),
 history_url=url_for('http.history', function_id=function_id)) }}
 
-<div id="version-diff"></div>
+<div id="history-view"></div>
 
 <script>
     // Mount the Mithril component with versions as an attribute
-    m.mount(document.getElementById("version-diff"), {
+    m.mount(document.getElementById("history-view"), {
-        view: () => m(DiffView, { versions: {{ versions| tojson }} })
+        view: () => m(FunctionHistory, { versions: {{ versions| tojson | safe }} })
     });
 </script>
 {% endblock %}

templates/dashboard/timer_functions/header.html

@@ -0,0 +1,88 @@
+<div class="bg-white dark:bg-gray-800 border-b">
+
+    <!-- Action Buttons Row -->
+    <div class="flex items-center justify-between pb-2">
+        <!-- Action Buttons (left side) -->
+        <div class="flex items-center space-x-4">
+            <h1 class="font-semibold text-lg md:text-2xl" data-id="52">
+                {{ title }}
+            </h1>
+            {% if show_edit_form|default(false, true) %}
+            <button
+                class="group flex flex-col items-center {% if active_tab == 'edit' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
+                hx-get="{{ edit_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
+                <div
+                    class="p-2 rounded-lg {% if active_tab == 'edit' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" data-slot="icon" class="w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                    </svg>
+                </div>
+                <span class="text-xs font-medium">Edit</span>
+            </button>
+            {% endif %}
+
+            {% if show_logs|default(false, true) %}
+            <button
+                class="group flex flex-col items-center {% if active_tab == 'logs' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
+                hx-get="{{ logs_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
+                <div
+                    class="p-2 rounded-lg {% if active_tab == 'logs' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
+                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                        stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                    </svg>
+                </div>
+                <span class="text-xs font-medium">Logs</span>
+            </button>
+            {% endif %}
+
+            {% if show_history|default(false, true) %}
+            <button
+                class="group flex flex-col items-center {% if active_tab == 'history' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
+                hx-get="{{ history_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
+                <div
+                    class="p-2 rounded-lg {% if active_tab == 'history' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
+                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"
+                        stroke-width="25" stroke="currentColor">
+                        <path
+                            d="M416,160a64,64,0,1,0-96.27,55.24c-2.29,29.08-20.08,37-75,48.42-17.76,3.68-35.93,7.45-52.71,13.93V151.39a64,64,0,1,0-64,0V360.61a64,64,0,1,0,64.42.24c2.39-18,16-24.33,65.26-34.52,27.43-5.67,55.78-11.54,79.78-26.95,29-18.58,44.53-46.78,46.36-83.89A64,64,0,0,0,416,160ZM160,64a32,32,0,1,1-32,32A32,32,0,0,1,160,64Zm0,384a32,32,0,1,1,32-32A32,32,0,0,1,160,448ZM352,192a32,32,0,1,1,32-32A32,32,0,0,1,352,192Z">
+                        </path>
+                    </svg>
+                </div>
+                <span class="text-xs font-medium">History</span>
+            </button>
+            {% endif %}
+
+            {% if show_new|default(false, true) %}
+            <button
+                class="group flex flex-col items-center {% if active_tab == 'new' %}text-blue-600{% else %}text-gray-500 hover:text-blue-600{% endif %}"
+                hx-get="{{ new_url }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
+                <div
+                    class="p-2 rounded-lg {% if active_tab == 'new' %}bg-blue-50{% else %}group-hover:bg-blue-50{% endif %}">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-6 h-6">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                    </svg>
+                </div>
+                <span class="text-xs font-medium">New</span>
+            </button>
+            {% endif %}
+        </div>
+
+        <!-- Cancel Button (right side) -->
+        <button class="group flex flex-col items-center text-gray-500 hover:text-blue-600" hx-get="{{ cancel_url }}"
+            hx-target="#container" hx-swap="innerHTML" hx-push-url="true">
+            <div class="p-2 rounded-lg group-hover:bg-blue-50">
+                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                    stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
+                </svg>
+            </div>
+            <span class="text-xs font-medium">Cancel</span>
+        </button>
+    </div>
+
+</div>

templates/dashboard/timer_functions/history.html

@@ -2,7 +2,7 @@
 
 {% block page %}
 
-{{ render_partial('dashboard/http_functions/header.html',
+{{ render_partial('dashboard/timer_functions/header.html',
 user_id=user_id,
 function_id=function_id,
 active_tab='history',
@@ -15,12 +15,12 @@ logs_url=url_for('timer.logs', function_id=function_id),
 history_url=url_for('timer.history', function_id=function_id))
 }}
 
-<div id="version-diff"></div>
+<div id="history-view"></div>
 
 <script>
     // Mount the Mithril component with versions as an attribute
-    m.mount(document.getElementById("version-diff"), {
+    m.mount(document.getElementById("history-view"), {
-        view: () => m(DiffView, { versions: {{ versions| tojson }} })
+        view: () => m(FunctionHistory, { versions: {{ versions| tojson | safe }} })
     });
 </script>
 {% endblock %}