Commit 94f1d161 authored by Martin Õunap's avatar Martin Õunap
Browse files

* Initial TEHIK angular components to RIA

Merge branch 'develop' into TEHIK
parents bf17b2ee 322bd079
Pipeline #6 failed with stages
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[*.scss]
insert_final_newline = true
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/build
/tmp
/out-tsc
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
proxy.dev.conf.json
proxy.dev.settings-api.json
.gradle
.npmrc
# System Files
.DS_Store
Thumbs.db
image: registry.tehik.ee/skais/dev-ops/gitlab-skais
stages:
- build
- publish
- deploy
.skais_tags: &skais_tags
tags:
- skais
.skais_artifacts: &skais_artifacts
artifacts:
paths:
- node_modules
- '$CI_PROJECT_DIR/dist/*'
expire_in: 4h
.npm_build: &npm_build_job_template
<<: *skais_tags
<<: *skais_artifacts
stage: build
script:
- ./dev-ops/build-dist.sh
Npm build snapshot:
<<: *npm_build_job_template
variables:
COMMON_UI_SNAPSHOT: 'true'
except:
- master
Npm build release:
<<: *npm_build_job_template
only:
- master
Publish npm snapshot:
<<: *skais_tags
<<: *skais_artifacts
stage: publish
script:
- ./dev-ops/npm-publish.sh
only:
- master
- develop
Build Docker image:
<<: *skais_tags
<<: *skais_artifacts
image: docker:git
services:
- docker:dind
stage: publish
script:
- sh dev-ops/build-docker-image.sh "ver-${CI_PIPELINE_ID}"
- sh dev-ops/push-docker-image.sh "ver-${CI_PIPELINE_ID}"
Deploy to Nortal test:
dependencies: []
stage: deploy
tags:
- nortal-test
when: manual
script:
- ./dev-ops/nortal-test-deploy.sh "ver-${CI_PIPELINE_ID}"
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"bracketSpacing": true,
"arrowParens": "avoid"
}
# SKA ANGULAR COMMONS Changelog
All notable changes to this project will be documented in this file.
## @ska-angular/\* release: 0.0.1:
#### Libraries
- Latest dependencies, including Angular 7
##### Changes
- Monorepo libraries:
1. "@ska-angular/core": contexts (menu, message, settings, classificator, localization, page), core container, pipes, utilities
and the wfm config.
2. "@ska-angular/common": common UI elements
3. "@ska-angular/dashboard": all dashboards that depend on auth context
4. "@ska-angular/auth": auth related components and services
5. "@ska-angular/public-container": the only container that does not need to know anything about auth
6. "@ska-angular/workflow": workflow components
7. "@ska-angular/assets": css files, images, fonts
# Common visual components for Angular based SKA applications
# @ska-angular/\*
```
"@ska-angular/core": "0.0.1",
"@ska-angular/common": "0.0.1",
"@ska-angular/dashboard": "0.0.1",
"@ska-angular/public": "0.0.1",
"@ska-angular/auth": "0.0.1",
"@ska-angular/workflow": "0.0.1",
"@ska-angular/charts": "0.0.1",
"@ska-angular/assets": "0.0.1", (corresponds to https://devfront.mta/visual/2.2/)
```
In Development @ska-angular/<library>-snapshot.timestamp will be published to NPM repository https://repo.tehik.ee/artifactory/api/npm/skais-npm-snapshot/ by CI.
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) using [Nrwl Nx](https://nrwl.io/nx).
## Install dependencies
#### NB! For @ska-angular you must set the prefix registry, else install cannot find packages named @ska-angular/\*.
```
for development use repository
npm set @ska-angular:registry https://repo.tehik.ee/artifactory/api/npm/skais-npm-snapshot/
for release use repository
npm set @ska-angular:registry https://repo.tehik.ee/artifactory/api/npm/skais-npm-release/
npm i
```
## Assets
#### Configure assets for your project in the angular.json:
```
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
},
{
"glob": "**/*",
"input": "node_modules/@ska-angular/assets/assets",
"output": "/assets/"
},
{
"glob": "proxy.dev.settings-api.json",
"input": "",
"output": "/"
}
]
```
## Running the demo application on Docker
Build Docker image (also builds distribution):
```
./dev-ops/build-docker-image.sh
```
Run Docker image. Both port and tag are optional.
```
./demo/run-docker-image.sh <local_port> <image_tag>
```
## Running the demo application locally
By default the stylebook is ran using library sources (libs/\*/src/index.ts) for live editing
```
npm start
or
ng serve (preffered by Angular devs)
```
### Affected (Coming soon)
```
```
The binaries are written to `dist/lib/*` in the repository root folder.
## Dependency graph
To see how libraries/apps in this monorepo depend on each-other run:
```
npm run dep-graph
```
## Publish
Only dist/libs/_ source is published. apps/_ contains a sandbox app to try and test elements and view the stylebook.
#### Login
```
for development repository
npm adduser --registry=https://repo.tehik.ee/artifactory/api/npm/skais-npm-snapshot/
or for release repository
npm adduser --registry=https://repo.tehik.ee/artifactory/api/npm/skais-npm-release/
Username: <TEHIK AD>
Password: <ASK SOMEONE>
Email: (this IS public) <your email>
Logged in as <TEHIK AD> on https://repo.tehik.ee/artifactory/api/npm/skais-npm-snapshot/ or https://repo.tehik.ee/artifactory/api/npm/skais-npm-release/
```
####Please, remember to check the last message that you're logged into the repo.rmv repository.
####Set @rmit prefixed space
Then you should set repository for @ska-angular prefixed projects (needs to be done once):
```
for development use repository
npm set @ska-angular:registry https://repo.tehik.ee/artifactory/api/npm/skais-npm-snapshot/
for release use repository
npm set @ska-angular:registry https://repo.tehik.ee/artifactory/api/npm/skais-npm-release/
```
After that you can check your ~/.npmrc file and remove there all lines starting with "registry=".
Then "npm install" will use default registry and mentioned as "@ska-angular:registry=" registry for the
prefixed @ska-angular projects. So your file should look like this:
```
//repo.tehik.ee/artifactory/api/npm/skais-npm-snapshot/:_authToken=<SOME TOKEN HERE>
@ska-angular:registry=https://repo.tehik.ee/artifactory/api/npm/skais-npm-snapshot/ or https://repo.tehik.ee/artifactory/api/npm/skais-npm-release/
```
Note that auth token is defined for the right repository.
####Publish
Change version in package.json file of the corresponding library, update peerDependencies if needed.
To test if the distributed version works (e.g detect import issues before publishing) build the libraries and run the stylebook in prod:
```
npm run build:prod
```
To run the stylebook locally in prod mode (libraries should be already built in dist/\*), run:
```
npm run start:prod
```
To build a specific library (imported libraries must be built first), run:
```
npm run build:library-name-goes-here
```
To build all libraries, run:
```
npm run build:libs
```
Finally, publish the library:
```
npm run publish:beta:library-name-goes-here
```
## Commons development guide
1. Do not do cross library dependencies, if not necessary to avoid a monolithic architecture.
You could make a combination of base libraries like dashboard and graph library.
2. Use Angular CLI to create new components, libraries and apps.
3. Put standalone components and features into their own modules.
Export that module to the features index.ts, if it is intended for public use.
Export that index.ts to the main index.ts of the lib.
4. Test build the project with npm run build:prod and run it in production mode npm run start:prod, because it uses /dist
5. Imports inside of the lib should use direct imports (i.e ./my-lib-component)
and imports from outside of the lib should have to use @barrel (i.e @ska-angular/core) imports.
6. Add peer dependencies, if you created any or changed any, to the lib specific package.json.
7. Boy scout rule: Always leave the campground cleaner than you found it.
8. Remember! Changes done to the common-ui effect every dependant project,
so make sure changes made for commonly used components are not breaking things for others.
## App depeding on commons
### Steps to use commons
- Add @ska-angular modules as dependencies to package.json. Core and assets is compulsory.
- Add the reference to assets resources into angular.json.
```
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
},
{
"glob": "**/*",
"input": "node_modules/@ska-angular/assets/assets",
"output": "/assets/"
},
{
"glob": "proxy.dev.settings-api.json",
"input": "",
"output": "/"
}
]
```
- Change te selector of app.component to [app] and set the languange in the components.ts (instead of app, you could use something else as well).
```
export class AppComponent implements OnInit {
public constructor(private translate: TranslateService) {}
public ngOnInit() {
this.translate.setDefaultLang(LangContext.ET);
this.translate.currentLang = LangContext.ET;
}
}
```
- Make sure that index.html references app.component and all the styles are loaded.
```
<link rel="shortcut icon" href="assets/ska_visuaal.ico">
<link href="assets/css/print.css" rel="stylesheet" media="print">
```
- Make sure that angular.json references the main scss file.
```
"styles": ["src/main.scss", "node_modules/@ska-angular/assets/assets/scss/ska_visuaal.scss"]
```
- Extract the routing into a seperate app.routes file and reference it from app.module. If you use preloadAllModules,
then you do not lazy load (Prefer lazy loading).
```
RouterModule.forRoot(ROUTES, {
useHash: false,
preloadingStrategy: PreloadAllModules
})
```
- Create an app.config file, where methods that create the session and loading translations is held. Reference it from app.module
```
TranslateModule.forRoot({
loader: {
provide: TranslateLoader, useFactory: (http) => {
return new DemoTranslateHttpLoader(http);
}, deps: [HttpClient]
},
isolate: false
}),
{provide: APP_INITIALIZER, useFactory: onAppInit, deps: [AuthContext], multi: true}
```
### Authenication
- Add **angular-oauth2-oidc** to package.json
- Add **authRedirectUri** to environment.ts and environment.prod.ts
- In prod it should be 'https://skais-test.int.nortal.com/composite/iseteenindus/dashboard/'
- In local it should be 'http://localhost:4200' or similar
- Create **auth.config** file. Example:
```
import { environment } from '../environments/environment';
export const LocalAuthConfig = {
issuer: 'https://skais-test.int.nortal.com/auth/realms/skais',
clientId: 'iseteenindus',
redirectUri: environment.authRedirectUri,
logoutUrl: environment.production
? 'https://skais-test.int.nortal.com/composite/iseteenindus/dashboard'
: '/',
silentRefreshRedirectUri: '/silent-refresh.html',
scope: 'openid',
sessionChecksEnabled: true,
clearHashAfterLogin: true,
appLoginUrl: environment.production
? 'https://skais-test.int.nortal.com/composite/iseteenindus/dashboard/login'
: '/login',
isProduction: environment.production,
serverUrl: environment.serverUrl
};
```
- Add SkaAuthModule to app.module. Pass authConfig created above to forRoot()
```
imports: [
SkaAuthModule.forRoot(LocalAuthConfig)
]
```
- Add referral to **silent-refresh.html** into **angular.json**
```
"architect": {
"build": {
"options": {
"assets": [
{
"glob": "silent-refresh.html",
"input": "node_modules/@ska-angular/assets/assets/oAuth",
"output": "/"
}
]
}
}
}
```
- You should be up and running, if you have any errors then ask someone.
## Nrwl Extensions for Angular (Nx)
Nx is an open source toolkit for enterprise Angular applications.
Nx is designed to help you create and build enterprise grade Angular applications. It provides an opinionated approach to application project structure and patterns.
## Quick Start & Documentation
[Watch a 5-minute video on how to get started with Nx.](http://nrwl.io/nx)
#### Create a Nx Workspace
[Creating an Nx Workspace](https://nrwl.io/nx/guide-nx-workspace).
```
ng new ska-angular --collection=@nrwl/schematics
```
#### Generating apps
```
ng generate app stylebook
```
#### Generating libraries
```
ng generate lib assets --nomodule --prefix=ska --publishable
ng generate lib ska-angular-common-visuals --ngmodule --publishable
```
#### Generating components
To generate a component in an Angular library:
```
ng generate component someComponent --project=your-project-name
```
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
# Common UI component technical debt page
## ska-datepicker
- if datepicker selector opens at the bottom of the page in iframe, iframe is transformed above and is messed up,
to fix this, we need to add `data-iframe-height` attribute to the datepicker selector element in `my-date-picker` component.
## component lifecycle refactoring
- refactor the lifecycle methods of common input components to better support backend validation
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "",
"projects": {
"stylebook": {
"root": "apps/stylebook/",
"sourceRoot": "apps/stylebook/src",
"projectType": "application",
"prefix": "rmit",
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/apps/stylebook",
"index": "apps/stylebook/src/index.html",
"main": "apps/stylebook/src/main.ts",
"polyfills": "apps/stylebook/src/polyfills.ts",
"tsConfig": "apps/stylebook/tsconfig.app.json",
"assets": [
"apps/stylebook/src/assets",
{
"glob": "silent-refresh.html",
"input": "libs/assets/assets/oAuth",
"output": "/"
},
{
"glob": "**/*",
"input": "libs/assets/assets",
"output": "/assets/"
},
{
"glob": "proxy.dev.settings-api.json",
"input": "",
"output": "/"
}
],
"styles": ["libs/assets/assets/scss/stylebook.scss"],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "apps/stylebook/src/environments/environment.ts",
"with": "apps/stylebook/src/environments/environment.prod.ts"
}
],
"tsConfig": "apps/stylebook/tsconfig.app.prod.json",
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"open": false,
"proxyConfig": "proxy.dev.conf.json",
"browserTarget": "stylebook:build"
},
"configurations": {
"production": {
"browserTarget": "stylebook:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "stylebook:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "apps/stylebook/src/test.ts",
"polyfills": "apps/stylebook/src/polyfills.ts",
"tsConfig": "apps/stylebook/tsconfig.spec.json",
"karmaConfig": "apps/stylebook/karma.conf.js",
"styles": ["apps/stylebook/src/styles.css"],
"scripts": [],
"assets": ["apps/stylebook/src/favicon.ico", "apps/stylebook/src/assets"]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["apps/stylebook/tsconfig.app.json", "apps/stylebook/tsconfig.spec.json"],
"exclude": ["**/node_modules/**"]