From 8e5c9a20ce3767d30d51252befcccabb41720809 Mon Sep 17 00:00:00 2001
From: Sebastian Aranda <aranda.sebastian@gmail.com>
Date: Tue, 14 Jan 2025 17:21:55 -0300
Subject: [PATCH 1/6] Set Undefined level for logs without it on parseCsvData.

---
 love/src/components/OLE/NonExposure/NonExposure.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/love/src/components/OLE/NonExposure/NonExposure.jsx b/love/src/components/OLE/NonExposure/NonExposure.jsx
index 64ec2c036..9c5d2ea73 100644
--- a/love/src/components/OLE/NonExposure/NonExposure.jsx
+++ b/love/src/components/OLE/NonExposure/NonExposure.jsx
@@ -332,7 +332,7 @@ export default class NonExposure extends Component {
     const csvData = data.map((row) => {
       const obsDay = getObsDayFromDate(moment(row.date_added + 'Z'));
       const escapedMessageText = row.message_text.replace(/"/g, '""');
-      const parsedLevel = OLE_COMMENT_TYPE_OPTIONS.find((option) => option.value === row.level).label;
+      const parsedLevel = OLE_COMMENT_TYPE_OPTIONS.find((option) => option.value === row.level)?.label ?? 'Undefined';
       return {
         ...row,
         obs_day: obsDay,

From 0b23624560d50dca26ee1b8011c5647fcddd28f5 Mon Sep 17 00:00:00 2001
From: Sebastian Aranda <aranda.sebastian@gmail.com>
Date: Tue, 14 Jan 2025 18:33:04 -0300
Subject: [PATCH 2/6] Add logAlarm and ackAlarm methods to the alarms redux
 actions.

---
 love/src/redux/actions/alarms.js | 33 ++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/love/src/redux/actions/alarms.js b/love/src/redux/actions/alarms.js
index 7182f12c6..bceb7da85 100644
--- a/love/src/redux/actions/alarms.js
+++ b/love/src/redux/actions/alarms.js
@@ -18,6 +18,7 @@ this program. If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { RECEIVE_ALARM, RECEIVE_ALL_ALARMS } from './actionTypes';
+import { requestSALCommand } from './ws';
 
 export const receiveAlarm = (alarm) => {
   return {
@@ -32,3 +33,35 @@ export const receiveAllAlarms = (alarmsStream) => {
     alarmsStream,
   };
 };
+
+export const ackAlarm = (name, severity, acknowledgedBy) => {
+  return (dispatch) => {
+    dispatch(
+      requestSALCommand({
+        cmd: 'cmd_acknowledge',
+        component: 'Watcher',
+        salindex: 0,
+        params: {
+          name,
+          severity,
+          acknowledgedBy,
+        },
+      }),
+    );
+  };
+};
+
+export const logAlarm = (name) => {
+  return (dispatch) => {
+    dispatch(
+      requestSALCommand({
+        cmd: 'cmd_makeLogEntry',
+        component: 'Watcher',
+        salindex: 0,
+        params: {
+          name,
+        },
+      }),
+    );
+  };
+};

From 3e985ca3c82635ffe0ac026305e9c7b18e49d39e Mon Sep 17 00:00:00 2001
From: Sebastian Aranda <aranda.sebastian@gmail.com>
Date: Tue, 14 Jan 2025 18:33:44 -0300
Subject: [PATCH 3/6] Refactor Layout component to use ackAlarm and logAlarm
 alarms redux actions.

---
 love/src/Utils.js                               |  2 ++
 love/src/components/Layout/Layout.container.jsx | 15 +++------------
 love/src/components/Layout/Layout.jsx           |  1 +
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/love/src/Utils.js b/love/src/Utils.js
index d20b3a822..a97197ae6 100644
--- a/love/src/Utils.js
+++ b/love/src/Utils.js
@@ -1272,12 +1272,14 @@ export const getNotificationMessage = (salCommand) => {
     cmd_unacknowledge: 'unacknowledged',
     cmd_mute: 'muted',
     cmd_unmute: 'unmuted',
+    cmd_makeLogEntry: 'logged',
   };
 
   const watcherErrorCmds = {
     cmd_acknowledge: 'acknowledging',
     cmd_mute: 'muting',
     cmd_unmute: 'unmuting',
+    cmd_makeLogEntry: 'logging',
   };
 
   if (salCommand.status === 'REQUESTED') {
diff --git a/love/src/components/Layout/Layout.container.jsx b/love/src/components/Layout/Layout.container.jsx
index c02346177..9c603a91c 100644
--- a/love/src/components/Layout/Layout.container.jsx
+++ b/love/src/components/Layout/Layout.container.jsx
@@ -40,6 +40,7 @@ import {
   getControlLocation,
 } from '../../redux/selectors';
 import { logout, receiveConfig, requireSwapToken, cancelSwapToken } from '../../redux/actions/auth';
+import { logAlarm, ackAlarm } from '../../redux/actions/alarms';
 import { addGroup, removeGroup, requestSALCommand, resetSubscriptions } from '../../redux/actions/ws';
 import { fetchControlLocationLoopStart, fetchControlLocationLoopStop } from '../../redux/actions/observatoryState';
 import { clearViewToEdit } from '../../redux/actions/uif';
@@ -119,19 +120,9 @@ const mapDispatchToProps = (dispatch) => {
       subscriptions.forEach((stream) => dispatch(removeGroup(stream)));
     },
     ackAlarm: (name, severity, acknowledgedBy) => {
-      return dispatch(
-        requestSALCommand({
-          cmd: 'cmd_acknowledge',
-          component: 'Watcher',
-          salindex: 0,
-          params: {
-            name,
-            severity,
-            acknowledgedBy,
-          },
-        }),
-      );
+      dispatch(ackAlarm(name, severity, acknowledgedBy));
     },
+    logAlarm: (name) => dispatch(logAlarm(name)),
     requireUserSwap: (bool) => {
       if (bool) dispatch(requireSwapToken);
       else dispatch(cancelSwapToken);
diff --git a/love/src/components/Layout/Layout.jsx b/love/src/components/Layout/Layout.jsx
index fcbb594bc..2b1290821 100644
--- a/love/src/components/Layout/Layout.jsx
+++ b/love/src/components/Layout/Layout.jsx
@@ -583,6 +583,7 @@ class Layout extends Component {
           <AlarmsList
             alarms={filteredAlarms}
             ackAlarm={this.props.ackAlarm}
+            logAlarm={this.props.logAlarm}
             taiToUtc={this.props.taiToUtc}
             user={this.props.user}
           />

From d2630b59ad3b20c6763f30593dec21355cfeaf9b Mon Sep 17 00:00:00 2001
From: Sebastian Aranda <aranda.sebastian@gmail.com>
Date: Tue, 14 Jan 2025 18:34:35 -0300
Subject: [PATCH 4/6] Add logAlarm method to AlarmsList components.

---
 .../components/Watcher/AlarmsList/AlarmsList.jsx    |  5 ++++-
 .../AlarmsList/CompactAlarm/CompactAlarm.jsx        | 13 +++++++++++++
 .../AlarmsList/CompactAlarm/CompactAlarm.module.css |  1 +
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/love/src/components/Watcher/AlarmsList/AlarmsList.jsx b/love/src/components/Watcher/AlarmsList/AlarmsList.jsx
index 231a64c68..a490fb056 100644
--- a/love/src/components/Watcher/AlarmsList/AlarmsList.jsx
+++ b/love/src/components/Watcher/AlarmsList/AlarmsList.jsx
@@ -32,9 +32,11 @@ AlarmList.propTypes = {
   alarms: PropTypes.array,
   /** Function to dispatch an alarm acknowledgement */
   ackAlarm: PropTypes.func,
+  /** Function to dispatch an alarm logging */
+  logAlarm: PropTypes.func,
 };
 
-export default function AlarmList({ alarms, taiToUtc, ackAlarm, user }) {
+export default function AlarmList({ alarms, taiToUtc, ackAlarm, logAlarm, user }) {
   return (
     <div className={styles.alarmsContainer} title="Alarms">
       {alarms.length < 1 ? (
@@ -57,6 +59,7 @@ export default function AlarmList({ alarms, taiToUtc, ackAlarm, user }) {
                 severityUpdateTimestamp,
                 reason: alarm.reason?.value,
                 ackAlarm: ackAlarm,
+                logAlarm: logAlarm,
               };
 
               return <CompactAlarm key={alarm.name?.value} {...alarmProps}></CompactAlarm>;
diff --git a/love/src/components/Watcher/AlarmsList/CompactAlarm/CompactAlarm.jsx b/love/src/components/Watcher/AlarmsList/CompactAlarm/CompactAlarm.jsx
index a4cd378a8..f656f4aba 100644
--- a/love/src/components/Watcher/AlarmsList/CompactAlarm/CompactAlarm.jsx
+++ b/love/src/components/Watcher/AlarmsList/CompactAlarm/CompactAlarm.jsx
@@ -33,6 +33,7 @@ export default function CompactAlarm({
   reason,
   severityUpdateTimestamp,
   ackAlarm,
+  logAlarm,
 }) {
   const severityStatus = severityToStatus[severity];
   const maxSeverityStatus = severityToStatus[maxSeverity];
@@ -88,6 +89,18 @@ export default function CompactAlarm({
           >
             ACK
           </Button>
+          <Button
+            title="Log alarm details to the Narrativelog"
+            status="info"
+            shape="rounder"
+            onClick={(event) => {
+              event.stopPropagation();
+              logAlarm(name);
+              event.nativeEvent.stopImmediatePropagation();
+            }}
+          >
+            LOG
+          </Button>
         </div>
       </div>
     </div>
diff --git a/love/src/components/Watcher/AlarmsList/CompactAlarm/CompactAlarm.module.css b/love/src/components/Watcher/AlarmsList/CompactAlarm/CompactAlarm.module.css
index 3bc4d0687..f2bea0fa6 100644
--- a/love/src/components/Watcher/AlarmsList/CompactAlarm/CompactAlarm.module.css
+++ b/love/src/components/Watcher/AlarmsList/CompactAlarm/CompactAlarm.module.css
@@ -106,6 +106,7 @@ this program. If not, see <http://www.gnu.org/licenses/>.
 
 .ackButtonContainer {
   display: flex;
+  gap: 0.5em;
   justify-content: center;
   padding-top: 0.5em;
 }

From 061749a176f1e17c389f672c93efa01fe29672ce Mon Sep 17 00:00:00 2001
From: Sebastian Aranda <aranda.sebastian@gmail.com>
Date: Tue, 14 Jan 2025 19:51:45 -0300
Subject: [PATCH 5/6] Add logAlarm method to AlarmsTable component.

---
 .../Watcher/AlarmsTable/AlarmsTable.jsx       | 23 +++++++-
 .../AlarmsTable/AlarmsTable.module.css        | 58 +++----------------
 .../components/Watcher/Watcher.container.jsx  |  2 +
 love/src/components/Watcher/Watcher.jsx       |  6 ++
 4 files changed, 35 insertions(+), 54 deletions(-)

diff --git a/love/src/components/Watcher/AlarmsTable/AlarmsTable.jsx b/love/src/components/Watcher/AlarmsTable/AlarmsTable.jsx
index a2d69cc1a..d4300099a 100644
--- a/love/src/components/Watcher/AlarmsTable/AlarmsTable.jsx
+++ b/love/src/components/Watcher/AlarmsTable/AlarmsTable.jsx
@@ -247,7 +247,8 @@ export default class AlarmsTable extends PureComponent {
 
                   return (
                     <>
-                      <td className={styles.ackButton} />
+                      <td className={styles.actionButton}></td>
+                      <td className={styles.actionButton}></td>
                       <ColumnHeader
                         {...defaultColumnProps}
                         className={styles.status}
@@ -304,7 +305,22 @@ export default class AlarmsTable extends PureComponent {
                         ].join(' ')}
                         onClick={() => this.clickGearIcon(key)}
                       >
-                        <td title={reasonStr} className={[styles.firstColumn, styles.ackButton].join(' ')}>
+                        <td title={reasonStr} className={[styles.firstColumn, styles.actionButton].join(' ')}>
+                          <div className={styles.statusWrapper}>
+                            <Button
+                              title="Log this alarm to the Narrativelog"
+                              status="info"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                this.props.logAlarm(row.name.value);
+                              }}
+                              command
+                            >
+                              LOG
+                            </Button>
+                          </div>
+                        </td>
+                        <td title={reasonStr} className={[styles.firstColumn, styles.actionButton].join(' ')}>
                           {!isAcknowledged(row) ? (
                             <div className={styles.statusWrapper}>
                               <Button
@@ -374,7 +390,8 @@ export default class AlarmsTable extends PureComponent {
                             ' ',
                           )}
                         >
-                          <td colSpan={1} className={styles.ackButton}></td>
+                          <td colSpan={1} className={styles.actionButton}></td>
+                          <td colSpan={1} className={styles.actionButton}></td>
                           <td colSpan={4} className={styles.expandedRowContent}>
                             <DetailsPanel
                               alarm={row}
diff --git a/love/src/components/Watcher/AlarmsTable/AlarmsTable.module.css b/love/src/components/Watcher/AlarmsTable/AlarmsTable.module.css
index ea4a83eab..3068f7235 100644
--- a/love/src/components/Watcher/AlarmsTable/AlarmsTable.module.css
+++ b/love/src/components/Watcher/AlarmsTable/AlarmsTable.module.css
@@ -32,14 +32,6 @@ table {
   --cell-padding: 1em;
 }
 
-.wrapper {
-  display: flex;
-  flex-flow: column;
-  align-items: flex-end;
-  width: inherit;
-  height: 100%;
-}
-
 .controlsContainer {
   display: flex;
   flex-flow: row;
@@ -54,24 +46,13 @@ table {
   visibility: hidden;
 }
 
-.dataTableWrapper {
-  display: flex;
-  flex-flow: row;
-  justify-content: center;
-  width: inherit;
-  flex: 1;
-  min-height: 0;
-}
-
 .dataTable {
-  display: grid;
-  grid-template-rows: min-content minmax(0, 1fr);
-  table-layout: fixed;
+  overflow-x: auto;
   border-collapse: collapse;
 }
 
 /****************** Columns styles ***************/
-.dataTable .ackButton {
+.dataTable .actionButton {
   width: var(--ack-width);
   text-align: center;
 }
@@ -122,23 +103,6 @@ table {
 }
 
 /****************** General table head and body styles ***************/
-.dataTable thead {
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-  word-wrap: break-word;
-}
-
-.dataTable tbody {
-  display: block;
-  height: 100%; /* necessary for scroll */
-  overflow-x: hidden;
-}
-.dataTable tbody tr {
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-}
 .dataTable th,
 td {
   width: auto;
@@ -229,24 +193,16 @@ td {
   padding: 1em;
 }
 
+.dataTable .expandedRow .actionButton {
+  width: calc(var(--ack-width) * 1.365);
+  text-align: center;
+}
+
 .dataTable .unackExpandedRow .expandedRowContent {
   background: var(--table-unack-row-background);
   border-bottom: 1px solid var(--table-unack-row-border);
 }
 
-/* .dataTable .expandedRow textarea {
-    background: var(--secondary-background-dimmed-color);
-    color: var(--base-font-color);
-    border: none;
-    width: calc(100% - 3em);
-    margin-left: 2em;
-    height: 13em;
-    font-size: 1em;
-    resize: none;
-    border-radius: 5px;
-    padding: 0.6em 0.6em;
-} */
-
 .dataTable tr:hover.expandedRow td.cell {
   border-bottom: 1px solid var(--secondary-background-color);
   border-top: 1px solid transparent;
diff --git a/love/src/components/Watcher/Watcher.container.jsx b/love/src/components/Watcher/Watcher.container.jsx
index 6653195ed..e8cef5d0e 100644
--- a/love/src/components/Watcher/Watcher.container.jsx
+++ b/love/src/components/Watcher/Watcher.container.jsx
@@ -21,6 +21,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { getUsername, getAllAlarms, getTaiToUtc, getAllTime } from '../../redux/selectors';
 import { addGroup, removeGroup, requestSALCommand } from '../../redux/actions/ws';
+import { logAlarm } from '../../redux/actions/alarms';
 import SubscriptionTableContainer from '../GeneralPurpose/SubscriptionTable/SubscriptionTable.container';
 import Watcher from './Watcher';
 // import mockAlarms from './AlarmsTable/mock'
@@ -138,6 +139,7 @@ const mapDispatchToProps = (dispatch) => {
         }),
       );
     },
+    logAlarm: (name) => dispatch(logAlarm(name)),
   };
 };
 
diff --git a/love/src/components/Watcher/Watcher.jsx b/love/src/components/Watcher/Watcher.jsx
index 39758d181..5c0949377 100644
--- a/love/src/components/Watcher/Watcher.jsx
+++ b/love/src/components/Watcher/Watcher.jsx
@@ -44,6 +44,8 @@ export default class Watcher extends Component {
     muteAlarm: PropTypes.func,
     /** Function to dispatch an alarm unmute */
     unmuteAlarm: PropTypes.func,
+    /** Function to dispatch an alarm logging */
+    logAlarm: PropTypes.func,
     /** Function to subscribe to streams to receive the alarms */
     subscribeToStreams: PropTypes.func,
     /** Function to unsubscribe to streams to stop receiving the alarms */
@@ -196,6 +198,10 @@ export default class Watcher extends Component {
             unackAlarm={this.props.unackAlarm}
             muteAlarm={this.props.muteAlarm}
             unmuteAlarm={this.props.unmuteAlarm}
+            logAlarm={(name) => {
+              this.setState({ waiting: true });
+              this.props.logAlarm(name);
+            }}
             sortFunctions={this.state.selectedTab === 'unmuted' ? this.sortFunctions : this.mutedSortFunctions}
           />
         </div>

From 7ba2516d4f650ba86ab07f86b652082c59c718fd Mon Sep 17 00:00:00 2001
From: Sebastian Aranda <aranda.sebastian@gmail.com>
Date: Thu, 16 Jan 2025 19:02:55 -0300
Subject: [PATCH 6/6] Update CHANGELOG.

---
 CHANGELOG.rst | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index f3d4c3655..38b03fcbd 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -2,6 +2,11 @@
 Version History
 ===============
 
+v6.7.0
+------
+
+* Add a button to log alarms from the AlarmsList and AlarmsTable components. `<https://github.com/lsst-ts/LOVE-frontend/pull/684>`_
+
 v6.6.0
 ------