+
[](https://github.com/Battery-Intelligence-Lab/galvanalyser/actions/workflows/unit-test.yml)
Galvanalyser is a system for automatically storing data generated by battery cycling
-machines in a database, using a set of "harvesters", whose job it is to monitor the
-datafiles produced by the battery testers and upload it in a standard format to the
-server database. The server database is a relational database that stores each dataset
-along with information about column types, units, and other relevant metadata (e.g. cell
-information, owner, purpose of the experiment)
+machines in a database in a standard format.
+The project contains several distinct components:
+
+- A REST API
+ - A Python client for the REST API
+ - A web frontend for the REST API
+- [Harvesters](docs/UserGuide.md#harvesters) that monitor and process experimental data
+
+A laboratory running a [Galvanalyser server](docs/UserGuide.md#galvanalyser-server) instance and a battery
+cycling machines can use Galvanalyser to make it easy to access, analyse, and
+share their experimental data.
+To do this, they:
+1. Set the cycling machines up to output their raw test result files to a shared drive.
+2. Set up a [harvester](docs/UserGuide.md#harvesters) on a computer with access to that shared drive.
+ - (This only needs to be done once)
+3. Log into their lab [Web frontend](docs/UserGuide.md#web-frontend) and configure the
+ [harvester](docs/UserGuide.md#harvesters) to crawl the appropriate directories on the shared drive.
+4. Log into the [Web frontend](docs/UserGuide.md#web-frontend) to edit metadata and view data,
+ or use the [Python client](docs/UserGuide.md#python-client) to download formatted data for analysis.
+
+The harvesters are able to parse the following file types:
+
+- MACCOR files in .txt, .xsl/.xslx, or raw format
+- Ivium files in .idf format
+- Biologic files in .mpr format
+
+The server database is a relational database that stores each dataset along with information
+about column types, units, and other relevant metadata (e.g. cell information, owner, purpose
+of the experiment).
+The [REST API](docs/UserGuide.md#rest-api) provides its own definition via a downloadable OpenAPI schema file
+(`schema/`), and provides interactive documentation via SwaggerUI (`schema/swagger-ui/`) and
+Redoc (`schema/redoc/`).
-There are two user interfaces to the system:
-- a web app front-end that can be used to view the stored datasets, manage the
- harvesters, and input metadata for each dataset
-- a REST API which can be used to download dataset metadata and the data itself. This
- API conforms to the [battery-api](https://github.com/martinjrobins/battery-api)
- OpenAPI specification, so tools based on this specification (e.g. the Python client)
- can use the API.
-
A diagram of the logical structure of the system is shown below. The arrows indicate the
direction of data flow.
-
+
## Project documentation
-The `documentation` directory contains more detailed documentation on a number of topics. It contains the following items:
-* [FirstTimeQuickSetup.md](./docs/FirstTimeQuickSetup.md) - A quick start guide to
+The `docs` directory contains more detailed documentation on a number of topics.
+It contains the following items:
+- [FirstTimeQuickSetup.md](docs/FirstTimeQuickSetup.md) - A quick start guide to
setting up your first complete Galvanalyser system
-* [AdministrationGuide.md](./docs/AdministrationGuide.md) - A guide to performing
- administration tasks such as creating users and setting up harvesters
-* [DevelopmentGuide.md](./docs/DevelopmentGuide.md) - A guide for developers on
+ - Installing Galvanalyser server
+ - Setting up a Harvester
+ - Checking your setup
+- [UserGuide.md](docs/UserGuide.md) - A detailed guide for Galvanalyser users
+ - [Galvanalyser server](docs/UserGuide.md#galvanalyser-server)
+ - [REST API](docs/UserGuide.md#rest-api)
+ - [User accounts](docs/UserGuide.md#user-accounts)
+ - [Web interface](docs/UserGuide.md#web-interface)
+ - [Python client](docs/UserGuide.md#python client)
+ - [Harvesters](docs/UserGuide.md#harvesters)
+- [DevelopmentGuide.md](docs/DevelopmentGuide.md) - A guide for developers on
Galvanalyser
-* [ProjectStructure.md](./docs/ProjectStructure.md) - An overview of the project folder
- structure to guide developers to the locations of the various parts of the project
-
-## Technology used
-
-This section provides a brief overview of the technology used to implement the different parts of the project.
-
-### Docker
-
-Dockerfiles are provided to run all components of this project in containers. A docker-compose file exists to simplify starting the complete server side system including the database, the web app and the Nginx server. All components of the project can be run natively, however using Docker simplifies this greatly.
-
-A Docker container is also used for building the web app and its dependencies to simplify cross platform deployment and ensure a consistent and reliable build process.
-
-### Backend server
-
-The server is a [Flask](flask.palletsprojects.com) web application, which uses
-[SQLAlchemy](https://www.sqlalchemy.org/) and [psycopg2](https://www.psycopg.org/) to
-interface with the Postgres database.
-
-### Harvesters
-
-The harvesters are python modules in the backend server which monitor directories for
-tester datafiles, parse them according to the their format and write the data and any
-metadata into the Postgres database. The running of the harvesters, either periodically
-or manually by a user, is done using a [Celery](https://docs.celeryproject.org/)
-distributed task queue.
-
-### Frontend web application
-
-The frontend is written using Javascript, the [React](https://reactjs.org/) framework
-and using [Material-UI](https://material-ui.com/) components.
-
-
-
-
-### Database
-
-The project uses PostgreSQL for its database. Other databases are currently not
-supported. An entity relationship diagram is shown below.
-
-
+
+## Contributor guide
+
+We very much welcome contributions.
+Please feel free to participate in discussion around the issues listed on GitHub,
+submit new bugs or feature requests, or help contribute to the codebase.
+
+If you are contributing to the codebase, we request that your pull requests
+identify and solve a specific problem, and include unit tests for code that
+has been added or modified.
\ No newline at end of file
diff --git a/docs/FirstTimeQuickSetup.md b/docs/FirstTimeQuickSetup.md
index d15bc621..4dd07a11 100644
--- a/docs/FirstTimeQuickSetup.md
+++ b/docs/FirstTimeQuickSetup.md
@@ -1,14 +1,10 @@
# First Time Quick Setup
-This section describes the command line commands you will need to run to set up the
-system for the first time. It is assumed you are logged into the server machine that you
-wish to use, using the user account that you want to run the server with
-
-The steps below have been tested in a bash shell on a server running Ubuntu. The entire
-application has been dockerised, so can in theory be used on other operating systems
-with minimal modification. However, `systemd` instructions below are specific to the
-Linux operating system.
-
+This section describes how to set up the system for the first time.
+It is assumed you are logged into the server machine that you
+wish to use, using the user account that you want to run the server with.
+The entire application has been dockerised, so can in theory be used on
+any major operating system with minimal modification.
## Installing required tools
@@ -35,41 +31,44 @@ git clone https://gitlab.com/battery-intelligence-lab/galvanalyser-project/galva
cd galvanalyser
```
-## Setup global environment variables
+## Setup environment variables
-Open the `.env` file in the root of the repository. This file specifies the options that
-you can use to setup your galvanalyser installation, such as passwords and data
-locations. Comments in the file give more detailed information on each option. Please go
-through each option and edit to your desired configuration.
+The Galvanalyser project uses two `.env` files, `.env` and `.env.secret`.
-## Building docker images (only when upgrading to a new version of galvanalyser)
+You will already have a `.env` file in the repository you cloned, with sensible defaults.
+If you wish to change where the database is saved, however, you can change the first entry
+in `.env`, `GALVANALYSER_DATA_PATH` to the directory where you want the postgres database.
-If you have previously installed and run galvanalyser you might already have old docker
-images already built. To rebuild the images, run the following command:
-
-```bash
-docker-compose build
-```
+### Creating `.env.secret`
-## Setting up and creating user accounts on the galvanalyser database
+The second `.env` file is a secrets file.
+This is not included because you should come up with your own secret values for the
+entries within it.
+Create the file and edit it so that it has the following keys:
+- DJANGO_SECRET_KEY
+- DJANGO_SUPERUSER_PASSWORD
+- POSTGRES_PASSWORD
-Installation and administration of galvanalyser is done using a command line interface
-(cli) that you can run via `docker-compose`. Change directory to the root of the repository
-and run the following command to create the galvanalyser database tables.
+All of these values should be unguessable secure passwords.
+DJANGO_SECRET_KEY should be very long and complex, consider 60+ characters
+with a mixture of special characters (avoid $), upper- and lower-case letters,
+and numbers.
+The only one of these you will need to use again will be the superuser password.
-**Note**: *when this command is run, it will drop all tables from the current database,
-so if you have existing data it will be deleted.*
+If you would like the Django superuser to have a name that is not 'admin',
+you can also specify DJANGO_SUPERUSER_USERNAME.
-```bash
-docker-compose run --rm app python manage.py create_db
+```shell
+vi .env.secret # could also use nano, emacs, etc.
```
-Now you can create one or more user accounts. Create one user account for each user you
-want to be able to login to the galvanalyser web application. Access permissions on each
-dataset stored in galvanalyser give access only to certain user accounts.
+## Building docker images (only when upgrading to a new version of galvanalyser)
+
+If you have previously installed and run galvanalyser you might already have old docker
+images already built. To rebuild the images, run the following command:
```bash
-docker-compose run --rm app python manage.py create_user
+docker-compose build
```
# Running Galvanalyser
@@ -82,10 +81,75 @@ docker-compose up
```
Now view the 'localhost' IP address [http://127.0.0.1/](http://127.0.0.1/) in your
-browser and you should see the Galvanalyser login page. If you wish to use the frontend
-from another machine, use the IP address or URL of the server instead.
+browser and you should see the Galvanalyser login page.
+This is the web frontend.
+If you wish to use the frontend from another machine,
+use the IP address or URL of the server instead.
+
+## Creating a user account
+
+It's not a good idea to do everything with the Django superuser,
+so create a new account on the login page.
+You'll see that you get a message telling you that the account
+needs to be approved by an existing account.
+- Refresh the page, and login using the _superuser_ credentials.
+- Once logged in, go to the bottom tab in the menu (Activate Users),
+ and click the button next to your new user account
+- Now, click the logout button in the top right,
+ and log back in with your new user account
+
+# Setting up a Harvester
+
+Harvesters are set up using a part of the code of the main Galvanalyser repository.
+The first step, then, is to log onto the machine that will run the harvesters and
+clone the repository again.
+If you are using the same server for the harvester and the rest of Galvanalyser,
+you can skip this step.
-Use one of the user accounts you created earlier to log-in to the frontend.
+```bash
+git clone https://gitlab.com/battery-intelligence-lab/galvanalyser-project/galvanalyser.git
+cd galvanalyser
+```
+
+Next, launch the harvester container, specifying the Harvester's docker-compose configuration file:
+
+```shell
+docker-compose -f docker-compose.harvester.yml run harvester
+```
+
+This will launch into an interactive shell which will guide you through the Harvester setup process.
+
+First, you'll be asked for the Galvanalyser server URL.
+If you're running on the same server as the Galvanalyser server, this will be `http://app:5000`,
+otherwise it will be the path you entered above to connect to the web frontend,
+but with the port set to 5000. So if you went to `http://example.com:80` (or just `http://example.com`),
+go to `http://example.com:5000`.
+
+Next, you'll be asked to specify a name for the new Harvester.
+
+Each Harvester needs at least one administrator.
+You'll be given a list of active user accounts, and will select one to be the
+Harvester administrator.
+If you're following this guide, you'll see the Django superuser account and the
+regular user account you just created.
+Select the regular user account.
+You can add other administrators and users to the Harvester using the web frontend later.
+
+When an administrator has been selected the Harvester will register itself with
+the Galvanalyser server and begin to monitor for data files.
+Of course, it currently has no directories to monitor, so the last step is to
+go to the web frontend and configure at least one monitored path for the Harvester.
+
+Open up the web frontend in a browser, log in as the Harvester administrator user,
+and select the 'Harvesters' tab.
+Click on the magnifying glass icon to see details for your new Harvester.
+Enter a path for the Harvester to monitor (relative to the Harvester's system),
+and click the plus icon to save your new path.
+
+The Harvester will now crawl the directory, observing files and importing them
+when they have been stable for a sufficiently long time.
+
+# Maintenance
To run the server in detached mode (i.e. run containers in the background) using the
`-d` option
@@ -98,4 +162,10 @@ To start the server side system again after it has been stopped simply run
`docker-compose up` in the root folder.
A template SystemD service file is included in the repository root directory
-`galvanalyser.service` that can be used to automatically start the system.
+`galvanalyser.service` that can be used to automatically start the system on Linux servers.
+
+
+If Harvesters go down, they can be restarted by overriding the launch command:
+```shell
+docker-compose -f docker-compose.harvester.yml run --entrypoint "python start.py --restart" harvester
+```
diff --git a/docs/GalvanalyserStructure.PNG b/docs/GalvanalyserStructure.PNG
index 0ac2e421..5f5e14c0 100644
Binary files a/docs/GalvanalyserStructure.PNG and b/docs/GalvanalyserStructure.PNG differ
diff --git a/docs/GalvanalyserStructure.pptx b/docs/GalvanalyserStructure.pptx
deleted file mode 100644
index 51b7af9e..00000000
Binary files a/docs/GalvanalyserStructure.pptx and /dev/null differ
diff --git a/docs/ProjectStructure.md b/docs/ProjectStructure.md
deleted file mode 100644
index 0151a763..00000000
--- a/docs/ProjectStructure.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Galvanalyser project Folder Structure
-
-Below is a tree diagram of the folder structure of this project and a short description of what is in each folder.
-```
-├── .env -- configuration environment variables for the server
-├── docker-compose.yml -- docker-compose file for production
-├── docker-compose.dev.yml -- docker-compose file for development
-├── backend/ -- The flask backend and harvester code
-│ ├── Dockerfile -- docker file for production and development
-│ ├── galvanalyser/ -- Library files for interacting with the database
-│ │ ├── database/ -- SQLAlchemy and psycopg2 code for interfacing with the database
-│ │ ├── harvester/ -- harvester code for monitoring, parsing and uploading dataasets
-│ └── test/ -- unit and integration tests for backend and harvester code
-├── docs/ -- documentation
-└── frontend/ -- The react frontend code
- ├── Dockerfile -- docker file for production
- ├── Dockerfile_dev -- docker file for development
- └── src/ -- source code for react components and app
-```
diff --git a/docs/UserGuide.md b/docs/UserGuide.md
new file mode 100644
index 00000000..bcd1dd77
--- /dev/null
+++ b/docs/UserGuide.md
@@ -0,0 +1,222 @@
+# Galvalanyser User Guide
+
+For help on setting up the Galvanalyser server and Harvesters, see the
+[First Time Quick Setup guide](FirstTimeQuickSetup.md)
+
+## Galvanalyser server
+
+Once set up, the Galvanalyser server instance should not need attending to.
+
+You may wish to provide a proxy server for it, especially if it is to be
+open to the web. A proxy server such as [nginx](https://www.nginx.com/)
+will provide simple proxy services, allowing you to abstract SSL and other
+layers away from the Galvanalyser server instance.
+If running a proxy, bear in mind that Galvanalyser requires the following
+ports to be exposed:
+- 80 HTTP web frontend
+- 5000 HTTP REST API
+
+These ports can be changed in the `docker-compose.yml` file.
+
+### User accounts
+
+User accounts are created via the [web frontend](#web-frontend).
+Each user account must be approved by an existing user before it can log on
+to the system.
+Once user accounts are created and approved, they can be assigned roles
+on Harvesters and Paths.
+
+#### User roles
+
+Each [Harvester](#harvesters) requires at least one administrator, and may
+have as many additional administrators as required.
+Each Harvester administrator has the following rights:
+- Edit Harvester details (name, sleep time)
+- Appoint other users to administrator role
+- Remove administrators (except the last administrator)
+- Create new [Monitored paths](#monitored-paths)
+- Perform any of the administrator actions for any of the Harvester's Paths
+
+Harvesters have [Paths](#monitored-paths) - directories which are monitored for data files.
+Each Path may have any number of administrators and users.
+The Path's Harvester administrators have the same rights as the Path's administrators.
+Path administrators may:
+- Edit Path details (path, stable time)
+- Appoint other users to administrator and user roles
+- Remove users from administrator and user roles
+- Perform any of the Path user actions
+
+Path users may:
+- View and edit details of datafiles found in the Path directory
+- View and edit datasets produced when those datafiles are imported
+
+Additionally, any registered user may create, and view Cell and Equipment details.
+They may also edit and delete those Cell and Equipment instances provided that no
+datasets are using them.
+
+### REST API
+
+Endpoints are written as absolute paths starting from the Galvanalyser server
+address, so to reach the `/harvesters/` endpoint for a Galvanalyser server
+located at `http://localhost`, you would go to `http://localhost/harvesters/`.
+
+#### API Spec
+
+The REST API provides a browsable interface at `/spec/swagger-ui/`.
+Its OpenAPI spec can be downloaded from `/spec/`.
+Spec download defaults to `.yml` format, but `.json` is available from `/spec/?format=json`.
+
+#### Browsable API
+
+The browsable API provided by Django REST Framework is not fully functional,
+but does provide a relatively useful way to browse the raw data on the REST API.
+It is provided at the base address (endpoint `/`), and provides its own list of
+available endpoints.
+
+### Web frontend
+
+The primary tool for interacting with the REST API is the web frontend.
+This is designed to provide a user-friendly way to view and edit [Harvesters](#harvesters),
+[Paths](#monitored-paths), [Datasets](#datasets) and their metadata.
+
+The web frontend is accessed via a [User account](#user-accounts),
+and allows new user accounts to be created and approved by existing users.
+Each user's view of the web frontend is customised to only include information
+relevant to them.
+
+#### Datasets page
+
+When first successfully logging in with an active account, the user will land
+on the Datasets page.
+This page lists information about any [Datasets](#datasets) that have been
+imported from files in a [Monitored path](#monitored-paths) that the user
+has access to.
+
+The first time you log in, this is likely to be blank.
+Once some datasets have been imported, you will see them listed here and
+you will be able to edit their metadata.
+
+Each dataset can be described in terms of its name and type,
+a purpose selected from a pre-populated list, and may be associated with
+the particular [Cell](#cell-page) that generated it, as well as any
+[Equipment](#equipment-page) that was used.
+
+##### Data view
+
+Clicking the magnifying glass icon for a dataset allows you to inspect the data.
+This will bring up two buttons which provide boilerplate code for accessing the
+data using the [Python client](#python-client) or MATLAB, as well as a plot of
+the voltage and ampage of the cell over the duration of the test.
+
+Additional columns in the data can be added to the preview graph by clicking on their
+names.
+
+#### Harvesters page
+
+The Harvesters page lists [Harvesters](#harvesters) that you have access to,
+either because you are an administrator of that Harvester, or because you are
+a user or administrator on one or more of the Harvester's [Paths](#monitored-paths).
+
+If you are an administrator on the Harvester, you will be able to modify the
+Harvester properties, changing the Harvester name or the sleep time.
+Sleep time governs how long the Harvester spends idle between harvest cycles.
+
+##### Monitored paths view
+
+Click on the magnifying glass icon to view the selected Harvester's Paths.
+The Path view shows the [Monitored paths](#monitored-paths) on the Harvester
+that you can access.
+If you have sufficient permissions, you will be able to alter Path details,
+including the directory path, the length of time files must be stable before
+attempting import, and user permissions.
+
+###### File view
+
+Click on the magnifying glass icon to view the Files found in the Monitored path.
+These are read-only because their properties are directly dependent on the actual
+files in the monitored directory.
+If any file has failed to import, the last error associated with that import will
+appear when you mouse-over the IMPORT FAILED state.
+
+If for any reason you want to force the harvester to attempt to import a file
+that has failed to import correctly, you can do so by clicking the refresh button
+in the 'Force Re-import' column.
+
+Files that have been successfully imported will show at least one linked [Dataset](#datasets).
+Once you have some, your initial [Dataset view](#datasets-page) will be populated
+and you can add metadata to your dataset.
+
+#### Cell page
+
+Each dataset will be generated by a specific cell.
+The Cell page is where you can provide information about cells, which you can
+then link to their datasets in the [Datasets page](#datasets-page).
+
+The majority of cell properties are grouped together in a Cell family.
+The family contains generic information about name, manufacturer, form factor,
+chemistry, and capacity and weight statistics.
+For any cell family that is not currently in use, you can edit its properties.
+You can also create new cell families.
+
+Once you have a cell family that you would like to create a cell for, click on
+the magnifying glass icon to view its cells.
+A cell should have a unique identifier which should be a globally unique value
+that specifically identifies that cell.
+A good choice is to use the serial number of the physical cell you are describing.
+Cells may also have display names so that they are easier to identify when adding
+metadata to datasets.
+Where cells are not in use by a dataset,
+you can edit their unique identifiers and display names.
+
+#### Equipment page
+
+Equipment can be defined on the equipment page.
+Equipment has a name and a type, and these can be edited for any equipment
+that is not in use by a dataset.
+
+### Python client
+
+_TODO: The Python client should be autogenerated in response to updates to the API spec._
+
+The best way to access the data is via the Python API client.
+This provides read-only access to datasets and their metadata,
+and allows you to write reproducible analysis scripts that do not require local
+storage to run their analyses.
+
+## Harvesters
+
+Harvesters are standalone programs that run continually in Docker containers.
+Each Harvester has a set of directories called [Monitored paths](#monitored-paths)
+that it watches for changes.
+When files appear in those paths, the Harvester reports the size to the
+Galvanalyser server.
+If the file size has been stable for long enough, the Harvester will attempt
+to import the dataset, sending its metadata and parsed data to the Galvanalyser server.
+
+At the beginning of each cycle, the Harvester checks in with the Galvanalyser
+server and updates its configuration if it has been changed.
+
+### Monitored paths
+
+Monitored paths are directory paths relative to the Harvester container.
+It is a good idea to use [Docker's volume mounting](https://docs.docker.com/storage/)
+to provide easily reachable paths to the Harvester which can then be
+registered as Monitored paths.
+
+## Datasets
+
+Files that are stable for long enough are parsed by the Harvester.
+If the file is suitable for parsing, its metadata will be sent to the
+Galvanalyser server and a Dataset will be constructed to house the data.
+
+The file's data will then be extracted into Galvanalyser's column-value format
+and sent to the server.
+The column-value format means that column metadata is abstracted away,
+allowing every column to be stored as a series of numbers.
+Columns that contain strings generate an encoding map that is used to
+restore the values on demand.
+This method of storing data means that large quantities of data can be
+stored in the database relatively rapidly.
+
+Datasets' metadata can be edited in the web frontend's [Dataset page](#datasets-page),
+and the data downloaded directly using the [Python client](#python-client).
diff --git a/frontend/.env b/frontend/.env
new file mode 100644
index 00000000..462d2e30
--- /dev/null
+++ b/frontend/.env
@@ -0,0 +1,3 @@
+CHOKIDAR_USEPOLLING=true
+FAST_REFRESH=false
+SKIP_PREFLIGHT_CHECK=true
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 00000000..5da4d64f
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-
- let history = useHistory();
-
- const logged_in = (
-
-
-
-
-
-
-
-
-
-
- {tokenGenerator}
-
-
-
-
-
-
-
- {/* A looks through its children s and
- renders the first one that matches the current URL. */}
-
-
-
-
- );
-
-
- return (
-
-
-
-
- - {mainListItems}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {apiMessage?.message}
+
+
+
+ );
+
+ /* A
+
+
+
+ - {mainListItems}
- {renderChart &&
-
- )
-
-}
diff --git a/frontend/src/DatasetChart.tsx b/frontend/src/DatasetChart.tsx
new file mode 100644
index 00000000..9f3110f2
--- /dev/null
+++ b/frontend/src/DatasetChart.tsx
@@ -0,0 +1,247 @@
+import React, { useEffect, useState, Fragment } from "react";
+import { ResponsiveLine, Datum } from '@nivo/line'
+import {DatasetFields} from "./Datasets";
+import Connection from "./APIConnection";
+import CircularProgress from "@mui/material/CircularProgress";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+
+export type UnitFields = {
+ url: string;
+ id: number;
+ name: string;
+ symbol: string;
+ description: string;
+}
+
+export type ColumnFields = {
+ id: number;
+ url: string;
+ name: string;
+ dataset: string;
+ is_numeric: boolean;
+ type_name: string;
+ description: string;
+ unit: UnitFields;
+ data: string;
+ data_list: string;
+}
+
+export type DatasetChartProps = {
+ dataset: DatasetFields
+}
+
+export type ColumnDataFields
-
- {data && data[select] &&
-
- }
- {data && data[select] &&
-
-
-
- Sign in
-
-
-
-
+
+
+//
+//
+//
+// )
+// }
+// }
+//
+// export default class PaginatedTable
+//
+// )
+// }
+// }
\ No newline at end of file
diff --git a/frontend/src/Tokens.tsx b/frontend/src/Tokens.tsx
new file mode 100644
index 00000000..24efa4eb
--- /dev/null
+++ b/frontend/src/Tokens.tsx
@@ -0,0 +1,164 @@
+import React, {Fragment, useState} from 'react';
+import TextField from '@mui/material/TextField';
+import Paper from '@mui/material/Paper';
+import AddIcon from '@mui/icons-material/Add';
+import Container from '@mui/material/Container';
+import SaveIcon from '@mui/icons-material/Save';
+import AsyncTable from './AsyncTable';
+import Connection from "./APIConnection";
+import ActionButtons from "./ActionButtons";
+import useStyles from "./UseStyles";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import Typography from "@mui/material/Typography";
+import CardContent from "@mui/material/CardContent";
+import Card from "@mui/material/Card";
+import Stack from "@mui/material/Stack";
+
+export type TokenFields = {
+ url: string;
+ id: number;
+ name: string;
+ created: string;
+ expiry: string|null;
+}
+
+export type CreateTokenFields = TokenFields & {token: string}
+
+const columns = [
+ {label: 'Name', help: 'Token Name'},
+ {label: 'Created', help: 'Creation time'},
+ {label: 'Expires', help: 'Expiry time'},
+ {label: 'Actions', help: 'Tokens can be renamed or revoked. Revoked tokens can no longer be used.'},
+]
+
+const datetimeOptions: Intl.DateTimeFormatOptions = {
+ year: 'numeric', month: 'numeric', day: 'numeric',
+ hour: 'numeric', minute: 'numeric', second: 'numeric',
+};
+
+const expiryOptions: {name: string, value: string}[] = [
+ {name: '1 hour', value: (60 * 60).toString()},
+ {name: '1 day', value: (60 * 60 * 24).toString()},
+ {name: '1 week', value: (60 * 60 * 24 * 7).toString()},
+ {name: '4 weeks', value: (60 * 60 * 24 * 7 * 4).toString()},
+ {name: '6 months', value: (60 * 60 * 24 * 7 * 4 * 6).toString()},
+ {name: '1 year', value: (60 * 60 * 24 * 365).toString()}
+]
+
+export default function Tokens() {
+ const classes = useStyles();
+
+ const [newToken, setNewToken] = useState
+
+
+
+ ({label: u.username, id: u.id}))}
+ sx={{ width: 300 }}
+ onChange={handleChange}
+ isOptionEqualToValue={((option, value) => option.id === value.id)}
+ renderInput={(params) =>
+
+ );
+}
+
+/**
+ * Return lists of user roles that we can assign users to/delete users from.
+ */
+export default class UserRoleSet extends Component
+
+
+ {u.name}
+
+
+
+ {u.users.map(usr => {
+ const editability = this.is_set_editable.find(s => s.id === u.id)
+ const editable = editability?.editable
+ const undeleteable = u.is_admin && u.users.length + (editability?.parent?.users.length || 0) <= 1
+ if (editable && undeleteable)
+ return
+ }
+ label={{usr.username} }
+ size={'small'}
+ />
+
+ else if (editable)
+ return this.handleDelete(usr.id, u.url)}
+ avatar={}
+ label={{usr.username} }
+ size={'small'}
+ />
+ else
+ return }
+ label={{usr.username} }
+ size={'small'}
+ />
+ })}
+ {
+ this.is_set_editable.find(s => s.id === u.id)?.editable &&
+
+
)
+ }
+
+ render() {
+ return this.user_sets;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/auth/index.js b/frontend/src/auth/index.js
index 66f92215..7bd11966 100644
--- a/frontend/src/auth/index.js
+++ b/frontend/src/auth/index.js
@@ -5,9 +5,10 @@ export const [useAuth, authFetch, login, logout] =
createAuthProvider({
accessTokenKey: 'access_token',
onUpdateToken: (token) => fetch(
- '/api/refresh', {
+ '/api-auth/refresh', {
method: 'POST',
- body: token.access_token
+ body: token.access_token,
+ headers: {'Content-Type': 'application/json'}
}
).then((response) => {
if (response.ok) {
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ec2585e8..2310b8c5 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -11,3 +11,8 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
+/* Override .MuiPopover-paper because we can't do it inside the UserRoleSet component */
+.MuiPopover-paper {
+ overflow: visible;
+}
\ No newline at end of file
diff --git a/frontend/src/index.d.ts b/frontend/src/index.d.ts
new file mode 100644
index 00000000..bf5433df
--- /dev/null
+++ b/frontend/src/index.d.ts
@@ -0,0 +1,6 @@
+// Prevent complaints that 'spacing' isn't a DefaultTheme property
+declare module "@mui/private-theming" {
+ import type { Theme } from "@mui/material/styles";
+
+ interface DefaultTheme extends Theme {}
+}
\ No newline at end of file
diff --git a/frontend/src/index.js b/frontend/src/index.jsx
similarity index 72%
rename from frontend/src/index.js
rename to frontend/src/index.jsx
index 5c92e68d..0fd324ad 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.jsx
@@ -1,17 +1,22 @@
import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom'
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'))
+
+if (module.hot) {
+ module.hot.accept();
+}
+
+root.render(