// Setup dxGrid with data from Django
function PlaybookStatusGrid(query_result) {
    $("#PlaybookGridContainer").dxDataGrid({
        dataSource: query_result,
        showColumnLines: false,
        showRowLines: true,
        rowAlternationEnabled: true,
        columnAutoWidth: true,
        showBorders: true,
        searchPanel: {
            visible: true,
            width: 240,
            placeholder: "Search..."
        },
        groupPanel: {
            visible: true
        },
        paging: {
            pageSize: 50
        },
        pager: {
            showPageSizeSelector: true,
            allowedPageSizes: [5, 10, 20],
            showInfo: true
        },
        columns: [{
                dataField: "fields.fuze_spm_site_name",
                dataType: "string",
                caption: "Fuze Site Name"
            },
            {
                dataField: "fields.fuze_spm_site_id",
                dataType: "datetime",
                caption: "Fuze Site Id"
            },
            {
                dataField: "fields.cluster_name",
                dataType: "datetime",
                caption: "Cluster Name",
                cellTemplate: function(container, options) {
                    $('<a/>').addClass('dx-link')
                        .text(options.data.fields.cluster_name)
                        .on('dxclick', function() {
                            window.open('/dashboard/cluster/' + options.data.fields.cluster_name)
                        })
                        .appendTo(container);
                }
            },
            {
                dataField: "fields.playbook_name",
                dataType: "datetime",
                caption: "Playbook",
                cellTemplate: function(container, options) {
                    $('<a/>').addClass('dx-link')
                        .text(options.data.fields.playbook_name)
                        .on('dxclick', function() {
                            window.open('/dashboard/playbook/' + options.data.fields.playbook_name)
                        })
                        .appendTo(container);
                }
            },
            {
                dataField: "fields.status",
                dataType: "datetime",
                caption: "Status"
            },
            {
                dataField: "fields.created_at",
                dataType: "datetime",
                format: "M/d/yyyy, HH:mm",
                caption: "Update at"
            }
        ]
    });
};