Merge pull request #684 from lsst-ts/tickets/DM-46184

Add a button to log alarms from the AlarmsList and AlarmsTable components.

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
 ------
 

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') {

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);

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}
           />

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,

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>;

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>

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;
 }

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}

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;

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)),
   };
 };
 

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>

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,
+        },
+      }),
+    );
+  };
+};