COSMOS Web - a web application to visualize telemetry data from a satellite. UI Repository.
See https://github.com/spjy/cosmos-mongodb for the server component of COSMOS Web.
- Node.js / NPM (NPM is installed with Node.js)
Open a terminal and change directories to the location you want to install the repository.
git clone https://github.com/spjy/cosmos-web.git
cd cosmos-web
npm install
If you need to modify the default environment variable values (do not modify .env.defaults directly):
cp .env.defaults .env
WEBSOCKET_IP=localhost # Agent Mongo IP. Set this to the IP of the Agent MongoDB instance you are trying to connect to.
QUERY_WEBSOCKET_PORT=8080 # Port of the WebSocket to access the query endpoints
LIVE_WEBSOCKET_PORT=8081 # Port of the WebSocket to access the live endpoints
CESIUM_ION_TOKEN= # Token for the globe simulation (optional). Get a token here -> https://cesium.com/ion/signup?gs=true
If you need to run Agent Mongo, the server component of COSMOS Web, see this repository: https://github.com/spjy/cosmos-mongodb
If you need to run Agent Socket, which is Agent Mongo without the database component, see this repository: https://github.com/spjy/cosmos-socket
npm start
Docker is a quick way to get started with running applications with ease.
If you want to run the COSMOS Web development image through Docker:
cd /path/to/cosmos-web
docker build . -t cosmos_web
docker run 3000:3000 cosmos_web
docker pull spencerpjy/cosmos-web
docker run 3000:3000 cosmos-webFile Naming Standards
All files should be in upper camel case format. If it contains JSX within the file, the extension shall be .jsx.
JSX File Standards
All JSX files shall follow the React Hooks API standard. This means all components should follow the functional style component creation.
If a component requires a prop function to be passed (e.g. onChange), it should be abstracted out, meaning it should have its own function definition. If it is only changing the state and/or calling another function, you may use just an inline function. Function names should be in lower camel case.
The React component along with all React states, functions and props should be documented using the React Styleguidist standard.
For use of a global state (to allow components to share the same state where the React state becomes difficult to manage), the React Context API should be used in conjunction with reducers (if needed).
Folder Organization
/src/components
This folder contains each page's components, and each page's corresponding components should be in a folder with the same name as the page.
Exception: Components that are reusable and can span across different pages are to be put into the Global folder.
/src/pages
This folder contains a different route to a page. Each page should contain only layout logic and store logic if children components require it.
/src/store
This folder contains the React Context global store and reducer logic.
Follow the AngularJS commit style.
You can configure the routes through /src/routes/index.js. Each top level object within the routes array corresponds to a page.
Each object has a name, icon, component, path and props.
Name is the name that will show up on the navigation bar, the icon is the icon that will show up on the navigation bar, and the component is the component that will be shown on the route.
The path is the route that corresponds to the page. You can add /:id at the end to specify that it is layout enabled. Props are optional; within the props object, you can provide the default layout of the page.
For the path
For example:
const routes = [
{
name: 'Satellites',
icon: 'rocket',
path: '/satellite/:id',
component: Dashboard,
props: {
defaultLayout: {
lg: [
{
i: 'satellite-default-f',
x: 6,
y: 2,
w: 6,
h: 21,
component: {
name: 'Attitude',
props: {
attitudes: [
{
name: 'n1',
nodeProcess: 'cubesat1:propagator_simple',
quaternions: {
d: {
x: 0,
y: 0,
z: 0,
},
w: 0,
},
live: true,
},
],
},
},
},
]
}
}
}
]AsyncComponent is the component that brings together dashboard components. It allows the dashboard components to be rendered via the routes.js file by name.
BaseComponent is the component that contains common functionality and user interfaces across other components. For instance, it contains a header, configuration form modal, and content area for other componenents.
ComponentSettings contains the configuration form modal used in BaseComponent.
LayoutManager is page that allows users to create layouts and add them to pages.
LayoutSelector is the dropdown menu located at the top of layout enabled pages, and it allows selection of a certain layout for a certain page.
See this page.
The splash page with a little bit of information.
The page to manage saved page layouts for routes such as satellites or ground stations.
On this page, there is a table to view the currently saved layouts on the computer. Modify it by clicking the + on the left or delete it using the X on the right.
To create a new layout, use the form below and fill out:
The routes that are able to have saved layouts. For instance, you can select the layout to be saved under 'Ground Stations' or 'Satellites'.
The name of the layout for a certain route. Differentiate between other layout names.
Sizing. Each row has a width (w) of twelve (12).
Formatting. You must enter an array of objects. Each object contains a unique:
- Unique key (i) - to avoid conflicts with other layouts, use the format: dashboardName-key
- Width (w)
- Height (h)
- Horiztonal position (w)
- Vertical position (y)
- Component name (component.name)
- Component props (component.props)
Example.
[
{
"i": "dashboardName-a",
"x": 0,
"y": 0,
"w": 6,
"h": 7,
"component": {
"name": "Status",
"props": {
"name": "Ok"
}
}
},
{
"i": "dashboardName-b",
"x": 6,
"y": 0,
"w": 6,
"h": 7,
"component": {
"name": "DisplayValues",
"props": [
{
"name": "CPU Load",
"nodeProcess": "beagle1:cpu",
"dataKey": "device_cpu_load_000",
"unit": "%",
}
]
}
},
]Component Name and Props: For a list of components that are available to be used and each component's props, see components.md.
Click Preview to see the layout.
Click Save Layout to save it.
On top of each Dashboard page, e.g. Sattelites or Ground Stations, a dropdown menu coupled with a button exist to allow for quickly switching between pre-defined layouts.