Add logAlarm method to AlarmsTable component.

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

Hide file tree

Showing 4 changed files with 35 additions and 54 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
@@ -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
@@ -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>