Merge pull request #341 from dod-ccpo/ui/clean-up-audit-log

Initial audit log UI cleanup

atst/models/audit_event.py

@@ -42,6 +42,20 @@ class AuditEvent(Base, TimestampsMixin):
 
         return " ".join([user_str, action_str, display_name_str, scope_str])
 
+    @property
+    def activity_description(self):
+        action_str = "{} on {} {}".format(
+            self.action, self.resource_type, self.resource_id
+        )
+        display_name_str = "({})".format(self.display_name) if self.display_name else ""
+        scope_str = ""
+        if self.request_id and self.resource_type != "request":
+            scope_str = "for request {}".format(self.request_id)
+        elif self.workspace_id and self.resource_type != "workspace":
+            scope_str = "in workspace {}".format(self.workspace_id)
+
+        return " ".join([action_str, display_name_str, scope_str])
+
     def save(self, connection):
         attrs = inspect(self).dict
 

styles/atat.scss

@@ -35,6 +35,7 @@
 @import 'components/forms';
 @import 'components/selector';
 @import 'components/budget_chart';
+@import 'components/audit_log';
 
 @import 'sections/login';
 @import 'sections/request_approval';

styles/components/_audit_log.scss

@@ -0,0 +1,22 @@
+.audit-log__item {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+
+  .audit-log__item__timestamp {
+    @include small-label;
+    width: 6rem;
+    flex-shrink: 0;
+    margin-right: $gap * 2;
+
+    @include media($medium-screen) {
+      width: 12rem;
+    }
+  }
+
+  .audit-log__item__name {
+    margin-top: 0;
+    margin-bottom: $gap;
+  }
+}

templates/audit_log.html

@@ -3,20 +3,31 @@
 {% block content %}
 
 
-  <div class="panel">
-    <section class="block-list">
-      <header class="block-list__header">
-        <h1 class="block-list__title">Acitivity History</h1>
-      </header>
+  <section class="block-list">
+    <header class="block-list__header">
+      <h1 class="block-list__title">Activity History</h1>
+    </header>
 
-      <ul>
-        {% for event in audit_events %}
-          <li class="block-list__item">{{ event }}</li>
-        {% endfor %}
-      </ul>
+    <ul>
+      {% for event in audit_events %}
+        <li class="block-list__item">
+          <article class='audit-log__item'>
+            <div class='audit-log__item__timestamp'>
+              <local-datetime timestamp='{{ event.time_created }}'></local-datetime>
+            </div>
 
-    </section>
+            <div>
+              <h2 class='h4 audit-log__item__name'>
+                {{ event.user.full_name if event.user else "ATAT System" }}
+              </h2>
+              {{ event.activity_description }}
+            </div>
+          </article>
+        </li>
+      {% endfor %}
+    </ul>
+
+  </section>
 
-  </div>
 
 {% endblock %}