diff options
| -rw-r--r-- | src/index.html | 24 | ||||
| -rw-r--r-- | src/munin-plot.js | 37 |
2 files changed, 60 insertions, 1 deletions
diff --git a/src/index.html b/src/index.html index 56a9e71..dbb6cf1 100644 --- a/src/index.html +++ b/src/index.html @@ -50,6 +50,7 @@ </button> <div class="dropdown-menu"></div> </div> + <button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#loadDashboard" title="Load dashboard" id="loadDashboardBtn"><i class="fa fa-file-import"></i></button> <button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#saveDashboard" title="Save dashboard"><i class="fa fa-save"></i></button> </div> <div id="reportrange" class="dropdown-toggle btn btn-outline-secondary ml-auto d-none"> @@ -139,6 +140,29 @@ </div> + <div class="modal fade" id="loadDashboard" tabindex="-1" role="dialog"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <form class="needs-validation" novalidate> + <div class="modal-header"> + <h5 class="modal-title">Load dashboard</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <div class="form-group"> + <textarea class="form-control text-nowrap" id="loadDashboardData" rows="5" placeholder="Paste JSON here"></textarea> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-sm btn-primary" id="loadDashboardGo" title="Load dashboard">Load</button> + </div> + </form> + </div> + </div> + </div> + <div class="modal fade" id="saveDashboard" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> diff --git a/src/munin-plot.js b/src/munin-plot.js index f168bbd..ef22a4a 100644 --- a/src/munin-plot.js +++ b/src/munin-plot.js @@ -689,10 +689,16 @@ $(document).ready(function () { option.click(function () { var dashboard = dashboards[name] setGraphs(dashboard.graphs) - setDateRange(dashboard.dateRange.start, dashboard.dateRange.end) + if (dashboard.dateRange) { + setDateRange(dashboard.dateRange.start, dashboard.dateRange.end) + } $('#dashboards button.dropdown-toggle span').text(name) }) }) + // add import action + $('#dashboards .dropdown-menu').append('<div class="dropdown-divider"></div>') + $('#loadDashboardBtn').removeClass('btn btn-outline-secondary').addClass('dropdown-item') + $('#dashboards .dropdown-menu').append($('#loadDashboardBtn').append(' Load')) } }) @@ -753,4 +759,33 @@ $(document).ready(function () { }, 600) }) }) + + // handle showing and hiding of the load dashboard dialog + $('#loadDashboard').on('shown.bs.modal', function () { + $('#loadDashboardData').trigger('focus') + }) + $('#loadDashboard').on('hidden.bs.modal', function () { + $('#loadDashboardData').val('') + $('#loadDashboard .alert').remove() + }) + + // load dashboard + $('#loadDashboardGo').on('click', function (event) { + try { + var dashboard = JSON.parse($('#loadDashboardData').val()) + if (dashboard) { + setGraphs(dashboard.graphs) + if (dashboard.dateRange) { + setDateRange(dashboard.dateRange.start, dashboard.dateRange.end) + } + if (dashboard.name) { + $('#dashboards button.dropdown-toggle span').text(dashboard.name) + } + $('#loadDashboard').modal('hide') + } + } catch (e) { + $('#loadDashboard .alert').remove() + $('<div class="alert alert-danger"></div>').text('Error: ' + e.name + ': ' + e.message).hide().appendTo('#loadDashboard .modal-body').show(200) + } + }) }) |