Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(733)

Side by Side Diff: appengine/config_service/ui/src/config-ui/front-page.html

Issue 2935763003: config_service: improve landing page (Closed)
Patch Set: Fixed app.yaml bug Created 3 years, 6 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:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!--
2 Copyright 2017 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 <link rel="import" href="../../bower_components/polymer/polymer.html">
8 <link rel="import" href="../../bower_components/app-layout/app-layout.html">
9 <link rel="import" href="../../bower_components/paper-search/paper-search-bar.ht ml">
10 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
11 <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
12 <link rel="import" href="config-card.html">
13
14 <dom-module id="front-page">
15 <template>
16 <style>
17 app-toolbar {
18 background-color: #efefef;
19 color: #232323;
20 }
21
22 app-header {
23 @apply --layout-fixed-top;
24 }
25
26 .logo {
27 height: 100%;
28 }
29
30 .title {
31 padding-left: 1%;
32 font-size: 150%;
33 font-family: sans-serif;
34 }
35
36 .search-bar {
37 padding-top: 7%;
38 padding-bottom: 2%;
39 }
40
41 paper-search-bar {
42 border-style: solid;
43 border-width: 2px;
44 width: 40%;
45 height: 100%;
46 margin: auto;
47 }
48 </style>
49
50 <app-header reveals>
51 <app-toolbar>
52 <image class="logo" src="/static/images/chromium.png"/>
53 <div class="title" main-title>Configuration Service (not fully implement ed)</div>
54 </app-toolbar>
55 </app-header>
56
57 <iron-ajax
58 auto
59 id="requestConfigs"
60 url="{{url}}"
nodir 2017/06/13 02:10:15 why this is a property binding as opposed to a con
cwpayton 2017/06/13 16:22:15 Done.
61 handle-as="json"
62 on-response="_getConfigs">
63 </iron-ajax>
64
65 <div class="search-bar">
66 <paper-search-bar query="{{search}}"></paper-search-bar>
67 </div>
68
69 <div class="config-list">
70 <template is="dom-if" if="{{isLoading}}">
71 <config-card name="Fetching configs sets..."></config-card>
nodir 2017/06/13 02:10:15 s/configs sets/config sets/
nodir 2017/06/13 02:10:15 why is it a config card? It does not look right. I
cwpayton 2017/06/13 16:22:14 Done.
cwpayton 2017/06/13 16:22:14 Done.
72 </template>
73 <template is="dom-if" if="{{_not(isLoading)}}">
nodir 2017/06/13 02:10:14 use [[]] for read-only data bindings
cwpayton 2017/06/13 16:22:15 Done.
74 <template is="dom-if" if="{{isEmpty}}">
nodir 2017/06/13 02:10:14 use [[]] for read-only data bindings
cwpayton 2017/06/13 16:22:14 Done.
75 <config-card name="No config sets found."></config-card>
76 </template>
77 <template is="dom-if" if="{{_not(isEmpty)}}">
nodir 2017/06/13 02:10:14 use [[]] for read-only data bindings
cwpayton 2017/06/13 16:22:14 Done.
78 <template is="dom-repeat" items="[[searchList]]" as="config">
79 <config-card name="[[config.config_set]]"></config-card>
80 </template>
81 </template>
82 </template>
83 </div>
84 </template>
85
86 <script>
87 Polymer({
88 is: 'front-page',
89
90 properties: {
91 configList: {
92 type: Array,
93 value: []
94 },
95
96 isEmpty: {
97 type: Boolean,
98 value: true
nodir 2017/06/13 02:10:15 FWIU isEmpty is true if and only if len(searchList
cwpayton 2017/06/13 16:22:14 If I implement this as a function, it only gets ca
nodir 2017/06/13 16:48:22 i meant that isEmpty should accept search results
cwpayton 2017/06/13 17:00:03 Done.
99 },
100
101 isLoading: {
102 type: Boolean,
103 value: true
104 },
105
106 search: {
nodir 2017/06/13 02:10:15 responsibility of this property is not obvious fro
cwpayton 2017/06/13 16:22:15 Done.
107 type: String,
108 observer: '_searched'
109 },
110
111 searchList: {
112 type: Array,
113 value: []
nodir 2017/06/13 02:10:14 see https://www.polymer-project.org/1.0/docs/devgu
cwpayton 2017/06/13 16:22:15 Done. Does it matter whether I use arrow function
nodir 2017/06/13 16:48:22 arrow function is nice
cwpayton 2017/06/13 17:00:03 Done.
114 },
115
116 url: {
117 type: String,
118 value: "https://luci-config.appspot.com/_ah/api/config/v1/config-sets"
119 }
nodir 2017/06/13 02:10:15 i don't think this property is needed
cwpayton 2017/06/13 16:22:15 Done.
120 },
121
122 _getConfigs: function(event) {
nodir 2017/06/13 02:10:15 name "_getConfigs" looks like it will get configs
cwpayton 2017/06/13 16:22:14 Done.
123 this.configList = event.detail.response.config_sets;
124 this.searchList = this._searched();
nodir 2017/06/13 02:10:14 _searched() sets this.searchList and returns it. T
cwpayton 2017/06/13 16:22:14 Done.
125 this.isLoading = false;
126 this.isEmpty = this.searchList.length === 0;
127 },
128
129 _not: function(bool) {
130 return (!(bool));
131 },
132
133 _searched: function() {
nodir 2017/06/13 02:10:14 responsibility of this function is not obvious fro
cwpayton 2017/06/13 16:22:14 Done.
134 this.searchList = [];
135 this.configList.forEach((elem) => {
nodir 2017/06/13 02:10:15 parens around elem are unnecessary
cwpayton 2017/06/13 16:22:14 Done.
136 if (elem.config_set.includes(this.search)) {
137 this.searchList.push(elem);
138 }
139 });
nodir 2017/06/13 02:10:14 this essentially filters this.configList. Using fi
cwpayton 2017/06/13 16:22:15 Done.
140 this.isEmpty = this.searchList.length === 0;
141 return this.searchList;
nodir 2017/06/13 02:10:14 there is no need to return this.searchList. If som
cwpayton 2017/06/13 16:22:15 Done.
142 }
143 });
144 </script>
145 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698