Question

这是我第一次使用HTML和Javascript来创建仪表板。此仪表板包含一个HTML表，其中包含服务器名称，服务器desc和时间UP，警告关键列。

从Nagios JSON查询生成器，我将生成一个返回JSON值的可用性报告URL。现在，我需要比较表列中的Service Desc，并通过从JSON输出中获取值来更新剩余的列。如何实现它。

HTML：

<table id="service_table">
                    <thead>
                        <tr>
                            <th>Service Name</th>
                            <th>Service Desc</th>
                            <th>Time OK %</th>
                            <th>Time Warning %</th>
                            <th>Time Critical %</th>
                        </tr
                    </thead>
                     <tbody>
          <tr>
                    <td>jenkinsserver</td>
                    <td>Jenkins PROD GUI</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    </tr>
                    <tr>
                    <td>nexusserver</td>
                    <td>nexus GUI</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    </tr>
                    <tr>
                    <td>sonarserver</td>
                    <td>sonrqube GUI</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    </tr>
                    <tr>
                    <td colspan="5" class="bold" style="text-align:center">CLEARCASE</td>
                    </tr>
          <tr>
                    <td>clearcasewebserver</td>
                    <td>clearcase web</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    </tr>
                    <tr>
                    <td>clearcase server</td>
                    <td>check clearcase status</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    <td>0.00</td>
                    </tr>
                    </tbody>
                    </table>

使用Javascript：

function make_base_auth(user, password) {
            var tok = user + ':' + password;
            var hash = btoa(tok);
            return 'Basic ' + hash;
} 
$(document).ready(function(){

var end1 =  Math.floor((new Date).getTime()/1000);
var start1 = Math.floor(time.setDate(time.getDate() - 1)/1000);
console.log(end1);
console.log(start1);

servicereport = " http://xx.xx.xx/nagios/cgi-bin/archivejson.cgi?query=availability&availabilityobjecttype=servicegroups&hostgroup=ALM&servicegroup=ALM+Tools&assumedinitialhoststate=up&assumedinitialservicestate=ok&starttime=" + start1 + "&endtime=" + end1;
$.support.cors = true;

 $.ajax({
 type: "GET",
 url: servicereport,
 crossDomain: true,
 async: false,
 beforeSend: function (xhr) {
                        xhr.setRequestHeader('Authorization',
                        make_base_auth("nagiosadmin", "nagiosadmin"));
                },

 dataType: 'json',     //data format
 success: servicedisplay
 });
function servicedisplay(series) {
  // 1. remove all existing rows

    $('#service_table tbody').empty();

    var lent = series.data.servicegroup.services;
    var aa = lent.length;
    var sm = 0;
    var avg = 0;
    for (var i=0; i<aa; i++) {
        var dataO=series.data.servicegroup.services[i].time_ok;
        var dataW=series.data.servicegroup.services[i].time_warning;
        var dataC=series.data.servicegroup.services[i].time_critical;
        var dataA=(dataO/(dataO + dataW + dataC))*100;
        sm +=dataA;
        }
        avg = sm/aa;
        if ( avg < 100 ) {
        $('#almserv').css('background-color','red');
    } else {
        $('#almserv').css('background-color','green');
        }
    $('#servnum').text(parseFloat(avg).toFixed(2));

    $.each(series.data.servicegroup.services, function (index, serv) {

  $('<tr>').append(
            $('<td>').text(parseFloat((serv.time_ok/(serv.time_ok + serv.time_warning + serv.time_critical)*100)).toFixed(2)),
            $('<td>').text(parseFloat((serv.time_warning/(serv.time_ok + serv.time_warning + serv.time_critical)*100)).toFixed(2)),
            $('<td>').text(parseFloat((serv.time_critical/(serv.time_ok + serv.time_warning + serv.time_critical)*100)).toFixed(2)),
        ).appendTo('#service_table');           
    });

Answer 1

我的想法可能是这样的：

<table id="service_table">
                <thead>
                    <tr>
                        <th>Service Name</th>
                        <th>Service Desc</th>
                        <th>Time OK %</th>
                        <th>Time Warning %</th>
                        <th>Time Critical %</th>
                    </tr
                </thead>
                 <tbody>
      <tr>
                <td>jenkinsserver</td>
                <td>Jenkins PROD GUI</td>
                <td><div id="Col3JPG">0.00</div></td>
                <td><div id="Col4JPG">0.00</div></td>
                <td><div id="Col5JPG">0.00</div></td>
                </tr>
                <tr>
                <td>nexusserver</td>
                <td>nexus GUI</td>
                <td><div id="Col3NG">0.00</div></td>
                <td><div id="Col4NG">0.00</div></td>
                <td><div id="Col5NG">0.00</div></td>
                </tr>
                <tr>
                <td>sonarserver</td>
                <td>sonrqube GUI</td>
                <td><div id="Col3JPG">0.00</div></td>
                <td><div id="Col4SG">0.00</div></td>
                <td><div id="Col5SG">0.00</div></td>
                </tr>
                <tr>
                <td colspan="5" class="bold" style="text-align:center">CLEARCASE</td>
                </tr>
      <tr>
                <td>clearcasewebserver</td>
                <td>clearcase web</td>
                <td><div id="Col3CW">0.00</div></td>
                <td><div id="Col4CW">0.00</div></td>
                <td><div id="Col5CW">0.00</div></td>
                </tr>
                <tr>
                <td>clearcase server</td>
                <td>check clearcase status</td>
                <td><div id="Col3CCS">0.00</div></td>
                <td><div id="Col4CCW">0.00</div></td>
                <td><div id="Col5CCW">0.00</div></td>
                </tr>
                </tbody>
                </table>

然后在您的脚本中，您可以创建一个Switch Statement并在那里进行比较：

for (var i=0; i<aa; i++) {
  switch(series.data.servicegroup.services[i].VariableWithCol2Content){
   case "Jenkins PROD GUI": //code for the changes
     $("#col3JPG").text(series.data.servicegroup.services[i].time_ok);
     $("#col4JPG").text(series.data.servicegroup.services[i].time_warning);
     $("#col5JPG").text(series.data.servicegroup.services[i].time_critical);
     //add all require code to update the row
   break;
   case "nexus GUI": //code for the changes
     $("#col3NG").text(series.data.servicegroup.services[i].time_ok);
     $("#col4NG").text(series.data.servicegroup.services[i].time_warning);
     $("#col5NG").text(series.data.servicegroup.services[i].time_critical);
     //add all require code to update the row
   break;
     //and so on with all of them...

将Table列与JSON对象进行比较，并更新HTML中的另一列

1 个答案: