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

Commit

Permalink
Better homepage design (#132)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@mlevit
mlevit authored Dec 21, 2022
1 parent 182c61b commit b8cf646
Show file tree
Hide file tree
Showing 4 changed files with 234 additions and 114 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
# Changelog

## UNRELEASED
## 2.4.0

- 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.
- 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).
- Updated homescreen design with an encapsulated allowlist and execution log, including a number of QoL changes.

## 2.3.0

Expand Down
10 changes: 10 additions & 0 deletions web/src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ html {

table.table {
width: 100%;
background-color: inherit !important;
}

tr .button {
Expand All @@ -32,6 +33,7 @@ td.dtr-control:before {
font-family: inherit !important;
line-height: 0.89em !important;
border-radius: 4px !important;
border-color: inherit;
}

.execution-log-modal {
Expand Down Expand Up @@ -61,3 +63,11 @@ tr.dtrg-group {
.remove-overflow {
overflow: hidden;
}

a {
text-decoration: none !important;
}

.message-header {
font-weight: normal !important;
}
256 changes: 150 additions & 106 deletions web/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,91 +143,121 @@

<!-- Body -->
<div class="container body-container">
<nav class="level">
<div class="level-left">
<h3 class="title is-3 mb-0 mr-2">Allowlist</h3>
<!-- <h2 class="title">Allowlist</h2> -->
<button
class="button is-warning"
v-on:click="openAllowlistInsertPopup()"
>
<span class="icon"> <i class="fas fa-plus"></i> </span>
<span>New Entry</span>
</button>
</div>
<div class="level-right">
<div class="control has-icons-left is-right">
<input
class="input"
placeholder="Search"
type="text"
v-model="allowlistSearchTerm"
v-on:keyup="searchAllowlist()"
/>
<span class="icon is-left">
<i class="fas fa-search"></i>
</span>
</div>
</div>
</nav>
<table
id="allowlist"
class="table is-striped responsive nowrap"
style="width: 100%"
>
<thead>
<tr>
<th>Service</th>
<th>Resource</th>
<th>ID</th>
<th>Expiration</th>
<th class="none">Owner</th>
<th class="none">Comment</th>
<th>Type</th>
<th style="text-align: center">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="item in allowlist" :key="item.row_id">
<td>{{ item.service }}</td>
<td>{{ item.resource }}</td>
<td>{{ item.id }}</td>
<td>
<span
v-if="item.expiration < '4102444800'"
:title="item.expiration_tooltip"
>{{ item.expiration_readable }}</span
>
</td>
<td>{{ item.owner }}</td>
<td>{{ item.comment }}</td>
<td>
<span v-if="item.expiration < '4102444800'">Temporary</span>
<span v-if="item.expiration >= '4102444800'">Permanent</span>
</td>
<td style="text-align: center">
<article class="message" id="allowlist-message">
<div class="message-header">
<p class="modal-card-title" style="color: white;">Allowlist</p>
<div class="field is-grouped">
<div class="field has-addons" style="margin-bottom: 0% !important;">
<p class="control">
<button
class="button is-link"
id="show-temporary-allowlist-button"
v-on:click="showTemporaryAllowlist()"
>Temporary</button>
</p>
<p class="control">
<button
class="button is-white"
id="show-permanent-allowlist-button"
v-on:click="showPermanentAllowlist()"
>Permanent</button>
</p>
</div>
<p class="control is-expanded">
<div class="control has-icons-left is-right">
<input
class="input"
placeholder="Search"
type="text"
v-model="allowlistSearchTerm"
v-on:keyup="searchAllowlist()"
/>
<span class="icon is-left">
<i class="fas fa-search"></i>
</span>
</div>
</p>
<p class="control" id="allowlist-paginate"></p>
<p class="control">
<button
class="button is-warning"
v-if="item.expiration < '4102444800'"
v-on:click="extendAllowlistEntry( item.row_id )"
class="button is-white"
v-on:click="expandAllowlist()"
>
<span class="icon">
<i class="far fa-calendar-plus"></i>
</span>
<span class="icon"> <i id="allowlist-expand-icon" class="fas fa-up-right-and-down-left-from-center"></i> </span>
</button>
</p>
<p class="control">
<button
class="button is-danger"
v-if="item.expiration < '4102444800'"
v-on:click="openAllowlistDeletePopup( item.resource_id )"
class="button is-warning"
v-on:click="openAllowlistInsertPopup()"
>
<span class="icon">
<i class="far fa-trash-alt"></i>
</span>
<span class="icon"> <i class="fas fa-plus"></i> </span>
</button>
</td>
</tr>
</tbody>
</table>
</p>
</div>
</div>
<div class="message-body" id="allowlist-message-body" style="max-height: calc(36vh); overflow-y:auto">
<table
id="allowlist"
class="table responsive nowrap"
style="width: 100%"
>
<thead>
<tr>
<th>Service</th>
<th>Resource</th>
<th>ID</th>
<th>Expiration</th>
<th class="none">Owner</th>
<th class="none">Comment</th>
<th>Type</th>
<th style="text-align: center">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="item in allowlist" :key="item.row_id">
<td>{{ item.service }}</td>
<td>{{ item.resource }}</td>
<td>{{ item.id }}</td>
<td>
<span
v-if="item.expiration < '4102444800'"
:title="item.expiration_tooltip"
>{{ item.expiration_readable }}</span
>
</td>
<td>{{ item.owner }}</td>
<td>{{ item.comment }}</td>
<td>
<span v-if="item.expiration < '4102444800'">Temporary</span>
<span v-if="item.expiration >= '4102444800'">Permanent</span>
</td>
<td style="text-align: center">
<button
class="button is-warning"
v-if="item.expiration < '4102444800'"
v-on:click="extendAllowlistEntry( item.row_id )"
>
<span class="icon">
<i class="far fa-calendar-plus"></i>
</span>
</button>
<button
class="button is-danger"
v-if="item.expiration < '4102444800'"
v-on:click="openAllowlistDeletePopup( item.resource_id )"
>
<span class="icon">
<i class="far fa-trash-alt"></i>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</article>

<!-- Refreshing Animation -->
<div
class="container has-text-centered"
Expand All @@ -238,36 +268,50 @@ <h3 class="title is-3 mb-0 mr-2">Allowlist</h3>
<br />

<!-- Execution Log -->
<nav class="level">
<div class="level-left">
<h3 class="title is-3 mt-2 mb-0 mr-2">Execution Logs</h3>
</div>
</nav>

<table id="execution-log-list-table" class="table">
<thead>
<th>Log</th>
<th>Date</th>
<th>View</th>
</thead>
<tbody>
<tr v-for="item in executionLogList" :value="item" :key="item.key">
<td>{{ item.key }}</td>
<td>{{ item.local_date }}</td>
<td>
<article class="message" id="execution-log-message">
<div class="message-header" style="height: 64px;">
<p class="modal-card-title" style="color: white;">Execution Log</p>
<div class="field is-grouped">
<p class="control" id="execution-log-list-table-paginate"></p>
<p class="control">
<button
v-on:click="openExecutionLog( item.key_escape )"
target="_blank"
class="button"
class="button is-white"
v-on:click="expandExecutionLog()"
>
<span class="icon">
<i class="fas fa-arrow-up-right-from-square"></i>
</span>
<span class="icon"> <i id="execution-log-expand-icon" class="fas fa-up-right-and-down-left-from-center"></i> </span>
</button>
</td>
</tr>
</tbody>
</table>
</p>
</div>
</div>
<div class="message-body" id="execution-log-message-body" style="max-height: calc(36vh); overflow-y:auto">
<table id="execution-log-list-table" class="table">
<thead>
<th>Log</th>
<th>Date</th>
<th>View</th>
</thead>
<tbody>
<tr v-for="item in executionLogList" :value="item" :key="item.key">
<td>{{ item.key }}</td>
<td>{{ item.local_date }}</td>
<td>
<button
v-on:click="openExecutionLog( item.key_escape )"
target="_blank"
class="button"
>
<span class="icon">
<i class="fas fa-arrow-up-right-from-square"></i>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</article>


<!-- Refreshing Animation -->
<div
class="container has-text-centered"
Expand Down
Loading

0 comments on commit b8cf646

Please sign in to comment.