| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| <html><head> |
| <meta charset="UTF-8"> |
| <title>Storm UI</title> |
| <link href="/css/bootstrap-1.4.0.css" rel="stylesheet" type="text/css"> |
| <link href="/css/style.css" rel="stylesheet" type="text/css"> |
| <script src="/js/jquery-1.6.2.min.js" type="text/javascript"></script> |
| <script src="/js/jquery.tablesorter.min.js" type="text/javascript"></script> |
| <script src="/js/jquery.cookies.2.2.0.min.js" type="text/javascript"></script> |
| <script src="/js/jquery.mustache.js" type="text/javascript"></script> |
| <script src="/js/url.min.js" type="text/javascript"></script> |
| <script src="/js/bootstrap-twipsy.js" type="text/javascript"></script> |
| <script src="/js/jquery.blockUI.min.js" type="text/javascript"></script> |
| <script src="/js/script.js" type="text/javascript"></script> |
| <script src="/js/moment.min.js" type="text/javascript"></script> |
| </head> |
| <body> |
| <h1><a href="/">Storm UI</a></h1> |
| <div id="component-summary"> |
| </div> |
| <div id="component-stats-detail"> |
| </div> |
| <div id="component-input-stats"> |
| </div> |
| <div id="component-output-stats"> |
| </div> |
| <div id="component-executor-stats"> |
| </div> |
| <div id="component-errors"> |
| </div> |
| <div id="json-response-error"> |
| </div> |
| <p id="toggle-switch" style="display: block;" class="js-only"></p> |
| <script> |
| $(document).ajaxStop($.unblockUI); |
| $(document).ajaxStart(function(){ |
| $.blockUI({ message: '<img src="images/spinner.gif" /> <h3>Loading component summary...</h3>'}); |
| }); |
| $(document).ready(function() { |
| var componentId = $.url("?id"); |
| var topologyId = $.url("?topology_id"); |
| var window = $.url("?window"); |
| var sys = $.cookies.get("sys") || "false"; |
| var url = "/api/v1/topology/"+topologyId+"/component/"+componentId+"?sys="+sys; |
| if(window) url += "&window="+window; |
| renderToggleSys($("#toggle-switch")); |
| $.ajaxSetup({ |
| "error":function(jqXHR,textStatus,response) { |
| var errorJson = jQuery.parseJSON(jqXHR.responseText); |
| $.get("/templates/json-error-template.html", function(template) { |
| $("#json-response-error").append(Mustache.render($(template).filter("#json-error-template").html(),errorJson)); |
| }); |
| } |
| }); |
| |
| $.getJSON(url,function(response,status,jqXHR) { |
| var componentSummary = $("#component-summary"); |
| var componentStatsDetail = $("#component-stats-detail") |
| var inputStats = $("#component-input-stats"); |
| var outputStats = $("#component-output-stats"); |
| var executorStats = $("#component-executor-stats"); |
| var componentErrors = $("#component-errors"); |
| $.get("/templates/component-page-template.html", function(template) { |
| componentSummary.append(Mustache.render($(template).filter("#component-summary-template").html(),response)); |
| if(response["componentType"] == "spout") { |
| componentStatsDetail.append(Mustache.render($(template).filter("#spout-stats-detail-template").html(),response)); |
| if(response["spoutSummary"].length > 0) { |
| $("#spout-stats-table").tablesorter({ sortList: [[0,0]], headers: {0: { sorter: "stormtimestr"}}}); |
| } |
| outputStats.append(Mustache.render($(template).filter("#output-stats-template").html(),response)); |
| if(response["outputStats"].length > 0) { |
| $("#output-stats-table").tablesorter({ sortList: [[0,0]], headers: {0: { sorter: "stormtimestr"}}}); |
| } |
| executorStats.append(Mustache.render($(template).filter("#executor-stats-template").html(),response)); |
| if(response["executorStats"].length > 0) { |
| $("#executor-stats-table").tablesorter({ sortList: [[0,0]], headers: {1: { sorter: "stormtimestr"}}}); |
| } |
| } else { |
| componentStatsDetail.append(Mustache.render($(template).filter("#bolt-stats-template").html(),response)); |
| if(response["boltStats"].length > 0) { |
| $("#bolt-stats-table").tablesorter({ sortList: [[0,0]], headers: {0: { sorter: "stormtimestr"}}}); |
| } |
| inputStats.append(Mustache.render($(template).filter("#bolt-input-stats-template").html(),response)); |
| if (response["inputStats"].length > 0) { |
| $("#bolt-input-stats-table").tablesorter({ sortList: [[0,0]], headers: {}}); |
| } |
| outputStats.append(Mustache.render($(template).filter("#bolt-output-stats-template").html(),response)); |
| if(response["outputStats"].length > 0) { |
| $("#bolt-output-stats-table").tablesorter({ sortList: [[0,0]], headers: {}}); |
| } |
| executorStats.append(Mustache.render($(template).filter("#bolt-executor-template").html(),response)); |
| if(response["executorStats"].length > 0) { |
| $("#bolt-executor-table").tablesorter({ sortList: [[0,0]], headers: {}}); |
| } |
| } |
| componentErrors.append(Mustache.render($(template).filter("#component-errors-template").html(),formatErrorTimeSecs(response))); |
| if(response["componentErrors"].length > 0) { |
| $("#component-errors-table").tablesorter({ sortList: [[0,0]], headers: {1: { sorter: "stormtimestr"}}}); |
| } |
| |
| var errorCells = document.getElementsByClassName("errorSpan"); |
| for (i =0; i < errorCells.length; i++) |
| { |
| var timeLapsedInSecs = errorCells[i].id; |
| if (parseInt(timeLapsedInSecs) < 1800) { |
| errorCells[i].style.color = "#9d261d"; |
| errorCells[i].style.borderBottomColor = "#9d261d"; |
| } |
| } |
| }); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |