refactoring

.circleci/config.yml

@@ -4,38 +4,40 @@ jobs:
    branches:
        only:
            - master
            - develop
    docker:
      - image: circleci/node:8.10-stretch-browsers
    working_directory: ~/komiser
    steps:
      - checkout
      - restore_cache:
          key: node-modules-{{checksum "public/package.json"}}
          key: node-modules-{{checksum "dashboard/package.json"}}
      - run:
          name: Install dependencies
          command: cd public && npm install
          command: cd dashboard && npm install
      - save_cache:
          key: node-modules-{{checksum "public/package.json"}}
          key: node-modules-{{checksum "dashboard/package.json"}}
          paths:
            - public/node_modules
            - dashboard/node_modules
      - run:
          name: Build artifact
          command: cd public && npm run build
          command: cd dashboard && npm run build
      - persist_to_workspace:
          root: public
          root: dashboard
          paths:
            - dist
  build_cli:
    branches:
        only:
            - master
            - develop
    docker:
      - image: golang:1.8
      - image: golang:1.10.3
    working_directory: /go/src/github.com/mlabouardy/komiser
    steps:
      - checkout
      - attach_workspace:
          at: /tmp/public
          at: /tmp/dashboard
      - run:
          name: Install dependencies
          command: go get -v
@@ -46,7 +48,7 @@ jobs:
           go get github.com/elazarl/go-bindata-assetfs/...
      - run:
         name: Fix path
         command: mv /tmp/public/dist .
         command: mv /tmp/dashboard/dist .
      - run:
         name: Create assets
         command: go-bindata-assetfs -o template.go dist/ dist/assets/images/
@@ -79,8 +81,9 @@ jobs:
    branches:
        only:
            - master
            - develop
    docker:
       - image: docker:18.02.0-ce
       - image: docker:18.09.1-ce
    steps:
        - checkout
        - setup_remote_docker
@@ -95,7 +98,6 @@ jobs:
              docker push mlabouardy/komiser:latest
              docker push mlabouardy/komiser:${CIRCLE_SHA1}
      

workflows:
    version: 2
    build_and_deploy:

dashboard/package.json

@@ -1,6 +1,6 @@
{
  "name": "dashboard",
  "version": "0.0.0",
  "name": "komiser-dashboard",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
@@ -42,6 +42,7 @@
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/chartist": "^0.9.44",
    "@types/google.analytics": "0.0.39",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",

dashboard/src/app/app.component.css

@@ -0,0 +1,18 @@
.service-logo{
    width: 30px;
}

.notif-box {
    width: 370px;
}

.notif-content{
    width: 100%;
}

.footer {
    position: absolute;
    width: 100%;
    bottom: 0vh;
    margin-top: 50px;
}

dashboard/src/app/app.component.html

@@ -1,7 +1,7 @@
<div class="main-header">
    <div class="logo-header">
        <a class="logo" href="index.html">
            <img src="assets/images/police-cap.png" style="width: 30px; margin-right:10px" /> Komiser Dashboard</a>
            <img src="assets/images/logo-home.png" style="width: 32px; margin-right:10px" /> Komiser Dashboard</a>
        <button aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler sidenav-toggler ml-auto"
            data-target="collapse" data-toggle="collapse" type="button">
            <span class="navbar-toggler-icon"></span>
@@ -23,38 +23,38 @@
                </div>
            </form>
            <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                <li class="nav-item dropdown hidden-caret">
                    <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" routerLink="/limits" id="navbarDropdown"
                        role="button">
                        <i class="la la-rocket"></i>
                    </a>
                </li>
                <li class="nav-item dropdown hidden-caret">
                    <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown"
                        role="button">
                        <i class="la la-bell"></i>
                        <span class="notification">3</span>
                        <span class="notification" *ngIf="notifications.length > 0">{{notifications.length}}</span>
                    </a>
                    <ul aria-labelledby="navbarDropdown" class="dropdown-menu notif-box">
                        <li>
                            <div class="dropdown-title">
                                You have 2 new notification
                                You have {{notifications.length}} new notification
                            </div>
                        </li>
                        <li>
                            <div class="notif-center">
                                <a href="#">
                                <a href="#" *ngFor="let notification of notifications">
                                    <div class="notif-icon notif-primary">
                                        <i class="la la-user-plus"></i>
                                    </div>
                                    <div class="notif-content">
                                        <span class="block">lambda:invoke is missing</span>
                                        <span class="time">5 minutes ago</span>
                                        <span class="block">
                                            {{notification.content}} 
                                        </span>
                                        <span class="badge badge-secondary badge-pill float-right" *ngIf="notification.total > 1">{{notification.total}}</span>
                                        <span class="time">{{calcMoment(notification.timestamp)}}</span>
                                    </div>
                                </a>
                                <a href="#">
                                        <div class="notif-icon notif-primary">
                                            <i class="la la-user-plus"></i>
                                        </div>
                                        <div class="notif-content">
                                            <span class="block">rds:provision is missing</span>
                                            <span class="time">1 minutes ago</span>
                                        </div>
                                    </a>
                            </div>
                        </li>
                        <li>
@@ -85,21 +85,11 @@
                <div class="clearfix"></div>
                <div aria-expanded="true" class="collapse in" id="collapseExample" style="">
                    <ul class="nav">
                        <li>
                            <a href="#profile">
                        <li routerLinkActive="active">
                            <a routerLink="/profile">
                                <span class="link-collapse">My Profile</span>
                            </a>
                        </li>
                        <li>
                            <a href="#edit">
                                <span class="link-collapse">Edit Profile</span>
                            </a>
                        </li>
                        <li>
                            <a href="#settings">
                                <span class="link-collapse">Settings</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
@@ -109,7 +99,7 @@
                <a routerLink="/">
                    <i class="la la-home"></i>
                    <p>Dashboard</p>
                    <span class="badge badge-danger">15</span>
                    <span class="badge badge-danger" *ngIf="redAlarms > 0">{{redAlarms}}</span>
                </a>
            </li>
            <li class="nav-item" routerLinkActive="active">
@@ -142,12 +132,6 @@
                    <p>Data & AI</p>
                </a>
            </li>
            <li class="nav-item" routerLinkActive="active">
                <a routerLink="/monitoring">
                    <i class="la la-dashboard"></i>
                    <p>Monitoring</p>
                </a>
            </li>
        </ul>
    </div>
</div>

dashboard/src/app/app.component.ts

@@ -1,22 +1,53 @@
import { Component } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { AwsService } from './aws.service';
import { StoreService } from './store.service';
import { not } from '@angular/compiler/src/output/output_ast';
import { Subscription } from 'rxjs';

import * as moment from 'moment';

declare var ga: Function;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
export class AppComponent implements OnDestroy {

  public accountName: string;
  public accountName: string = 'Username';
  public redAlarms: number;
  public notifications: Array<Object> = [];
  public _subscription: Subscription;

  constructor(private awsService: AwsService){
  constructor(private awsService: AwsService, private storeService: StoreService){

    this.awsService.getAccountName().subscribe(data => {
      this.accountName = data;
      this.accountName = data.username;
    }, err => {
      console.log(err)
      this.accountName = ""
      this.accountName = 'Username';
    });

    this.awsService.getCloudwatchAlarms().subscribe(data => {
      this.redAlarms = data.ALARM;
    }, err => {
      this.redAlarms = 0;
    });

    this._subscription = this.storeService.newNotification.subscribe(notifications => {
      this.notifications = [];
      Object.keys(notifications).forEach(key => {
        this.notifications.push(notifications[key]);
      })
    })
  }

  ngOnDestroy() {
     this._subscription.unsubscribe();
   }

   public calcMoment(timestamp){
      return moment(timestamp).fromNow();
   }

}

dashboard/src/app/app.module.ts

@@ -10,11 +10,13 @@ import { StorageComponent } from './storage/storage.component';
import { NetworkComponent } from './network/network.component';
import { SecurityComponent } from './security/security.component';
import { DataAndAiComponent } from './data-and-ai/data-and-ai.component';
import { MonitoringComponent } from './monitoring/monitoring.component';

import { AwsService } from './aws.service';

import { StoreService } from './store.service';
import { PaginationModule } from 'ngx-bootstrap/pagination';
import { ProfileComponent } from './profile/profile.component';
import { LimitsComponent } from './limits/limits.component';
import { GoogleAnalyticsService } from './google-analytics.service';



@@ -45,9 +47,14 @@ const appRoutes: Routes = [
    data: { title: 'Data & AI - Komiser' }
  },
  { 
    path: 'monitoring',
    component: MonitoringComponent,
    data: { title: 'Monitoring - Komiser' }
    path: 'profile',
    component: ProfileComponent,
    data: { title: 'Profile - Komiser' }
  },
  { 
    path: 'limits',
    component: LimitsComponent,
    data: { title: 'Service Limits Checks - Komiser' }
  },
  { path: '',
    component: DashboardComponent,
@@ -64,7 +71,8 @@ const appRoutes: Routes = [
    NetworkComponent,
    SecurityComponent,
    DataAndAiComponent,
    MonitoringComponent
    ProfileComponent,
    LimitsComponent
  ],
  imports: [
    RouterModule.forRoot(
@@ -75,8 +83,12 @@ const appRoutes: Routes = [
    PaginationModule.forRoot()
  ],
  providers: [
    AwsService
    AwsService,
    StoreService,
    GoogleAnalyticsService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {
  constructor(protected _googleAnalyticsService: GoogleAnalyticsService){}
}