Observatory Summary Component Implementation

love/.eslintrc.json

@@ -19,7 +19,8 @@
     "no-underscore-dangle": "off",
     "no-plusplus": [0, { "allowForLoopAfterthoughts": true }],
     "import/no-unresolved": "off",
-    "func-names": "off"
+    "func-names": "off",
+    "indent": "off"
   },
   "plugins": ["only-warn"],
   "settings": {

love/src/Utils.js

@@ -4,7 +4,6 @@ import { DateTime } from 'luxon';
 import { toast } from 'react-toastify';
 import Moment from 'moment';
 import { WEBSOCKET_SIMULATION } from 'Config.js';
-import { SALCommandStatus } from 'redux/actions/ws';
 
 
 /* Backwards compatibility of Array.flat */
@@ -1120,7 +1119,7 @@ export const getNotificationMessage = (salCommand) => {
     cmd_unmute: 'unmuting',
   };
 
-  if (salCommand.status === SALCommandStatus.REQUESTED) {
+  if (salCommand.status === 'REQUESTED') {
     return [`Requesting command ${salCommand.csc}.${salCommand.salindex}.${salCommand.cmd}`];
   }
 

love/src/components/GeneralPurpose/SummaryPanel/SummaryPanel.module.css

@@ -73,3 +73,7 @@
   display: grid;
   grid-template-rows: auto;
 }
+
+.col2 {
+  grid-column: span 2;
+}

love/src/components/GeneralPurpose/SummaryPanel/Title.jsx

@@ -4,8 +4,7 @@ import styles from './SummaryPanel.module.css';
 const Title = ({ wide, children }) => {
   return wide ? (
     <>
-      <span className={styles.title}>{children}</span>
-      <span></span>
+      <span className={`${styles.title} ${styles.col2}`}>{children}</span>
     </>
   ) : (
     <span className={styles.title}>{children}</span>

love/src/components/GeneralPurpose/SummaryPanel/Value.jsx

@@ -3,10 +3,7 @@ import PropTypes from 'prop-types';
 import { fixedFloat } from 'Utils';
 import styles from './SummaryPanel.module.css';
 
-const Value = ({
-  children,
-  raw = false,
-}) => {
+const Value = ({ children, raw = false }) => {
   if (raw) {
     /** Display booleans as 'true' or 'false' */
     if (typeof children === 'boolean') {
@@ -52,14 +49,19 @@ const Value = ({
     );
   }
   /** Display strings and numbers. Truncate to 4 decimal places in the case of numbers */
-  return <span className={styles.value}>{parsedChild?.toFixed ? fixedFloat(parsedChild, 2) : parsedChild}{children?.units ? ' ' + children?.units : ''}</span>;
+  return (
+    <span className={styles.value}>
+      {parsedChild?.toFixed ? fixedFloat(parsedChild, 2) : parsedChild}
+      {children?.units ? ' ' + children?.units : ''}
+    </span>
+  );
 };
 
 Value.propTypes = {
   /** The value to display */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object, PropTypes.array]),
   /** Wheter to display raw values, instead of truncating to decimal places  */
   raw: PropTypes.bool,
-}
+};
 
 export default Value;

love/src/components/Layout/Layout.container.jsx

@@ -16,11 +16,11 @@ import {
   getTokenSwapStatus,
   getConfig,
   getEfdConfig,
+  getObservatoryState,
 } from '../../redux/selectors';
-import { logout, receiveConfig } from '../../redux/actions/auth';
+import { logout, receiveConfig, requireSwapToken, cancelSwapToken } from '../../redux/actions/auth';
 import { addGroup, removeGroup, requestSALCommand, resetSubscriptions } from '../../redux/actions/ws';
 import { clearViewToEdit } from '../../redux/actions/uif';
-import { requireSwapToken, cancelSwapToken } from '../../redux/actions/auth';
 import Layout from './Layout';
 
 const LayoutContainer = ({ ...props }) => {
@@ -44,6 +44,7 @@ const mapStateToProps = (state) => {
   const getExecPermission = () => getPermCmdExec(state);
   const tokenSwapStatus = getTokenSwapStatus(state);
   const efdConfigFile = getEfdConfig(state);
+  const observatorySummary = getObservatoryState(state);
   return {
     user,
     config,
@@ -61,6 +62,7 @@ const mapStateToProps = (state) => {
     getExecPermission,
     tokenSwapStatus,
     efdConfigFile,
+    observatorySummary,
   };
 };