1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
// 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"
}
]
});
};
|
