Skip to content

Commit

Permalink
Merge pull request #4225 from jbee/PAYARA-4097-grid-layout
Browse files Browse the repository at this point in the history 
PAYARA-4097 Fixed Grid Layout, Dynamic Settings
  • Loading branch information
@jbee
jbee authored Sep 20, 2019
2 parents 6aefa29 + b9b28af commit 9c4d2c9
Show file tree
Hide file tree
Showing 9 changed files with 1,283 additions and 1,113 deletions.
7 changes: 4 additions & 3 deletions appserver/monitoring-console/webapp/pom.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,9 +113,10 @@
<override>true</override>
<target>src/main/webapp/monitoring-console.js</target>
<sources>
<source>src/main/webapp/mc-ui.js</source>
<source>src/main/webapp/mc-render.js</source>
<source>src/main/webapp/mc-page.js</source>
<source>src/main/webapp/mc-main.js</source>
<source>src/main/webapp/mc-model.js</source>
<source>src/main/webapp/mc-line-chart.js</source>
<source>src/main/webapp/mc-view.js</source>
</sources>
</merge>
</merges>
Expand Down
75 changes: 17 additions & 58 deletions appserver/monitoring-console/webapp/src/main/webapp/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,85 +47,44 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>

<script src="monitoring-console.js?x=h"></script>
<link href="monitoring-console.css?x=h" rel="stylesheet" type="text/css">
<script src="monitoring-console.js?x=m"></script>
<link href="monitoring-console.css?x=m" rel="stylesheet" type="text/css">
</head>
<body id="console">

<input type="file" id="cfgImport" accept=".json" style="display:none" oninput="MonitoringConsole.$import(this.files, MonitoringConsolePage.onPageChange);">
<input type="file" id="cfgImport" accept=".json" style="display:none" oninput="MonitoringConsole.View.onPageImport();">

<div id="panel-grid">
<div id="panel-iconbar">
<button id="btnMenu" title="Toggle Settings Panel">&#9776;</button>
<button title="Show/Hide Settings" onclick="MonitoringConsole.View.onPageMenu()">&#9776;</button>
&nbsp; &nbsp;

<span id="pagesTabs"></span>

<span id="layout-bar">
<button id="btnReset" title="Reset Page to Preset" onclick='MonitoringConsolePage.onPageChange(MonitoringConsole.Page.reset());'>&#10226;</button>
<button id="btnImport" title="Import Configuration...">&#128229;</button>
<button id="btnExport" title="Export Configuration...">&#128228;</button>
<button title="Reset Page to Preset" onclick='MonitoringConsole.View.onPageReset()'>&#10226;</button>
<button title="Import Configuration..." onclick="$('#cfgImport').click();">&#128229;</button>
<button title="Export Configuration..." onclick="MonitoringConsole.View.onPageExport();">&#128228;</button>
&nbsp; &nbsp;
<button title="Pause Data Update" onclick="MonitoringConsole.Refresh.pause();">&#9208;</button>
<button title="Resume Data Update" onclick="MonitoringConsole.Refresh.resume();">&#9654;</button>
<button title="Slow Data Update" onclick="MonitoringConsole.Refresh.slow();">&#128034;</button>
<button title="Fast Data Update" onclick="MonitoringConsole.Refresh.fast();">&#128007;</button>
<button title="Pause Data Update" onclick="MonitoringConsole.Model.Refresh.pause();">&#9208;</button>
<button title="Resume Data Update" onclick="MonitoringConsole.Model.Refresh.resume();">&#9654;</button>
<button title="Slow Data Update" onclick="MonitoringConsole.Model.Refresh.slow();">&#128034;</button>
<button title="Fast Data Update" onclick="MonitoringConsole.Model.Refresh.fast();">&#128007;</button>
&nbsp; &nbsp;
<button onclick='MonitoringConsolePage.onPageUpdate(MonitoringConsole.Page.arrange(1));' title="Use one column layout">&#11034;</button>
<button onclick='MonitoringConsolePage.onPageUpdate(MonitoringConsole.Page.arrange(2));' title="Use two column layout">&#11034; &#11034;</button>
<button onclick='MonitoringConsolePage.onPageUpdate(MonitoringConsole.Page.arrange(3));' title="Use three column layout">&#11034; &#11034; &#11034;</button>
<button onclick='MonitoringConsolePage.onPageUpdate(MonitoringConsole.Page.arrange(4));' title="Use four column layout">&#11034; &#11034; &#11034; &#11034;</button>
<button onclick='MonitoringConsole.View.onPageLayoutChange(1);' title="Use one column layout">&#11034;</button>
<button onclick='MonitoringConsole.View.onPageLayoutChange(2);' title="Use two column layout">&#11034; &#11034;</button>
<button onclick='MonitoringConsole.View.onPageLayoutChange(3);' title="Use three column layout">&#11034; &#11034; &#11034;</button>
<button onclick='MonitoringConsole.View.onPageLayoutChange(4);' title="Use four column layout">&#11034; &#11034; &#11034; &#11034;</button>
</span>
</div>

<div id="chart-container"></div>
</div>

<div id="panel-properties">
<button id="btnRemovePage" title="Delete current page" class='btnIcon btnClose'>&times;</button>

<table class="properties">
<tr><th colspan="2">Page</th></tr>
<tr><td colspan="2"></td></tr>
<tr><td>Name</td><td><input type="text" id="cftPageName" /></td></tr>
<tr><td>Widgets</td><td><select id="options"></select><button id="btnAddChart" title="Add selected chart">Add</button></td></tr>
</table>

<table class="properties">
<tr><th colspan="2">Data</th></tr>
<tr><td colspan="2"></td></tr>
<tr><td>Instances</td><td id="panelCfgInstances"></td></tr>
</table>

<table class="properties">
<tr><th colspan="2">Layout</th></tr>
<tr><td colspan="2"></td></tr>
<tr><td>Span</td>
<td><input type="range" min="1" max="4" oninput="var val = this.valueAsNumber; MonitoringConsolePage.onPageUpdate(MonitoringConsole.Page.Widgets.Selection.configure(function(widget) { widget.grid.span = val; }));" /></td>
</tr>
<tr><td>Column</td>
<td><input type="range" min="1" max="4" oninput="var val = this.valueAsNumber; MonitoringConsolePage.onPageUpdate(MonitoringConsole.Page.Widgets.Selection.configure(function(widget) { widget.grid.column = val-1; }));" /></td>
</tr>
</table>

<table class="properties">
<tr><th colspan="2">Render Options</th></tr>
<tr><td>Begin at Zero</td><td><input type="checkbox" id="cfgStartAtZero" checked="checked" /></td></tr>
<tr><td>Automatic Labels</td><td><input type="checkbox" id="cfgAutoTimeTicks" checked="checked" /></td></tr>
<tr><td>Use Bezier Curves</td><td><input type="checkbox" id="cfgDrawCurves" checked="checked" /></td></tr>
<tr><td>Use Animations</td><td><input type="checkbox" id="cfgDrawAnimations" checked="checked" /></td></tr>
<tr><td>Label X-Axis at 90°</td><td><input type="checkbox" id="cfgRotateTimeLabels" checked="checked" /></td></tr>
<tr><td>Per Second</td><td><input type="checkbox" id="cfgPerSec" /></td></tr>
<tr><th colspan="2">Chart Options</th></tr>
<tr><td>Show Average</td><td><input type="checkbox" id="cfgDrawAvgLine" checked="checked" /></td></tr>
<tr><td>Show Minimum</td><td><input type="checkbox" id="cfgDrawMinLine" checked="checked" /></td></tr>
<tr><td>Show Maximum</td><td><input type="checkbox" id="cfgDrawMaxLine" checked="checked" /></td></tr>
<tr><td>Show Legend</td><td><input type="checkbox" id="cfgShowLegend" /></td></tr>
</table>
</div>
<div id="panel-settings"></div>

<script>
MonitoringConsolePage.onPageReady();
MonitoringConsole.View.onPageReady();
</script>

</body>
Expand Down
32 changes: 16 additions & 16 deletions ...nsole/webapp/src/main/webapp/mc-render.js → ...e/webapp/src/main/webapp/mc-line-chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@

/*jshint esversion: 8 */

var MonitoringConsoleRender = (function() {
MonitoringConsole.LineChart = (function() {

const DEFAULT_BG_COLORS = [
'rgba(153, 102, 255, 0.2)',
Expand All @@ -60,8 +60,8 @@ var MonitoringConsoleRender = (function() {
];

function createMinimumLineDataset(data, points, lineColor) {
var min = data.observedMin;
var minPoints = [{t:points[0].t, y:min}, {t:points[points.length-1].t, y:min}];
let min = data.observedMin;
let minPoints = [{t:points[0].t, y:min}, {t:points[points.length-1].t, y:min}];

return {
data: minPoints,
Expand All @@ -75,8 +75,8 @@ var MonitoringConsoleRender = (function() {
}

function createMaximumLineDataset(data, points, lineColor) {
var max = data.observedMax;
var maxPoints = [{t:points[0].t, y:max}, {t:points[points.length-1].t, y:max}];
let max = data.observedMax;
let maxPoints = [{t:points[0].t, y:max}, {t:points[points.length-1].t, y:max}];

return {
data: maxPoints,
Expand All @@ -89,8 +89,8 @@ var MonitoringConsoleRender = (function() {
}

function createAverageLineDataset(data, points, lineColor) {
var avg = data.observedSum / data.observedValues;
var avgPoints = [{t:points[0].t, y:avg}, {t:points[points.length-1].t, y:avg}];
let avg = data.observedSum / data.observedValues;
let avgPoints = [{t:points[0].t, y:avg}, {t:points[points.length-1].t, y:avg}];

return {
data: avgPoints,
Expand All @@ -117,7 +117,7 @@ var MonitoringConsoleRender = (function() {
if (!points1d)
return [];
let points2d = new Array(points1d.length / 2);
for (var i = 0; i < points2d.length; i++) {
for (let i = 0; i < points2d.length; i++) {
points2d[i] = { t: new Date(points1d[i*2]), y: points1d[i*2+1] };
}
return points2d;
Expand All @@ -127,7 +127,7 @@ var MonitoringConsoleRender = (function() {
if (!points1d)
return [];
let points2d = new Array((points1d.length / 2) - 1);
for (var i = 0; i < points2d.length; i++) {
for (let i = 0; i < points2d.length; i++) {
let t0 = points1d[i*2];
let t1 = points1d[i*2+2];
let y0 = points1d[i*2+1];
Expand All @@ -144,7 +144,7 @@ var MonitoringConsoleRender = (function() {
if (widget.options.perSec) {
return [ createMainLineDataset(data, createInstancePerSecPoints(data.points), lineColor, bgColor) ];
}
let points = createInstancePoints(data.points)
let points = createInstancePoints(data.points);
let datasets = [];
datasets.push(createMainLineDataset(data, points, lineColor, bgColor));
if (points.length > 0 && widget.options.drawAvgLine) {
Expand All @@ -160,12 +160,12 @@ var MonitoringConsoleRender = (function() {
}

return {
chart: function(update) {
var data = update.data;
var widget = update.widget;
var chart = update.chart();
var datasets = [];
for (var j = 0; j < data.length; j++) {
onDataUpdate: function(update) {
let data = update.data;
let widget = update.widget;
let chart = update.chart();
let datasets = [];
for (let j = 0; j < data.length; j++) {
datasets = datasets.concat(
createInstanceDatasets(widget, data[j], DEFAULT_LINE_COLORS[j], DEFAULT_BG_COLORS[j]));
}
Expand Down
61 changes: 61 additions & 0 deletions appserver/monitoring-console/webapp/src/main/webapp/mc-main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*
DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS HEADER.
Copyright (c) 2019 Payara Foundation and/or its affiliates. All rights reserved.
The contents of this file are subject to the terms of either the GNU
General Public License Version 2 only ("GPL") or the Common Development
and Distribution License("CDDL") (collectively, the "License"). You
may not use this file except in compliance with the License. You can
obtain a copy of the License at
https://github.com/payara/Payara/blob/master/LICENSE.txt
See the License for the specific
language governing permissions and limitations under the License.
When distributing the software, include this License Header Notice in each
file and include the License file at glassfish/legal/LICENSE.txt.
GPL Classpath Exception:
The Payara Foundation designates this particular file as subject to the "Classpath"
exception as provided by the Payara Foundation in the GPL Version 2 section of the License
file that accompanied this code.
Modifications:
If applicable, add the following below the License Header, with the fields
enclosed by brackets [] replaced by your own identifying information:
"Portions Copyright [year] [name of copyright owner]"
Contributor(s):
If you wish your version of this file to be governed by only the CDDL or
only the GPL Version 2, indicate your decision by adding "[Contributor]
elects to include this software in this distribution under the [CDDL or GPL
Version 2] license." If you don't indicate a single choice of license, a
recipient has the option to distribute your version of this file under
either the CDDL, the GPL Version 2 or to extend the choice of license to
its licensees as provided above. However, if you add GPL Version 2 code
and therefore, elected the GPL Version 2 license, then the option applies
only if the new code is made subject to such option by the copyright
holder.
*/

/*jshint esversion: 8 */

Chart.defaults.global.defaultFontColor = "#fff";

/**
* The different parts of the Monitoring Console are added as the below properties by the individual files.
*/
var MonitoringConsole = {
/**
* Functions to update the actual HTML page of the MC
**/
View: undefined,
/**
* Functions of manipulate the model of the MC (often returns a layout that is applied to the View)
**/
Model: undefined,
/**
* Functions specifically to take the data and prepare the display of a line chart using the underlying charting library.
**/
LineChart: undefined,
};
Loading

0 comments on commit 9c4d2c9

Please sign in to comment.