refactor most part of the ui

.gitignore

@@ -18,3 +18,4 @@
 /npm-cache/conf/storage
 /npm-cache/local_storage
 /npm-cache/storage
+/microdocs-server/npm-debug.log

Dockerfile.dev

@@ -0,0 +1,9 @@
+FROM node:6
+EXPOSE 3000
+WORKDIR /microdocs/microdocs-server
+RUN npm set registry http://192.168.252.165:4873/
+RUN echo @maxxton:registry=https://npm.maxxton.com > .npmrc
+ADD microdocs-server/config.yml .
+ADD microdocs-server/package.json .
+RUN npm install --prod && npm install nodemon
+CMD ./node_modules/.bin/nodemon --watch dist dist/index.js

docker-compose-npm-cache.yml

@@ -0,0 +1,17 @@
+version: '2'
+services:
+  npm-registry:
+    image: verdaccio/verdaccio
+    volumes:
+     - ./npm-cache/conf:/verdaccio/conf
+     - ./npm-cache/storage:/verdaccio/storage
+     - ./npm-cache/local_storage :/verdaccio/local_storage
+    ports:
+     - 4873:4873
+    networks:
+     - 'microdocs-server'
+
+networks:
+  microdocs-server:
+    external:
+      name: 'microdocs-server'

docker-compose.yml

@@ -0,0 +1,22 @@
+version: '2'
+services:
+  microdocs-server:
+    container_name: microdocs-dev
+    image: microdocs:dev
+    build:
+      dockerfile: Dockerfile.dev
+      context: .
+    ports:
+     - 3000:3000
+    volumes:
+     - ./microdocs-server/dist:/microdocs/microdocs-server/dist
+     - ./microdocs-server/data:/microdocs/microdocs-server/data
+     - ./microdocs-ui/dist:/microdocs/microdocs-ui/dist
+     - ../microdocs-core/dist:/microdocs/microdocs-server/dist/node_modules/@maxxton/microdocs-core
+    networks:
+     - 'microdocs-server'
+
+networks:
+  microdocs-server:
+    external:
+      name: 'microdocs-server'

microdocs-server/package.json

@@ -9,7 +9,7 @@
   "main": "index.js",
   "scripts": {
     "start": "node dist/index.js",
-    "debug": "./node_modules/.bin/nodemon --debug-brk dist/index.js",
+    "debug": "../node_modules/.bin/nodemon --ignore data/** --debug-brk index.js",
     "watch": "./node_modules/.bin/gulp",
     "test": "./node_modules/.bin/gulp test",
     "link": "cd dist && npm link",

microdocs-ui/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

microdocs-ui/angular-cli.json

@@ -0,0 +1,59 @@
+{
+  "project": {
+    "version": "1.0.0-beta.25.5",
+    "name": "microdocs-ui"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.json",
+      "prefix": "app",
+      "mobile": false,
+      "styles": [
+        "styles.scss"
+      ],
+      "scripts": [],
+      "environments": {
+        "source": "environments/environment.ts",
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "addons": [],
+  "packages": [],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "scss",
+    "prefixInterfaces": false,
+    "inline": {
+      "style": false,
+      "template": false
+    },
+    "spec": {
+      "class": false,
+      "component": true,
+      "directive": true,
+      "module": false,
+      "pipe": true,
+      "service": true
+    }
+  }
+}

microdocs-ui/e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { MicrodocsUiPage } from './app.po';
+
+describe('microdocs-ui App', function() {
+  let page: MicrodocsUiPage;
+
+  beforeEach(() => {
+    page = new MicrodocsUiPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});

microdocs-ui/e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class MicrodocsUiPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

microdocs-ui/e2e/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc-e2e",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}

microdocs-ui/karma.conf.js

@@ -0,0 +1,43 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'angular-cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-remap-istanbul'),
+      require('angular-cli/plugins/karma')
+    ],
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage',
+        lcovonly: './coverage/coverage.lcov'
+      }
+    },
+    angularCli: {
+      config: './angular-cli.json',
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'karma-remap-istanbul']
+              : ['progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

microdocs-ui/package.json

@@ -24,6 +24,7 @@
     "@angular/router": "^3.3.1",
     "@maxxton/angular-rest": "^1.0.0",
     "@maxxton/microdocs-core": "^1.7.0",
+    "angular2-prettyjson": "^2.0.3",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
     "rxjs": "^5.0.1",

microdocs-ui/protractor.conf.js

@@ -0,0 +1,32 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+/*global jasmine */
+var SpecReporter = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  useAllAngular2AppRoots: true,
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e'
+    });
+  },
+  onPrepare: function() {
+    jasmine.getEnv().addReporter(new SpecReporter());
+  }
+};

microdocs-ui/src/app/app.component.html

@@ -0,0 +1,22 @@
+<md-sidenav-container>
+  <md-sidenav mode="side" opened="true">
+    <sidebar-component [projects]="projects" [selectedEnv]="selectedEnv" [envs]="envs" (envChange)="onEnvVersion($event)"></sidebar-component>
+  </md-sidenav>
+  <div class="my-content">
+    <router-outlet></router-outlet>
+  </div>
+</md-sidenav-container>
+
+
+<!--<div class="main-container grid-block horizontal app-content">-->
+
+  <!--<sidebar-component [projects]="projects" [selectedEnv]="selectedEnv" [envs]="envs" (envChange)="onEnvVersion($event)"></sidebar-component>-->
+
+  <!--&lt;!&ndash;main content&ndash;&gt;-->
+  <!--<div class="content" id="page-content">-->
+    <!--<div>-->
+      <!--<router-outlet></router-outlet>-->
+    <!--</div>-->
+  <!--</div>-->
+  <!--&lt;!&ndash;<snackbar id="snackbar" class="snackbar"></snackbar>&ndash;&gt;-->
+<!--</div>-->

microdocs-ui/src/app/app.component.scss

@@ -0,0 +1,3 @@
+md-sidenav-container{
+  height: 100vh;
+}

microdocs-ui/src/app/app.component.spec.ts

@@ -0,0 +1,34 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

microdocs-ui/src/app/app.component.ts

@@ -0,0 +1,63 @@
+import {Component, Injectable} from "@angular/core";
+import {Router, ActivatedRoute} from "@angular/router";
+import {Subject} from "rxjs/Subject";
+import {Notification} from "rxjs/Notification";
+import {ProjectTree} from "@maxxton/microdocs-core/domain";
+import { ProjectService } from "./services/project.service";
+
+
+/**
+ * @application
+ * @projectInclude microdocs-core
+ */
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['app.component.scss']
+})
+@Injectable()
+export class AppComponent {
+  private showFullSideBar:boolean = true;
+  private user = {};
+  private login = {
+    error: <boolean> false,
+    status: <number|string> null
+  };
+
+  projects:Subject<Notification<ProjectTree>>;
+  envs:string[];
+  selectedEnv:string;
+
+  constructor(private projectService:ProjectService, private router:Router, private activatedRoute: ActivatedRoute) {
+    this.projects = this.projectService.getProjects();
+
+    projectService.getEnvs().subscribe((envs) => {
+      this.envs = Object.keys(envs);
+      if (projectService.getSelectedEnv() == undefined) {
+        for (let key in envs) {
+          if (envs[key].default) {
+            projectService.setSelectedEnv(key);
+            this.selectedEnv = key;
+            break;
+          }
+        }
+      }
+    });
+
+    this.activatedRoute.queryParams.subscribe(params => {
+      if (params['env'] && this.projectService.getSelectedEnv() !== params['env']) {
+        this.selectedEnv = params['env'];
+        this.projectService.setSelectedEnv(params['env']);
+      }
+    });
+  }
+
+  public onEnvVersion(newEnv:string) {
+    this.projectService.setSelectedEnv(newEnv);
+    this.selectedEnv = newEnv;
+
+    this.router.navigate(['/dashboard'], {queryParams: {env: newEnv}});
+  }
+
+
+}