appengine/swarming/elements/polymer05/stats-overview-build.html - Issue 2408743002: Move elements/ to ui/

Side by Side Diff: appengine/swarming/elements/polymer05/stats-overview-build.html

Issue 2408743002: Move elements/ to ui/ (Closed)

Patch Set: rebase again Created 4 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

« no previous file with comments | « appengine/swarming/elements/polymer05/stats-overview.html ('k') | appengine/swarming/elements/polymer05/stats-overview-build.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!--

2 # Copyright 2015 The LUCI Authors. All rights reserved.

3 # Use of this source code is governed under the Apache License, Version 2.0

4 # that can be found in the LICENSE file.

5

6 --><!--

7 @group Swarming Elements

8

9 `stats-overview' displays an overview of the last 20 minutes stats.

10

11 @element stats-overview

12 --><html><head><style shim-shadowdom="">

13 /*******************************

14 Flex Layout

15 *******************************/

16

17 html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {

18 display: -ms-flexbox;

19 display: -webkit-flex;

20 display: flex;

21 }

22

23 html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {

24 display: -ms-inline-flexbox;

25 display: -webkit-inline-flex;

26 display: inline-flex;

27 }

28

29 html /deep/ [layout][horizontal] {

30 -ms-flex-direction: row;

31 -webkit-flex-direction: row;

32 flex-direction: row;

33 }

34

35 html /deep/ [layout][horizontal][reverse] {

36 -ms-flex-direction: row-reverse;

37 -webkit-flex-direction: row-reverse;

38 flex-direction: row-reverse;

39 }

40

41 html /deep/ [layout][vertical] {

42 -ms-flex-direction: column;

43 -webkit-flex-direction: column;

44 flex-direction: column;

45 }

46

47 html /deep/ [layout][vertical][reverse] {

48 -ms-flex-direction: column-reverse;

49 -webkit-flex-direction: column-reverse;

50 flex-direction: column-reverse;

51 }

52

53 html /deep/ [layout][wrap] {

54 -ms-flex-wrap: wrap;

55 -webkit-flex-wrap: wrap;

56 flex-wrap: wrap;

57 }

58

59 html /deep/ [layout][wrap-reverse] {

60 -ms-flex-wrap: wrap-reverse;

61 -webkit-flex-wrap: wrap-reverse;

62 flex-wrap: wrap-reverse;

63 }

64

65 html /deep/ [flex] {

66 -ms-flex: 1 1 0.000000001px;

67 -webkit-flex: 1;

68 flex: 1;

69 -webkit-flex-basis: 0.000000001px;

70 flex-basis: 0.000000001px;

71 }

72

73 html /deep/ [vertical][layout] > [flex][auto-vertical], html /deep/ [vertical][l ayout]::shadow [flex][auto-vertical] {

74 -ms-flex: 1 1 auto;

75 -webkit-flex-basis: auto;

76 flex-basis: auto;

77 }

78

79 html /deep/ [flex][auto] {

80 -ms-flex: 1 1 auto;

81 -webkit-flex-basis: auto;

82 flex-basis: auto;

83 }

84

85 html /deep/ [flex][none] {

86 -ms-flex: none;

87 -webkit-flex: none;

88 flex: none;

89 }

90

91 html /deep/ [flex][one] {

92 -ms-flex: 1;

93 -webkit-flex: 1;

94 flex: 1;

95 }

96

97 html /deep/ [flex][two] {

98 -ms-flex: 2;

99 -webkit-flex: 2;

100 flex: 2;

101 }

102

103 html /deep/ [flex][three] {

104 -ms-flex: 3;

105 -webkit-flex: 3;

106 flex: 3;

107 }

108

109 html /deep/ [flex][four] {

110 -ms-flex: 4;

111 -webkit-flex: 4;

112 flex: 4;

113 }

114

115 html /deep/ [flex][five] {

116 -ms-flex: 5;

117 -webkit-flex: 5;

118 flex: 5;

119 }

120

121 html /deep/ [flex][six] {

122 -ms-flex: 6;

123 -webkit-flex: 6;

124 flex: 6;

125 }

126

127 html /deep/ [flex][seven] {

128 -ms-flex: 7;

129 -webkit-flex: 7;

130 flex: 7;

131 }

132

133 html /deep/ [flex][eight] {

134 -ms-flex: 8;

135 -webkit-flex: 8;

136 flex: 8;

137 }

138

139 html /deep/ [flex][nine] {

140 -ms-flex: 9;

141 -webkit-flex: 9;

142 flex: 9;

143 }

144

145 html /deep/ [flex][ten] {

146 -ms-flex: 10;

147 -webkit-flex: 10;

148 flex: 10;

149 }

150

151 html /deep/ [flex][eleven] {

152 -ms-flex: 11;

153 -webkit-flex: 11;

154 flex: 11;

155 }

156

157 html /deep/ [flex][twelve] {

158 -ms-flex: 12;

159 -webkit-flex: 12;

160 flex: 12;

161 }

162

163 /* alignment in cross axis */

164

165 html /deep/ [layout][start] {

166 -ms-flex-align: start;

167 -webkit-align-items: flex-start;

168 align-items: flex-start;

169 }

170

171 html /deep/ [layout][center], html /deep/ [layout][center-center] {

172 -ms-flex-align: center;

173 -webkit-align-items: center;

174 align-items: center;

175 }

176

177 html /deep/ [layout][end] {

178 -ms-flex-align: end;

179 -webkit-align-items: flex-end;

180 align-items: flex-end;

181 }

182

183 /* alignment in main axis */

184

185 html /deep/ [layout][start-justified] {

186 -ms-flex-pack: start;

187 -webkit-justify-content: flex-start;

188 justify-content: flex-start;

189 }

190

191 html /deep/ [layout][center-justified], html /deep/ [layout][center-center] {

192 -ms-flex-pack: center;

193 -webkit-justify-content: center;

194 justify-content: center;

195 }

196

197 html /deep/ [layout][end-justified] {

198 -ms-flex-pack: end;

199 -webkit-justify-content: flex-end;

200 justify-content: flex-end;

201 }

202

203 html /deep/ [layout][around-justified] {

204 -ms-flex-pack: distribute;

205 -webkit-justify-content: space-around;

206 justify-content: space-around;

207 }

208

209 html /deep/ [layout][justified] {

210 -ms-flex-pack: justify;

211 -webkit-justify-content: space-between;

212 justify-content: space-between;

213 }

214

215 /* self alignment */

216

217 html /deep/ [self-start] {

218 -ms-align-self: flex-start;

219 -webkit-align-self: flex-start;

220 align-self: flex-start;

221 }

222

223 html /deep/ [self-center] {

224 -ms-align-self: center;

225 -webkit-align-self: center;

226 align-self: center;

227 }

228

229 html /deep/ [self-end] {

230 -ms-align-self: flex-end;

231 -webkit-align-self: flex-end;

232 align-self: flex-end;

233 }

234

235 html /deep/ [self-stretch] {

236 -ms-align-self: stretch;

237 -webkit-align-self: stretch;

238 align-self: stretch;

239 }

240

241 /*******************************

242 Other Layout

243 *******************************/

244

245 html /deep/ [block] {

246 display: block;

247 }

248

249 /* ie support for hidden */

250 html /deep/ [hidden] {

251 display: none !important;

252 }

253

254 html /deep/ [relative] {

255 position: relative;

256 }

257

258 html /deep/ [fit] {

259 position: absolute;

260 top: 0;

261 right: 0;

262 bottom: 0;

263 left: 0;

264 }

265

266 body[fullbleed] {

267 margin: 0;

268 height: 100vh;

269 }

270

271 /*******************************

272 Other

273 *******************************/

274

275 html /deep/ [segment], html /deep/ segment {

276 display: block;

277 position: relative;

278 -webkit-box-sizing: border-box;

279 -ms-box-sizing: border-box;

280 box-sizing: border-box;

281 margin: 1em 0.5em;

282 padding: 1em;

283 background-color: white;

284 -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);

285 box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);

286 border-radius: 5px 5px 5px 5px;

287 }

288

289 </style>

290

291

292

293

294

295

296

297

298

299

300

301

302

303 <!--

304 Supports sharing a JSONP-based JavaScript library.

305

306 <core-shared-lib on-core-shared-lib-load="{{load}}" url="https://apis.google .com/js/plusone.js?onload=%%callback%%">

307

308 Multiple components can request a library using a `core-shared-lib` component an d only one copy of that library will

309 loaded from the network.

310

311 Currently, the library must support JSONP to work as a shared-lib.

312

313 Some libraries require a specific global function be defined. If this is the cas e, specify the `callbackName` property.

314

315 Where possible, you should use an HTML Import to load library dependencies. Rath er than using this element,

316 create an import (`<link rel="import" href="lib.html">`) that wraps loading the .js file:

317

318 lib.html:

319

320 <script src="lib.js"></script>

321

322 @group Polymer Core Elements

323 @element core-shared-lib

324 -->

325

326

327 <!--

328 Dynamically loads the legacy Google JavaScript API Loader (https://developers.go ogle.com/loader/),

329 firing the `api-load` event when ready.

330

331 Any number of components can use `<google-jsapi>` elements, and the library will only be loaded once.

332

333 @element google-jsapi

334 @extends core-shared-lib

335 @homepage https://googlewebcomponents.github.io/google-apis

336 -->

337

338

339

340

341

342 <!--

343 `google-chart` encapsulates Google Charts as a web component, allowing you to ea sily visualize

344 data. From simple line charts to complex hierarchical tree maps, the chart eleme nt provides a

345 number of ready-to-use chart types.

346

347 <google-chart

348 type='pie'

349 options='{"title": "Distribution of days in 2001Q1"}'

350 cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number "}]'

351 rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'>

352 </google-chart>

353

354 Height and width are specified as style attributes:

355

356 google-chart {

357 height: 300px;

358 width: 50em;

359 }

360

361 Data can be provided in one of three ways:

362

363 - Via the `cols` and `rows` attributes:

364

365 cols='[{"label":"Mth", "type":"string"}, {"label":"Days", "type":"number"} ]'

366 rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'

367

368 - Via the `data` attribute, passing in the data directly:

369

370 data='[["Month", "Days"], ["Jan", 31], ["Feb", 28], ["Mar", 31]]'

371

372 - Via the `data` attribute, passing in the URL to a resource containing the

373 data, in JSON format:

374

375 data='http://example.com/chart-data.json'

376

377 @element google-chart

378 @status alpha

379 @homepage http://googlewebcomponents.github.io/google-chart

380 -->

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395 </head><body><div hidden="">

396 <polymer-element name="core-xhr" hidden="" assetpath="bower_components/core-ajax /">

397

398

399

400 </polymer-element>

401 <polymer-element name="core-ajax" hidden="" attributes="url handleAs auto params response error method headers body contentType withCredentials progress loading " assetpath="bower_components/core-ajax/">

402

403 </polymer-element>

404

405 <polymer-element name="core-shared-lib" attributes="url notifyEvent callbackName " assetpath="bower_components/core-shared-lib/">

406

407 </polymer-element>

408 <polymer-element name="google-jsapi" extends="core-shared-lib" assetpath="bower_ components/google-apis/">

409

410 </polymer-element>

411

412 <polymer-element name="google-chart" attributes="type width height options cols rows data" assetpath="bower_components/google-chart/">

413

414 <template>

415 <style>:host {

416 display: block;

417 margin: 0;

418 padding: 0;

419 width: 400px;

420 height: 300px;

421 }

422

423 #chartdiv {

424 width: 100%;

425 height: 100%;

426 min-width: 100%;

427 min-height: 100%;

428 }

429 </style>

430 <core-ajax id="ajax" handleas="json" url="{{data}}" on-core-response="{{exte rnalDataLoaded}}"></core-ajax>

431 <div id="chartdiv"></div>

432 <google-jsapi on-api-load="{{readyForAction}}"></google-jsapi>

433 </template>

434

435

436

437 </polymer-element>

438 <polymer-element name="stats-chart-base" assetpath="">

439 <template>

440 <style>

441 google-chart {

442 width: 100%;

443 height: 250px;

444 }

445 </style>

446 <google-chart id="chart" type="line" options="{"title": "&quo t;, "animation": {"duration": 500, "easing": &quot ;out"}, "legend": {"position": "bottom"} }">

447 </google-chart>

448 <google-jsapi on-api-load="{{readyForAction}}"></google-jsapi>

449 </template>

450

451 </polymer-element>

452 <polymer-element name="stats-request-chart" extends="stats-chart-base" attribute s="data resolution" assetpath="">

453

454 </polymer-element>

455 <polymer-element name="stats-work-chart" extends="stats-chart-base" attributes=" data resolution isDimension" assetpath="">

456

457 </polymer-element>

458 <polymer-element name="stats-time-chart" extends="stats-chart-base" attributes=" data resolution isDimension" assetpath="">

459

460 </polymer-element></div><polymer-element name="stats-overview" attributes="dimen sions" layout="" vertical="" assetpath="">

461 <template>

462 <core-ajax id="get_stats_summary" headers="{"x-datasource-auth": & quot;a"}" url="/swarming/api/v1/stats/summary/minutes" params="{"durat ion": "20"}" handleas="json" on-core-response="{{onGetStatsSummar ySuccess}}">

463 </core-ajax>

464

465 <div layout="" vertical="">

466 <stats-work-chart data="{{dataTable}}" resolution="minutes">

467 </stats-work-chart>

468

469 <stats-time-chart data="{{dataTable}}" resolution="minutes">

470 </stats-time-chart>

471

472 <stats-request-chart data="{{dataTable}}" resolution="minutes">

473 </stats-request-chart>

474 </div>

475 </template>

476

477

478 </polymer-element>

479 <script charset="utf-8" src="stats-overview-build.js"></script></body></html>

OLD	NEW