github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(ui): ui change for auth and activity logs EE-3798 (#7364) 

* added style to authentication and activity logs
pull/7421/head
Richard Wei 2022-08-04 11:48:05 +12:00 committed by GitHub
parent 31d3fd730c
commit 305a949692
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 159 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/portainer/components/datatables/filter/datatable-filter.html
View File

@ -1,9 +1,10 @@
<div uib-dropdown dropdown-append-to-body auto-close="outsideClick" is-open="$ctrl.isOpen"> <div uib-dropdown dropdown-append-to-body auto-close="outsideClick" is-open="$ctrl.isOpen">
<span ng-transclude></span> <span ng-transclude></span>
<div class="filter-button"> <div class="filter-button">
<span uib-dropdown-toggle class="table-filter" ng-class="{ 'filter-active': $ctrl.isEnabled() }"> <span uib-dropdown-toggle class="table-filter vertical-center" ng-class="{ 'filter-active': $ctrl.isEnabled() }">
Filter Filter
<i class="fa" ng-class="[$ctrl.isEnabled() ? 'fa-check' : 'fa-filter']" aria-hidden="true"></i> <pr-icon ng-if="$ctrl.isEnabled()" icon="'check'" feather="true"></pr-icon>
<pr-icon ng-if="!$ctrl.isEnabled()" icon="'filter'" feather="true"></pr-icon>
</span> </span>
</div> </div>
<div class="dropdown-menu" style="min-width: 0" uib-dropdown-menu> <div class="dropdown-menu" style="min-width: 0" uib-dropdown-menu>

66
app/portainer/user-activity/activity-logs-view/activity-logs-datatable/activity-logs-datatable.html
View File

@ -1,33 +1,67 @@
<div class="datatable datatable-empty"> <div class="datatable datatable-empty">
<rd-widget> <rd-widget>
<rd-widget-body classes="no-padding"> <rd-widget-body classes="no-padding">
<datatable-titlebar title="Activity Logs" icon="fa-history" feature="{{::$ctrl.feature}}"></datatable-titlebar> <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
<datatable-searchbar on-change="($ctrl.onChangeKeyword)" value="$ctrl.keyword"></datatable-searchbar> <div class="toolBarTitle vertical-center">
<pr-icon icon="'svg-clockrewind'" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
Activity Logs
<be-feature-indicator feature="{{::$ctrl.feature}}"></be-feature-indicator>
</div>
<div class="vertical-center">
<datatable-searchbar on-change="($ctrl.onChangeKeyword)" value="$ctrl.keyword"></datatable-searchbar>
</div>
</div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover"> <table class="table table-hover">
<thead> <thead>
<tr> <tr>
<th class="small-column"> <th class="small-column">
<a ng-click="$ctrl.changeSort('Timestamp')"> <div class="vertical-center">
Time <table-column-header
<datatable-sort-icon key="Timestamp" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon> col-title="'Time'"
</a> can-sort="true"
is-sorted="$ctrl.sort.key === 'Timestamp'"
is-sorted-desc="$ctrl.sort.key === 'Timestamp' && $ctrl.sort.desc"
ng-click="$ctrl.changeSort('Timestamp')"
>
</table-column-header>
</div>
</th> </th>
<th class="small-column"> <th class="small-column">
<a ng-click="$ctrl.changeSort('Username')"> <div class="vertical-center">
User <table-column-header
<datatable-sort-icon key="Username" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon> col-title="'User'"
</a> can-sort="true"
is-sorted="$ctrl.sort.key === 'Username'"
is-sorted-desc="$ctrl.sort.key === 'Username' && $ctrl.sort.desc"
ng-click="$ctrl.changeSort('Username')"
>
</table-column-header>
</div>
</th> </th>
<th class="small-column"> <th class="small-column">
<a ng-click="$ctrl.changeSort('Context')"> <div class="vertical-center">
Environment <table-column-header
<datatable-sort-icon key="Context" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon> col-title="'Environment'"
</a> can-sort="true"
is-sorted="$ctrl.sort.key === 'Context'"
is-sorted-desc="$ctrl.sort.key === 'Context' && $ctrl.sort.desc"
ng-click="$ctrl.changeSort('Context')"
>
</table-column-header>
</div>
</th> </th>
<th> Action </th> <th>
<th> Payload </th> <div class="vertical-center">
<table-column-header col-title="'Action'" can-sort="false"> </table-column-header>
</div>
</th>
<th>
<div class="vertical-center">
<table-column-header col-title="'Payload'" can-sort="false"> </table-column-header>
</div>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

43
app/portainer/user-activity/activity-logs-view/activity-logs-view.html
View File

@ -11,33 +11,36 @@
</div> </div>
</div> </div>
</div> </div>
<p class="text-muted small vertical-center">
<p class="text-muted small"> <pr-icon icon="'info'" feather="true" class-name="'icon icon-sm icon-primary'"></pr-icon>
<i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i>
Portainer user activity logs have a maximum retention of 7 days. Portainer user activity logs have a maximum retention of 7 days.
</p> </p>
<div> <div>
<button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled> <button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled>
<i class="fa fa-download space-right" aria-hidden="true"></i>Export as CSV <pr-icon icon="'download'" feather="true" icon-class="'icon icon-sm'"></pr-icon>
Export as CSV
</button> </button>
<be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator> <be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator>
</div> </div>
</rd-widget-body> </rd-widget-body>
</rd-widget> </rd-widget>
</div>
<activity-logs-datatable
logs="$ctrl.state.logs" <div class="be-indicator-container">
keyword="$ctrl.state.keyword" <div class="row">
sort="$ctrl.state.sort" <activity-logs-datatable
limit="$ctrl.state.limit" logs="$ctrl.state.logs"
context-filter="$ctrl.state.contextFilter" keyword="$ctrl.state.keyword"
total-items="$ctrl.state.totalItems" sort="$ctrl.state.sort"
current-page="$ctrl.state.currentPage" limit="$ctrl.state.limit"
feature="{{:: $ctrl.limitedFeature}}" context-filter="$ctrl.state.contextFilter"
on-change-keyword="($ctrl.onChangeKeyword)" total-items="$ctrl.state.totalItems"
on-change-sort="($ctrl.onChangeSort)" current-page="$ctrl.state.currentPage"
on-change-limit="($ctrl.onChangeLimit)" feature="{{:: $ctrl.limitedFeature}}"
on-change-page="($ctrl.onChangePage)" on-change-keyword="($ctrl.onChangeKeyword)"
></activity-logs-datatable> on-change-sort="($ctrl.onChangeSort)"
on-change-limit="($ctrl.onChangeLimit)"
on-change-page="($ctrl.onChangePage)"
></activity-logs-datatable>
</div>
</div> </div>

78
app/portainer/user-activity/auth-logs-view/auth-logs-datatable/auth-logs-datatable.html
View File

@ -1,38 +1,76 @@
<div class="datatable datatable-empty"> <div class="datatable datatable-empty">
<rd-widget> <rd-widget>
<rd-widget-body classes="no-padding"> <rd-widget-body classes="no-padding">
<datatable-titlebar title="Authentication Events" icon="fa-history" feature="{{::$ctrl.feature}}"></datatable-titlebar> <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
<datatable-searchbar on-change="($ctrl.onChangeKeyword)" value="$ctrl.keyword"></datatable-searchbar> <div class="toolBarTitle vertical-center">
<pr-icon icon="'svg-clockrewind'" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
Authentication Events
<be-feature-indicator feature="{{::$ctrl.feature}}"></be-feature-indicator>
</div>
<div class="vertical-center">
<datatable-searchbar on-change="($ctrl.onChangeKeyword)" value="$ctrl.keyword"></datatable-searchbar>
</div>
</div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">
<thead> <thead>
<tr> <tr>
<th> <th>
<a> <div class="vertical-center">
Time <table-column-header
<datatable-sort-icon key="Timestamp" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon> col-title="'Time'"
</a> can-sort="true"
is-sorted="$ctrl.sort.key === 'Timestamp'"
is-sorted-desc="$ctrl.sort.key === 'Timestamp' && $ctrl.sort.desc"
ng-click="$ctrl.changeSort('Timestamp')"
>
</table-column-header>
</div>
</th> </th>
<th> <th>
<a> <div class="vertical-center">
Origin <table-column-header
<datatable-sort-icon key="Origin" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon> col-title="'Origin'"
</a> can-sort="true"
is-sorted="$ctrl.sort.key === 'Origin'"
is-sorted-desc="$ctrl.sort.key === 'Origin' && $ctrl.sort.desc"
ng-click="$ctrl.changeSort('Origin')"
>
</table-column-header>
</div>
</th> </th>
<th> <th>
<a> <div class="vertical-center">
Context <table-column-header
<datatable-sort-icon key="Context" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon> col-title="'Context'"
</a> can-sort="true"
<datatable-filter labels="$ctrl.contextFilterLabels" filter-key="context" state="$ctrl.contextFilter" on-change="($ctrl.onChangeContextFilter)"> </datatable-filter> is-sorted="$ctrl.sort.key === 'Context'"
is-sorted-desc="$ctrl.sort.key === 'Context' && $ctrl.sort.desc"
ng-click="$ctrl.changeSort('Context')"
>
</table-column-header>
<datatable-filter labels="$ctrl.contextFilterLabels" filter-key="context" state="$ctrl.contextFilter" on-change="($ctrl.onChangeContextFilter)">
</datatable-filter>
</div>
</th> </th>
<th> <th>
<a> <div class="vertical-center">
User <table-column-header
<datatable-sort-icon key="Username" selected-sort-key="{{ $ctrl.sort.key }}" reverse-order="$ctrl.sort.desc"></datatable-sort-icon> col-title="'User'"
</a> can-sort="true"
is-sorted="$ctrl.sort.key === 'Username'"
is-sorted-desc="$ctrl.sort.key === 'Username' && $ctrl.sort.desc"
ng-click="$ctrl.changeSort('Username')"
>
</table-column-header>
</div>
</th>
<th>
<div class="vertical-center">
<table-column-header col-title="'Result'" can-sort="false"> </table-column-header>
<datatable-filter labels="$ctrl.typeFilterLabels" filter-key="type" state="$ctrl.typeFilter" on-change="($ctrl.onChangeTypeFilter)"> </datatable-filter>
</div>
</th> </th>
<th> Result </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

48
app/portainer/user-activity/auth-logs-view/auth-logs-view.html
View File

@ -11,36 +11,38 @@
</div> </div>
</div> </div>
</div> </div>
<p class="text-muted small vertical-center">
<p class="text-muted small"> <pr-icon icon="'info'" feather="true" class-name="'icon icon-sm icon-primary'"></pr-icon>
<i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i>
Portainer user authentication activity logs have a maximum retention of 7 days. Portainer user authentication activity logs have a maximum retention of 7 days.
</p> </p>
<div> <div>
<button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled <button type="button" class="btn btn-sm btn-primary" limited-feature-dir="{{::$ctrl.limitedFeature}}" limited-feature-class="limited-be" limited-feature-disabled
><i class="fa fa-download space-right" aria-hidden="true"></i>Export as CSV ><pr-icon icon="'download'" feather="true" icon-class="'icon icon-sm'"></pr-icon>Export as CSV
</button> </button>
<be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator> <be-feature-indicator feature="$ctrl.limitedFeature"></be-feature-indicator>
</div> </div>
</rd-widget-body> </rd-widget-body>
</rd-widget> </rd-widget>
</div>
<auth-logs-datatable
logs="$ctrl.state.logs" <div class="be-indicator-container">
keyword="$ctrl.state.keyword" <div class="row">
sort="$ctrl.state.sort" <auth-logs-datatable
limit="$ctrl.state.limit" logs="$ctrl.state.logs"
context-filter="$ctrl.state.contextFilter" keyword="$ctrl.state.keyword"
type-filter="$ctrl.state.typeFilter" sort="$ctrl.state.sort"
total-items="$ctrl.state.totalItems" limit="$ctrl.state.limit"
current-page="$ctrl.state.currentPage" context-filter="$ctrl.state.contextFilter"
feature="{{:: $ctrl.limitedFeature}}" type-filter="$ctrl.state.typeFilter"
on-change-context-filter="($ctrl.onChangeContextFilter)" total-items="$ctrl.state.totalItems"
on-change-type-filter="($ctrl.onChangeTypeFilter)" current-page="$ctrl.state.currentPage"
on-change-keyword="($ctrl.onChangeKeyword)" feature="{{:: $ctrl.limitedFeature}}"
on-change-sort="($ctrl.onChangeSort)" on-change-context-filter="($ctrl.onChangeContextFilter)"
on-change-limit="($ctrl.onChangeLimit)" on-change-type-filter="($ctrl.onChangeTypeFilter)"
on-change-page="($ctrl.onChangePage)" on-change-keyword="($ctrl.onChangeKeyword)"
></auth-logs-datatable> on-change-sort="($ctrl.onChangeSort)"
on-change-limit="($ctrl.onChangeLimit)"
on-change-page="($ctrl.onChangePage)"
></auth-logs-datatable>
</div>
</div> </div>