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

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

Issue 2935763003: config_service: improve landing page (Closed)
Patch Set: Changed configList to configSetList for clarity. 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/app-layout/app-layout.html">
8 <link rel="import" href="config-card.html">
9 <link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
10 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
11 <link rel="import" href="../../bower_components/paper-search/paper-search-bar.ht ml">
12 <link rel="import" href="../../bower_components/polymer/polymer.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 .center {
27 width: 50%;
28 margin: auto;
29 text-align: center;
30 }
31
32 .logo {
33 height: 100%;
34 }
35
36 .title {
37 padding-left: 1%;
38 font-size: 150%;
39 font-family: sans-serif;
40 }
41
42 .search-bar {
43 padding-top: 7%;
44 padding-bottom: 2%;
45 }
46
47 paper-search-bar {
48 border-style: solid;
49 border-width: 2px;
50 width: 40%;
51 height: 100%;
52 margin: auto;
53 }
54 </style>
55
56 <app-header reveals>
57 <app-toolbar>
58 <image class="logo" src="/static/images/chromium.png"/>
59 <div class="title" main-title>Configuration Service (not fully implement ed)</div>
60 </app-toolbar>
61 </app-header>
62
63 <iron-ajax
64 auto
65 id="requestConfigs"
66 url="https://luci-config.appspot.com/_ah/api/config/v1/config-sets"
67 handle-as="json"
68 on-response="_onGotConfigSets">
69 </iron-ajax>
70
71 <div class="search-bar">
72 <paper-search-bar query="{{query}}"></paper-search-bar>
73 </div>
74
75 <div class="config-list">
76 <template is="dom-if" if="[[isLoading]]">
77 <div class="center">Fetching config sets...</div>
78 </template>
79 <template is="dom-if" if="[[_not(isLoading)]]">
80 <template is="dom-if" if="[[_isEmpty(searchResults)]]">
81 <config-card name="No config sets found."></config-card>
Sergey Berezin (google) 2017/06/13 17:41:13 nit: I'd leave it as a plain <div>, not a config-c
82 </template>
83 <template is="dom-if" if="[[_not(_isEmpty(searchResults))]]">
84 <template is="dom-repeat" items="[[searchResults]]" as="config">
85 <config-card name="[[config.config_set]]"></config-card>
86 </template>
87 </template>
88 </template>
89 </div>
90 </template>
91
92 <script>
93 Polymer({
94 is: 'front-page',
95
96 properties: {
97 configSetList: {
98 type: Array,
99 value: []
nodir 2017/06/13 17:13:56 use a function that returns an array here too
100 },
101
102 isLoading: {
103 type: Boolean,
104 value: true
105 },
106
107 query: {
108 type: String,
109 observer: '_updateSearchResults'
110 },
111
112 searchResults: {
113 type: Array,
114 value: () => { return []; }
115 }
116 },
117
118 _isEmpty: function(array) {
119 return array.length === 0;
120 },
121
122 _onGotConfigSets: function(event) {
123 this.configSetList = event.detail.response.config_sets;
124 this._updateSearchResults();
125 this.isLoading = false;
126 },
127
128 _not: function(bool) {
129 return (!(bool));
nodir 2017/06/13 17:13:56 nit: this parens unnecessary. This can be `return
nodir 2017/06/13 17:23:40 or even shorter _not: b => !b
130 },
131
132 _updateSearchResults: function() {
133 var query = this.query;
nodir 2017/06/13 17:13:56 this variable is no longer necessary `this.query`
134 this.searchResults = this.configSetList.filter(e => e.config_set.include s(query));
135 }
136 });
137 </script>
138 </dom-module>
OLDNEW
« no previous file with comments | « appengine/config_service/ui/src/config-ui/config-ui.html ('k') | appengine/config_service/ui/static/images/chromium.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698