Skip to content
This repository was archived by the owner on Aug 15, 2024. It is now read-only.

Commit b8cf646

Browse files
mlevitmlevit
authored
Better homepage design (#132)
* Changed EC2 launch time source to ENI attach time * Changelog update * Allowlist and execution log now sit within their own box * Added expanding homescreen tables * Better sizing for expanded windows * Added ability to switch between temp and perm allowlist items * Temp allowlist entries shown by default * Changelog
1 parent 182c61b commit b8cf646

File tree

4 files changed

+234
-114
lines changed

4 files changed

+234
-114
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
# Changelog
22

3-
## UNRELEASED
3+
## 2.4.0
44

55
- Updated Allowlist display hiding Owner and Comment columns behind a expand button. This will allow for a more clean display of resources and their ID's.
66
- Changed the date used to calculate the age of an EC2 Instance. Instead of using the EC2 Instance `LaunchTime` which resets everytime an EC2 Instance is stopped and started, the EC2 Instance's ENI `AttachTime` is used instead. [#129](https://github.com/servian/aws-auto-cleanup/issues/129).
7+
- Updated homescreen design with an encapsulated allowlist and execution log, including a number of QoL changes.
78

89
## 2.3.0
910

‎web/src/css/style.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ html {
88

99
table.table {
1010
width: 100%;
11+
background-color: inherit !important;
1112
}
1213

1314
tr .button {
@@ -32,6 +33,7 @@ td.dtr-control:before {
3233
font-family: inherit !important;
3334
line-height: 0.89em !important;
3435
border-radius: 4px !important;
36+
border-color: inherit;
3537
}
3638

3739
.execution-log-modal {
@@ -61,3 +63,11 @@ tr.dtrg-group {
6163
.remove-overflow {
6264
overflow: hidden;
6365
}
66+
67+
a {
68+
text-decoration: none !important;
69+
}
70+
71+
.message-header {
72+
font-weight: normal !important;
73+
}

‎web/src/index.html

Lines changed: 150 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -143,91 +143,121 @@
143143

144144
<!-- Body -->
145145
<div class="container body-container">
146-
<nav class="level">
147-
<div class="level-left">
148-
<h3 class="title is-3 mb-0 mr-2">Allowlist</h3>
149-
<!-- <h2 class="title">Allowlist</h2> -->
150-
<button
151-
class="button is-warning"
152-
v-on:click="openAllowlistInsertPopup()"
153-
>
154-
<span class="icon"> <i class="fas fa-plus"></i> </span>
155-
<span>New Entry</span>
156-
</button>
157-
</div>
158-
<div class="level-right">
159-
<div class="control has-icons-left is-right">
160-
<input
161-
class="input"
162-
placeholder="Search"
163-
type="text"
164-
v-model="allowlistSearchTerm"
165-
v-on:keyup="searchAllowlist()"
166-
/>
167-
<span class="icon is-left">
168-
<i class="fas fa-search"></i>
169-
</span>
170-
</div>
171-
</div>
172-
</nav>
173-
<table
174-
id="allowlist"
175-
class="table is-striped responsive nowrap"
176-
style="width: 100%"
177-
>
178-
<thead>
179-
<tr>
180-
<th>Service</th>
181-
<th>Resource</th>
182-
<th>ID</th>
183-
<th>Expiration</th>
184-
<th class="none">Owner</th>
185-
<th class="none">Comment</th>
186-
<th>Type</th>
187-
<th style="text-align: center">Actions</th>
188-
</tr>
189-
</thead>
190-
<tbody>
191-
<tr v-for="item in allowlist" :key="item.row_id">
192-
<td>{{ item.service }}</td>
193-
<td>{{ item.resource }}</td>
194-
<td>{{ item.id }}</td>
195-
<td>
196-
<span
197-
v-if="item.expiration < '4102444800'"
198-
:title="item.expiration_tooltip"
199-
>{{ item.expiration_readable }}</span
200-
>
201-
</td>
202-
<td>{{ item.owner }}</td>
203-
<td>{{ item.comment }}</td>
204-
<td>
205-
<span v-if="item.expiration < '4102444800'">Temporary</span>
206-
<span v-if="item.expiration >= '4102444800'">Permanent</span>
207-
</td>
208-
<td style="text-align: center">
146+
<article class="message" id="allowlist-message">
147+
<div class="message-header">
148+
<p class="modal-card-title" style="color: white;">Allowlist</p>
149+
<div class="field is-grouped">
150+
<div class="field has-addons" style="margin-bottom: 0% !important;">
151+
<p class="control">
152+
<button
153+
class="button is-link"
154+
id="show-temporary-allowlist-button"
155+
v-on:click="showTemporaryAllowlist()"
156+
>Temporary</button>
157+
</p>
158+
<p class="control">
159+
<button
160+
class="button is-white"
161+
id="show-permanent-allowlist-button"
162+
v-on:click="showPermanentAllowlist()"
163+
>Permanent</button>
164+
</p>
165+
</div>
166+
<p class="control is-expanded">
167+
<div class="control has-icons-left is-right">
168+
<input
169+
class="input"
170+
placeholder="Search"
171+
type="text"
172+
v-model="allowlistSearchTerm"
173+
v-on:keyup="searchAllowlist()"
174+
/>
175+
<span class="icon is-left">
176+
<i class="fas fa-search"></i>
177+
</span>
178+
</div>
179+
</p>
180+
<p class="control" id="allowlist-paginate"></p>
181+
<p class="control">
209182
<button
210-
class="button is-warning"
211-
v-if="item.expiration < '4102444800'"
212-
v-on:click="extendAllowlistEntry( item.row_id )"
183+
class="button is-white"
184+
v-on:click="expandAllowlist()"
213185
>
214-
<span class="icon">
215-
<i class="far fa-calendar-plus"></i>
216-
</span>
186+
<span class="icon"> <i id="allowlist-expand-icon" class="fas fa-up-right-and-down-left-from-center"></i> </span>
217187
</button>
188+
</p>
189+
<p class="control">
218190
<button
219-
class="button is-danger"
220-
v-if="item.expiration < '4102444800'"
221-
v-on:click="openAllowlistDeletePopup( item.resource_id )"
191+
class="button is-warning"
192+
v-on:click="openAllowlistInsertPopup()"
222193
>
223-
<span class="icon">
224-
<i class="far fa-trash-alt"></i>
225-
</span>
194+
<span class="icon"> <i class="fas fa-plus"></i> </span>
226195
</button>
227-
</td>
228-
</tr>
229-
</tbody>
230-
</table>
196+
</p>
197+
</div>
198+
</div>
199+
<div class="message-body" id="allowlist-message-body" style="max-height: calc(36vh); overflow-y:auto">
200+
<table
201+
id="allowlist"
202+
class="table responsive nowrap"
203+
style="width: 100%"
204+
>
205+
<thead>
206+
<tr>
207+
<th>Service</th>
208+
<th>Resource</th>
209+
<th>ID</th>
210+
<th>Expiration</th>
211+
<th class="none">Owner</th>
212+
<th class="none">Comment</th>
213+
<th>Type</th>
214+
<th style="text-align: center">Actions</th>
215+
</tr>
216+
</thead>
217+
<tbody>
218+
<tr v-for="item in allowlist" :key="item.row_id">
219+
<td>{{ item.service }}</td>
220+
<td>{{ item.resource }}</td>
221+
<td>{{ item.id }}</td>
222+
<td>
223+
<span
224+
v-if="item.expiration < '4102444800'"
225+
:title="item.expiration_tooltip"
226+
>{{ item.expiration_readable }}</span
227+
>
228+
</td>
229+
<td>{{ item.owner }}</td>
230+
<td>{{ item.comment }}</td>
231+
<td>
232+
<span v-if="item.expiration < '4102444800'">Temporary</span>
233+
<span v-if="item.expiration >= '4102444800'">Permanent</span>
234+
</td>
235+
<td style="text-align: center">
236+
<button
237+
class="button is-warning"
238+
v-if="item.expiration < '4102444800'"
239+
v-on:click="extendAllowlistEntry( item.row_id )"
240+
>
241+
<span class="icon">
242+
<i class="far fa-calendar-plus"></i>
243+
</span>
244+
</button>
245+
<button
246+
class="button is-danger"
247+
v-if="item.expiration < '4102444800'"
248+
v-on:click="openAllowlistDeletePopup( item.resource_id )"
249+
>
250+
<span class="icon">
251+
<i class="far fa-trash-alt"></i>
252+
</span>
253+
</button>
254+
</td>
255+
</tr>
256+
</tbody>
257+
</table>
258+
</div>
259+
</article>
260+
231261
<!-- Refreshing Animation -->
232262
<div
233263
class="container has-text-centered"
@@ -238,36 +268,50 @@ <h3 class="title is-3 mb-0 mr-2">Allowlist</h3>
238268
<br />
239269

240270
<!-- Execution Log -->
241-
<nav class="level">
242-
<div class="level-left">
243-
<h3 class="title is-3 mt-2 mb-0 mr-2">Execution Logs</h3>
244-
</div>
245-
</nav>
246-
247-
<table id="execution-log-list-table" class="table">
248-
<thead>
249-
<th>Log</th>
250-
<th>Date</th>
251-
<th>View</th>
252-
</thead>
253-
<tbody>
254-
<tr v-for="item in executionLogList" :value="item" :key="item.key">
255-
<td>{{ item.key }}</td>
256-
<td>{{ item.local_date }}</td>
257-
<td>
271+
<article class="message" id="execution-log-message">
272+
<div class="message-header" style="height: 64px;">
273+
<p class="modal-card-title" style="color: white;">Execution Log</p>
274+
<div class="field is-grouped">
275+
<p class="control" id="execution-log-list-table-paginate"></p>
276+
<p class="control">
258277
<button
259-
v-on:click="openExecutionLog( item.key_escape )"
260-
target="_blank"
261-
class="button"
278+
class="button is-white"
279+
v-on:click="expandExecutionLog()"
262280
>
263-
<span class="icon">
264-
<i class="fas fa-arrow-up-right-from-square"></i>
265-
</span>
281+
<span class="icon"> <i id="execution-log-expand-icon" class="fas fa-up-right-and-down-left-from-center"></i> </span>
266282
</button>
267-
</td>
268-
</tr>
269-
</tbody>
270-
</table>
283+
</p>
284+
</div>
285+
</div>
286+
<div class="message-body" id="execution-log-message-body" style="max-height: calc(36vh); overflow-y:auto">
287+
<table id="execution-log-list-table" class="table">
288+
<thead>
289+
<th>Log</th>
290+
<th>Date</th>
291+
<th>View</th>
292+
</thead>
293+
<tbody>
294+
<tr v-for="item in executionLogList" :value="item" :key="item.key">
295+
<td>{{ item.key }}</td>
296+
<td>{{ item.local_date }}</td>
297+
<td>
298+
<button
299+
v-on:click="openExecutionLog( item.key_escape )"
300+
target="_blank"
301+
class="button"
302+
>
303+
<span class="icon">
304+
<i class="fas fa-arrow-up-right-from-square"></i>
305+
</span>
306+
</button>
307+
</td>
308+
</tr>
309+
</tbody>
310+
</table>
311+
</div>
312+
</article>
313+
314+
271315
<!-- Refreshing Animation -->
272316
<div
273317
class="container has-text-centered"

0 commit comments

Comments
 (0)