diff --git a/docs/pull_request_template.md b/docs/pull_request_template.md
index 11568562b2..e651b7af6d 100644
--- a/docs/pull_request_template.md
+++ b/docs/pull_request_template.md
@@ -1,9 +1,3 @@
----
-id: pull_request_template
-title: Pull request template for contributions to Stratos
-sidebar_label: PR template
----
-
## Description
diff --git a/website/docs/developer/developers-guide-env-tech.md b/website/docs/developer/developers-guide-env-tech.md
index 76918f9fba..0b374c6c01 100644
--- a/website/docs/developer/developers-guide-env-tech.md
+++ b/website/docs/developer/developers-guide-env-tech.md
@@ -1,40 +1,42 @@
---
id: developers-guide-env-tech
-title: Stratos Tech + Developer Environment
-sidebar_label: Dev Environment
+title: Developer Links + Environment
+sidebar_label: Dev Links & Env
---
-## ES6
+## Links
+
+Below is a collection of links that are can be useful when tackling some of the technology involved with Stratos
+
+### ES6
* [http://stack.formidable.com/es6-interactive-guide](http://stack.formidable.com/es6-interactive-guide)
* [http://es6-features.org](http://es6-features.org)
-## TypeScript
+### TypeScript
-* [https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/](https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/)
* [https://learnxinyminutes.com/docs/typescript/](https://learnxinyminutes.com/docs/typescript/) (cheat sheet)
* [https://www.tutorialspoint.com/typescript/](https://www.tutorialspoint.com/typescript/)
* [https://tutorialzine.com/2016/07/learn-typescript-in-30-minutes](https://tutorialzine.com/2016/07/learn-typescript-in-30-minutes)
-* [https://www.sitepen.com/blog/2013/12/31/typescript-cheat-sheet/](https://www.sitepen.com/blog/2013/12/31/typescript-cheat-sheet/) (advanced cheat sheet)
-
-## Angular
### Angular
+#### Angular
+
* [https://www.youtube.com/watch?v=KhzGSHNhnbI](https://www.youtube.com/watch?v=KhzGSHNhnbI) (very basic 1h video of angular covering basic app features in a demo)
* [https://angular.io/guide/architecture](https://angular.io/guide/architecture) (official angular intro)
* [https://angular.io/tutorial](https://angular.io/tutorial) (official angular tutorial. Basic to start with but good introduction to routing, http requests, promises, observables and observable event stream later on)
-### Angular CLI
+#### Angular CLI
* [https://cli.angular.io/reference.pdf](https://cli.angular.io/reference.pdf) (cheat sheet)
* [https://github.com/angular/angular-cli](https://github.com/angular/angular-cli)
-### Example Apps
+#### Example Apps
* https://github.com/aviabird/angularspree (covers everything)
-## Redux
+### Redux
* [http://redux.js.org](http://redux.js.org)
* [https://gist.github.com/btroncone/a6e4347326749f938510](https://gist.github.com/btroncone/a6e4347326749f938510)
@@ -42,27 +44,25 @@ sidebar_label: Dev Environment
* [https://www.youtube.com/watch?v=WIqbzHdEPVM](https://www.youtube.com/watch?v=WIqbzHdEPVM)
* [https://egghead.io/courses/getting-started-with-redux](https://egghead.io/courses/getting-started-with-redux)
-### Observables
+#### Observables
* [http://reactivex.io/documentation/observable.html](http://reactivex.io/documentation/observable.html)
## VS Code Plug-ins
-There's no mandated IDE, but if you choose VS Code here's some helpful plug-ins
+There's no mandated IDE, but if you choose Visual Studio Code here's some helpful plug-ins
-### Super Helpful
+### Really Helpful
* TSLint
-* SassLint
* TS Hero
-* Beautify
+* Git Lens
* gitignore
+* Move TS - Move files and automatically update imports
### Helpful
-* Angular 2+ Snippets
-* Angular v4 TypeScript Snippets
-* Git Lens
+* Beautify
* Document This
* Git History
* TODO Parser
@@ -76,122 +76,10 @@ There's no mandated IDE, but if you choose VS Code here's some helpful plug-ins
```
* F1 + `Parse TODOs (all files)` to see all TODOs
-* Move TS - Move files and automatically update imports
-
-### Of Interest
-
-* Eclipse Keymap
* Code Spell Checker
* List of words to exclude coming soon
+* Eclipse Keymap
-Example settings
-
-```
-{
- "gitlens.blame.line.enabled": false,
- "gitlens.codeLens.recentChange.enabled": false,
- "gitlens.codeLens.authors.enabled": false,
- "gitlens.blame.highlight.locations": [
- "gutter",
- "overview"
- ],
- "gitlens.currentLine.enabled": false,
- "gitlens.hovers.currentLine.enabled": false,
- "editor.fontSize": 12,
- "editor.formatOnSave": true,
- "editor.rulers": [
- 140
- ],
- "editor.renderLineHighlight": "none",
- "search.exclude": {
- "node_modules": true,
- "**/node_modules": true,
- "**/bower_components": true,
- "coverage": true,
- "components/*/backend/vendor": true,
- "*.orig": true
- },
- "search.useIgnoreFilesByDefault": true,
- "tslint.validateWithDefaultConfig": true,
- "tslint.configFile": "tslint.json",
- "tslint.autoFixOnSave": true,
- "tslint.alwaysShowStatus": true,
- "tslint.alwaysShowRuleFailuresAsWarnings": true,
- "explorer.autoReveal": false,
- "extensions.ignoreRecommendations": false,
- "TodoParser": {
- "folderExclude": [
- "node_modules",
- ".vscode"
- ]
- },
- "cSpell.userWords": [
- "Guids",
- "action",
- "api",
- "cnsi",
- "cnsis",
- "confirmation",
- "dialog",
- "falsies",
- "guid",
- "iapi",
- "initialise",
- "initialised",
- "injectable",
- "memberof",
- "ngrx",
- "normalizr",
- "strat",
- "unsubscribe",
- "vars"
- ],
- "cSpell.language": ",en-GB",
- "cSpell.enabledLanguageIds": [
- "c",
- "css",
- "cpp",
- "csharp",
- "fonts",
- "go",
- "handlebars",
- "javascript",
- "javascriptreact",
- "json",
- "latex",
- "markdown",
- "php",
- "plaintext",
- "python",
- "restructuredtext",
- "text",
- "typescript",
- "typescriptreact",
- "yml",
- "html"
- ],
- "files.exclude": {
- "**/.git": true,
- "**/.svn": true,
- "**/.hg": true,
- "**/CVS": true,
- "**/.DS_Store": true,
- "**/tmp": true,
- "**/node_modules": true,
- "**/bower_components": true,
- "**/dist": true,
- "**/.orig": true
- },
- "files.watcherExclude": {
- "**/.git/objects/**": true,
- "**/.git/subtree-cache/**": true,
- "**/node_modules/**": true,
- "**/tmp/**": true,
- "**/bower_components/**": true,
- "**/dist/**": true
- },
-}
-```
## Guides
diff --git a/website/docs/developer/frontend.md b/website/docs/developer/frontend.md
index 17c1e7b037..572dd2032a 100644
--- a/website/docs/developer/frontend.md
+++ b/website/docs/developer/frontend.md
@@ -69,5 +69,5 @@ Configuration information can be found in two places
* Informs the frontend where the backend is
* `./src/frontend/packages/core/src/environments/environment.ts` for developer vs production like config
* This contains more general settings for the frontend and does not usually need to be changed
-* `config.properies`
+* `config.properties`
* Backend configuration
diff --git a/website/docs/extensions/frontend.md b/website/docs/extensions/frontend.md
index a253e906ef..6bed192aae 100644
--- a/website/docs/extensions/frontend.md
+++ b/website/docs/extensions/frontend.md
@@ -3,20 +3,42 @@ title: Frontend Extensions
sidebar_label: Frontend Extensions
---
-An example illustrating the various front-end extension points of Stratos is included in the folder `examples/custom-src`.
+Stratos exposes the following extension points:
-To include the customizations in this example, either copy or symlink the `examples/custom-src` to `custom-src` at the top-level of the Stratos repository.
+- Adding new items to the side navigation menu
+- Adding new tabs to the Application, Cloud Foundry, Organization and Space views
+- Adding new action buttons to the Application Wall, Application, Cloud Foundry, Organization and Space and Endpoint views
+- Replace the loading page
+- Replace the login page
-Next, run the customization script (this is done automatically when you do an `npm install`) with:
+We use Decorators to annotate components to indicate that they are Stratos extensions.
-```
-npm run customize
-```
+An example illustrating the various front-end extension points of Stratos is included in the folder `src/frontend/packages/example-extensions`.
-You can now run Stratos locally to see the customizations - see the [Developer's Guide](../developer/frontend) for details.
+To run Stratos with these customizations see [here](/docs/extensions/introduction#acme).
For a walk-through of extending Stratos, see [Example: Adding a Custom Tab](#example-adding-a-custom-tab).
+## Including modules and routes
+To include code and angular routing in your component there needs to be two access points
+- A core module that declares your extension components.
+- A core routing module that calls `RouterModule.forRoot`. This is the root for all routes in your package.
+
+These modules should be made available externally to Stratos by the following steps
+
+1. Exported in the package's `public-api.ts`, for example `src/frontend/packages/example-extensions/src/public-api.ts`. The public api should be added to the applications `tsconfig.json` for example `src/tsconfig.json`
+1. Reference as, or imported by, the two modules defined in the `stratos` section in the package's `package.json`, for example `src/frontend/packages/example-extensions/package.json`
+ ```
+ "stratos": {
+ ...
+ "module": "ExampleModule",
+ "routingModule": "ExampleRoutingModule"
+ ...
+ }
+ ```
+
+At build time these are then added to a dynamically created module `src/frontend/packages/core/src/_custom-import.module.ts` and included in the output.
+
## Extension Points
### Side Navigation
@@ -25,9 +47,9 @@ New items can be added to the Side Navigation menu with extensions.
To do so, annotate the routes for your extension with custom metadata, which Stratos will then pick up and add to the side menu.
-A full example is in the folder `examples/custom-src/frontend/app/custom/nav-extension`.
+A full example is in `src/frontend/packages/example-extensions/src/example-routing.module.ts` and `src/frontend/packages/example-extensions/src/nav-extension`.
-Your route should have the following metadata in the `data` field:
+Your route should have the following metadata in the `data` field of the route:
```
stratosNavigation: {
@@ -38,17 +60,17 @@ Your route should have the following metadata in the `data` field:
Where `
` is the text label to show in the side navigation and `` is the icon to use.
-You should place your route declaration in a module named `CustomRoutingModule` in the file `custom-src/frontend/app/custom/custom-routing.module.ts`.
+> The routing module must be, or referenced by, the core routing module as described [above](/docs/extensions/frontend#including-modules-and-routes)
An example routing module would be:
```
import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
const customRoutes: Routes = [{
path: 'example',
- loadChildren: 'app/custom/nav-extension/nav-extension.module#NavExtensionModule',
+ loadChildren: () => import('./nav-extension/nav-extension.module').then(m => m.NavExtensionModule),
data: {
stratosNavigation: {
text: 'Example',
@@ -63,10 +85,12 @@ const customRoutes: Routes = [{
],
declarations: []
})
-export class CustomRoutingModule { }
+export class ExampleRoutingModule { }
+
```
-This approach ensures that the Angular compiler creates a separate chunk for the extension at compile time.
+This approach ensures that the Angular compiler creates a separate chunk for the extension at compile time which can be lazy loaded at run
+time.
### Custom Tabs
@@ -77,6 +101,8 @@ Tabs can be added to the following views in Stratos:
- The Cloud Foundry Org view that shows detail for a Cloud Foundry organization
- The Cloud Foundry Space view that shows detail for a Cloud Foundry space
+A step by step guide on how to create a custom tab can be found [below](/docs/extensions/frontend#example-adding-a-custom-tab).
+
For example:
![Example Application tab extension](../../images/extensions/app-tab-example.png)
@@ -84,28 +110,34 @@ For example:
The approach for all of these is the same:
1. Create a new component that will provide the tab contents
-2. Ensure that your component is included in the `EntryComponent` section of your custom module
-2. Decorate the component with the `StratosTab` decorator, for example:
-
-```
-@StratosTab({
- type: StratosTabType.Application,
- label: '