ln.skyscanner/templates/static/summary.html

<%frame "frame.html"%>
<div>
    <h1>&Uuml;bersicht</h1>
</div>

<div>
    <table style="width: 60%;">
        <tr>
            <td>System</td>
            <td></td>
            <td style="width: 100px;"></td>
            <td style="width: 100px;"><button onclick="skyapi().call('api/management','Shutdown')">Shutdown</button></td>
        </tr>
        <tr>
            <td>Crawler</td>
            <td></td>
            <td style="width: 100px;"><button onclick="skyapi().call('api/management','StartCrawler')">Start</button></td>
            <td style="width: 100px;"><button onclick="skyapi().call('api/management','StopCrawler')">Stop</button></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td style="width: 100px;"><input type="checkbox" id="cbCrawlHosts"/><label for="cbCrawlHosts">Hosts</label></td>
            <td style="width: 100px;"><input type="checkbox" id="cbCrawlSubnets"/><label for="cbCrawlSubnets">Subnets</label></td>
        </tr>
    </table>
</div>

<div>
    <h1>Crawler</h1>
    <div class="flex column">
        <div>
            <h2><a href="#" onclick="refreshCrawlerTables(); return false;">Current Jobs</a></h2>
            <div style="width: 100%;">
                <table id="crCurrentPoolJobs"></table>
            </div>
        </div>
        <div>
            <h2>Queued Jobs</h2>
            <table id="crQueuedPoolJobs"></table>
        </div>
    </div>
</div>


<script type="text/javascript">
    var crCurrentPoolJobs = null;
    var crQueuedPoolJobs = null;

    function refreshCrawlerTables()
    {
        skyapi().call("api/crawler","GetCurrentPoolJobs", [], function(data){
                if (!data)
                    data = []
    
                $("#crCurrentPoolJobs").DataTable().clear();
                $("#crCurrentPoolJobs").DataTable().rows.add( data ).draw();
            });

        skyapi().call("api/crawler","GetQueuedJobs", [], function(data){
                if (!data)
                    data = []
    
                $("#crQueuedPoolJobs").DataTable().clear();
                $("#crQueuedPoolJobs").DataTable().rows.add( data ).draw();
            });
    
    }

    function createCrawlerTables()
    {
        var pbar = $().dataTable.render.percentBar('round','#fff', '#FF9CAB', '#FF0033', '#FF9CAB', 0, 'solid');
    
        $("#crCurrentPoolJobs").DataTable({
                columns: [
                        { title: "Name", data: "Name" },
                        { title: "Progress", data: "Progress" },
                        { title: "State", data: "State" },
                        { title: "JobState", data: "JobState" }
                    ],
                columnDefs: [
                {
                      targets: 1,
                      render: function(d, t, row){ d *= 100.0; return pbar(d,t,row); }
                }
                ]
            });
        $("#crQueuedPoolJobs").DataTable({
                columns: [
                        { title: "Name", data: "Name" },
                        { title: "JobState", data: "JobState" }
                    ],
            });
    
        refreshCrawlerTables();
    
    
    }
    
    $("#cbCrawlHosts").on("click", function(){ skyapi().call("api/crawler","ToggleCrawlHosts"); } );
    $("#cbCrawlSubnets").on("click", function(){ skyapi().call("api/crawler","ToggleCrawlSubnets"); } );
    
    createCrawlerTables();
    skyapi().addRefresh(refreshCrawlerTables, 1);
    skyapi().addRefresh( 
        function(){ 
            skyapi().call(
                "api/crawler",
                "GetCrawlSubnets",
                [],
                function(r){
                    $("#cbCrawlSubnets").prop("checked", r);
                } );
            skyapi().call(
                "api/crawler",
                "GetCrawlHosts",
                [],
                function(r){
                    $("#cbCrawlHosts").prop("checked", r);
                } );
            },
            1
        );
</script>