peterstockings/function
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update function history view

Browse Source
This commit is contained in:
Peter Stockings
2025-07-24 23:00:22 +10:00
parent 54347ded89
commit 8f2838f920
7 changed files with 378 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
routes/timer.py
View File

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

250
static/js/mithril/FunctionHistory.js
View File

@@ -1,96 +1,170 @@
const FunctionHistory = { const FunctionHistory = {
oninit: function(vnode) { oninit: function (vnode) {
// Initialize indices in state const versions = vnode.attrs.versions;
vnode.state.leftIndex = vnode.attrs.versions.length - 1; // Earliest vnode.state.mode = "view"; // 'view' or 'diff'
vnode.state.rightIndex = 0; // Latest vnode.state.selectedVersion = versions[0];
}, vnode.state.leftVersion = versions.length > 1 ? versions[1] : versions[0];
view: function (vnode) { vnode.state.rightVersion = versions[0];
const versions = vnode.attrs.versions; vnode.state.editor = null;
return m("div", [ vnode.state.aceDiffer = null;
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", {
onchange: (e) => {
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) =>
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", {
onchange: (e) => {
vnode.state.rightIndex = parseInt(e.target.value);
vnode.state.rightVersion = versions[vnode.state.rightIndex];
vnode.state.updateDiff();
},
value: vnode.state.rightIndex
}, 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;"
})
]);
},
oncreate: function (vnode) {
const versions = vnode.attrs.versions;
// 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 () { view: function (vnode) {
if (vnode.state.aceDiffer) { const { versions } = vnode.attrs;
// Clean up previous instance const { mode, selectedVersion, leftVersion, rightVersion } = vnode.state;
vnode.state.aceDiffer.destroy();
}
vnode.state.aceDiffer = new AceDiff({ return m(".flex.flex-col.md:flex-row.h-full", [
element: '#diff-container', // Vertical Timeline
mode: "ace/mode/javascript", m(".w-full.md:w-64.border-b.md:border-r.md:border-b-0.overflow-y-auto", [
left: { m("div.p-4.border-b.flex.justify-between.items-center", [
content: vnode.state.leftVersion ? vnode.state.leftVersion.script : "", m("h3.text-lg.font-semibold", "History"),
editable: false, m(
"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";
},
},
mode === "view" ? "Compare" : "View"
),
]),
m(
"ul.p-2",
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;
}
}, },
right: { },
content: vnode.state.rightVersion ? vnode.state.rightVersion.script : "", [
editable: false, m("div.font-bold", `Version ${version.version_number}`),
} m(
}); "div.text-sm.text-gray-600",
new Date(version.versioned_at).toLocaleString()
),
]
);
})
),
]),
// Configure both editors // Code Viewer or Differ
const editors = vnode.state.aceDiffer.getEditors(); m(".flex-1.p-4", [
['left', 'right'].forEach(side => { mode === "view"
editors[side].setOptions({ ? m("div", [
maxLines: 20, m(
autoScrollEditorIntoView: true, "h3.text-lg.font-semibold.mb-2",
}); `Version ${selectedVersion.version_number}`
editors[side].session.setOption("useWorker", false); ),
}); 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;" }),
]),
]),
]);
},
// Initial diff setup oncreate: function (vnode) {
vnode.state.updateDiff(); this.updateEditorOrDiffer(vnode);
}, },
onremove: function (vnode) {
// Clean up AceDiff when component is removed onupdate: function (vnode) {
if (vnode.state.aceDiffer) { this.updateEditorOrDiffer(vnode);
vnode.state.aceDiffer.destroy(); },
}
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) {
vnode.state.aceDiffer.destroy();
}
vnode.state.aceDiffer = new AceDiff({
element: "#diff-container",
mode: "ace/mode/javascript",
left: { content: leftVersion.script, editable: false },
right: { content: rightVersion.script, editable: false },
});
} }
}; },
export default FunctionHistory; onremove: function (vnode) {
if (vnode.state.editor) {
vnode.state.editor.destroy();
}
if (vnode.state.aceDiffer) {
vnode.state.aceDiffer.destroy();
}
},
};

208
static/js/mithril/diffView.js
View File

@@ -1,94 +1,118 @@
const DiffView = { const DiffView = {
oninit: function(vnode) { oninit: function (vnode) {
// Initialize indices in state // Initialize indices in state
vnode.state.leftIndex = vnode.attrs.versions.length - 1; // Earliest vnode.state.leftIndex = vnode.attrs.versions.length - 1; // Earliest
vnode.state.rightIndex = 0; // Latest vnode.state.rightIndex = 0; // Latest
}, },
view: function (vnode) { view: function (vnode) {
const versions = vnode.attrs.versions; const versions = vnode.attrs.versions;
return m("div", [ return m("div", [
m("div.flex.gap-4.mb-4", [ m("div.flex.gap-4.mb-4", [
m("div.flex-1", [ m("div.flex-1", [
m("label.block.text-sm.font-medium.text-gray-700", "Left Version"), 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(
onchange: (e) => { "select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm",
vnode.state.leftIndex = parseInt(e.target.value); {
vnode.state.leftVersion = versions[vnode.state.leftIndex]; onchange: (e) => {
vnode.state.updateDiff(); vnode.state.leftIndex = parseInt(e.target.value);
}, vnode.state.leftVersion = versions[vnode.state.leftIndex];
value: vnode.state.leftIndex vnode.state.updateDiff();
}, versions.map((v, idx) => },
m("option", { value: idx }, `Version ${v.version_number} (${new Date(v.versioned_at).toLocaleString()})`) value: vnode.state.leftIndex,
)) },
]), versions.map((v, idx) =>
m("div.flex-1", [ m(
m("label.block.text-sm.font-medium.text-gray-700", "Right Version"), "option",
m("select.mt-1.block.w-full.rounded-md.border-gray-300.shadow-sm", { { value: idx },
onchange: (e) => { `Version ${v.version_number} (${new Date(
vnode.state.rightIndex = parseInt(e.target.value); v.versioned_at
vnode.state.rightVersion = versions[vnode.state.rightIndex]; ).toLocaleString()})`
vnode.state.updateDiff(); )
}, )
value: vnode.state.rightIndex ),
}, 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("div", { {
id: "diff-container", onchange: (e) => {
style: "height: 500px; position: relative;" vnode.state.rightIndex = parseInt(e.target.value);
}) vnode.state.rightVersion = versions[vnode.state.rightIndex];
]); vnode.state.updateDiff();
}, },
oncreate: function (vnode) { value: vnode.state.rightIndex,
const versions = vnode.attrs.versions; },
// Initialize with the earliest and most recent versions if available versions.map((v, idx) =>
if (versions.length >= 2) { m(
vnode.state.leftVersion = versions[versions.length - 1]; // Earliest version "option",
vnode.state.rightVersion = versions[0]; // Latest version { value: idx },
} else if (versions.length === 1) { `Version ${v.version_number} (${new Date(
vnode.state.leftVersion = versions[0]; v.versioned_at
vnode.state.rightVersion = versions[0]; ).toLocaleString()})`
} )
)
vnode.state.updateDiff = function () { ),
if (vnode.state.aceDiffer) { ]),
// Clean up previous instance ]),
vnode.state.aceDiffer.destroy(); m("div", {
} id: "diff-container",
style: "height: 500px; position: relative;",
vnode.state.aceDiffer = new AceDiff({ }),
element: '#diff-container', ]);
mode: "ace/mode/javascript", },
left: { oncreate: function (vnode) {
content: vnode.state.leftVersion ? vnode.state.leftVersion.script : "", const versions = vnode.attrs.versions;
editable: false, // Initialize with the earliest and most recent versions if available
}, if (versions.length >= 2) {
right: { vnode.state.leftVersion = versions[versions.length - 1]; // Earliest version
content: vnode.state.rightVersion ? vnode.state.rightVersion.script : "", vnode.state.rightVersion = versions[0]; // Latest version
editable: false, } else if (versions.length === 1) {
} vnode.state.leftVersion = versions[0];
}); vnode.state.rightVersion = versions[0];
// 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.aceDiffer) {
vnode.state.aceDiffer.destroy();
}
} }
};
vnode.state.updateDiff = function () {
if (vnode.state.aceDiffer) {
// Clean up previous instance
vnode.state.aceDiffer.destroy();
}
vnode.state.aceDiffer = new AceDiff({
element: "#diff-container",
mode: "ace/mode/javascript",
left: {
content: vnode.state.leftVersion
? vnode.state.leftVersion.script
: "",
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.aceDiffer) {
vnode.state.aceDiffer.destroy();
}
},
};

1
templates/base.html
View File

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

6
templates/dashboard/http_functions/history.html
View File

@@ -13,12 +13,12 @@ cancel_url=url_for('http.overview'),
logs_url=url_for('http.logs', function_id=function_id), logs_url=url_for('http.logs', function_id=function_id),
history_url=url_for('http.history', 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> <script>
// Mount the Mithril component with versions as an attribute // 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> </script>
{% endblock %} {% endblock %}

88
templates/dashboard/timer_functions/header.html Normal file
View File

@@ -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>

8
templates/dashboard/timer_functions/history.html
View File

@@ -2,7 +2,7 @@
{% block page %} {% block page %}
{{ render_partial('dashboard/http_functions/header.html', {{ render_partial('dashboard/timer_functions/header.html',
user_id=user_id, user_id=user_id,
function_id=function_id, function_id=function_id,
active_tab='history', 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)) history_url=url_for('timer.history', function_id=function_id))
}} }}
<div id="version-diff"></div> <div id="history-view"></div>
<script> <script>
// Mount the Mithril component with versions as an attribute // 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> </script>
{% endblock %} {% endblock %}