2021-01-14 15:10:44 +00:00
# ClearML Webapp
2019-06-12 08:27:11 +00:00
2020-06-04 15:07:14 +00:00
## Building the UI from source
### Prerequisite
2023-11-17 08:24:49 +00:00
* Node 18 with latest npm
* use git to clone the project to your local machine
2020-06-04 15:07:14 +00:00
2023-11-17 08:24:49 +00:00
### Build
* `cd clearml-web` to the root of the project
2020-06-04 15:07:14 +00:00
* run `npm ci` to install required node modules
* run `npm run build`
2023-11-17 08:24:49 +00:00
### Development
During development, the development server will need to proxy an API server. to achieve that:
2024-03-24 08:55:14 +00:00
* in [proxy.config.mjs ](proxy.config.mjs ) update the list of targets in line 3 with a working API server URI.
2023-11-17 08:24:49 +00:00
* Angular is already configured to use this proxy configuration
* If more than 1 API server is configured `apiBaseUrl` should be updated with the server enumeration in [environment.ts ](src%2Fenvironments%2Fenvironment.ts )
Start the development server: `npm run start`
2020-06-04 15:07:14 +00:00
#### Business Logic module
2022-02-15 11:09:07 +00:00
Contains ClearML logic. api calls and ClearML objects (e.g tasks, models) and ClearML logic function (e.g isTaskHidden)
2020-06-04 15:07:14 +00:00
#### Core module
Contains only logic. no declarations. no dependency with any other module beside ngrx.
2022-02-15 11:09:07 +00:00
- **services** - utilities classes. file name: `<name>.service.ts`
2020-06-04 15:07:14 +00:00
#### Feature Modules
Application feature modules. each module can contain declarations and providers **specific to the the feature**
Depend only on shared module for ui components
2023-06-27 11:59:55 +00:00
##### Each feature should contain the following:
2022-02-15 11:09:07 +00:00
- **module** - the feature module: `<featureName>.module.ts` .
- **component** - the feature main component js file, should contain the feature's containers components only: `<featureName>.component.ts` .
- **component** html - the feature component html: `<featureName>.component.html` .
- **component** style - the feature component style: `<featureName>.component.scss` .
- **utils** - the feature utils, a page with list of pure functions for utils purposes: `<featureName>.utils.ts` .
- **constants** - the feature constants values: `<featureName>.const.ts` .
- **model** - the feature types, interfaces and objects declarations: `<featureName>.model.ts` .
- **actions** - redux action classes - file name: `<name>.actions.ts`
- **effects** - ngrx effects classes. manage data flow and side effects - file name: `<name>.effect.ts`
2023-06-27 11:59:55 +00:00
- **reducers** - simple functions for state composition. file name: `<name>.reducer.ts`
2022-02-15 11:09:07 +00:00
- **services** - utilities classes with the same responsibility under `services` folder : `<name>.service.ts` .
- **container components** - components that will include dumb components and will pass data from the state to the dumb components and dispatch actions of the dumb components, the container components will be under `containers` folder.
- **dumb components** - stateless view components that will communicate through inputs and outputs, the dumb components will be under `dumb` folder.
2020-06-04 15:07:14 +00:00
#### Shared Module
Application shared UI components, directives and pipes. **contain only declarations** .
All the components should be **reusable** .
2019-06-12 08:23:49 +00:00
