This repository was archived by the owner on Apr 24, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 14
Expand file tree
/
Copy pathindex.html
More file actions
225 lines (212 loc) · 11.8 KB
/
Copy pathindex.html
File metadata and controls
225 lines (212 loc) · 11.8 KB
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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!--
Copyright (c) 2014 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
To run this sample, replace YOUR_API_KEY with your application's API key.
It can be found at https://code.google.com/apis/console under API
Access. Activate the Google Cloud Storage service at
https://code.google.com/apis/console/ under Services
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Billing Data</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="bootflat.css">
<link rel="stylesheet" href="billing_export.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
</head>
<body ng-controller="BillingExportController">
<div class="loading-container" ng-show="showLoading">
<img src="loader.gif" class="loading"/>
</div>
<div>
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<a href="./" class="navbar-brand">Billing Data sample</a>
<p class="navbar-text navbar-right"><a href="#" data-toggle="modal" class="navbar-link" data-target="#myModal">Help</a> | {{profile.email}} | <a href="{{ profile.logoutUrl }}" class="navbar-link">Sign out</a></p>
</div>
</nav>
<main id="content" role="main">
<div class="container">
<div class="well clearfix">
<div class="row">
<div class="col-md-6">
<h1>Billing Data Alerts</h1>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectPicker">Select a project</label>
<select id="projectPicker" class="form-control" ng-change="projectSelected()" ng-model="project" ng-options="p for p in projects" name="project"></select>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-md-12" ng-view></div>
</div>
<!-- ShowAlerts Template -->
<script type="text/ng-template" id="ShowAlerts">
<table ng-show="alerts.length" class="table table-striped">
<tr>
<th>Name</th><th>Condition</th><th></th>
</tr>
<tr ng-repeat="alert in alerts">
<td>{{ alert.name }}</td>
<td><i>{{alert.target_value}}</i>
<span ng-show="alert.trigger == 'TOTAL_AMOUNT'">is greater then</span>
<span ng-show="alert.trigger == 'RELATIVE_CHANGE'">has changed more than</span>
<span ng-show="alert.trigger == 'TOTAL_CHANGE'">amount has changed more than</span>
<span ng-show="alert.trigger != 'RELATIVE_CHANGE'">$</span>{{alert.trigger_value}}<span ng-show="alert.trigger != 'RELATIVE_CHANGE'">.00</span><span ng-show="alert.trigger == 'RELATIVE_CHANGE'">%</span>
<span ng-show="alert.trigger != 'TOTAL_AMOUNT'">
from one
<span ng-show="alert.range == 'ONE_DAY'">day</span>
<span ng-show="alert.range == 'ONE_WEEK'">week</span>
<span ng-show="alert.range == 'ONE_YEAR'">year</span>
ago
</span></td>
<td><a class="btn btn-primary" href="#/EditAlert/{{project}}/{{alert.key}}">Edit</a></td>
</tr>
</table ng-show="alerts.length">
<div id="alert-actions">
<a class="btn btn-default" href="#/AddAlert/{{project}}">Add alert</a>
<a class="btn btn-default" href="#/EditEmail/{{project}}">Email subscriptions</a>
</div>
</script>
<!-- AlertDetail Template. -->
<script type="text/ng-template" id="AlertDetail">
<form name="AlertDetail" role="form" class="form form-horizontal">
<div class="form-group">
<label for="alert_name" class="control-label col-sm-2">Name</label>
<div class="col-sm-10">
<input type="text" id="alert_name" name="alert_name" ng-model="alert.name">
</div>
</div>
<div class="form-group">
<label for="sku" class="control-label col-sm-2">Trigger when</label>
<div class="col-sm-10">
<select name="sku" class="form-control" ng-init="alert.target_value = 'Total'" ng-model="alert.target_value" ng-options="s for s in skus"></select>
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-2">
<select class="form-control" ng-init="alert.trigger = 'TOTAL_AMOUNT'" ng-model="alert.trigger">
<option value="TOTAL_AMOUNT">is greater than</option>
<option value="RELATIVE_CHANGE">has a percent change of</option>
<option value="TOTAL_CHANGE">changes amount by</option>
</select>
</div>
<div class="col-sm-5">
<span ng-show="alert.trigger != 'RELATIVE_CHANGE'" class=".form-control-static">$</span>
<input type="number" name="alert_trigger_value" ng-model="alert.trigger_value">
<span ng-show="alert.trigger != 'RELATIVE_CHANGE'" class=".form-control-static">.00</span>
<span ng-show="alert.trigger == 'RELATIVE_CHANGE'" class=".form-control-static">%</span>
</div>
</div>
<div class="form-group" ng-show="alert.trigger != 'TOTAL_AMOUNT'">
<label class="control-label col-sm-2" for="range">From</label>
<div class="col-sm-10">
<select id="range" class="form-control" ng-init="alert.range = 'ONE_DAY'" ng-model="alert.range">
<option value="ONE_DAY">one day ago</option>
<option value="ONE_WEEK">one week ago</option>
<option value="ONE_YEAR">one year ago</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="submit" class="btn btn-success" value="Save" ng-click="save()">Save</button>
<button type="submit" class="btn btn-danger form-btn-offset" value="Delete" ng-show="alert.key" ng-click="remove()">Delete</button>
<a href="#/Project/{{project}}" class="btn btn-default">Cancel</a>
</div>
</div>
</form>
{{ message }}
</script>
<!-- EmailDetail Template. -->
<script type="text/ng-template" id="EmailDetail">
<form name="EmailDetail" class="form form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email address</label>
<div class="col-sm-10">
<input type="email" id="email" name="email" ng-model="subscriptionEmail">
<button class="btn btn-xs" value="Add" ng-click="addEmail()">Add</button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Daily Summary?</label>
<div class="col-sm-10">
<input type="checkbox" name="dailySummaries" ng-model="subscription.dailySummary">
</div>
</div>
<div class="form-group">
<ul>
<li ng-repeat="email in subscription.emails">
<input type="checkbox" ng-model="email.unsubscribe">
<span class="unsubscribe-{{email.unsubscribe}}">{{email.email}}</span>
</li>
</ul>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="submit" class="btn btn-success btn-sm" value="Save" ng-click="save()">Save</button>
<a href="#/Project/{{project}}" class="btn btn-default">Cancel</a>
</div>
</div>
</form>
</script>
</br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Using The Charts:
</div>
<div class="modal-body">
<ul>
<li><b>Select a date in the line chart</b> on the bottom by clicking a column; the TreeMap chart at the top of the file presents the cost breakdown for the selected date.</li>
<li><b>Select a product or sku from the treemap</b> to show charges for just the selected product or sku in the line chart.</li>
<li><b>Go back up</b> by right clicking the treemap chart.</li>
<li><b>Show or hide lines</b> in the line chart by selecting a series in the chart legend.</li>
<li><b>"Flush Caches" button</b> is only needed if object change notifications aren't configured, it will take time when a large number of objects exist in the bucket</b></li>
<li><a href="https://github.com/GoogleCloudPlatform/billing-export-python">Project Page</a></li>
<li><a href="https://www.youtube.com/watch?v=L3-e9imswtk">Help Video</a>
</ul>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
<!--Div that will hold the line chart-->
<div id="tree_chart_div"></div>
<hr/>
<div id="line_chart_div"></div>
<hr/>
<form method="POST" action="/flushCache">
<button type="submit" class="btn pull-right btn-danger" value="Flush Cache">Flush All Caches</button>
</form>
</div>
</div>
</main>
<footer class="container text-center" role="contentinfo">
Powered by <a href="https://cloud.google.com/">Google Cloud Platform</a>
</footer>
</div>
<script type="text/javascript" src="http://code.angularjs.org/1.2.8/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.8/angular-route.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="chart.js"></script>
</body>
</html>