Skip to content

Commit

Permalink
Merge pull request #10 from React-Automation-Studio/V5WithStoryBook
Browse files Browse the repository at this point in the history
Update to V5.0.0
  • Loading branch information
wduckitt authored Feb 16, 2024
2 parents 83ce076 + 365de4a commit c889980
Show file tree
Hide file tree
Showing 46 changed files with 1,249 additions and 632 deletions.
116 changes: 104 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
Current Release: V4.0.3
Current Release: V5.0.0

# Introduction

[Migrate from V4.0.3 to V5.0.0](docs/migrate-from-V4-to-V5.md)

This repository pulls in the src from the React Automation Studio repository https:/React-Automation-Studio/React-Automation-Studio and acts a standalone boiler plate example project for React Automation Studio without having to delve into the source code of the master repository.

If you wish to create a standalone AlarmHandler project you should clone this project:
Expand Down Expand Up @@ -151,9 +153,9 @@ git tag
```


To checkout version 4.0.3 run:
To checkout version 5.0.0 run:
```bash
git checkout tags/V4.0.3
git checkout tags/V5.0.0
```


Expand All @@ -162,7 +164,7 @@ To confirm the correct git submodule version :
```bash
git submodule status
```
Should contain `submodules/React-Automation-Studio (V4.0.3)` in the output for version 4.0.3 .
Should contain `submodules/React-Automation-Studio (V5.0.0)` in the output for version 5.0.0 .

If not and you previously checked out a different version run:
```bash
Expand Down Expand Up @@ -335,15 +337,15 @@ ls .env
```
If the .env file exists in the root folder, then edit it and set :
```bash
REACT_APP_EnableLogin=true
VITE_EnableLogin=true
```
If the .env file does not exist in the root folder, then:
```bash
cp example.env .env
```
then edit .env and set:
```bash
REACT_APP_EnableLogin=true
VITE_EnableLogin=true
```
Make sure that the other parameters in the file are correct. Or see 4.1:

Expand All @@ -353,18 +355,18 @@ The admin user will have full read and write access, whilst any other user will

To enable Active Directory Authentication open the .env and add, (You will need to rebuild the docker images):
```bash
REACT_APP_EnableActiveDirectoryLogin=true
VITE_EnableActiveDirectoryLogin=true
LDAP_HOST=ldap://xxxxxx
LDAP_PORT=389

```

To enable Active Directory Authentication open the .env and add, (You will need to rebuild the docker images):
```bash
Set REACT_APP_EnableGoogleLogin=true
REACT_APP_EnableGoogleLoginId= xxxxx
Set VITE_EnableGoogleLogin=true
VITE_EnableGoogleLoginId= xxxxx
```
Set REACT_APP_EnableGoogleLoginId to your google client id for your domain
Set VITE_EnableGoogleLoginId to your google client id for your domain
at https://console.developers.google.com/apis/credentials/
click create new credentials and the create a new oAuth id for the web app
It needs an https domain.
Expand All @@ -377,7 +379,7 @@ https://mydomain:3000
It is envisioned that in the future more external authentication mechanisms will be added. In this case one may want to disable the standard authentication. This can be done by setting:

```bash
REACT_APP_DisableStandardLogin=true
VITE_DisableStandardLogin=true
```
in the .env file.

Expand Down Expand Up @@ -460,7 +462,7 @@ The token expiry is controlled by the following variables in the .env file.
# 3.5 Disabling the demo components
To disable the demo React components and links in development and production, in the .env file set
```bash
REACT_APP_DISABLE_DEMOS=true
VITE_DISABLE_DEMOS=true
```

**This will disable the default demo alarm pvs shown in the alarm handler's alarm table.**
Expand Down Expand Up @@ -510,6 +512,62 @@ Site specific components and app screens should be kept in your repository. If y

Contact us at Github Discussions: https:/React-Automation-Studio/React-Automation-Studio/discussions

# Cite us

If you use React Automation Studio in your research, please cite us as follows:

```
@inproceedings{duckitt:icalepcs2023-fr2bco01,
author = {W. Duckitt and J.K. Abraham and D. Marcato and G. Savarese},
title = {{React Automation Studio: Modern Scientific Control with the Web}},
% booktitle = {Proc. ICALEPCS'23},
booktitle = {Proc. 19th Int. Conf. Accel. Large Exp. Phys. Control Syst. (ICALEPCS'23)},
eventdate = {2023-10-09/2023-10-13},
pages = {1643--1649},
paper = {FR2BCO01},
language = {english},
keywords = {EPICS, controls, interface, GUI, framework},
venue = {Cape Town, South Africa},
series = {International Conference on Accelerator and Large Experimental Physics Control Systems},
number = {19},
publisher = {JACoW Publishing, Geneva, Switzerland},
month = {01},
year = {2024},
issn = {2226-0358},
isbn = {978-3-95450-238-7},
doi = {10.18429/JACoW-ICALEPCS2023-FR2BCO01},
url = {https://jacow.org/icalepcs2023/papers/fr2bco01.pdf},
abstract = {{React Automation Studio is a progressive web application framework that enables the control of large scientific equipment through EPICS from any smart device connected to a network. With built-in advanced features such as reusable widgets and components, macro substitution, OAuth 2.0 authentication, access rights administration, alarm-handing with notifications, diagnostic probes and archived data viewing, it allows one to build modern, secure and fully responsive control user interfaces and overview screens for the desktop, web browser, TV, mobile and tablet devices. A general overview of React Automation Studio and its features as well as the system architecture, implementation, community involvement and future plans for the system is presented. }},
}
```
or: https://doi.org/10.18429/JACoW-ICALEPCS2023-FR2BCO01

and:

```
@InProceedings{duckitt:cyclotrons2019-tha03,
author = {W. Duckitt and J.K. Abraham},
title = {{React Automation Studio: A New Face to Control Large Scientific Equipment}},
booktitle = {Proc. Cyclotrons'19},
pages = {285--288},
paper = {THA03},
language = {english},
keywords = {EPICS, controls, GUI, interface, cyclotron},
venue = {Cape Town, South Africa},
series = {International Conference on Cyclotrons and their Applications},
number = {22},
publisher = {JACoW Publishing, Geneva, Switzerland},
month = {jun},
year = {2020},
isbn = {978-3-95450-205-9},
doi = {10.18429/JACoW-Cyclotrons2019-THA03},
url = {http://jacow.org/cyclotrons2019/papers/tha03.pdf},
note = {https://doi.org/10.18429/JACoW-Cyclotrons2019-THA03},
}
```
or: https://doi.org/10.18429/JACoW-Cyclotrons2019-THA03


# FAQ

### 1. Which operating systems are supported?
Expand All @@ -523,6 +581,40 @@ Contact us at Github Discussions: https:/React-Automation-Studio/Rea
The docker containers for RAS run in network mode host. This is done to enable EPICS to communicate seamlessly with any IOC's on the same subnet as the host. Other OSes such as Windows may not support the host mode and will run in the bridged mode. This may break the communication between the micro services. It is therefore recommended to run the RAS containers on a Linux VM that is minimally running Ubuntu Server. Please ensure the the VM network interface is assigned an IP on the same subnet as your EPICS network in order for communication with the IOC's to occur seamlessly.

# Changelog

V5.0.0 Friday 02 February 2024 Major Updates:
<ul>
<li>Package updates to Backend modules</li>
<li>Updated to Epics 7 and Python 3.12.1</li>
<li>Moved from Create-react-app to Vite</li>
<li>Package updates to all Node modules</li>
<li>Updated to the latest Node LTS</li>
<li>MUI has been updated to the latest packages</li>

</ul>
New Features:
<ul>
<li>
Docker multi-stage builds for speed improvements
</li>
<li>
Preview of an AreaDector Appliance user interface with included simulation
</li>
<li>
Named MongoDb volumes for easier management
</li>
</ul>
Breaking Changes:
<ul>
<li>
See the migration guide to migrate from V4.0.3 to V5.0.0
</li>
</ul>

[Migrate from V4.0.3 to V5.0.0](docs/migrate-from-V4-to-V5.md)

<br />

V4.0.3 Friday 27 October 2023 Minor Updates:
<ul>
<li>Package updates to all Node modules</li>
Expand Down
17 changes: 17 additions & 0 deletions ReactApp/.storybook/ImportPath.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React, { useContext } from "react";
import { DocsContext, Source } from "@storybook/addon-docs";

export const ImportPath = (props): JSX.Element => {
const context = useContext(DocsContext);
console.log(context);
console.log(context?.primaryStory.parameters.fileName);
const arr = context?.primaryStory?.kind?.split("/");

const componentName = arr[arr.length - 1];

const path = `import ${componentName} from '${context?.primaryStory.parameters.fileName.toString().replace(".stories.jsx","").replace(".stories.tsx","").replace(".stories.ts","").replace(".stories.js","").replace("./","")}';`;

return <Source language="js" code={props.fullPath?props.fullPath:path} />;
};

export default ImportPath;
117 changes: 117 additions & 0 deletions ReactApp/.storybook/Wrapper.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
import React, { Component } from "react";
import { BrowserRouter } from "react-router-dom";
import "typeface-roboto";
import {
ThemeProvider,
StyledEngineProvider,
createTheme,
} from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";

import AutomationStudioContext from "React-Automation-Studio/components/SystemComponents/AutomationStudioContext";

import { io } from "socket.io-client";
import lightTheme from "React-Automation-Studio/components/UI/Themes/lightTheme";
import ReactVisCssBaseline from "React-Automation-Studio/components/SystemComponents/ReactVisCssBaseline";

if (typeof window.socket === "undefined") {
window.socket = io("/pvServer", {
transports: ["websocket"],
});
}

const themes = { Light: lightTheme };
class Wrapper extends Component {
constructor(props) {
super(props);
let theme = null;
let storedThemeStyle = localStorage.getItem("themeStyle");
const defaultTheme = "Light";

let themeStyle =
storedThemeStyle === null ? defaultTheme : JSON.parse(storedThemeStyle);
let themeKeys = Object.keys(themes);
if (themeKeys.includes(themeStyle)) {
theme = createTheme(themes[themeStyle]);
} else {
themeStyle = themeKeys[0];
theme = createTheme(themes[themeStyle]);
localStorage.setItem("themeStyle", JSON.stringify(themeStyle));
}

this.changeTheme = (event) => {
let themeStyle = event.target.value;

let theme = null;
let themeStyles = this.state.system.themeStyles;
if (themeStyles.includes(themeStyle)) {
theme = createTheme(themes[themeStyle]);
} else {
themeStyle = themeStyles[0];
theme = createTheme(themes[themeStyle]);
localStorage.setItem("themeStyle", JSON.stringify(themeStyle));
}

let system = this.state.system;
system.themeStyle = themeStyle;
this.setState({ system: system, theme: theme });
localStorage.setItem("themeStyle", JSON.stringify(themeStyle));
};

this.updateLocalVariable = (name, data) => {
let system = this.state.system;
let localVariables = system.localVariables;

localVariables[name] = data;
system.localVariables = localVariables;

this.setState({
system: system,
key: this.state.key + 1,
});
};

let localVariables = {};
let userTokens = {
accessToken: "unauthenticated",
};
let system = {
socket: window.socket,
userTokens: userTokens,
userData: {
username: "",
roles: [],
loggedIn: false,
loggingIn: false,
},
localVariables: localVariables,
updateLocalVariable: this.updateLocalVariable,
enableProbe: false,
styleGuideRedirect: false,
themeStyles: themeKeys,
changeTheme: this.changeTheme,
};
this.state = {
theme: theme,
system: system,
key: 1,
};
}
render() {
return (
<BrowserRouter>
<AutomationStudioContext.Provider value={this.state.system}>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={this.state.theme}>
<CssBaseline>
<ReactVisCssBaseline>{this.props.children}</ReactVisCssBaseline>
</CssBaseline>
</ThemeProvider>
</StyledEngineProvider>
</AutomationStudioContext.Provider>
</BrowserRouter>
);
}
}

export default Wrapper;
Loading

0 comments on commit c889980

Please sign in to comment.