From 66e53101e6a71a57f90e8a9af9934b650039a499 Mon Sep 17 00:00:00 2001
From: Anna Lin <alin@mitre.org>
Date: Fri, 19 Nov 2021 16:36:27 -0500
Subject: [PATCH 1/8] Fixed errors with timestamp in displaying ops
 start/decide

---
 templates/operations.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/templates/operations.html b/templates/operations.html
index 01849f3b4..d93b68fd8 100644
--- a/templates/operations.html
+++ b/templates/operations.html
@@ -66,7 +66,7 @@ <h2>Operations</h2>
                                         <span class="decisionsIcon" x-text="op.chain.length"></span></i>
                                     <i x-show="selectedOperationID === op.id" class="far fa-folder-open"></i>
                                     <span class="operation-name" x-text="op.name"></span>
-                                    <span class="readable-time" x-text="getHumanFriendlyTime(op.start)"></span>
+                                    <span class="readable-time" x-text="getHumanFriendlyTimeISO8601(op.start ? op.start : '')"></span>
                                 </button>
                             </template>
                         </div>
@@ -139,7 +139,7 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                             </label>
                             <template x-if="!isOperationRunning">
                                 <div class="is-flex is-justify-content-center">
-                                    <button class="is-small button is-rounded chip m-1"
+                                    <button class="is-small button is-rounded m-1"
                                             x-text="selectedOperation.obfuscator + ' obfuscation'"></button>
                                 </div>
                             </template>
@@ -148,7 +148,7 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                                      id="operation-obfuscator">
                                     <template x-for="o in OBFUSCATORS" :key="o.name">
                                         <button x-bind:class="selectedOperation.obfuscator === o.name ? '' : 'is-outlined has-text-white'"
-                                                class="is-small button is-rounded is-primary chip m-1"
+                                                class="is-small button is-rounded is-primary m-1"
                                                 x-on:click="updateOperation('obfuscator', o.name)"
                                                 x-text="o.name">
                                         </button>
@@ -201,7 +201,7 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                                 <div class="has-text-grey-light is-size-7">
                                     <em x-show="selectedOperation.chain.length > 0">Last ran <span
                                             class="has-text-grey-light"
-                                            x-text="selectedOperation.chain[selectedOperation.chain.length-1]?.ability.name + ' (' + getHumanFriendlyTime(selectedOperation.chain[selectedOperation.chain.length-1]?.decide) + ')'"></span></em>
+                                            x-text="selectedOperation.chain[selectedOperation.chain.length-1]?.ability.name + ' (' + getHumanFriendlyTimeISO8601(selectedOperation?.chain[selectedOperation.chain.length-1]?.decide) + ')'"></span></em>
                                 </div>
                                 <div class="is-flex is-flex-direction-row is-justify-content-flex-end">
                                     <div class="mb-6 mr-4 text-align-right">
@@ -561,14 +561,14 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                                     <div class="modal-form-fields"
                                          id="basic-groups">
                                         <button type="button"
-                                                class="is-small button is-rounded is-primary chip m-1"
+                                                class="is-small button is-rounded is-primary m-1"
                                                 x-bind:class="(startOperation.group === '') ? '' : 'is-outlined has-text-white'"
                                                 x-on:click="startOperation.group = ''">
                                             all groups
                                         </button>
                                         <template x-for="(group, index) in agentGroups" :key="group">
                                             <button type="button"
-                                                    class="is-small button is-rounded is-primary chip m-1"
+                                                    class="is-small button is-rounded is-primary m-1"
                                                     x-bind:class="(startOperation.group === group) ? '' : 'is-outlined has-text-white'"
                                                     x-on:click="startOperation.group = group"
                                                     x-show="group !== ''"
@@ -600,7 +600,7 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                                             x-bind:data-tooltip="usage['Obfuscators']">Obfuscators</span></label>
                                     <div class="modal-form-fields" id="stealth-obfuscator">
                                         <template x-for="o in OBFUSCATORS" :key="o.name">
-                                            <button class="is-small button is-rounded is-primary chip m-1"
+                                            <button class="is-small button is-rounded is-primary m-1"
                                                     type="button"
                                                     x-bind:class="startOperation.obfuscator === o.name ? '' : 'is-outlined has-text-white'"
                                                     x-on:click="startOperation.obfuscator = o.name"

From 88f62726834dfcefa352b5f31ebd1cc448252c82 Mon Sep 17 00:00:00 2001
From: Anna Lin <alin@mitre.org>
Date: Fri, 19 Nov 2021 17:24:49 -0500
Subject: [PATCH 2/8] Fixed occasional error with getting operation last link
 decide time

---
 templates/operations.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/templates/operations.html b/templates/operations.html
index d93b68fd8..528c1e4dd 100644
--- a/templates/operations.html
+++ b/templates/operations.html
@@ -198,11 +198,13 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                         <div class="navbar-divider mb-5 width-100"></div>
                         <template x-if="isOperationRunning">
                             <div class="is-flex is-flex-direction-row is-justify-content-space-between">
+                                <template x-if="selectedOperation.chain.length > 0">
                                 <div class="has-text-grey-light is-size-7">
-                                    <em x-show="selectedOperation.chain.length > 0">Last ran <span
+                                    <em>Last ran <span
                                             class="has-text-grey-light"
-                                            x-text="selectedOperation.chain[selectedOperation.chain.length-1]?.ability.name + ' (' + getHumanFriendlyTimeISO8601(selectedOperation?.chain[selectedOperation.chain.length-1]?.decide) + ')'"></span></em>
+                                            x-text="selectedOperation.chain[selectedOperation.chain.length-1]?.ability.name + ' (' + getHumanFriendlyTimeISO8601(selectedOperation.chain[selectedOperation.chain.length-1]?.decide) + ')'"></span></em>
                                 </div>
+                                </template>
                                 <div class="is-flex is-flex-direction-row is-justify-content-flex-end">
                                     <div class="mb-6 mr-4 text-align-right">
                                         <button title="add manual command" class="button is-primary is-small"

From a5495c04f6e53b7090250c1b8a513d7375cc657f Mon Sep 17 00:00:00 2001
From: Anna Lin <alin@mitre.org>
Date: Fri, 19 Nov 2021 17:25:29 -0500
Subject: [PATCH 3/8] Moved download button to make it more visible

---
 templates/operations.html | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/templates/operations.html b/templates/operations.html
index 528c1e4dd..ca0d7bd7d 100644
--- a/templates/operations.html
+++ b/templates/operations.html
@@ -41,16 +41,21 @@ <h2>Operations</h2>
                             </div>
                         </div>
                         <div>&nbsp;&nbsp;</div>
-                        <button x-bind:disabled="!(searchInput && filteredOperations.length === 0)" type="button"
+                        <button x-bind:disabled="!(searchInput && filteredOperations.length === 0)"
                                 title="creates a new operation based on the last created operation settings "
                                 class="button is-primary is-small"
                                 x-on:click="addOperation(true, startOperation)"><i class="pr-1 fas fa-plus"></i>
                             Quick Add
                         </button>
-                        <button type="button" title="add operation" class="ml-2 button is-primary is-small"
+                        <button title="add operation" class="ml-2 button is-primary is-small"
                                 x-on:click="openModal = 'addOperation'; getAgents()"><i class="pr-1 fas fa-plus"></i>
                             Create Operation
                         </button>
+                        <button title="download reports" class="ml-2 button is-primary is-small"
+                                x-on:click="openModal = 'showDownloadMenu'"><i class="pr-1 fas fa-arrow-down"></i>
+                            Download
+                        </button>
+                        <div class="is-flex is-justify-content-center pt-2"></div>
                     </div>
                     <div class="is-flex is-flex-direction-row is-align-items-center">
                         <div class="is-flex is-flex-direction-row is-justify-content-flex-start operation-menu-container">
@@ -115,15 +120,9 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                                     x-on:click="updateOperation('state', 'run_one_link')">
                                 <i title="run one step" class="fas fa-play"><sub>1</sub></i></button>
                         </div>
-
                         <div class="is-flex is-justify-content-center pt-2 hover-opacity">
-                            <button title="download reports"
-                                    class="mx-2 button no-style"
-                                    x-on:click="openModal = 'showDownloadMenu'"><i
-                                    class="pr-1 fas fa-arrow-down"></i>
-                            </button>
                             <button type="button" title="delete operation"
-                                    class="mx-2 button no-style"
+                                    class="mx-2 mt-2 button no-style"
                                     x-on:click="openModal = 'deleteOperationModal'"><i
                                     class="pr-1 fas fa-trash"></i>
                             </button>
@@ -132,7 +131,7 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                 </template>
                 <template x-if="selectedOperation">
                     <div x-show="selectedOperationID"
-                         class="is-flex is-flex-direction-column is-flex-wrap-wrap hover-opacity">
+                         class="is-flex is-flex-direction-column is-flex-wrap-wrap">
                         <div class="mb-4 is-flex is-flex-direction-row is-flex-wrap-wrap">
                             <label x-show="false" for="operation-obfuscator" class="is-size-6">
                                 Obfuscation method:
@@ -325,7 +324,6 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                                             <template x-if="link.output === 'True'">
                                                 <div>
                                                     <button class="button is-primary is-small"
-                                                            x-bind:class="{'hover-opacity':selectedLink !== link}"
                                                             x-on:click="getLink(link); openModal='showOutput'"
                                                             title="view output">View Output
                                                     </button>
@@ -861,7 +859,7 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                 <template x-if="openModal === 'showDownloadMenu'">
                     <div class="modal-card">
                         <header class="modal-card-head">
-                            <p class="modal-card-title">Download</p>
+                            <p class="modal-card-title">Download Reports</p>
                         </header>
                         <section class="modal-card-body">
                             <div class="modal-form">
@@ -1695,7 +1693,7 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
     }
 
     #operationsPage .operations-menu-set-width {
-        max-width: 45%;
+        width: 45%;
     }
 
     #operationsPage .operations-dashboard {

From 9e46a181a95592855c90e61f0df2b9d3b5020b50 Mon Sep 17 00:00:00 2001
From: Anna Lin <alin@mitre.org>
Date: Fri, 19 Nov 2021 17:38:22 -0500
Subject: [PATCH 4/8] Fixed error with undefined error when selecting operation
 with no links

---
 templates/operations.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/templates/operations.html b/templates/operations.html
index ca0d7bd7d..5d5655e43 100644
--- a/templates/operations.html
+++ b/templates/operations.html
@@ -197,13 +197,11 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                         <div class="navbar-divider mb-5 width-100"></div>
                         <template x-if="isOperationRunning">
                             <div class="is-flex is-flex-direction-row is-justify-content-space-between">
-                                <template x-if="selectedOperation.chain.length > 0">
                                 <div class="has-text-grey-light is-size-7">
-                                    <em>Last ran <span
+                                    <em x-show="selectedOperation.chain.length > 0"><span
                                             class="has-text-grey-light"
-                                            x-text="selectedOperation.chain[selectedOperation.chain.length-1]?.ability.name + ' (' + getHumanFriendlyTimeISO8601(selectedOperation.chain[selectedOperation.chain.length-1]?.decide) + ')'"></span></em>
+                                            x-text="'Last ran ' + selectedOperation.chain[selectedOperation.chain.length-1]?.ability.name + ' (' + getLastDecideTime() + ')'"></span></em>
                                 </div>
-                                </template>
                                 <div class="is-flex is-flex-direction-row is-justify-content-flex-end">
                                     <div class="mb-6 mr-4 text-align-right">
                                         <button title="add manual command" class="button is-primary is-small"
@@ -1125,6 +1123,11 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                 if (el) this.showOperationsMenuCaret = el.scrollWidth > el.offsetWidth;
             },
 
+            getLastDecideTime() {
+                if (!this.selectedOperation || !this.selectedOperation.chain || this.selectedOperation.chain.length === 0) return '';
+                return getHumanFriendlyTimeISO8601(this.selectedOperation.chain[this.selectedOperation.chain.length - 1].decide);
+            },
+
             // Controls whether user can add link or not--depending on whether adversary allows repeatable abilities, and ability has been added already or not
             isLinkAvailable(ability) {
                 return this.selectedOperation.adversary.has_repeatable_abilities ? true : !this.addedTechniquesIDs.has(ability.technique_id);

From d5929886663822aadaf9fde40cfa7d97934e9713 Mon Sep 17 00:00:00 2001
From: Anna Lin <alin@mitre.org>
Date: Mon, 22 Nov 2021 15:50:09 -0500
Subject: [PATCH 5/8] Adding facts highlight in output modal

---
 templates/operations.html | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/templates/operations.html b/templates/operations.html
index 5d5655e43..65a332401 100644
--- a/templates/operations.html
+++ b/templates/operations.html
@@ -225,7 +225,7 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                                 <thead>
                                 <tr class="table-header">
                                     <th class="decideColumn">Decide</th>
-                                    <th id="link-status-header" class="statusColumn csv-exclude" title="Link Status Indicator">
+                                    <th id="link-status-header" class="statusColumn csv-exclude pl-4" title="Link Status Indicator">
                                         Status
                                     </th>
                                     <th class="infoColumn">Link/Ability Name</th>
@@ -289,10 +289,10 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                                                 </div>
                                             </template>
                                             <template x-if="isLinkEditable">
-                                                <div class="is-flex is-align-items-flex-end is-justify-content-center is-flex-direction-column">
+                                                <div class="is-flex is-align-items-flex-start is-justify-content-flex-start is-flex-direction-column">
                                                     <label x-show="false" for="edit-command">Edit command</label>
                                                     <textarea id="edit-command"
-                                                              class="code"
+                                                              class="code mb-2"
                                                               contenteditable
                                                               x-model="editableCommand"
                                                               spellcheck="false"></textarea>
@@ -455,6 +455,14 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                             <div>
                                 <pre class="has-text-left white-space-pre-line" x-text="selectedLinkResults"></pre>
                             </div>
+                            <div>
+                                <p class="mt-3 mb-2">Facts:</p>
+                                <pre class="has-text-left white-space-pre-line">
+                                    <template x-for="(fact, index) in selectedLinkFacts" :key="fact+index">
+                                        <span class="has-background-warning has-text-black mr-2" x-text="fact"></span>
+                                    </template>
+                                </pre>
+                            </div>
                         </section>
                         <footer class="modal-card-foot">
                             <nav class="level">

From e4b6286fd67472368a36215fed9c04a13585a9ce Mon Sep 17 00:00:00 2001
From: Anna Lin <alin@mitre.org>
Date: Tue, 23 Nov 2021 09:15:15 -0500
Subject: [PATCH 6/8] Lint, show Facts in output only if not null

---
 templates/operations.html | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/templates/operations.html b/templates/operations.html
index 65a332401..fd5b6af48 100644
--- a/templates/operations.html
+++ b/templates/operations.html
@@ -455,14 +455,16 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                             <div>
                                 <pre class="has-text-left white-space-pre-line" x-text="selectedLinkResults"></pre>
                             </div>
-                            <div>
-                                <p class="mt-3 mb-2">Facts:</p>
-                                <pre class="has-text-left white-space-pre-line">
-                                    <template x-for="(fact, index) in selectedLinkFacts" :key="fact+index">
-                                        <span class="has-background-warning has-text-black mr-2" x-text="fact"></span>
-                                    </template>
-                                </pre>
-                            </div>
+                            <template x-if="selectedLinkFacts?.length > 0">
+                                <div>
+                                    <p class="mt-3 mb-2">Facts:</p>
+                                    <pre class="has-text-left white-space-pre-line">
+                                        <template x-for="(fact, index) in selectedLinkFacts" :key="fact+index">
+                                            <span class="has-background-warning has-text-black mr-2" x-text="fact"></span>
+                                        </template>
+                                    </pre>
+                                </div>
+                            </template>
                         </section>
                         <footer class="modal-card-foot">
                             <nav class="level">
@@ -1367,7 +1369,7 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
             },
 
             updateLink(status, command = null) {
-                const updateLink = {...this.selectedLink, command: b64DecodeUnicode(this.selectedLink.command)};
+                const updateLink = { ...this.selectedLink, command: b64DecodeUnicode(this.selectedLink.command) };
                 if (command) {
                     updateLink.command = command;
                 }

From 67ef532faa228a70a6ccd83918487c446f94b034 Mon Sep 17 00:00:00 2001
From: Anna Lin <alin@mitre.org>
Date: Tue, 23 Nov 2021 09:27:21 -0500
Subject: [PATCH 7/8] Moved link facts to above output results in case of long
 output, facts might get pushed to bottom

---
 templates/operations.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/operations.html b/templates/operations.html
index fd5b6af48..b82cdfc89 100644
--- a/templates/operations.html
+++ b/templates/operations.html
@@ -452,11 +452,8 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                             <p class="modal-card-title">Output</p>
                         </header>
                         <section class="modal-card-body">
-                            <div>
-                                <pre class="has-text-left white-space-pre-line" x-text="selectedLinkResults"></pre>
-                            </div>
                             <template x-if="selectedLinkFacts?.length > 0">
-                                <div>
+                                <div class="mb-2">
                                     <p class="mt-3 mb-2">Facts:</p>
                                     <pre class="has-text-left white-space-pre-line">
                                         <template x-for="(fact, index) in selectedLinkFacts" :key="fact+index">
@@ -465,6 +462,9 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                                     </pre>
                                 </div>
                             </template>
+                            <div>
+                                <pre class="has-text-left white-space-pre-line" x-text="selectedLinkResults"></pre>
+                            </div>
                         </section>
                         <footer class="modal-card-foot">
                             <nav class="level">

From 5f392ef9e764f6d9f64f590dae31a3c095b8c096 Mon Sep 17 00:00:00 2001
From: Anna Lin <alin@mitre.org>
Date: Fri, 26 Nov 2021 19:09:42 -0500
Subject: [PATCH 8/8] Replaced <i> to <em> for Sonar linting tests; replaced
 Pythonic date-timestamp to more readable format based JS-native function
 toLocaleString(); show Download button only if an operation is selected

---
 templates/operations.html | 79 +++++++++++++++++++++++----------------
 1 file changed, 47 insertions(+), 32 deletions(-)

diff --git a/templates/operations.html b/templates/operations.html
index b82cdfc89..0ac1b4f81 100644
--- a/templates/operations.html
+++ b/templates/operations.html
@@ -27,14 +27,14 @@ <h2>Operations</h2>
                                            x-ref="search"
                                            x-on:keyup="filterOperations($el.value)">
                                     <span class="icon is-small is-left">
-                                        <i class="fas fa-search"></i>
+                                        <em class="fas fa-search"></em>
                                     </span>
                                 </div>
                                 <div class="control">
                                     <a class="button is-small"
                                        x-on:click="filterOperations(''); searchInput = ''; $refs.search.value=''">
                                         <span class="icon is-small is-right">
-                                            <i class="fas fa-times"></i>
+                                            <em class="fas fa-times"></em>
                                         </span>
                                     </a>
                                 </div>
@@ -44,17 +44,19 @@ <h2>Operations</h2>
                         <button x-bind:disabled="!(searchInput && filteredOperations.length === 0)"
                                 title="creates a new operation based on the last created operation settings "
                                 class="button is-primary is-small"
-                                x-on:click="addOperation(true, startOperation)"><i class="pr-1 fas fa-plus"></i>
+                                x-on:click="addOperation(true, startOperation)"><em class="pr-1 fas fa-plus"></em>
                             Quick Add
                         </button>
                         <button title="add operation" class="ml-2 button is-primary is-small"
-                                x-on:click="openModal = 'addOperation'; getAgents()"><i class="pr-1 fas fa-plus"></i>
+                                x-on:click="openModal = 'addOperation'; getAgents()"><em class="pr-1 fas fa-plus"></em>
                             Create Operation
                         </button>
-                        <button title="download reports" class="ml-2 button is-primary is-small"
-                                x-on:click="openModal = 'showDownloadMenu'"><i class="pr-1 fas fa-arrow-down"></i>
-                            Download
-                        </button>
+                        <template x-if="selectedOperation">
+                            <button title="download reports" class="ml-2 button is-primary is-small"
+                                    x-on:click="openModal = 'showDownloadMenu'"><em class="pr-1 fas fa-arrow-down"></em>
+                                Download
+                            </button>
+                        </template>
                         <div class="is-flex is-justify-content-center pt-2"></div>
                     </div>
                     <div class="is-flex is-flex-direction-row is-align-items-center">
@@ -67,9 +69,9 @@ <h2>Operations</h2>
                                 <button class="no-style operation-menu-links"
                                         x-bind:title="op.name + ' has ' + op.chain.length + ' decisions'"
                                         x-on:click="selectedOperation = op; getOperations(); getOperation()">
-                                    <i x-show="selectedOperationID !== op.id" class="far fa-folder">
-                                        <span class="decisionsIcon" x-text="op.chain.length"></span></i>
-                                    <i x-show="selectedOperationID === op.id" class="far fa-folder-open"></i>
+                                    <em x-show="selectedOperationID !== op.id" class="far fa-folder">
+                                        <span class="decisionsIcon" x-text="op.chain.length"></span></em>
+                                    <em x-show="selectedOperationID === op.id" class="far fa-folder-open"></em>
                                     <span class="operation-name" x-text="op.name"></span>
                                     <span class="readable-time" x-text="getHumanFriendlyTimeISO8601(op.start ? op.start : '')"></span>
                                 </button>
@@ -77,7 +79,7 @@ <h2>Operations</h2>
                         </div>
                         <template x-if="showOperationsMenuCaret">
                             <div class="ml-2 scroll-more-caret">
-                                <i class="fas fa-angle-right"></i>
+                                <em class="fas fa-angle-right"></em>
                             </div>
                         </template>
                     </div>
@@ -102,29 +104,29 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                         </div>
                         <div class="controls-container is-flex is-justify-content-center is-align-items-center">
                             <button x-bind:disabled="!isOperationRunning" class="button no-style is-large"
-                                    x-on:click="updateOperation('state', 'cleanup')"><i
-                                    title="stop" class="fas fa-stop"></i></button>
+                                    x-on:click="updateOperation('state', 'cleanup')"><em
+                                    title="stop" class="fas fa-stop"></em></button>
                             <template x-if="selectedOperation.state ==='running'">
                                 <button x-bind:disabled="!isOperationRunning"
                                         class="button no-style is-larger"
-                                        x-on:click="updateOperation('state', 'paused')"><i
-                                        title="pause" class="fas fa-pause-circle"></i></button>
+                                        x-on:click="updateOperation('state', 'paused')"><em
+                                        title="pause" class="fas fa-pause-circle"></em></button>
                             </template>
                             <template x-if="selectedOperation.state !== 'running'">
                                 <button x-bind:disabled="!isOperationRunning"
                                         class="button no-style is-larger"
                                         x-on:click="updateOperation('state', 'running')">
-                                    <i title="run" class="fas fa-play-circle"></i></button>
+                                    <em title="run" class="fas fa-play-circle"></em></button>
                             </template>
                             <button x-bind:disabled="!isOperationRunning" class="button no-style is-medium"
                                     x-on:click="updateOperation('state', 'run_one_link')">
-                                <i title="run one step" class="fas fa-play"><sub>1</sub></i></button>
+                                <em title="run one step" class="fas fa-play"><sub>1</sub></em></button>
                         </div>
                         <div class="is-flex is-justify-content-center pt-2 hover-opacity">
                             <button type="button" title="delete operation"
                                     class="mx-2 mt-2 button no-style"
-                                    x-on:click="openModal = 'deleteOperationModal'"><i
-                                    class="pr-1 fas fa-trash"></i>
+                                    x-on:click="openModal = 'deleteOperationModal'"><em
+                                    class="pr-1 fas fa-trash"></em>
                             </button>
                         </div>
                     </div>
@@ -206,14 +208,14 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                                     <div class="mb-6 mr-4 text-align-right">
                                         <button title="add manual command" class="button is-primary is-small"
                                                 x-on:click="addNewRow = true; getAgents(); setTimeout(() => {document.querySelector('#input-command').scrollIntoView()}, 2);">
-                                            <i class="pr-1 fas fa-plus"></i>Manual
+                                            <em class="pr-1 fas fa-plus"></em>Manual
                                             Command
                                         </button>
                                     </div>
                                     <div class="mb-6 mr-4">
                                         <button title="add potential link" class="button is-primary is-small"
-                                                x-on:click="openModal = 'addLink'; getAgents()"><i
-                                                class="pr-1 fas fa-plus"></i>Potential
+                                                x-on:click="openModal = 'addLink'; getAgents()"><em
+                                                class="pr-1 fas fa-plus"></em>Potential
                                             Link
                                         </button>
                                     </div>
@@ -252,7 +254,7 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                                     <tr x-bind:id="link.id"
                                         x-on:click="selectedLink = link">
                                         <td class="decideColumn">
-                                            <span class="has-text-grey-light" x-text="link.decide"></span>
+                                            <span class="has-text-grey-light" x-text="getReadableTime(link.decide)"></span>
                                         </td>
                                         <td class="linkStatusColumn csv-exclude" headers="link-status-header">
                                             <span x-bind:class="'linkStatus status-'+((link.status in LINK_STATUSES) ? LINK_STATUSES[link.status] : 'queued')"
@@ -333,8 +335,8 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                                             <button x-show="selectedLink === link && isOperationRunning && !(link.status in LINK_STATUSES)"
                                                     type="button" title="delete link"
                                                     class="button is-primary is-small ml-2"
-                                                    x-on:click="openModal = 'deleteLinkModal'"><i
-                                                    class="pr-1 fas fa-trash"></i>Discard Link
+                                                    x-on:click="openModal = 'deleteLinkModal'"><em
+                                                    class="pr-1 fas fa-trash"></em>Discard Link
                                             </button>
                                         </td>
                                     </tr>
@@ -423,14 +425,14 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                                 <div class="mb-6 mr-4 has-text-right">
                                     <button title="add manual command" class="button is-primary is-small"
                                             x-on:click="addNewRow = true; getAgents()">
-                                        <i class="pr-1 fas fa-plus"></i>Manual
+                                        <em class="pr-1 fas fa-plus"></em>Manual
                                         Command
                                     </button>
                                 </div>
                                 <div class="mb-6 mr-4">
                                     <button title="add potential link" class="button is-primary is-small"
-                                            x-on:click="openModal = 'addLink'; getAgents()"><i
-                                            class="pr-1 fas fa-plus"></i>Potential
+                                            x-on:click="openModal = 'addLink'; getAgents()"><em
+                                            class="pr-1 fas fa-plus"></em>Potential
                                         Link
                                     </button>
                                 </div>
@@ -1133,6 +1135,19 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
                 if (el) this.showOperationsMenuCaret = el.scrollWidth > el.offsetWidth;
             },
 
+            getReadableTime(date) {
+                // i.e. format 2021-08-03 19:37:08
+                if (!date) return '';
+                date = date.replace('T', ' ').replace('Z', '');
+                let split = date.split('-');
+
+                let hMonth = Number(split[1]) - 1;
+                let hDate = Number(split[2].split(' ')[0]);
+                let hTime = split[2].split(' ')[1].split(':');
+
+                return new Date(Date.UTC(split[0], hMonth, hDate, hTime[0], hTime[1], hTime[2])).toLocaleString('en-US', { timeZoneName: 'short' });
+            },
+
             getLastDecideTime() {
                 if (!this.selectedOperation || !this.selectedOperation.chain || this.selectedOperation.chain.length === 0) return '';
                 return getHumanFriendlyTimeISO8601(this.selectedOperation.chain[this.selectedOperation.chain.length - 1].decide);
@@ -1533,7 +1548,7 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
         font-size: 0.3em;
     }
 
-    #operationsPage .ellipsis-divider i {
+    #operationsPage .ellipsis-divider em {
         color: #484747;
         padding: 0 7em;
     }
@@ -1583,7 +1598,7 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
         overflow: hidden;
     }
 
-    #operationsPage .operation-menu-links i {
+    #operationsPage .operation-menu-links em {
         font-size: 3em;
         padding-bottom: 5px;
         min-width: 35px;
@@ -1701,7 +1716,7 @@ <h2 class="is-size-7 has-text-weight-normal mb-5 mt-0">Decisions</h2>
         transform: scale(1.2);
     }
 
-    #operationsPage i sub {
+    #operationsPage em sub {
         font-family: sans-serif;
     }