File: edit.html

package info (click to toggle)
condor 8.6.8~dfsg.1-2
  • links: PTS, VCS
  • area: main
  • in suites: bullseye, buster, sid
  • size: 79,476 kB
  • sloc: cpp: 649,368; perl: 108,260; python: 22,654; ansic: 20,588; sh: 19,729; fortran: 3,340; yacc: 1,844; makefile: 1,213; xml: 1,003; sql: 767; java: 703; ruby: 512; awk: 505; lex: 248; f90: 64; csh: 24
file content (186 lines) | stat: -rw-r--r-- 5,224 bytes parent folder | download
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
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTCondorView Graph Editor</title>
  <link rel="stylesheet" href="htcondor.css" />
  <link rel="stylesheet" href="htcondorview.css" />
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined.js"></script>
  <script src="https://www.google.com/jsapi"></script>
  <script>
  google.load('visualization', '1.0', {
    packages: ['table', 'corechart', 'treemap', 'annotatedtimeline']
  });
  </script>
  <script src="htcondorview.js"></script>

<style>
#thechart, #thechart .htcondorview, #thechart .htcondorview .graph, #thechart .htcondorview .graph .vizchart {
	width: 100%;
}
#thechart .graph .vizchart {
	height: 300px;
}

.help {
	font-size: 90%;
}
.htclogo {
}
h1 { margin-bottom: 0.3em; }
</style>
</head>
<body>
<h1 class="htclogo"><img src="HTCondor-View.svg" alt="HTCondor View"></h1>
<h1>Graph Editor</h1>


<div id="thechart"></div>

<div>
Title: <input type="text" id="title" name="title" value="DATA"> <br>
Data source: <input type="text" id="data_url" name="data_url" value="DATA">
<span class="help"><a href="#" target="_blank" id="view_data_url_link">view</a> <a target="_blank" href="json.html">file format</a></span><br>
Date range: <input type="text" id="date_start" name="date_start"> through <input type="text" id="date_end" name="date_end"><br>
Query: <span class="help"><a href="syntax.html" target="_blank">syntax reference</a></span><br>
<textarea rows="10" style="width: 90%;" id="graph_query" name="graph_query">DATA</textarea>
<button id="updatebtn">Update Graph</button>
</div>

<!-- vizlog is where errors will go. -->
<div id="vizlog"></div>

<script>
var urlTool;

var id_start_date = HTCondorView.prototype.new_graph_id();
var id_end_date = HTCondorView.prototype.new_graph_id();
$(document).ready(function(){

	initialize_from_url();
	update_graph();

	$('#updatebtn').click(function() {
		update_graph();
		update_url();
	});

	window.onpopstate = function() {
		setTimeout(function(){
			initialize_from_url();
			update_graph();
			},1);
	}

	$('#view_data_url_link').click(function(e) {
		e.preventDefault();
		window.open($('#data_url','').val());
	});

	urlTool = document.createElement('a');
});

function initialize_from_url() {
	var args = AfterqueryObj.parseArgs(window.location.search);
	$('#title').val(args.get('title'));
	$('#data_url').val(args.get('data_url'));

	$('#date_start').val(args.get('date_start'));
	$('#date_end').val(args.get('date_end'));

	var graph_query_url = args.get('graph_query');
	var gqargs = AfterqueryObj.parseArgs(graph_query_url);
	var graph_query = '';
	var i;
	for(i = 0; i < gqargs.all.length; i++) {
		var pair = gqargs.all[i];
		var key = pair[0];
		var value = pair[1];
		if(key !== '' && value !== '') {
			graph_query += key + "=" + value + "\n";
		}
	}

	$('#graph_query').val(graph_query);
}

function update_graph() {

	var title = $('#title').val();
	var data_url = $('#data_url').val();
	var graph_query = $('#graph_query').val();
	if((!data_url) || !graph_query) {
		$('#thechart').html("<h1>No graph requested</h1>\n" +
				"<p>At the least a data_url and graph_query argument are required.\n");
		return;
	}

	var graph_query_url = build_graph_query_url(graph_query);

	var args = {
		dst_id: "thechart",
		title: title,
		data_url: data_url,
		graph_query: graph_query_url,
	};

	if($('#date_start').val()) { args.date_start = new Date($('#date_start').val()); }
	if($('#date_end').val()) { args.date_end = new Date($('#date_end').val()); }

	new HTCondorView(args);
}

// Take newline separated query and turn into URI escaped version with
// arguments specified like a GET query.
function build_graph_query_url(graph_query) {
	var graph_query_url = '';
	var gqlines = graph_query.split("\n");
	var i;
	var idx;
	var key;
	var value;
	var tmp;
	for(i = 0; i < gqlines.length; i++) {
		tmp = gqlines[i].trim();	
		if(tmp.length !== 0) {
			idx = gqlines[i].indexOf("=");
			if(idx === -1) {
				key = gqlines[i];
				value = '';
			} else {
				key = gqlines[i].substr(0, idx);
				value = gqlines[i].substr(idx+1);
			}
			graph_query_url += encodeURIComponent(key) + "=" + encodeURIComponent(value) + "&";
		}
	}
	if(graph_query_url[graph_query_url.length-1] === '&') {
		graph_query_url = graph_query_url.slice(0,-1);
	}
	return graph_query_url;
}

function update_url() {
	var title = $('#title').val();
	var data_url = $('#data_url').val();
	var graph_query = $('#graph_query').val();
	var graph_query_url = build_graph_query_url(graph_query);

	urlTool.href = window.location.href;
	var search = "?" +
		"title=" + encodeURIComponent(title) + "&" +
		"data_url=" + encodeURIComponent(data_url) + "&" +
		"data_url=" + encodeURIComponent(data_url) + "&" +
		"graph_query=" + encodeURIComponent(graph_query_url);
	urlTool.search = search;
	var url = urlTool.href;
	history.pushState(null, null, url);
}

</script>

</body>
</html>