Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace jQuery with native JS #377

Merged
merged 7 commits into from
May 14, 2024
Merged

Replace jQuery with native JS #377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
146a33f
First draft at replacing jquery with native JS
aestoltm May 9, 2024
13fed0d
Get ease-in transition working
aestoltm May 9, 2024
ee26d20
Fix spacing
aestoltm May 9, 2024
cde316f
Update styling
aestoltm May 10, 2024
2c3e05e
Fix spacing
aestoltm May 10, 2024
5df776a
Fix variable placement
aestoltm May 10, 2024
51e982d
Update eslint parser for object spread syntax
aestoltm May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions html/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
{
"env": {
"browser": true,
"es6": true,
"jquery": true
"es2018": true
},
"globals": {
"AppKernel": false,
Expand Down
2 changes: 1 addition & 1 deletion html/gui/js/modules/efficiency/Efficiency.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,7 +379,7 @@ XDMoD.Module.Efficiency = Ext.extend(XDMoD.PortalModule, {
}

dimensionObj[dimension] = filterValues;
jQuery.extend(filterObj, dimensionObj);
filterObj = { ...filterObj, ...dimensionObj };
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions html/gui/js/modules/efficiency/FilterPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,12 @@ XDMoD.Module.Efficiency.FilterPanel = Ext.extend(Ext.Panel, {
// Add filters for each dimension to the filterObj to be applied to the scatter plot
var dimensionObj = {};
dimensionObj[dimension] = filterValues;
jQuery.extend(filterObj, dimensionObj);
filterObj = { ...filterObj, ...dimensionObj };

// Add filters for each dimension to the aggFilters object for keeping track of filtering on breadcrumb navigation
var aggDimensionObj = {};
aggDimensionObj[dimension] = checkedFilters;
jQuery.extend(aggFilters, aggDimensionObj);
aggFilters = { ...aggFilters, ...aggDimensionObj };

subtitle += `${dimensionList[i]}: ${filterSubtitle}; `;
}
Expand Down
12 changes: 9 additions & 3 deletions html/internal_dashboard/supremm/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ td.zeroer
}

#flowchart li {
list-style-type: none;
list-style-type: none;
}

.intpart {
Expand All @@ -164,9 +164,9 @@ td.zeroer
}

span.centered {
text-align: center;
text-align: center;
vertical-align: middle;
display: table-cell;
display: table-cell;
}
.filekey {
border: thin solid black;
Expand All @@ -180,3 +180,9 @@ span.centered {
border: thin solid black;
background-color: #deb0c4;
}
.show {
transition: opacity 500ms ease-in;
}
.hide {
opacity: 0;
}
112 changes: 62 additions & 50 deletions html/internal_dashboard/supremm/js/stats.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,45 @@ Ext.ns('XDMoD', 'XDMoD.SupremmDataFlow');
XDMoD.SupremmDataFlow = {
resource_map: {},
loadData: function (selector, endPoint, resourceId) {
$(selector).html('<img src="/gui/images/loading.gif"></img>Loading');

$.getJSON(XDMoD.REST.url + '/supremm_dataflow/dbstats',
{
token: XDMoD.REST.token,
resource_id: resourceId,
db_id: endPoint
},
function (data) {
var html = '<ul>';
var d = data.data.data;
for (var k in d) {
if (d.hasOwnProperty(k)) {
html += '<li>' + k + ': ' + d[k] + '</li>';
}
}
html += '</ul>';
$(selector).html(html);
const el = document.querySelector(selector);
el.innerHTML = '<img src="/gui/images/loading.gif"></img>Loading';

fetch(`${XDMoD.REST.url}/supremm_dataflow/dbstats?token=${XDMoD.REST.token}&resource_id=${resourceId}&db_id=${endPoint}`)
.then((response) => {
if (!response.ok) {
throw new Error(`[<b>Error<b> ${response.status}]: ${response.statusText}`);
} else {
return response.json();
}
).fail(function (jqXHR, textStatus, errorThrown) {
var html = '<b>Error<b>';
if (jqXHR.responseJSON) {
if (jqXHR.responseJSON.message) {
html += '<br />' + jqXHR.responseJSON.message;
})
.then((data) => {
let html = '<ul>';
const d = data.data.data;
for (const k in d) {
if (d.hasOwnProperty(k)) {
html += '<li>' + k + ': ' + d[k] + '</li>';
}
} else {
html += textStatus + ' ' + errorThrown;
}
$(selector).html(html);
html += '</ul>';
el.innerHTML = html;
el.display = 'none';
})
.catch((errorText) => {
document.getElementById('loading').style.display = '';
document.getElementById('loading').innerHTML = errorText;
});
},
loadAllStats: function (resourceId) {
$('#pagetitle').text('Data flow information for ' + XDMoD.SupremmDataFlow.resource_map[resourceId]);
$('#flowchart').show(500);
document.getElementById('pagetitle').textContent = 'Data flow information for ' + XDMoD.SupremmDataFlow.resource_map[resourceId];
const flowchart = document.getElementById('flowchart');
// Need timeout for when going from 'none' display to '' for transition to work.
setTimeout(() => {
flowchart.style.display = '';
}, 50);
flowchart.classList.add('hide');
setTimeout(() => {
flowchart.classList.replace('hide', 'show');
}, 100);

XDMoD.SupremmDataFlow.loadData('#local_mirror_content', 'nodearchives', resourceId);
XDMoD.SupremmDataFlow.loadData('#accountfact_content', 'accountfact', resourceId);
Expand Down Expand Up @@ -115,18 +120,26 @@ jsPlumb.ready(function () {
}, common);
});

$(document).ready(function () {
$('#resourceform').hide();
$('#flowchart').hide();
$('#resourceform').submit(function (evt) {
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('resourceform').style.display = 'none';
document.getElementById('flowchart').style.display = 'none';

document.getElementById('resourceform').addEventListener('submit', (evt) => {
evt.preventDefault();
$('#flowchart').hide();
XDMoD.SupremmDataFlow.loadAllStats($('#resourceselect').val());
document.getElementById('flowchart').style.display = 'none';
XDMoD.SupremmDataFlow.loadAllStats(document.querySelector('#resourceselect').value);
});

$.getJSON(XDMoD.REST.url + '/supremm_dataflow/resources', { token: XDMoD.REST.token }, function (data) {
var select = document.getElementById('resourceselect');

fetch(`${XDMoD.REST.url}/supremm_dataflow/resources?token=${XDMoD.REST.token}`)
.then((response) => {
if (!response.ok) {
throw new Error(`[<b>Error<b> ${response.status}]: ${response.statusText}`);
} else {
return response.json();
}
})
.then((data) => {
const select = document.getElementById('resourceselect');
for (var i = 0; i < data.data.length; i++) {
var element = data.data[i];
var tmp = document.createElement('option');
Expand All @@ -135,18 +148,17 @@ $(document).ready(function () {
select.appendChild(tmp);
XDMoD.SupremmDataFlow.resource_map[element.id] = element.name;
}
$('#loading').hide();
$('#resourceform').show(500);
$('#resourceform').submit();
}).fail(function (jqXHR, textStatus, errorThrown) {
var html = '<b>Error</b><br />';
if (jqXHR.responseJSON) {
if (jqXHR.responseJSON.message) {
html += jqXHR.responseJSON.message;
}
} else {
html += textStatus + ' ' + errorThrown;
}
$('#loading').html(html);
document.querySelector('#loading').style.display = 'none';
const form = document.getElementById('resourceform');
form.style.display = '';
form.classList.add('hide');
setTimeout(() => {
form.classList.replace('hide', 'show');
}, 100);
XDMoD.SupremmDataFlow.loadAllStats(select.value);
})
.catch((errorText) => {
document.getElementById('loading').style.display = '';
document.getElementById('loading').innerHTML = errorText;
});
});
6 changes: 1 addition & 5 deletions html/internal_dashboard/supremm/stats.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,9 @@
<head>
<meta charset="utf-8">
<title>Job timeseries demo</title>
<script type="text/javascript" src="/gui/lib/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/gui/lib/node_modules/@jsplumb/browser-ui/js/jsplumb.browser-ui.umd.js"></script>

<!-- Ext and Jquery adapter -->
<script type="text/javascript" src="/gui/lib/extjs/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="/gui/lib/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/gui/lib/extjs/ext-all-debug.js"></script>

<script type="text/javascript">
<?php \xd_rest\printJavascriptVariables(); ?>
</script>
Expand Down