Control station first functional version

.github/workflows/build-control-station.yaml

@@ -0,0 +1,49 @@
+name: Build control station
+
+on:
+    workflow_call:
+    workflow_dispatch:
+    pull_request:
+        paths:
+            - control-station/**
+            - common-front/**
+
+jobs:
+    build-control-station:
+        name: 'Build control station'
+        runs-on: ubuntu-latest
+
+        env:
+            FRONTEND_DIR: ./control-station
+            COMMON_DIR: ./common-front
+
+        steps:
+            - uses: actions/checkout@v4
+              with:
+                  sparse-checkout: |
+                      control-station
+                      common-front
+
+            - name: 'Install common front dependencies'
+              working-directory: '${{env.COMMON_DIR}}'
+              run: npm install
+
+            - name: 'Build common front'
+              working-directory: '${{env.COMMON_DIR}}'
+              run: npm run build
+
+            - name: 'Install control station dependencies'
+              working-directory: '${{env.FRONTEND_DIR}}'
+              run: npm install
+
+            - name: 'Build control station'
+              working-directory: '${{env.FRONTEND_DIR}}'
+              run: npm run build
+
+            - name: 'Upload build'
+              uses: actions/upload-artifact@v4
+              with:
+                  name: control-station
+                  path: '${{env.FRONTEND_DIR}}/static/*'
+                  retention-days: 3
+                  compression-level: 9

backend/cmd/config.toml

@@ -14,7 +14,7 @@ files = "/"
 boards = ["VCU"]
 
 [excel.download]
-id="1NyNaAOw_6iWtnCpEg73AtSSFx1fMdhPRmmdOhjgjCZI"
+id = "1NyNaAOw_6iWtnCpEg73AtSSFx1fMdhPRmmdOhjgjCZI"
 name = "ade.xlsx"
 path = "."
 

backend/internal/excel/utils/units.go

@@ -34,7 +34,7 @@ func ParseUnits(literal string, globalUnits map[string]Operations) (Units, error
 		ops, ok := globalUnits[parts[0]]
 
 		if !ok {
-			return Units{}, fmt.Errorf("units \"%s\" not found in global", parts[0])
+			return Units{Name: parts[0], Operations: make(Operations, 0)}, fmt.Errorf("units \"%s\" not found in global", parts[0])
 		}
 
 		return Units{
@@ -44,13 +44,13 @@ func ParseUnits(literal string, globalUnits map[string]Operations) (Units, error
 	}
 
 	if len(parts) != 2 {
-		return Units{}, fmt.Errorf("units %v can only have 2 parts", parts)
+		return Units{Name: parts[0], Operations: make(Operations, 0)}, fmt.Errorf("units %v can only have 2 parts", parts)
 	}
 
 	operations, err := NewOperations(parts[1])
 
 	if err != nil {
-		return Units{}, err
+		return Units{Name: parts[0], Operations: make(Operations, 0)}, err
 	}
 
 	return Units{

backend/internal/pod_data/measurement.go

@@ -35,12 +35,7 @@ func getMeasurements(adeMeasurements []ade.Measurement, globalUnits map[string]u
 
 func getMeasurement(adeMeas ade.Measurement, globalUnits map[string]utils.Operations) (Measurement, error) {
 	if isNumeric(adeMeas.Type) {
-		m, err := getNumericMeasurement(adeMeas, globalUnits)
-
-		if err != nil {
-			return nil, err
-		}
-		return m, nil
+		return getNumericMeasurement(adeMeas, globalUnits)
 	} else if adeMeas.Type == "bool" {
 		return getBooleanMeasurement(adeMeas), nil
 	} else if strings.HasPrefix(adeMeas.Type, "enum") {

backend/pkg/http/handlers.go

@@ -5,20 +5,23 @@ import (
 	"encoding/json"
 	"io"
 	"net/http"
+	"sync"
 	"time"
 )
 
 type handleData struct {
 	name    string
 	modTime time.Time
 	data    io.ReadSeeker
+	dataMx  *sync.Mutex
 }
 
 func HandleData(name string, data io.ReadSeeker) *handleData {
 	return &handleData{
 		name:    name,
 		modTime: time.Now(),
 		data:    data,
+		dataMx:  new(sync.Mutex),
 	}
 }
 
@@ -39,6 +42,8 @@ func (handle *handleData) ServeHTTP(writer http.ResponseWriter, request *http.Re
 	writer.Header().Set("Cache-Control", "no-cache")
 	writer.Header().Set("Pragma", "no-cache")
 	writer.Header().Set("Access-Control-Allow-Origin", "*")
+	handle.dataMx.Lock()
+	defer handle.dataMx.Unlock()
 	http.ServeContent(writer, request, handle.name, handle.modTime, handle.data)
 }
 

common-front/lib/adapters/PodData.ts

@@ -27,7 +27,10 @@ export type MeasurementAdapter =
 
 export type NumericMeasurementAdapter = Omit<NumericMeasurement, 'value'>;
 export type BooleanMeasurementAdapter = Omit<BooleanMeasurement, 'value'>;
-export type EnumMeasurementAdapter = Omit<EnumMeasurement, 'value'>;
+export type EnumMeasurementAdapter = { options: string[] } & Omit<
+    EnumMeasurement,
+    'value'
+>;
 
 export function createPodDataFromAdapter(adapter: PodDataAdapter): PodData {
     const boards: Board[] = Object.values(adapter.boards).map(
@@ -117,7 +120,7 @@ export function getEnumMeasurement(
         id: id,
         name: adapter.name,
         type: 'enum',
-        value: 'Default',
+        value: adapter.options[0],
     };
 }
 

common-front/lib/components/Caret/Caret.module.scss

@@ -1,6 +1,4 @@
 .caretWrapper {
-    width: min-content;
-    height: min-content;
     display: flex;
     justify-content: center;
     align-items: center;

common-front/lib/components/Caret/Caret.tsx

@@ -1,17 +1,17 @@
-import styles from "./Caret.module.scss";
-import { BsFillCaretRightFill } from "react-icons/bs";
+import styles from './Caret.module.scss';
+import { BsFillCaretRightFill } from 'react-icons/bs';
 type Props = {
     isOpen: boolean;
     onClick?: () => void;
     className?: string;
 };
 
-export const Caret = ({ isOpen, onClick, className = "" }: Props) => {
+export const Caret = ({ isOpen, onClick, className = '' }: Props) => {
     return (
         <div
-            className={`${styles.caretWrapper} ${className}`}
+            className={`${className} ${styles.caretWrapper}`}
             onClick={onClick}
-            style={{ transform: isOpen ? "rotate(90deg)" : "" }}
+            style={{ transform: isOpen ? 'rotate(90deg)' : '' }}
         >
             {<BsFillCaretRightFill />}
         </div>

common-front/lib/components/ColorfulChart/ColorfulChart.tsx

@@ -1,26 +1,30 @@
-import styles from "./ColorfulChart.module.scss";
-import { Legend } from "./Legend/Legend";
-import { Title } from "./Title/Title";
-import { LinesChart } from "../LinesChart/LinesChart";
-import { LineDescription } from "../LinesChart/types";
-import { useMemo } from "react";
+import styles from './ColorfulChart.module.scss';
+import { Legend } from './Legend/Legend';
+import { Title } from './Title/Title';
+import { LinesChart } from '../LinesChart/LinesChart';
+import { LineDescription } from '../LinesChart/types';
+import { useMemo } from 'react';
 
-const palette = ["#EE8735", "#51C6EB", "#7BEE35", "#e469ca"];
+const palette = ['#EE8735', '#51C6EB', '#7BEE35', '#e469ca'];
 
 type Props = {
     className?: string;
-    title: string;
+    title?: string;
     items: LineDescription[];
     length: number;
     height?: string;
+    showLegend?: boolean;
+    showTitle?: boolean;
 };
 
 export const ColorfulChart = ({
-    className = "",
-    title,
+    className = '',
+    title = '',
     items,
     length,
-    height = "8rem",
+    height = '8rem',
+    showLegend = false,
+    showTitle = false,
 }: Props) => {
     const itemsWithPalette = useMemo(
         () =>
@@ -33,7 +37,7 @@ export const ColorfulChart = ({
 
     return (
         <div className={`${styles.colorfulChart} ${className}`}>
-            <Title title={title} />
+            {showTitle && <Title title={title} />}
             <div className={styles.body}>
                 <LinesChart
                     height={height}
@@ -42,7 +46,7 @@ export const ColorfulChart = ({
                     items={itemsWithPalette}
                     length={length}
                 />
-                <Legend items={itemsWithPalette} />
+                {showLegend && <Legend items={itemsWithPalette} />}
             </div>
         </div>
     );

common-front/lib/components/ColorfulChart/Legend/Legend.tsx

@@ -1,6 +1,6 @@
-import styles from "./Legend.module.scss";
-import { LegendItem } from "./LegendItem/LegendItem";
-import { LineDescription } from "../../LinesChart/types";
+import styles from './Legend.module.scss';
+import { LegendItem } from './LegendItem/LegendItem';
+import { LineDescription } from '../../LinesChart/types';
 
 type Props = {
     items: LineDescription[];
@@ -14,8 +14,8 @@ export const Legend = ({ items }: Props) => {
                     <LegendItem
                         key={item.id}
                         name={item.name}
-                        units={"A"}
-                        value={item.getUpdate()}
+                        units={'A'}
+                        getValue={item.getUpdate}
                         color={item.color}
                     />
                 );

common-front/lib/components/ColorfulChart/Legend/LegendItem/LegendItem.tsx

@@ -1,19 +1,22 @@
-import styles from "./LegendItem.module.scss";
+import { useState } from 'react';
+import { useGlobalTicker } from '../../../../services';
+import styles from './LegendItem.module.scss';
 
 type Props = {
     name: string;
-    value: number;
+    getValue: () => number;
     units: string;
     color: string;
 };
 
-export const LegendItem = ({ name, units, value, color }: Props) => {
+export const LegendItem = ({ name, units, getValue, color }: Props) => {
+    const [value, setValue] = useState(getValue());
+
+    useGlobalTicker(() => setValue(getValue()));
+
     return (
         <div className={styles.legendItem}>
-            <div
-                className={styles.name}
-                style={{ backgroundColor: color }}
-            >
+            <div className={styles.name} style={{ backgroundColor: color }}>
                 {name}
             </div>
             <div className={styles.value}>

common-front/lib/components/FormComponents/Button/Button.module.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/styles.scss';
+
 .buttonWrapper {
     flex: 1 1 0;
     display: flex;
@@ -6,12 +8,12 @@
 
     padding: 0.5rem;
     text-align: center;
-    border-radius: 0.5rem;
-    background-color: var(--tertiary-60);
+    border-radius: styles.$normal-border-radius;
+    background-color: styles.$orange;
     color: white;
     user-select: none;
 
-    filter: var(--shadow);
+    @include styles.shadow;
 
     &.enabled {
         cursor: pointer;
@@ -26,4 +28,9 @@
 .label {
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: 1rem;
+}
+
+.icon {
+    width: 75%;
 }

common-front/lib/components/FormComponents/Button/Button.tsx

@@ -1,21 +1,23 @@
-import styles from "./Button.module.scss";
-import { animated, useSpring } from "@react-spring/web";
-import { lightenHSL } from "../../../color";
+import styles from './Button.module.scss';
+import { animated, useSpring } from '@react-spring/web';
+import { lightenHSL } from '../../..';
 
 type Props = {
-    label: string;
-    onClick: (ev: React.MouseEvent) => void;
+    label?: string;
+    icon?: string;
+    onClick?: (ev: React.MouseEvent) => void;
     disabled?: boolean;
     color?: string;
     className?: string;
 };
 
 export const Button = ({
-    label,
-    color = "hsl(29, 88%, 57%)",
-    onClick,
-    disabled,
-    className = "",
+    label = undefined,
+    icon = undefined,
+    color = 'hsl(29, 88%, 57%)',
+    onClick = () => {},
+    disabled = false,
+    className = '',
 }: Props) => {
     const [springs, api] = useSpring(() => ({
         from: { backgroundColor: color },
@@ -55,6 +57,7 @@ export const Button = ({
                 })
             }
         >
+            {icon && <img src={icon} alt="icon" className={styles.icon} />}
             <span className={styles.label}>{label}</span>
         </animated.div>
     );

common-front/lib/components/FormComponents/CheckBox/CheckBox.module.scss

@@ -1,4 +1,7 @@
-.checkbox {
+@use '../../../styles/styles.scss';
+
+#checkBox {
     width: 1rem;
     height: 1rem;
+    border: 1px solid styles.$alternate-text-color;
 }