Add logAlarm method to AlarmsTable component.

lsst-ts · Jan 20, 2025 · e11234e · e11234e
1 parent d2630b5
commit e11234e
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 18 deletions.
diff --git 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
@@ -33,11 +33,11 @@ table {
 }
 
 .wrapper {
-  display: flex;
+  /* display: flex;
   flex-flow: column;
   align-items: flex-end;
   width: inherit;
-  height: 100%;
+  height: 100%; */
 }
 
 .controlsContainer {
@@ -55,23 +55,24 @@ table {
 }
 
 .dataTableWrapper {
-  display: flex;
+  /* display: flex;
   flex-flow: row;
   justify-content: center;
   width: inherit;
   flex: 1;
-  min-height: 0;
+  min-height: 0; */
 }
 
 .dataTable {
-  display: grid;
-  grid-template-rows: min-content minmax(0, 1fr);
-  table-layout: fixed;
+  overflow-x: auto;
+  /* display: grid; */
+  /* grid-template-rows: min-content minmax(0, 1fr); */
+  /* table-layout: fixed; */
   border-collapse: collapse;
 }
 
 /****************** Columns styles ***************/
-.dataTable .ackButton {
+.dataTable .actionButton {
   width: var(--ack-width);
   text-align: center;
 }
@@ -123,21 +124,21 @@ table {
 
 /****************** General table head and body styles ***************/
 .dataTable thead {
-  display: table;
+  /* display: table;
   table-layout: fixed;
   width: 100%;
-  word-wrap: break-word;
+  word-wrap: break-word; */
 }
 
 .dataTable tbody {
-  display: block;
-  height: 100%; /* necessary for scroll */
-  overflow-x: hidden;
+  /* display: block; */
+  /* height: 100%;  necessary for scroll */
+  /* overflow-x: hidden; */
 }
 .dataTable tbody tr {
-  display: table;
+  /* display: table;
   table-layout: fixed;
-  width: 100%;
+  width: 100%; */
 }
 .dataTable th,
 td {
@@ -229,6 +230,11 @@ 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);

diff --git 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
@@ -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>