-
-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
205 lines (186 loc) · 8.34 KB
/
index.html
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Puppet Catalog Diff Viewer</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<link href="css/sh_style.css" rel="stylesheet" type="text/css">
<link href="css/catalog_viewer.css" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
<script src="lib/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="lib/sh_main.min.js" type="text/javascript"></script>
<script src="lib/sh_diff.js" type="text/javascript"></script>
<script src="lib/mousetrap.min.js" type="text/javascript"></script>
<script src="lib/mousetrap-pause.min.js" type="text/javascript"></script>
<script src="mousetrap.js" type="text/javascript"></script>
<script src="lib/pako.min.js"></script>
<script src="lib/showdown.min.js"></script>
<script src="catalog_viewer.js" type="text/javascript"></script>
<script src="s3_credentials.js" type="text/javascript"></script>
</head>
<body>
<div class="label label-primary back-to-top">
<span class="glyphicon glyphicon-chevron-up"></span> Back to top
</div>
<div id="keys-help">
<div class="container">
<div class="row">
<div class="jumbotron">
<h2>Keyboard shortcuts</h2>
<div class="shortcuts">
<div class="shortcut">
<h4>General shortcuts</h4>
<dl class='dl-horizontal'>
<dt><kbd>h</kbd> or <kbd>?</kbd><dt><dd>display this help</dd>
<dt><kbd>m</kbd></dt><dd>toggle reports menu</dd>
<dt><kbd>w</kbd></dt><dd>show nodes with changes</dd>
<dt><kbd>f</kbd></dt><dd>show nodes that failed</dd>
</dl>
</div>
<div class="shortcut">
<h4>Node list shortcuts</h4>
<dl class='dl-horizontal'>
<dt><kbd>j</kbd></dt><dd>select next node in list</dd>
<dt><kbd>k</kbd></dt><dd>select previous node in list</dd>
<dt><kbd>g t</kbd></dt><dd>select first node in list</dd>
<dt><kbd>g b</kbd></dt><dd>select last node in list</dd>
<dt><kbd>Enter</kbd></dt><dd>display report for selected node</dd>
</dl>
</div>
<div class="shortcut">
<h4>Help popup shortcuts</h4>
<dl class='dl-horizontal'>
<dt><kbd>Esc</kbd></dt><dd>close help popup</dd>
</dl>
</div>
<div class="shortcut">
<h4>Reports menu shortcuts</h4>
<dl class='dl-horizontal'>
<dt><kbd>j</kbd></dt><dd>select next report in list</dd>
<dt><kbd>k</kbd></dt><dd>select previous report in list</dd>
<dt><kbd>Enter</kbd></dt><dd>load selected report</dd>
<dt><kbd>Esc</kbd></dt><dd>close reports menu</dd>
</dl>
</div>
<div class="shortcut">
<h4>Node diff view shortcuts</h4>
<dl class='dl-horizontal'>
<dt><kbd>j</kbd></dt><dd>select next diff in list</dd>
<dt><kbd>k</kbd></dt><dd>select previous diff in list</dd>
<dt><kbd>g d</kbd></dt><dd>go to the first unmarked diff in the Differences panel</dd>
<dt><kbd>g o</kbd></dt><dd>go to the first unmarked diff in the Only in Old panel</dd>
<dt><kbd>g n</kbd></dt><dd>go to the first unmarked diff in the Only in New panel</dd>
<dt><kbd>a</kbd></dt><dd>(un)acknowledge current diff</dd>
<dt><kbd>s</kbd></dt><dd>(un)star current diff</dd>
<dt><kbd>* a</kbd></dt><dd>(un)acknowledge all diffs in current section</dd>
<dt><kbd>c</kbd></dt><dd>toggle collapsing of current panel</dd>
<dt><kbd>Esc</kbd></dt><dd>go back to nodes list</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://voxpupuli.org">
<img alt="Vox Pupuli" src="8bit-vox.png">
</a>
</div>
<ul class="nav navbar-nav navbar-collapse collapse" id="navbar-collapse-menu">
<li class="dropdown">
<a id="reports-list-button" class="dropdown-toggle" data-toggle="dropdown" href="#">
Choose a report
<span class="caret"></span>
</a>
<ul id="reports-list" class="dropdown-menu scrollable-menu">
<li><a id="demo1" href="javascript:loadReport('demo1')">Demo 1</a></li>
</ul>
</li>
<li class="btn-file">
<a href="#">
Upload file... <input type="file" class="form-control" id="fileinput" style="display: block;" onchange="loadFile()">
</a>
</li>
</ul>
<ul id="breadcrumb" class="nav navbar-nav navbar-right breadcrumb">
<li class="navbar-text" id="crumb-report"></li>
<li class="navbar-text" id="crumb-label" style="display:none"></li>
<li class="navbar-text" id="crumb-node" style="display:none"></li>
</ul>
</div>
</div>
<div class="container">
<div id="mainrow" class="row">
<div id="leftcol" class="col-md-4">
<div id="chart">
</div>
<div id="nodes">
</div>
</div>
<div id="node" class="col-md-8">
<div class="jumbotron">
<h1>Puppet catalog diff viewer</h1>
<p>
This page renders JSON files generated by the <a href="https://github.com/voxpupuli/puppet-catalog-diff" target=_blank>Puppet catalog diff tool</a>.
</p>
<p>
You can either view files already loaded in the interface, or upload your own JSON file.
</p>
<p>
Once a file is loaded and the chart is displayed, click on the chart to access node data.
</p>
<p>
Keyboard shortcuts are available. Hit <code>?</code> to learn how to use them.
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// Back to top link
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
// try loading reports from S3 and update menu
if (typeof s3_access_key !== 'undefined') {
listS3Reports();
}
// try loading report list from server and update menu
loadReportList();
const urlParams = new URLSearchParams(window.location.search);
const report = urlParams.get('report');
if (report != null) {
loadReport(report);
}
});
// No ajax cache
$.ajaxSetup({cache: false});
</script>
</body>
</html>