Offering up a Monitor "Widget"

[gdpodesta]

We needed to show a subset of encoding progress to our contributing users, and wanted to include it in their dashboard.
Below is the code we used to get the API Status Monitor, and trim it up a bit for use on their page.
It started to get a little application specific, so I'm posting the proof-of-concept here for anyone that might have a similar need.

It uses jQuery and Bootstrap, and you'd have to adjust the $.get appropriately

2-25-2020 8-35-17 AM.jpg (86.1 KiB) Viewed 3810 times

Code: Select all

<!--Optionally Hide some of the columns-->
<style type="text/css">
/*    #montior td:nth-child(1), td:nth-child(6), th:nth-child(1), th:nth-child(6) {*/
/*        display: none*/
/*    }*/
/*    table#log td:nth-child(1), th:nth-child(1) {*/
/*        display: none*/
/*    }*/
</style>

<div class="row box box-body box-primary" style="padding-left:25px;">
    <div class="col-md-12" id="ffastrans" style="overflow-y: auto; max-height:180px; min-height:20px; font-size:1.1em;"></div>
</div>
<script type="text/javascript">
    (function ($){
        $(document).ready(function (){
            FFAStransMonitor();
            setInterval(FFAStransMonitor, 60000);
        });
        function FFAStransMonitor(){
            var $ffastrans = $( "#ffastrans" );
            $ffastrans.empty();

            $.get('http://255.255.255.255:65445/monitor').then(function (str) {
                MonitorPage = $.parseHTML( str );
                var tempDom = $('<output>').append($.parseHTML(str));

                var monitorInprogress = $('#montior', tempDom);
                var monitorLog = $('#log', tempDom);

                // Move Heading to a THEAD element
                t = $('table#montior')
                firstTr = monitorInprogress.find('tr:first').remove()
                firstTr.find('td').contents().unwrap().wrap('<th>')
                monitorInprogress.prepend($('<thead></thead>').append(firstTr))

                t = $('table#log')
                firstTr = monitorLog.find('tr:first').remove()
                firstTr.find('td').contents().unwrap().wrap('<th>')
                monitorLog.prepend($('<thead></thead>').append(firstTr))

                // Append our objects to our page
                $ffastrans.append( monitorInprogress );
                $ffastrans.append( monitorLog );

                // Add Adjustments that apply to both tables
                $("#ffastrans table").addClass('table table-compressed');
                $('#ffastrans [style*="font-size"]').css('font-size', '');
                $("table#montior tbody tr:first").addClass('info');

                $("table#montior tbody tr").each(function() {
                    $longname = $('td:eq(2)', this).text();
                    $shortname = new String($longname).substring($longname.lastIndexOf('\\') + 1);
                    $('td:eq(2)', this).text( $shortname );
                });
                $("table#log tbody tr").each(function() {
                    $longname = $('td:eq(3)', this).text();
                    $shortname = new String($longname).substring($longname.lastIndexOf('\\') + 1);
                    $('td:eq(3)', this).text( $shortname );
                });

                // Show only 25 leg entries
                $("table#log tbody").find("tr:gt(25)").remove();

                // Nothing in progress, remove the table
                if($('table#montior > tbody').children().length==0) $('table#montior').remove();

                }, function () {
                    $('#ffastrans').append('Monitor Access denied');
                }
            );
        }

    })(jQuery);

</script>

[emcodem]

Ay GD!

sorry for the late reply, contributions like this are rare and must be honored accordingly.
I already proposed to provide this in the - yet missing - wiki API sectioin as an example how to use the API with javascript only The problem might be that if we provide such examples, we also must maintain them... hmm....

Please keep on the great contributions here!

Cheers!
emcodem