From 0326177253bd3b4a2933e084a8759473998b60c0 Mon Sep 17 00:00:00 2001
From: VeraLyu <lvroyce0210@gmail.com>
Date: Thu, 23 Mar 2017 18:39:15 +0800
Subject: [PATCH] PLT-5669: Change format of timestamp of access history
 (#5646)

Add new line for timestamp and forbid wrap for ip and sessionid of access history to
prevent unnecessary line wrap.
---
 webapp/components/audit_table.jsx | 33 +++++++++++++++++--------------
 webapp/sass/base/_typography.scss |  4 ++++
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/webapp/components/audit_table.jsx b/webapp/components/audit_table.jsx
index c70c659d41..34e61dbace 100644
--- a/webapp/components/audit_table.jsx
+++ b/webapp/components/audit_table.jsx
@@ -229,12 +229,12 @@ class AuditTable extends React.Component {
 
             let iContent;
             if (this.props.showIp) {
-                iContent = <td className='word-break--all'>{auditInfo.ip}</td>;
+                iContent = <td className='whitespace--nowrap word-break--all'>{auditInfo.ip}</td>;
             }
 
             let sContent;
             if (this.props.showSession) {
-                sContent = <td className='word-break--all'>{auditInfo.sessionId}</td>;
+                sContent = <td className='whitespace--nowrap word-break--all'>{auditInfo.sessionId}</td>;
             }
 
             const descStyle = {};
@@ -244,7 +244,7 @@ class AuditTable extends React.Component {
 
             accessList[i] = (
                 <tr key={audit.id}>
-                    <td className='word-break--all'>{auditInfo.timestamp}</td>
+                    <td className='whitespace--nowrap word-break--all'>{auditInfo.timestamp}</td>
                     {uContent}
                     <td
                         className='word-break--all'
@@ -615,18 +615,21 @@ export function formatAuditInfo(audit, formatMessage) {
     const auditInfo = {};
     auditInfo.timestamp = (
         <div>
-            <FormattedDate
-                value={date}
-                day='2-digit'
-                month='short'
-                year='numeric'
-            />
-            {' - '}
-            <FormattedTime
-                value={date}
-                hour='2-digit'
-                minute='2-digit'
-            />
+            <div>
+                <FormattedDate
+                    value={date}
+                    day='2-digit'
+                    month='short'
+                    year='numeric'
+                />
+            </div>
+            <div>
+                <FormattedTime
+                    value={date}
+                    hour='2-digit'
+                    minute='2-digit'
+                />
+            </div>
         </div>
     );
     auditInfo.userId = audit.user_id;
diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss
index 1d3f1d0521..a9bc183c48 100644
--- a/webapp/sass/base/_typography.scss
+++ b/webapp/sass/base/_typography.scss
@@ -26,6 +26,10 @@ body {
     word-break: break-all;
 }
 
+.whitespace--nowrap {
+    white-space: nowrap;
+}
+
 .overflow--ellipsis {
     overflow: hidden;
     text-overflow: ellipsis;