OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated Audit log table view

Browse Source 
refs. https://github.com/TryGhost/Toolbox/issues/356

- the readability of the Audit log table wasn't great as the very repetitive "actor" was the primary info
- the link to the actor (staff user) was missing
This commit is contained in:
Peter Zimon 2022-08-25 13:06:53 +02:00
parent da62355e18
commit a94e9b2e74
3 changed files with 70 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
ghost/admin/app/components/settings/audit-log/table.hbs
View File

@ -1,59 +1,51 @@
<table class="gh-list gh-audit-log-table">
<thead>
<tr>
<th>User</th>
<th>Event</th>
<th></th>
<th>Time</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
{{#each @events as |event|}}
{{#let (parse-audit-log-event event) as |ev|}}
<tr>
<div class="gh-list-data gh-list-cellwidth-30">
<div class="flex items-center">
<span class="user-list-item-figure" style={{background-image-style (or ev.actor.profileImageUrl ev.actor.iconImage)}}>
<span class="hidden">Photo of {{ev.actor.name}}</span>
</span>
<h3 class="ma0 pa0 gh-audit-log-name">{{ev.actor.name}}</h3>
</div>
</div>
<div class="gh-list-data gh-list-cellwidth-10 gh-audit-log-action">
<div class="gh-audit-log-container">
<div class="gh-list-data">
<div class="gh-audit-log-object flex items-center ma3">
<div class="gh-audit-log-icon">{{svg-jar ev.actionIcon}}</div>
<div class="gh-audit-log-event">
<span class="gh-audit-log-description">
{{capitalize-first-letter ev.action}}
</span>
<div>
<div class="gh-audit-log-description">
<span>
{{capitalize-first-letter ev.action}}:
</span>
{{#if ev.contextResource}}
<span>
<span>{{capitalize-first-letter ev.contextResource.first}}</span>
{{#if (not (eq ev.contextResource.first ev.contextResource.second))}}
<code>({{ev.contextResource.second}})</code>
{{/if}}
</span>
{{else if (or ev.original.resource.title ev.original.resource.name ev.original.context.primary_name)}}
{{#if ev.linkTarget}}
<LinkTo @route={{ev.linkTarget.route}} @models={{ev.linkTarget.models}} class="permalink fw6">
{{or ev.original.resource.title ev.original.resource.name}}
</LinkTo>
{{else}}
<span>{{or ev.original.resource.title ev.original.resource.name ev.original.context.primary_name}}</span>
{{/if}}
{{else}}
<span class="midlightgrey">(unknown)</span>
{{/if}}
<span class="gh-audit-log-name">
<span class="midgrey">&ndash; by </span>
<LinkTo @route="settings.staff.user" @model={{ev.actor.slug}}>
{{ev.actor.name}}
</LinkTo>
</span>
</div>
<div class="gh-audit-log-datetime">{{moment-format ev.original.created_at "DD MMM YYYY HH:mm:ss"}}</div>
</div>
</div>
</div>
<div class="gh-list-data gh-audit-log-object">
<div class="gh-audit-log-container">
{{#if ev.contextResource}}
<span class="midlightgrey-d1">
<span class="fw5">{{capitalize-first-letter ev.contextResource.first}}</span>
{{#if (not (eq ev.contextResource.first ev.contextResource.second))}}
<code>({{ev.contextResource.second}})</code>
{{/if}}
</span>
{{else if (or ev.original.resource.title ev.original.resource.name ev.original.context.primary_name)}}
{{#if ev.linkTarget}}
<LinkTo @route={{ev.linkTarget.route}} @models={{ev.linkTarget.models}} class="permalink">
<strong>{{or ev.original.resource.title ev.original.resource.name}}</strong>
</LinkTo>
{{else}}
<span class="midlightgrey-d1">
<span class="fw5">{{or ev.original.resource.title ev.original.resource.name ev.original.context.primary_name}}</span>
</span>
{{/if}}
{{else}}
<span class="midlightgrey">(unknown)</span>
{{/if}}
</div>
</div>
<div class="gh-list-data midgrey">{{moment-format ev.original.created_at "DD MMM YYYY HH:mm:ss"}}</div>
</tr>
{{/let}}
{{/each}}

2
ghost/admin/app/helpers/parse-audit-log-event.js
View File

@ -117,7 +117,7 @@ function getAction(ev) {
}
}
return `${ev.event} ${resourceType}`;
return `${resourceType} ${ev.event}`;
}
function getContextResource(ev) {

47
ghost/admin/app/styles/layouts/settings.css
View File

@ -2870,7 +2870,6 @@ p.theme-validation-details {
.gh-audit-log-container {
display: flex;
align-items: center;
padding: 7px 0;
}
.gh-audit-log-container strong {
@ -2888,7 +2887,7 @@ p.theme-validation-details {
.gh-audit-log-object code {
background: none;
border: none;
color: var(--middarkgrey);
color: var(--midgrey);
}
.gh-audit-log-dash {
@ -2898,19 +2897,46 @@ p.theme-validation-details {
}
.gh-audit-log-icon {
width: 16px;
height: 16px;
margin-right: 8px;
width: 18px;
height: 18px;
margin: 0 20px 0 4px;
}
.gh-audit-log-icon svg path {
fill: var(--middarkgrey);
fill: var(--midgrey-l1);
}
.gh-audit-log-description {
font-size: 1.3rem;
color: var(--middarkgrey);
font-size: 1.4rem;
color: var(--darkgrey);
white-space: nowrap;
margin-top: 2px;
font-weight: 500;
}
.gh-audit-log-description a {
font-weight: 700;
}
.gh-audit-log-name {
font-size: 1.35rem;
font-weight: 400;
margin-bottom: 0 !important;
color: var(--midgrey);
}
.gh-audit-log-name a {
color: var(--midgrey) !important;
font-weight: 400;
}
.gh-audit-log-name a:hover {
color: var(--darkgrey) !important;
}
.gh-audit-log-datetime {
font-size: 1.2rem;
color: var(--midlightgrey);
}
.gh-audit-log-table .user-list-item-figure {
@ -2918,11 +2944,6 @@ p.theme-validation-details {
width: 30px;
}
.gh-audit-log-name {
margin-bottom: 0 !important;
min-width: 160px;
}
@media (max-width: 620px) {
.gh-audit-log-table .user-list-item-figure {
display: none;