DevicesCtrl.js - devices

        $scope.format = function (d){
            $scope.data = d
            // `d` is the original data object for the row
            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                        '<tr>'+
                            '<td>CPU Load:</td>'+
                            '<td></td>' +
                            '<td><span class="txt-color-yellow">'+d.cpuloads[0]+ '</span><span class="txt-color-green"> ' + d.cpuloads[1] + '</span> <span class="txt-color-red">' + d.cpuloads[2] + '</span></td>'+
                        '</tr>'+
                        '<tr>'+
                            '<td>RAM usage:<td>'+
                            '<td><div class="progress-xs"><div class="progress-bar progress-xs bg-color-red" style="width: ' + (100 - (d.ramdata[0] / (d.ramdata[2] / 100))) +'%"></div><div class="progress-bar progress-xs bg-color-greenLight" style="width: ' +  (100 - (d.ramdata[1] / (d.ramdata[2] / 100))) + '%"></div></div>'+'</td>'+
                        '</tr>' +
                        '<tr>' +
                            '<td>Actions:</td>'+
                            '<td></td>' +
                            '<td><button id="' + d.name + '" class="btn btn-xs bg-color-red txt-color-white deleteAction">Delete server</button> <a class="btn btn-xs btn-info" data-ui-sref="app">Testas</a></td>' +
                        '</tr>' +
                    '</table>';
        };


        $(document).ready(function()
        {
            require(['datatables', 'datatables-bootstrap', 'datatables-tools', 'datatables-colvis', 'datatables-responsive'], function( jq ) {
                var table = $('#example').DataTable( {
                    "ajax": "http://127.0.0.1:5000/servers/info",
                    "columns": [
                        {
                            "className":      'details-control',
                            "orderable":      false,
                            "data":           null,
                            "defaultContent": ''
                        },
                        { "data": "name", "title": "Server's name" },
                        { "data": "location", "title": "Server's location"},
                        { "data": "type", "title": "Server's type"},
                        { 'data': "ip", "title": "Server's IP"},
                        { "data": "datacenter", "title": "Server's datacenter"},
                        { "data": "privateip", "title": "Server's private IP"}
                     ],
                    "order": [[1, 'asc']]
                } );
                $('#example tbody').on('click', function (){
                   clickedButton = $("button[clicked=true]");
                   serverName = clickedButton.prevObject[0].activeElement.id;
                   if (clickedButton.prevObject[0].activeElement.innerHTML === "Delete server") {
                       $.SmartMessageBox({
                           "title": "Server delete confirmation",
                           "content": "Do you really really want to delete this server: " + serverName + "?",
                           "buttons": "[YES][NO]"
                       }, function(buttonPressed) {
                            if (buttonPressed == "YES") {
                                $scope.deleteServer(serverName)
                            }
                       })
                   }


                });
                $('#example tbody').on('click', 'td.details-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table.row( tr );

                    if ( row.child.isShown() ) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row
                        row.child($scope.format(row.data()) ).show();
                        tr.addClass('shown');
                    }
                } );
            });


        })