Angular migration updates (#3330)

* Add link to volumes in claims list * Fix minor issues on claim detail page * Add link to claims in volume list * Fix container picker in exec view * Update Angular version * Format files * Fix lint issues * Update README.md * Update node modules * Move precomit hook

Angular migration updates (#3330)
* Add link to volumes in claims list * Fix minor issues on claim detail page * Add link to claims in volume list * Fix container picker in exec view * Update Angular version * Format files * Fix lint issues * Update README.md * Update node modules * Move precomit hook
509cb6b8 · Marcin Maciaszczyk · k8s-ci-robot · 0ed95bd3 · 509cb6b8 · 509cb6b8
128 changed file
--- a/README.md
+++ b/README.md
@@ -16,10 +16,6 @@ running in the cluster and troubleshoot them, as well as manage the cluster itse

 ## Getting Started

-**IMPORTANT:** Since version 1.7 Dashboard uses more secure setup. It means, that by default it has minimal set of
-privileges and can only be accessed over HTTPS. It is recommended to read [Access Control](
-https://github.com/kubernetes/dashboard/wiki/Access-control) guide before performing any further steps.
-
 To deploy Dashboard, execute following command:

 ```sh

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -50,98 +50,102 @@
    "format:backend": "goimports -w src/app/backend",
    "postversion": "node aio/scripts/version.js",
    "postinstall": "node aio/scripts/version.js && webdriver-manager update && go get golang.org/x/tools/cmd/goimports",
-    "precommit": "npm run check:static",
    "clean": "rm -rf .go_workspace .tmp coverage dist npm-debug.log"
  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run check:static"
+    }
+  },
  "dependencies": {
-    "@angular/animations": "6.0.7",
-    "@angular/cdk": "6.3.3",
-    "@angular/common": "6.0.7",
-    "@angular/compiler": "6.0.7",
-    "@angular/core": "6.0.7",
-    "@angular/flex-layout": "6.0.0-beta.16",
-    "@angular/forms": "6.0.7",
-    "@angular/http": "6.0.7",
-    "@angular/material": "6.3.3",
-    "@angular/platform-browser": "6.0.7",
-    "@angular/platform-browser-dynamic": "6.0.7",
-    "@angular/router": "6.0.7",
-    "@types/file-saver": "^1.3.0",
-    "@types/nvd3": "^1.8.38",
-    "@uirouter/angular": "2.0.0",
-    "@uirouter/core": "5.0.19",
+    "@angular/animations": "7.0.3",
+    "@angular/cdk": "7.0.3",
+    "@angular/common": "7.0.3",
+    "@angular/compiler": "7.0.3",
+    "@angular/core": "7.0.3",
+    "@angular/flex-layout": "7.0.0-beta.19",
+    "@angular/forms": "7.0.3",
+    "@angular/http": "7.0.3",
+    "@angular/material": "7.0.3",
+    "@angular/platform-browser": "7.0.3",
+    "@angular/platform-browser-dynamic": "7.0.3",
+    "@angular/router": "7.0.3",
+    "@types/file-saver": "^2.0.0",
+    "@types/nvd3": "^1.8.39",
+    "@uirouter/angular": "2.0.2",
+    "@uirouter/core": "5.0.21",
    "@uirouter/rx": "0.5.0",
-    "ace-builds": "^1.3.3",
-    "core-js": "^2.5.3",
+    "ace-builds": "^1.4.1",
+    "core-js": "^2.5.7",
    "d3": "3.5.17",
-    "file-saver": "^1.3.8",
+    "file-saver": "^2.0.0-rc.4",
    "hammerjs": "^2.0.8",
-    "js-yaml": "^3.11.0",
+    "js-yaml": "^3.12.0",
    "material-design-icons": "^3.0.1",
    "ng2-ace-editor": "^0.3.8",
-    "ngx-cookie-service": "^1.0.10",
-    "ngx-filter-pipe": "^2.1.0",
+    "ngx-cookie-service": "^2.0.0",
+    "ngx-filter-pipe": "^2.1.2",
    "normalize.css": "^8.0.0",
    "nvd3": "^1.8.6",
-    "roboto-fontface": "^0.9.0",
-    "rxjs": "6.2.1",
-    "rxjs-compat": "6.2.1",
-    "sockjs-client": "^1.1.5",
+    "roboto-fontface": "^0.10.0",
+    "rxjs": "6.3.3",
+    "rxjs-compat": "6.3.3",
+    "sockjs-client": "^1.3.0",
    "web-animations-js": "^2.3.1",
-    "xterm": "^3.5.1",
+    "xterm": "^3.8.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.6",
-    "@angular/cli": "6.0.7",
-    "@angular/compiler-cli": "6.0.7",
-    "@angular/language-service": "6.0.7",
-    "@types/jasmine": "^2.8.6",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/js-yaml": "^3.11.0",
-    "@types/lodash": "^4.14.113",
-    "@types/node": "^9.6.0",
+    "@angular/cli": "7.0.4",
+    "@angular/compiler-cli": "7.0.3",
+    "@angular/language-service": "7.0.3",
+    "@types/jasmine": "^2.8.11",
+    "@types/jasminewd2": "^2.0.6",
+    "@types/js-yaml": "^3.11.2",
+    "@types/lodash": "^4.14.118",
+    "@types/node": "^10.12.3",
    "babel": "^6.23.0",
-    "babel-preset-env": "^1.6.1",
+    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0",
-    "clang-format": "^1.2.2",
-    "codelyzer": "~4.2.1",
-    "concurrently": "~3.5.1",
+    "clang-format": "^1.2.4",
+    "codelyzer": "~4.5.0",
+    "concurrently": "~4.0.1",
    "del": "^3.0.0",
    "git-describe": "^4.0.3",
    "glob-run": "^0.1.6",
-    "google-closure-compiler": "^20180204.0.0",
+    "google-closure-compiler": "^20181028.0.1",
    "gulp": "^3.9.1",
    "gulp-filter": "^5.1.0",
    "gulp-header-license": "^1.0.9",
    "gulp-license-check": "^1.2.1",
    "gulp-util": "^3.0.8",
-    "husky": "^0.14.3",
-    "jasmine-core": "~3.1.0",
+    "husky": "^1.1.3",
+    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
-    "js-beautify": "^1.7.5",
-    "karma": "~2.0.4",
+    "js-beautify": "^1.8.8",
+    "karma": "^3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^2.0.1",
+    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-firefox-launcher": "^1.1.0",
    "karma-jasmine": "~1.1.2",
-    "karma-jasmine-html-reporter": "^1.2.0",
+    "karma-jasmine-html-reporter": "^1.4.0",
    "lite-server": "2.4.0",
-    "lodash": "^4.17.4",
-    "node-sass": "^4.7.2",
-    "protractor": "~5.3.0",
+    "lodash": "^4.17.11",
+    "node-sass": "^4.10.0",
+    "protractor": "^5.4.1",
    "q": "latest",
    "raw-loader": "^0.5.1",
    "sass-lint": "^1.12.1",
-    "sass-loader": "^6.0.7",
+    "sass-loader": "^7.1.0",
    "scssfmt": "1.0.4",
    "semver": "^5.4.1",
-    "source-map-explorer": "~1.5.0",
-    "through2": "^2.0.3",
+    "source-map-explorer": "~1.6.0",
+    "through2": "^3.0.0",
    "ts-node": "~5.0.1",
-    "tslint": "~5.9.1",
-    "typescript": "2.7.2"
+    "tslint": "~5.11.0",
+    "typescript": "3.1.6"
  },
  "engines": {
    "node": ">=8.0.0",

--- a/src/app/frontend/about/actionbar/template.html
+++ b/src/app/frontend/about/actionbar/template.html
@@ -14,24 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->

-<a href="https://github.com/kubernetes/dashboard/wiki"
-   target="_blank">
-  <button mat-button
-          color="accent"
-          i18n-matTooltip
-          matTooltip="Read Kubernetes Dashboard documentation">
-    <mat-icon>description</mat-icon>
-    <span>Documentation</span>
-  </button>
-</a>
+<div fxLayout="row">
+  <a href="https://github.com/kubernetes/dashboard/wiki"
+     target="_blank">
+    <button mat-icon-button
+            color="accent"
+            class="kd-toolbar-action"
+            i18n-matTooltip
+            matTooltip="Read documentation">
+      <mat-icon>description</mat-icon>
+    </button>
+  </a>

-<a [href]="getFeedbackLink()"
-   target="_blank">
-  <button mat-button
-          color="accent"
-          i18n-matTooltip
-          matTooltip="Create new issue on GitHub">
-    <mat-icon>description</mat-icon>
-    <span>Feedback</span>
-  </button>
-</a>
+  <a [href]="getFeedbackLink()"
+     target="_blank">
+    <button mat-icon-button
+            color="accent"
+            class="kd-toolbar-action"
+            i18n-matTooltip
+            matTooltip="Report an issue">
+      <mat-icon>feedback</mat-icon>
+    </button>
+  </a>
+</div>
--- a/src/app/frontend/about/module.ts
+++ b/src/app/frontend/about/module.ts
@@ -30,4 +30,5 @@ import {aboutState} from './state';
  ],
  declarations: [AboutComponent, ActionbarComponent],
 })
-export class AboutModule {}
+export class AboutModule {
+}
--- a/src/app/frontend/chrome/module.ts
+++ b/src/app/frontend/chrome/module.ts
@@ -36,4 +36,5 @@ import {UserPanelComponent} from './userpanel/component';
    NavModule,
  ]
 })
-export class ChromeModule {}
+export class ChromeModule {
+}
--- a/src/app/frontend/chrome/nav/module.ts
+++ b/src/app/frontend/chrome/nav/module.ts
@@ -27,4 +27,5 @@ import {NavItemComponent} from './item/component';
  exports: [NavComponent, NavItemComponent, HamburgerComponent],
  imports: [SharedModule, ComponentsModule, NavServiceModule]
 })
-export class NavModule {}
+export class NavModule {
+}
--- a/src/app/frontend/chrome/nav/style.scss
+++ b/src/app/frontend/chrome/nav/style.scss
@@ -20,7 +20,6 @@
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
-  padding-top: $baseline-grid;
  white-space: nowrap;

  .mat-divider {

--- a/src/app/frontend/chrome/notifications/template.html
+++ b/src/app/frontend/chrome/notifications/template.html
@@ -21,11 +21,11 @@ limitations under the License.
          i18n-matTooltip
          [matTooltip]="isOpen() ? 'Close notifications panel' : 'Open notifications panel'"
          (click)="toggle()">
-      <mat-icon class="kd-notifications-icon kd-primary-toolbar-icon">notifications</mat-icon>
-      <div *ngIf="getUnreadCount() > 0"
-           @easeOut
-           class="kd-notifications-counter kd-white kd-bg-error">{{getUnreadCount()}}</div>
-    </button>
+    <mat-icon class="kd-notifications-icon kd-primary-toolbar-icon">notifications</mat-icon>
+    <div *ngIf="getUnreadCount() > 0"
+         @easeOut
+         class="kd-notifications-counter kd-white kd-bg-error">{{getUnreadCount()}}</div>
+  </button>
  <div class="kd-notifications-panel"
       fxLayout="column"
       *ngIf="isOpen()">
@@ -42,7 +42,7 @@ limitations under the License.
               fxFlex>
            <span class="kd-notification">{{notification.message}}</span>
            <span class="kd-notification-timestamp kd-muted">
-            {{notification.timestamp | kdRelativeTime}} ago
+              {{notification.timestamp | kdRelativeTime}} ago
            </span>
          </div>
          <button (click)="remove(index)"

--- a/src/app/frontend/chrome/userpanel/template.html
+++ b/src/app/frontend/chrome/userpanel/template.html
@@ -45,7 +45,15 @@ limitations under the License.
       width="40px"
       height="40px"
       viewBox="0 0 40 40">
-    <line class="kd-cross-outline" x1="10" x2="30" y1="10" y2="30"/>
-    <line class="kd-cross-line-primary" x1="10" x2="30" y1="10" y2="30"/>
+    <line class="kd-cross-outline"
+          x1="10"
+          x2="30"
+          y1="10"
+          y2="30" />
+    <line class="kd-cross-line-primary"
+          x1="10"
+          x2="30"
+          y1="10"
+          y2="30" />
  </svg>
 </button>
--- a/src/app/frontend/common/components/actionbar/component.ts
+++ b/src/app/frontend/common/components/actionbar/component.ts
@@ -18,4 +18,5 @@ import {Component} from '@angular/core';
  selector: 'kd-actionbar',
  templateUrl: './template.html',
 })
-export class ActionbarComponent {}
+export class ActionbarComponent {
+}
--- a/src/app/frontend/common/components/breadcrumbs/template.html
+++ b/src/app/frontend/common/components/breadcrumbs/template.html
@@ -22,7 +22,7 @@ limitations under the License.
    <a *ngSwitchCase="false"
       [href]="breadcrumb.stateLink"
       class="kd-faded-breadcrumb">
-    {{breadcrumb.label}}
+      {{breadcrumb.label}}
    </a>
    <div *ngSwitchCase="true">{{breadcrumb.label}}</div>
    <mat-icon *ngSwitchCase="false"

--- a/src/app/frontend/common/components/chips/template.html
+++ b/src/app/frontend/common/components/chips/template.html
@@ -25,7 +25,8 @@ limitations under the License.

      <ng-container *ngIf="!isTooLong(map[key])">
        <span>
-          {{key}}<ng-container *ngIf="map[key]">:&nbsp;</ng-container>
+          {{key}}
+          <ng-container *ngIf="map[key]">:&nbsp;</ng-container>
          <ng-container *ngIf="map[key]">
            <ng-container *ngIf="isHref(map[key])">
              <a [href]="map[key]"

--- a/src/app/frontend/common/components/container/template.html
+++ b/src/app/frontend/common/components/container/template.html
@@ -61,7 +61,7 @@ limitations under the License.
               fxLayout>
            <a [href]="getEnvConfigMapHref(env.valueFrom.configMapKeyRef)"
               (click)="$event.stopPropagation()">
-            {{env.name}}
+              {{env.name}}
            </a>
            <mat-icon matTooltip="Environment variable"
                      class="kd-env-variable-icon">public</mat-icon>

--- a/src/app/frontend/common/components/endpoint/external/component.ts
+++ b/src/app/frontend/common/components/endpoint/external/component.ts
@@ -21,4 +21,6 @@ import {Endpoint} from '@api/backendapi';
 */
 @Component(
    {selector: 'kd-external-endpoint', templateUrl: './template.html', styleUrls: ['./style.scss']})
-export class ExternalEndpointComponent { @Input() endpoints: Endpoint[]; }
+export class ExternalEndpointComponent {
+  @Input() endpoints: Endpoint[];
+}
--- a/src/app/frontend/common/components/endpoint/internal/component.ts
+++ b/src/app/frontend/common/components/endpoint/internal/component.ts
@@ -21,4 +21,6 @@ import {Endpoint} from '@api/backendapi';
 */
 @Component(
    {selector: 'kd-internal-endpoint', templateUrl: './template.html', styleUrls: ['./style.scss']})
-export class InternalEndpointComponent { @Input() endpoints: Endpoint[]; }
+export class InternalEndpointComponent {
+  @Input() endpoints: Endpoint[];
+}
--- a/src/app/frontend/common/components/hiddenproperty/component.ts
+++ b/src/app/frontend/common/components/hiddenproperty/component.ts
@@ -19,4 +19,6 @@ import {Component, Input} from '@angular/core';
  templateUrl: './template.html',
  styleUrls: ['./style.scss'],
 })
-export class HiddenPropertyComponent { @Input() hidden = true; }
+export class HiddenPropertyComponent {
+  @Input() hidden = true;
+}
--- a/src/app/frontend/common/components/list/rowdetail/component.ts
+++ b/src/app/frontend/common/components/list/rowdetail/component.ts
@@ -20,4 +20,6 @@ import {Event} from 'typings/backendapi';
  templateUrl: 'template.html',
  styleUrls: ['style.scss'],
 })
-export class RowDetailComponent { events: Event[] = []; }
+export class RowDetailComponent {
+  events: Event[] = [];
+}
--- a/src/app/frontend/common/components/list/zerostate/component.ts
+++ b/src/app/frontend/common/components/list/zerostate/component.ts
@@ -16,4 +16,5 @@ import {Component} from '@angular/core';

 @Component(
    {selector: 'kd-list-zero-state', templateUrl: './template.html', styleUrls: ['./style.scss']})
-export class ListZeroStateComponent {}
+export class ListZeroStateComponent {
+}
--- a/src/app/frontend/common/components/module.ts
+++ b/src/app/frontend/common/components/module.ts
@@ -200,4 +200,5 @@ import {ZeroStateComponent} from './zerostate/component';
    NamespaceChangeDialog,
  ]
 })
-export class ComponentsModule {}
+export class ComponentsModule {
+}
--- a/src/app/frontend/common/components/property/component.ts
+++ b/src/app/frontend/common/components/property/component.ts
@@ -19,4 +19,5 @@ import {Component} from '@angular/core';
  templateUrl: './template.html',
  styleUrls: ['./style.scss'],
 })
-export class PropertyComponent {}
+export class PropertyComponent {
+}
--- a/src/app/frontend/common/components/proxy/component.ts
+++ b/src/app/frontend/common/components/proxy/component.ts
@@ -17,4 +17,5 @@ import {Component} from '@angular/core';
 @Component({
  template: '<ui-view></ui-view>',
 })
-export class ProxyComponent {}
+export class ProxyComponent {
+}
--- a/src/app/frontend/common/components/resourcelist/cronjob/template.html
+++ b/src/app/frontend/common/components/resourcelist/cronjob/template.html
@@ -48,7 +48,7 @@ limitations under the License.
                         disableClear="true">Name</mat-header-cell>
        <mat-cell *matCellDef="let cronJob">
          <a [href]="getDetailsHref(cronJob.objectMeta.name, cronJob.objectMeta.namespace)">
-          {{cronJob.objectMeta.name}}
+            {{cronJob.objectMeta.name}}
          </a>
        </mat-cell>
      </ng-container>

--- a/src/app/frontend/common/components/resourcelist/daemonset/template.html
+++ b/src/app/frontend/common/components/resourcelist/daemonset/template.html
@@ -55,7 +55,7 @@ limitations under the License.
        <mat-cell *matCellDef="let daemonSet">
          <a (click)="$event.stopPropagation()"
             [href]="getDetailsHref(daemonSet.objectMeta.name, daemonSet.objectMeta.namespace)">
-          {{daemonSet.objectMeta.name}}
+            {{daemonSet.objectMeta.name}}
          </a>
        </mat-cell>
      </ng-container>

--- a/src/app/frontend/common/components/resourcelist/job/template.html
+++ b/src/app/frontend/common/components/resourcelist/job/template.html
@@ -58,7 +58,7 @@ limitations under the License.
        <mat-cell *matCellDef="let job">
          <a (click)="$event.stopPropagation()"
             [href]="getDetailsHref(job.objectMeta.name, job.objectMeta.namespace)">
-          {{job.objectMeta.name}}
+            {{job.objectMeta.name}}
          </a>
        </mat-cell>
      </ng-container>

--- a/src/app/frontend/common/components/resourcelist/persistentvolume/component.ts
+++ b/src/app/frontend/common/components/resourcelist/persistentvolume/component.ts
@@ -19,6 +19,7 @@ import {StateService} from '@uirouter/core';
 import {Observable} from 'rxjs/Observable';

 import {persistentVolumeState} from '../../../../resource/cluster/persistentvolume/state';
+import {persistentVolumeClaimState} from '../../../../resource/config/persistentvolumeclaim/state';
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NotificationsService} from '../../../services/global/notifications';
 import {EndpointManager, Resource} from '../../../services/resource/endpoint';
@@ -70,6 +71,17 @@ export class PersistentVolumeListComponent extends
    return resource.status === 'Available' || resource.status === 'Bound';
  }

+  getClaimHref(claimReference: string): string {
+    let href = '';
+
+    const splittedRef = claimReference.split('/');
+    if (splittedRef.length === 2) {
+      href = this.kdState_.href(persistentVolumeClaimState.name, splittedRef[1], splittedRef[0]);
+    }
+
+    return href;
+  }
+
  getDisplayColumns(): string[] {
    return [
      'statusicon', 'name', 'capacity', 'accmodes', 'reclaimpol', 'status', 'claim', 'storagecl',

--- a/src/app/frontend/common/components/resourcelist/persistentvolume/template.html
+++ b/src/app/frontend/common/components/resourcelist/persistentvolume/template.html
@@ -78,7 +78,9 @@ limitations under the License.
      <ng-container [matColumnDef]="getDisplayColumns()[6]">
        <mat-header-cell *matHeaderCellDef>Claim</mat-header-cell>
        <mat-cell *matCellDef="let pv">
-          <ng-container *ngIf="pv.claim">{{pv.claim}}</ng-container>
+          <ng-container *ngIf="pv.claim">
+            <a [href]="getClaimHref(pv.claim)">{{pv.claim}}</a>
+          </ng-container>
          <ng-container *ngIf="!pv.claim">-</ng-container>
        </mat-cell>
      </ng-container>

--- a/src/app/frontend/common/components/resourcelist/persistentvolumeclaim/component.ts
+++ b/src/app/frontend/common/components/resourcelist/persistentvolumeclaim/component.ts
@@ -18,6 +18,7 @@ import {StateService} from '@uirouter/core';
 import {Observable} from 'rxjs/Observable';
 import {PersistentVolumeClaim, PersistentVolumeClaimList} from 'typings/backendapi';

+import {persistentVolumeState} from '../../../../resource/cluster/persistentvolume/state';
 import {persistentVolumeClaimState} from '../../../../resource/config/persistentvolumeclaim/state';
 import {ResourceListWithStatuses} from '../../../resources/list';
 import {NamespaceService} from '../../../services/global/namespace';
@@ -81,6 +82,10 @@ export class PersistentVolumeClaimListComponent extends
    ];
  }

+  getVolumeHref(persistentVolumeName: string): string {
+    return this.kdState_.href(persistentVolumeState.name, persistentVolumeName);
+  }
+
  private shouldShowNamespaceColumn_(): boolean {
    return this.namespaceService_.areMultipleNamespacesSelected();
  }

--- a/src/app/frontend/common/components/resourcelist/persistentvolumeclaim/template.html
+++ b/src/app/frontend/common/components/resourcelist/persistentvolumeclaim/template.html
@@ -74,7 +74,9 @@ limitations under the License.
      <ng-container matColumnDef="volume">
        <mat-header-cell *matHeaderCellDef>Volume</mat-header-cell>
        <mat-cell *matCellDef="let pvc">
-          <ng-container *ngIf="pvc.volume">{{pvc.volume}}</ng-container>
+          <ng-container *ngIf="pvc.volume">
+            <a [href]="getVolumeHref(pvc.volume)">{{pvc.volume}}</a>
+          </ng-container>
          <ng-container *ngIf="!pvc.volume">-</ng-container>
        </mat-cell>
      </ng-container>

--- a/src/app/frontend/common/components/resourcelist/replicaset/template.html
+++ b/src/app/frontend/common/components/resourcelist/replicaset/template.html
@@ -58,7 +58,7 @@ limitations under the License.
        <mat-cell *matCellDef="let replicaSet">
          <a (click)="$event.stopPropagation()"
             [href]="getDetailsHref(replicaSet.objectMeta.name, replicaSet.objectMeta.namespace)">
-          {{replicaSet.objectMeta.name}}
+            {{replicaSet.objectMeta.name}}
          </a>
        </mat-cell>
      </ng-container>

--- a/src/app/frontend/common/components/resourcelist/replicationcontroller/template.html
+++ b/src/app/frontend/common/components/resourcelist/replicationcontroller/template.html
@@ -55,7 +55,7 @@ limitations under the License.
        <mat-cell *matCellDef="let rc">
          <a (click)="$event.stopPropagation()"
             [href]="getDetailsHref(rc.objectMeta.name, rc.objectMeta.namespace)">
-          {{rc.objectMeta.name}}
+            {{rc.objectMeta.name}}
          </a>
        </mat-cell>
      </ng-container>

--- a/src/app/frontend/common/components/resourcelist/statefulset/template.html
+++ b/src/app/frontend/common/components/resourcelist/statefulset/template.html
@@ -55,7 +55,7 @@ limitations under the License.
        <mat-cell *matCellDef="let ss">
          <a (click)="$event.stopPropagation()"
             [href]="getDetailsHref(ss.objectMeta.name, ss.objectMeta.namespace)">
-          {{ss.objectMeta.name}}
+            {{ss.objectMeta.name}}
          </a>
        </mat-cell>
      </ng-container>

--- a/src/app/frontend/common/components/zerostate/component.ts
+++ b/src/app/frontend/common/components/zerostate/component.ts
@@ -15,4 +15,5 @@
 import {Component} from '@angular/core';

 @Component({selector: 'kd-zero-state', templateUrl: './template.html', styleUrls: ['./style.scss']})
-export class ZeroStateComponent {}
+export class ZeroStateComponent {
+}
--- a/src/app/frontend/common/components/zerostate/template.html
+++ b/src/app/frontend/common/components/zerostate/template.html
@@ -25,7 +25,7 @@ limitations under the License.
      You can <a uiSref="deploy">deploy a containerized app</a>, select other namespace or
      <a href="http://kubernetes.io/docs/user-guide/ui/"
         target="_blank">take the Dashboard Tour
-          <mat-icon class="kd-zerostate-icon">open_in_new</mat-icon></a> to learn more.
+        <mat-icon class="kd-zerostate-icon">open_in_new</mat-icon></a> to learn more.
    </div>
  </div>
 </kd-card>
--- a/src/app/frontend/common/dialogs/download/dialog.ts
+++ b/src/app/frontend/common/dialogs/download/dialog.ts
@@ -56,6 +56,7 @@ export class LogsDownloadDialog implements OnDestroy {
                    this.loaded = event.loaded;
                  } else if (event instanceof HttpResponse) {
                    this.finished = true;
+                    // @ts-ignore
                    this.result = new Blob([event.body], {type: 'text/plan'});
                  }
                },

--- a/src/app/frontend/common/dialogs/module.ts
+++ b/src/app/frontend/common/dialogs/module.ts
@@ -46,4 +46,5 @@ import {EditResourceDialog} from './editresource/dialog';
    LogsDownloadDialog,
  ]
 })
-export class DialogsModule {}
+export class DialogsModule {
+}
--- a/src/app/frontend/common/errors/errors.ts
+++ b/src/app/frontend/common/errors/errors.ts
@@ -19,7 +19,9 @@ import {KdError as KdApiError, KnownErrors} from '@api/frontendapi';
 /**
 * Error returned as a part of backend api calls. All server errors should be in this format.
 */
-export class K8SError implements K8SApiError { ErrStatus: ErrStatus; }
+export class K8SError implements K8SApiError {
+  ErrStatus: ErrStatus;
+}
 /* tslint:enable */

 /**

--- a/src/app/frontend/common/pipes/module.ts
+++ b/src/app/frontend/common/pipes/module.ts
@@ -23,4 +23,5 @@ import {SafeHtmlFormatter} from './safehtml';
  declarations: [MemoryFormatter, CoreFormatter, RelativeTimeFormatter, SafeHtmlFormatter],
  exports: [MemoryFormatter, CoreFormatter, RelativeTimeFormatter, SafeHtmlFormatter],
 })
-export class PipesModule {}
+export class PipesModule {
+}
--- a/src/app/frontend/common/resources/list.ts
+++ b/src/app/frontend/common/resources/list.ts
@@ -40,8 +40,8 @@ export abstract class ResourceListBase<T extends ResourceList, R extends Resourc
  private readonly data_ = new MatTableDataSource<R>();
  private dataSubscription_: Subscription;
  private readonly dynamicColumns_: ColumnWhenCondition[] = [];
-  private readonly kdState_: KdStateService;
-  private readonly settingsService_: GlobalSettingsService;
+  protected readonly kdState_: KdStateService;
+  protected readonly settingsService_: GlobalSettingsService;

  isLoading = false;
  totalItems = 0;

--- a/src/app/frontend/common/resources/resource.ts
+++ b/src/app/frontend/common/resources/resource.ts
@@ -14,6 +14,7 @@

 import {HttpClient} from '@angular/common/http';

+// @ts-ignore
 export abstract class ResourceBase<T> {
  constructor(protected readonly http_: HttpClient) {}
 }
--- a/src/app/frontend/common/services/create/module.ts
+++ b/src/app/frontend/common/services/create/module.ts
@@ -18,4 +18,5 @@ import {CreateService} from './service';
 @NgModule({
  providers: [CreateService],
 })
-export class CreateServiceModule {}
+export class CreateServiceModule {
+}
--- a/src/app/frontend/common/services/global/actionbar.ts
+++ b/src/app/frontend/common/services/global/actionbar.ts
@@ -28,4 +28,6 @@ export class ResourceMeta {
 }

 @Injectable()
-export class ActionbarService { onInit = new EventEmitter<ResourceMeta>(); }
+export class ActionbarService {
+  onInit = new EventEmitter<ResourceMeta>();
+}
--- a/src/app/frontend/common/services/nav/module.ts
+++ b/src/app/frontend/common/services/nav/module.ts
@@ -19,4 +19,5 @@ import {NavService} from './service';
 @NgModule({
  providers: [NavService],
 })
-export class NavServiceModule {}
+export class NavServiceModule {
+}
--- a/src/app/frontend/common/services/resource/module.ts
+++ b/src/app/frontend/common/services/resource/module.ts
@@ -18,4 +18,5 @@ import {NamespacedResourceService, ResourceService} from './resource';
 @NgModule({
  providers: [ResourceService, NamespacedResourceService],
 })
-export class ResourceModule {}
+export class ResourceModule {
+}
--- a/src/app/frontend/create/component.ts
+++ b/src/app/frontend/create/component.ts
@@ -19,4 +19,5 @@ import {Component} from '@angular/core';
  templateUrl: './template.html',
  styleUrls: ['./style.scss'],
 })
-export class CreateComponent {}
+export class CreateComponent {
+}
--- a/src/app/frontend/create/from/form/createnamespace/dialog.ts
+++ b/src/app/frontend/create/from/form/createnamespace/dialog.ts
@@ -20,7 +20,9 @@ import {AlertDialog, AlertDialogConfig} from '../../../../common/dialogs/alert/d
 import {CsrfTokenService} from '../../../../common/services/global/csrftoken';
 import {CONFIG} from '../../../../index.config';

-export interface CreateNamespaceDialogMeta { namespaces: string[]; }
+export interface CreateNamespaceDialogMeta {
+  namespaces: string[];
+}

 /**
 * Displays new namespace creation dialog.

--- a/src/app/frontend/create/from/form/createnamespace/template.html
+++ b/src/app/frontend/create/from/form/createnamespace/template.html
@@ -27,7 +27,7 @@ limitations under the License.
                   placeholder="Namespace name"
                   name="namespace"
                   formControlName="namespace"
-                   required/>
+                   required />
            <mat-hint align="end">{{namespace.value.length}} / {{namespaceMaxLength}}</mat-hint>
            <mat-error *ngIf="namespace.errors?.required"
                       i18n>
@@ -48,9 +48,9 @@ limitations under the License.
               target="_blank"
               tabindex="-1"
               i18n>
-                Learn more
-                <i class="material-icons">open_in_new</i>
-              </a>
+              Learn more
+              <i class="material-icons">open_in_new</i>
+            </a>
          </kd-user-help>
        </kd-help-section>
      </form>

--- a/src/app/frontend/create/from/form/createsecret/dialog.ts
+++ b/src/app/frontend/create/from/form/createsecret/dialog.ts
@@ -20,7 +20,9 @@ import {AlertDialog, AlertDialogConfig} from '../../../../common/dialogs/alert/d
 import {CsrfTokenService} from '../../../../common/services/global/csrftoken';
 import {CONFIG} from '../../../../index.config';

-export interface CreateSecretDialogMeta { namespace: string; }
+export interface CreateSecretDialogMeta {
+  namespace: string;
+}

 @Component({
  selector: 'kd-create-secret-dialog',

--- a/src/app/frontend/create/from/form/createsecret/template.html
+++ b/src/app/frontend/create/from/form/createsecret/template.html
@@ -27,7 +27,7 @@ limitations under the License.
                   placeholder="Secret name"
                   name="secretName"
                   formControlName="secretName"
-                   required/>
+                   required />
            <mat-hint align="end">{{secretName.value.length}} / {{secretNameMaxLength}}</mat-hint>
            <mat-error *ngIf="secretName.errors?.required"
                       i18n>
@@ -48,9 +48,9 @@ limitations under the License.
               target="_blank"
               tabindex="-1"
               i18n>
-                Learn more
-                <i class="material-icons">open_in_new</i>
-              </a>
+              Learn more
+              <i class="material-icons">open_in_new</i>
+            </a>
          </kd-user-help>
        </kd-help-section>

@@ -61,7 +61,7 @@ limitations under the License.
                   placeholder="Image pull secret data"
                   name="data"
                   formControlName="data"
-                   required/>
+                   required />
            <mat-error *ngIf="data.errors?.required"
                       i18n>
              Data is required.
@@ -77,9 +77,9 @@ limitations under the License.
               target="_blank"
               tabindex="-1"
               i18n>
-                Learn more
-                <i class="material-icons">open_in_new</i>
-              </a>
+              Learn more
+              <i class="material-icons">open_in_new</i>
+            </a>
          </kd-user-help>
        </kd-help-section>
      </form>

--- a/src/app/frontend/create/from/form/deploylabel/template.html
+++ b/src/app/frontend/create/from/form/deploylabel/template.html
@@ -75,8 +75,8 @@ limitations under the License.
        <button mat-icon-button
                *ngIf="isRemovable(i)"
                (click)="deleteLabel(i)">
-            <mat-icon>delete</mat-icon>
-          </button>
+          <mat-icon>delete</mat-icon>
+        </button>
      </div>
    </div>
  </div>

--- a/src/app/frontend/create/from/form/environmentvariables/template.html
+++ b/src/app/frontend/create/from/form/environmentvariables/template.html
@@ -45,8 +45,8 @@ limitations under the License.
          <button mat-icon-button
                  *ngIf="isRemovable(i)"
                  (click)="remove(i)">
-              <mat-icon>delete</mat-icon>
-            </button>
+            <mat-icon>delete</mat-icon>
+          </button>
        </div>
      </div>
    </ng-container>

--- a/src/app/frontend/create/from/form/helpsection/component.ts
+++ b/src/app/frontend/create/from/form/helpsection/component.ts
@@ -16,4 +16,5 @@ import {Component, OnInit} from '@angular/core';

 @Component(
    {selector: 'kd-help-section', templateUrl: './template.html', styleUrls: ['./style.scss']})
-export class HelpSectionComponent {}
+export class HelpSectionComponent {
+}
--- a/src/app/frontend/create/from/form/helpsection/userhelp/component.ts
+++ b/src/app/frontend/create/from/form/helpsection/userhelp/component.ts
@@ -15,4 +15,5 @@
 import {Component, OnInit} from '@angular/core';

 @Component({selector: 'kd-user-help', templateUrl: './template.html', styleUrls: ['./style.scss']})
-export class UserHelpComponent {}
+export class UserHelpComponent {
+}
--- a/src/app/frontend/create/from/form/module.ts
+++ b/src/app/frontend/create/from/form/module.ts
@@ -40,4 +40,5 @@ import {WarnThresholdValidator} from './validator/warnthreshold.validator';
  exports: [CreateFromFormComponent],
  entryComponents: [CreateNamespaceDialog, CreateSecretDialog],
 })
-export class CreateFromFormModule {}
+export class CreateFromFormModule {
+}
--- a/src/app/frontend/create/from/form/portmappings/component.ts
+++ b/src/app/frontend/create/from/form/portmappings/component.ts
@@ -80,8 +80,7 @@ export class PortMappingsComponent implements OnInit, ControlValueAccessor {
  /**
   * Initialized from the scope.
   */
-  @Input()
-  protocols: string[];
+  @Input() protocols: string[];

  /**
   * Available service types
@@ -96,11 +95,9 @@ export class PortMappingsComponent implements OnInit, ControlValueAccessor {
  /**
   * Binding to outer scope.
   */
-  @Input()
-  isExternal: boolean;
+  @Input() isExternal: boolean;

-  @Output()
-  changeExternal: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() changeExternal: EventEmitter<boolean> = new EventEmitter<boolean>();

  portMappingForm: FormGroup;

@@ -161,12 +158,10 @@ export class PortMappingsComponent implements OnInit, ControlValueAccessor {
  private newEmptyPortMapping(defaultProtocol: string): FormGroup {
    return this.fb_.group({
      port: [
-        '',
-        Validators.compose([FormValidators.isInteger, Validators.min(1), Validators.max(65535)])
+        '', Validators.compose([FormValidators.isInteger, Validators.min(1), Validators.max(65535)])
      ],
      targetPort: [
-        '',
-        Validators.compose([FormValidators.isInteger, Validators.min(1), Validators.max(65535)])
+        '', Validators.compose([FormValidators.isInteger, Validators.min(1), Validators.max(65535)])
      ],
      protocol: [defaultProtocol]
    });

--- a/src/app/frontend/create/from/form/portmappings/template.html
+++ b/src/app/frontend/create/from/form/portmappings/template.html
@@ -128,8 +128,8 @@ limitations under the License.
          <button mat-icon-button
                  *ngIf="isRemovable(i)"
                  (click)="remove(i)">
-              <mat-icon>delete</mat-icon>
-            </button>
+            <mat-icon>delete</mat-icon>
+          </button>
        </div>
      </div>
    </ng-container>

--- a/src/app/frontend/create/from/form/template.html
+++ b/src/app/frontend/create/from/form/template.html
@@ -82,9 +82,9 @@ limitations under the License.
         target="_blank"
         tabindex="-1"
         i18n>
-          Learn more
-          <i class="material-icons">open_in_new</i>
-        </a>
+        Learn more
+        <i class="material-icons">open_in_new</i>
+      </a>
    </kd-user-help>
  </kd-help-section>

@@ -116,9 +116,9 @@ limitations under the License.
         target="_blank"
         tabindex="-1"
         i18n>
-          Learn more
-          <i class="material-icons">open_in_new</i>
-        </a>
+        Learn more
+        <i class="material-icons">open_in_new</i>
+      </a>
    </kd-user-help>
  </kd-help-section>

@@ -136,9 +136,9 @@ limitations under the License.
         target="_blank"
         tabindex="-1"
         i18n>
-          Learn more
-          <i class="material-icons">open_in_new</i>
-        </a>
+        Learn more
+        <i class="material-icons">open_in_new</i>
+      </a>
    </kd-user-help>
  </kd-help-section>

@@ -167,9 +167,9 @@ limitations under the License.
           target="_blank"
           tabindex="-1"
           i18n>
-            Learn more
-            <i class="material-icons">open_in_new</i>
-          </a>
+          Learn more
+          <i class="material-icons">open_in_new</i>
+        </a>
      </kd-user-help>
    </kd-help-section>

@@ -194,9 +194,9 @@ limitations under the License.
           target="_blank"
           tabindex="-1"
           i18n>
-            Learn more
-            <i class="material-icons">open_in_new</i>
-          </a>
+          Learn more
+          <i class="material-icons">open_in_new</i>
+        </a>
      </kd-user-help>
    </kd-help-section>

@@ -220,9 +220,9 @@ limitations under the License.
           target="_blank"
           tabindex="-1"
           i18n>
-            Learn more
-            <i class="material-icons">open_in_new</i>
-          </a>
+          Learn more
+          <i class="material-icons">open_in_new</i>
+        </a>
      </kd-user-help>
    </kd-help-section>

@@ -270,9 +270,9 @@ limitations under the License.
           target="_blank"
           tabindex="-1"
           i18n>
-            Learn more
-            <i class="material-icons">open_in_new</i>
-          </a>
+          Learn more
+          <i class="material-icons">open_in_new</i>
+        </a>
      </kd-user-help>
    </kd-help-section>

@@ -297,9 +297,9 @@ limitations under the License.
           target="_blank"
           tabindex="-1"
           i18n>
-            Learn more
-            <i class="material-icons">open_in_new</i>
-          </a>
+          Learn more
+          <i class="material-icons">open_in_new</i>
+        </a>
      </kd-user-help>
    </kd-help-section>

@@ -314,9 +314,9 @@ limitations under the License.
           target="_blank"
           tabindex="-1"
           i18n>
-            Learn more
-            <i class="material-icons">open_in_new</i>
-          </a>
+          Learn more
+          <i class="material-icons">open_in_new</i>
+        </a>
      </kd-user-help>
    </kd-help-section>

@@ -328,9 +328,9 @@ limitations under the License.
           target="_blank"
           tabindex="-1"
           i18n>
-            Learn more
-            <i class="material-icons">open_in_new</i>
-          </a>
+          Learn more
+          <i class="material-icons">open_in_new</i>
+        </a>
      </kd-user-help>
    </kd-help-section>
  </div>

--- a/src/app/frontend/create/from/form/validator/uniquename.validator.ts
+++ b/src/app/frontend/create/from/form/validator/uniquename.validator.ts
@@ -26,11 +26,9 @@ export const uniqueNameValidationKey = 'uniqueName';
 */
 @Directive({
  selector: '[kdUniqueName]',
-  providers: [{
-    provide: NG_ASYNC_VALIDATORS,
-    useExisting: forwardRef(() => UniqueNameValidator),
-    multi: true
-  }]
+  providers: [
+    {provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => UniqueNameValidator), multi: true}
+  ]
 })
 export class UniqueNameValidator implements AsyncValidator {
  @Input() namespace: string;

--- a/src/app/frontend/create/from/form/validator/warnthreshold.validator.ts
+++ b/src/app/frontend/create/from/form/validator/warnthreshold.validator.ts
@@ -36,9 +36,8 @@ import {AbstractControl, NG_VALIDATORS, Validator} from '@angular/forms';
 */
 @Directive({
  selector: '[kdWarnThreshold]',
-  providers: [
-    {provide: NG_VALIDATORS, useExisting: forwardRef(() => WarnThresholdValidator), multi: true}
-  ]
+  providers:
+      [{provide: NG_VALIDATORS, useExisting: forwardRef(() => WarnThresholdValidator), multi: true}]
 })
 export class WarnThresholdValidator implements Validator {
  @Input() kdWarnThreshold: number;

--- a/src/app/frontend/create/module.ts
+++ b/src/app/frontend/create/module.ts
@@ -35,4 +35,5 @@ import {createState} from './state';
  ],
  declarations: [CreateComponent, CreateFromInputComponent, CreateFromFileComponent],
 })
-export class CreateModule {}
+export class CreateModule {
+}
--- a/src/app/frontend/error/module.ts
+++ b/src/app/frontend/error/module.ts
@@ -32,4 +32,5 @@ import {errorState} from './state';
  providers: [{provide: ErrorHandler, useClass: GlobalErrorHandler}],
  declarations: [ErrorComponent],
 })
-export class ErrorModule {}
+export class ErrorModule {
+}
--- a/src/app/frontend/index.module.ts
+++ b/src/app/frontend/index.module.ts
@@ -115,4 +115,5 @@ import {shellFutureState} from './shell/state';
  declarations: [RootComponent],
  bootstrap: [RootComponent]
 })
-export class RootModule {}
+export class RootModule {
+}
--- a/src/app/frontend/index.scss
+++ b/src/app/frontend/index.scss
@@ -73,6 +73,7 @@ code {

 .mat-chip {
  box-shadow: none !important;
+  font-weight: $regular-font-weight;
  transition: none !important;
 }


--- a/src/app/frontend/login/module.ts
+++ b/src/app/frontend/login/module.ts
@@ -25,4 +25,5 @@ import {LoginComponent} from './component';
    ComponentsModule,
  ],
 })
-export class LoginModule {}
+export class LoginModule {
+}
--- a/src/app/frontend/logs/module.ts
+++ b/src/app/frontend/logs/module.ts
@@ -29,4 +29,5 @@ import {logsState} from './state';
  ],
  declarations: [LogsComponent],
 })
-export class LogsModule {}
+export class LogsModule {
+}
--- a/src/app/frontend/logs/template.html
+++ b/src/app/frontend/logs/template.html
@@ -71,12 +71,20 @@ limitations under the License.
          <mat-icon>
            refresh
            <svg class="kd-cross-style"
-                *ngIf="!logService.getFollowing()"
-                width="32px"
-                height="32px"
-                viewBox="0 0 32 32">
-              <line class="kd-cross-line-white" x1="9" x2="27" y1="9" y2="27"/>
-              <line class="kd-cross-line-black" x1="9" x2="27" y1="10" y2="28"/>
+                 *ngIf="!logService.getFollowing()"
+                 width="32px"
+                 height="32px"
+                 viewBox="0 0 32 32">
+              <line class="kd-cross-line-white"
+                    x1="9"
+                    x2="27"
+                    y1="9"
+                    y2="27" />
+              <line class="kd-cross-line-black"
+                    x1="9"
+                    x2="27"
+                    y1="10"
+                    y2="28" />
            </svg>
          </mat-icon>
        </button>
@@ -118,20 +126,20 @@ limitations under the License.
        <div class="kd-list-pagination-buttons">
          <button mat-icon-button
                  (click)="loadOldest()">
-          <mat-icon>first_page</mat-icon>
-        </button>
+            <mat-icon>first_page</mat-icon>
+          </button>
          <button mat-icon-button
                  (click)="loadOlder()">
-          <mat-icon>chevron_left</mat-icon>
-        </button>
+            <mat-icon>chevron_left</mat-icon>
+          </button>
          <button mat-icon-button
                  (click)="loadNewer()">
-          <mat-icon>chevron_right</mat-icon>
-        </button>
+            <mat-icon>chevron_right</mat-icon>
+          </button>
          <button mat-icon-button
                  (click)="loadNewest()">
-          <mat-icon>last_page</mat-icon>
-        </button>
+            <mat-icon>last_page</mat-icon>
+          </button>
        </div>
      </div>
    </div>

--- a/src/app/frontend/overview/module.ts
+++ b/src/app/frontend/overview/module.ts
@@ -28,4 +28,5 @@ import {overviewState} from './state';
  ],
  declarations: [OverviewComponent],
 })
-export class OverviewModule {}
+export class OverviewModule {
+}
--- a/src/app/frontend/resource/cluster/clusterrole/list/component.ts
+++ b/src/app/frontend/resource/cluster/clusterrole/list/component.ts
@@ -18,4 +18,5 @@ import {Component} from '@angular/core';
  selector: 'kd-cluster-role-list-state',
  template: '<kd-cluster-role-list></kd-cluster-role-list>',
 })
-export class ClusterRoleListComponent {}
+export class ClusterRoleListComponent {
+}
--- a/src/app/frontend/resource/cluster/clusterrole/module.ts
+++ b/src/app/frontend/resource/cluster/clusterrole/module.ts
@@ -41,4 +41,5 @@ import {clusterRoleState} from './state';
    ClusterRoleDetailComponent,
  ],
 })
-export class ClusterRoleModule {}
+export class ClusterRoleModule {
+}
--- a/src/app/frontend/resource/cluster/component.ts
+++ b/src/app/frontend/resource/cluster/component.ts
@@ -19,4 +19,5 @@ import {GroupedResourceList} from '../../common/resources/groupedlist';
  selector: 'kd-cluster',
  templateUrl: './template.html',
 })
-export class ClusterComponent extends GroupedResourceList {}
+export class ClusterComponent extends GroupedResourceList {
+}
--- a/src/app/frontend/resource/cluster/module.ts
+++ b/src/app/frontend/resource/cluster/module.ts
@@ -28,4 +28,5 @@ import {clusterState} from './state';
  ],
  declarations: [ClusterComponent],
 })
-export class ClusterModule {}
+export class ClusterModule {
+}
--- a/src/app/frontend/resource/cluster/namespace/list/component.ts
+++ b/src/app/frontend/resource/cluster/namespace/list/component.ts
@@ -18,4 +18,5 @@ import {Component} from '@angular/core';
  selector: 'kd-namespace-list-view',
  template: '<kd-namespace-list></kd-namespace-list>',
 })
-export class NamespaceListComponent {}
+export class NamespaceListComponent {
+}
--- a/src/app/frontend/resource/cluster/namespace/module.ts
+++ b/src/app/frontend/resource/cluster/namespace/module.ts
@@ -39,4 +39,5 @@ import {namespaceState} from './state';
  ],
  declarations: [NamespaceListComponent, NamespaceDetailComponent, ActionbarComponent],
 })
-export class NamespaceModule {}
+export class NamespaceModule {
+}
--- a/src/app/frontend/resource/cluster/node/detail/template.html
+++ b/src/app/frontend/resource/cluster/node/detail/template.html
@@ -120,21 +120,21 @@ limitations under the License.
            <mat-icon class="kd-chart-green">stop</mat-icon>
            <span>Requests</span>
            <span class="kd-graph-legend-value">
-            {{node?.allocatedResources.cpuRequests | kdCores}}
+              {{node?.allocatedResources.cpuRequests | kdCores}}
            </span>
          </div>
          <div class="kd-graph-legend-entry">
            <mat-icon class="kd-chart-blue">stop</mat-icon>
            <span>Limits</span>
            <span class="kd-graph-legend-value">
-            {{node?.allocatedResources.cpuLimits | kdCores}}
+              {{node?.allocatedResources.cpuLimits | kdCores}}
            </span>
          </div>
          <div class="kd-graph-legend-entry">
            <div class="kd-graph-legend-placeholder"></div>
            <span>Capacity</span>
            <span class="kd-graph-legend-value">
-            {{node?.allocatedResources.cpuCapacity | kdCores}}
+              {{node?.allocatedResources.cpuCapacity | kdCores}}
            </span>
          </div>
        </div>
@@ -151,21 +151,21 @@ limitations under the License.
            <mat-icon class="kd-chart-green">stop</mat-icon>
            <span>Requests</span>
            <span class="kd-graph-legend-value">
-            {{node?.allocatedResources.memoryRequests | kdMemory}}
+              {{node?.allocatedResources.memoryRequests | kdMemory}}
            </span>
          </div>
          <div class="kd-graph-legend-entry">
            <mat-icon class="kd-chart-blue">stop</mat-icon>
            <span>Limits</span>
            <span class="kd-graph-legend-value">
-            {{node?.allocatedResources.memoryLimits | kdMemory}}
+              {{node?.allocatedResources.memoryLimits | kdMemory}}
            </span>
          </div>
          <div class="kd-graph-legend-entry">
            <div class="kd-graph-legend-placeholder"></div>
            <span>Capacity</span>
            <span class="kd-graph-legend-value">
-            {{node?.allocatedResources.memoryCapacity | kdMemory}}
+              {{node?.allocatedResources.memoryCapacity | kdMemory}}
            </span>
          </div>
        </div>

--- a/src/app/frontend/resource/cluster/node/list/component.ts
+++ b/src/app/frontend/resource/cluster/node/list/component.ts
@@ -18,4 +18,5 @@ import {Component} from '@angular/core';
  selector: 'kd-node-list-state',
  template: '<kd-node-list></kd-node-list>',
 })
-export class NodeListComponent {}
+export class NodeListComponent {
+}
--- a/src/app/frontend/resource/cluster/node/module.ts
+++ b/src/app/frontend/resource/cluster/node/module.ts
@@ -32,4 +32,5 @@ import {nodeState} from './state';
  ],
  declarations: [NodeListComponent, NodeDetailComponent],
 })
-export class NodeModule {}
+export class NodeModule {
+}
--- a/src/app/frontend/resource/cluster/persistentvolume/list/component.ts
+++ b/src/app/frontend/resource/cluster/persistentvolume/list/component.ts
@@ -18,4 +18,5 @@ import {Component} from '@angular/core';
  selector: 'kd-persistent-volume-list-state',
  template: '<kd-persistent-volume-list></kd-persistent-volume-list>',
 })
-export class PersistentVolumeListComponent {}
+export class PersistentVolumeListComponent {
+}
--- a/src/app/frontend/resource/cluster/persistentvolume/module.ts
+++ b/src/app/frontend/resource/cluster/persistentvolume/module.ts
@@ -41,4 +41,5 @@ import {persistentVolumeState} from './state';
    PersistentVolumeListComponent, PersistentVolumeDetailComponent, PersistentVolumeSourceComponent
  ],
 })
-export class PersistentVolumeModule {}
+export class PersistentVolumeModule {
+}
--- a/src/app/frontend/resource/cluster/storageclass/list/component.ts
+++ b/src/app/frontend/resource/cluster/storageclass/list/component.ts
@@ -18,4 +18,5 @@ import {Component} from '@angular/core';
  selector: 'kd-storage-class-list-state',
  template: '<kd-storage-class-list></kd-storage-class-list>',
 })
-export class StorageClassListComponent {}
+export class StorageClassListComponent {
+}
--- a/src/app/frontend/resource/cluster/storageclass/module.ts
+++ b/src/app/frontend/resource/cluster/storageclass/module.ts
@@ -38,4 +38,5 @@ import {storageClassState} from './state';
  ],
  declarations: [StorageClassListComponent, StorageClassDetailComponent],
 })
-export class StorageClassModule {}
+export class StorageClassModule {
+}
--- a/src/app/frontend/resource/config/component.ts
+++ b/src/app/frontend/resource/config/component.ts
@@ -19,4 +19,5 @@ import {GroupedResourceList} from '../../common/resources/groupedlist';
  selector: 'kd-config',
  templateUrl: './template.html',
 })
-export class ConfigComponent extends GroupedResourceList {}
+export class ConfigComponent extends GroupedResourceList {
+}
--- a/src/app/frontend/resource/config/configmap/list/component.ts
+++ b/src/app/frontend/resource/config/configmap/list/component.ts
@@ -18,4 +18,5 @@ import {Component} from '@angular/core';
  selector: 'kd-config-map-list-state',
  template: '<kd-config-map-list></kd-config-map-list>',
 })
-export class ConfigMapList {}
+export class ConfigMapList {
+}
--- a/src/app/frontend/resource/config/configmap/module.ts
+++ b/src/app/frontend/resource/config/configmap/module.ts
@@ -32,4 +32,5 @@ import {configMapState} from './state';
  ],
  declarations: [ConfigMapList, ConfigMapDetailComponent],
 })
-export class ConfigMapModule {}
+export class ConfigMapModule {
+}
--- a/src/app/frontend/resource/config/module.ts
+++ b/src/app/frontend/resource/config/module.ts
@@ -29,4 +29,5 @@ import {configState} from './state';
  ],
  declarations: [ConfigComponent],
 })
-export class ConfigModule {}
+export class ConfigModule {
+}
--- a/src/app/frontend/resource/config/persistentvolumeclaim/detail/template.html
+++ b/src/app/frontend/resource/config/persistentvolumeclaim/detail/template.html
@@ -14,27 +14,35 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->

-<kd-object-meta [initialized]="isInitialized" 
+<kd-object-meta [initialized]="isInitialized"
                [objectMeta]="persistentVolumeClaim?.objectMeta"></kd-object-meta>

 <kd-card [initialized]="isInitialized">
  <div title>Persistent Volume Claim information</div>
-  <div content *ngIf="isInitialized" fxLayout="row wrap">
+  <div content
+       *ngIf="isInitialized"
+       fxLayout="row wrap">
    <kd-property *ngIf="persistentVolumeClaim?.status">
      <div key>Status</div>
      <div value>{{persistentVolumeClaim.status}}</div>
    </kd-property>
    <kd-property *ngIf="persistentVolumeClaim?.storageClass">
-        <div key>Storage Class</div>
-        <div value>{{persistentVolumeClaim.storageClass}}</div>
+      <div key>Storage Class</div>
+      <div value>{{persistentVolumeClaim.storageClass}}</div>
    </kd-property>
-    <kd-property *ngIf="persistentVolumeClaim?.capacity?.storage">
-        <div key>Capacity</div>
-        <div value>{{persistentVolumeClaim.capacity.storage}}</div>
+    <kd-property *ngIf="persistentVolumeClaim?.capacity"
+                 fxFlex="100">
+      <div key>Capacity</div>
+      <div value>
+        <kd-chips [map]="persistentVolumeClaim.capacity"></kd-chips>
+      </div>
    </kd-property>
-    <kd-property *ngIf="persistentVolumeClaim?.capacity?.storage">
-        <div key>Access Modes</div>
-        <div value><kd-chips [map]="persistentVolumeClaim.accessModes"></kd-chips></div>
+    <kd-property *ngIf="persistentVolumeClaim?.accessModes"
+                 fxFlex="100">
+      <div key>Access Modes</div>
+      <div value>
+        <kd-chips [map]="persistentVolumeClaim.accessModes"></kd-chips>
+      </div>
    </kd-property>
  </div>
 </kd-card>
--- a/src/app/frontend/resource/config/persistentvolumeclaim/list/component.ts
+++ b/src/app/frontend/resource/config/persistentvolumeclaim/list/component.ts
@@ -18,4 +18,5 @@ import {Component} from '@angular/core';
  selector: 'kd-persistent-volume-claim-list-state',
  template: '<kd-persistent-volume-claim-list></kd-persistent-volume-claim-list>',
 })
-export class PersistentVolumeClaimList {}
+export class PersistentVolumeClaimList {
+}
--- a/src/app/frontend/resource/config/persistentvolumeclaim/module.ts
+++ b/src/app/frontend/resource/config/persistentvolumeclaim/module.ts
@@ -38,4 +38,5 @@ import {persistentVolumeClaimState} from './state';
  ],
  declarations: [PersistentVolumeClaimList, PersistentVolumeClaimDetailComponent],
 })
-export class PersistentVolumeClaimModule {}
+export class PersistentVolumeClaimModule {
+}
--- a/src/app/frontend/resource/config/secret/list/component.ts
+++ b/src/app/frontend/resource/config/secret/list/component.ts
@@ -18,4 +18,5 @@ import {Component} from '@angular/core';
  selector: 'kd-secret-list-state',
  template: '<kd-secret-list></kd-secret-list>',
 })
-export class SecretList {}
+export class SecretList {
+}
--- a/src/app/frontend/resource/config/secret/module.ts
+++ b/src/app/frontend/resource/config/secret/module.ts
@@ -32,4 +32,5 @@ import {secretState} from './state';
  ],
  declarations: [SecretList, SecretDetailComponent],
 })
-export class SecretModule {}
+export class SecretModule {
+}
--- a/src/app/frontend/resource/discovery/component.ts
+++ b/src/app/frontend/resource/discovery/component.ts
@@ -19,4 +19,5 @@ import {GroupedResourceList} from '../../common/resources/groupedlist';
  selector: 'kd-discovery',
  templateUrl: './template.html',
 })
-export class DiscoveryComponent extends GroupedResourceList {}
+export class DiscoveryComponent extends GroupedResourceList {
+}
--- a/src/app/frontend/resource/discovery/ingress/list/component.ts
+++ b/src/app/frontend/resource/discovery/ingress/list/component.ts
@@ -18,4 +18,5 @@ import {Component} from '@angular/core';
  selector: 'kd-ingress-list-state',
  template: '<kd-ingress-list></kd-ingress-list>',
 })
-export class IngressList {}
+export class IngressList {
+}
--- a/src/app/frontend/resource/discovery/ingress/module.ts
+++ b/src/app/frontend/resource/discovery/ingress/module.ts
@@ -38,4 +38,5 @@ import {ingressState} from './state';
  ],
  declarations: [IngressList, IngressDetailComponent],
 })
-export class IngressModule {}
+export class IngressModule {
+}
--- a/src/app/frontend/resource/discovery/module.ts
+++ b/src/app/frontend/resource/discovery/module.ts
@@ -29,4 +29,5 @@ import {discoveryState} from './state';
  ],
  declarations: [DiscoveryComponent],
 })
-export class DiscoveryModule {}
+export class DiscoveryModule {
+}
--- a/src/app/frontend/resource/discovery/service/detail/component.spec.ts
+++ b/src/app/frontend/resource/discovery/service/detail/component.spec.ts
@@ -103,9 +103,8 @@ class MaxiTestComponent {
      status: {failed: 2, pending: 1, running: 3, succeeded: 5},
      cumulativeMetrics: [],
      listMeta: {totalItems: 1},
-      errors: [{
-        ErrStatus: {message: 'error message', code: 10, status: 'Ready', reason: 'the reason'}
-      }]
+      errors:
+          [{ErrStatus: {message: 'error message', code: 10, status: 'Ready', reason: 'the reason'}}]
    },
    sessionAffinity: 'affinity1',
    errors: []

--- a/src/app/frontend/resource/discovery/service/list/component.ts
+++ b/src/app/frontend/resource/discovery/service/list/component.ts
@@ -18,4 +18,5 @@ import {Component} from '@angular/core';
  selector: 'kd-service-list-state',
  template: '<kd-service-list></kd-service-list>',
 })
-export class ServiceList {}
+export class ServiceList {
+}
--- a/src/app/frontend/resource/discovery/service/module.ts
+++ b/src/app/frontend/resource/discovery/service/module.ts
@@ -38,4 +38,5 @@ import {serviceState} from './state';
  ],
  declarations: [ServiceList, ServiceDetailComponent],
 })
-export class ServiceModule {}
+export class ServiceModule {
+}
--- a/src/app/frontend/resource/workloads/component.ts
+++ b/src/app/frontend/resource/workloads/component.ts
@@ -21,4 +21,5 @@ import {GroupedResourceList} from '../../common/resources/groupedlist';
  selector: 'kd-workloads',
  templateUrl: './template.html',
 })
-export class WorkloadsComponent extends GroupedResourceList {}
+export class WorkloadsComponent extends GroupedResourceList {
+}
--- a/src/app/frontend/resource/workloads/cronjob/list/component.ts
+++ b/src/app/frontend/resource/workloads/cronjob/list/component.ts
@@ -18,4 +18,5 @@ import {Component} from '@angular/core';
  selector: 'kd-cron-job-list-state',
  template: '<kd-cron-job-list></kd-cron-job-list>',
 })
-export class CronJobList {}
+export class CronJobList {
+}
--- a/src/app/frontend/resource/workloads/cronjob/module.ts
+++ b/src/app/frontend/resource/workloads/cronjob/module.ts
@@ -31,4 +31,5 @@ import {cronJobState} from './state';
  ],
  declarations: [CronJobList, CronJobDetailComponent],
 })
-export class CronJobModule {}
+export class CronJobModule {
+}
--- a/src/app/frontend/resource/workloads/daemonset/list/component.ts
+++ b/src/app/frontend/resource/workloads/daemonset/list/component.ts
@@ -18,4 +18,5 @@ import {Component} from '@angular/core';
  selector: 'kd-daemon-set-list-state',
  template: '<kd-daemon-set-list></kd-daemon-set-list>',
 })
-export class DaemonSetList {}
+export class DaemonSetList {
+}
--- a/src/app/frontend/resource/workloads/daemonset/module.ts
+++ b/src/app/frontend/resource/workloads/daemonset/module.ts
--- a/src/app/frontend/resource/workloads/deployment/list/component.ts
+++ b/src/app/frontend/resource/workloads/deployment/list/component.ts
--- a/src/app/frontend/resource/workloads/deployment/module.ts
+++ b/src/app/frontend/resource/workloads/deployment/module.ts
--- a/src/app/frontend/resource/workloads/job/list/component.ts
+++ b/src/app/frontend/resource/workloads/job/list/component.ts
--- a/src/app/frontend/resource/workloads/job/module.ts
+++ b/src/app/frontend/resource/workloads/job/module.ts
--- a/src/app/frontend/resource/workloads/module.ts
+++ b/src/app/frontend/resource/workloads/module.ts
--- a/src/app/frontend/resource/workloads/pod/list/component.ts
+++ b/src/app/frontend/resource/workloads/pod/list/component.ts
--- a/src/app/frontend/resource/workloads/pod/module.ts
+++ b/src/app/frontend/resource/workloads/pod/module.ts
--- a/src/app/frontend/resource/workloads/replicaset/list/component.ts
+++ b/src/app/frontend/resource/workloads/replicaset/list/component.ts
--- a/src/app/frontend/resource/workloads/replicaset/module.ts
+++ b/src/app/frontend/resource/workloads/replicaset/module.ts
--- a/src/app/frontend/resource/workloads/replicationcontroller/list/component.ts
+++ b/src/app/frontend/resource/workloads/replicationcontroller/list/component.ts
--- a/src/app/frontend/resource/workloads/replicationcontroller/module.ts
+++ b/src/app/frontend/resource/workloads/replicationcontroller/module.ts
--- a/src/app/frontend/resource/workloads/statefulset/list/component.ts
+++ b/src/app/frontend/resource/workloads/statefulset/list/component.ts
--- a/src/app/frontend/resource/workloads/statefulset/module.ts
+++ b/src/app/frontend/resource/workloads/statefulset/module.ts
--- a/src/app/frontend/search/module.ts
+++ b/src/app/frontend/search/module.ts
--- a/src/app/frontend/settings/component.ts
+++ b/src/app/frontend/settings/component.ts
--- a/src/app/frontend/settings/global/template.html
+++ b/src/app/frontend/settings/global/template.html
--- a/src/app/frontend/settings/module.ts
+++ b/src/app/frontend/settings/module.ts
--- a/src/app/frontend/shared.module.ts
+++ b/src/app/frontend/shared.module.ts
--- a/src/app/frontend/shell/component.ts
+++ b/src/app/frontend/shell/component.ts
--- a/src/app/frontend/shell/module.ts
+++ b/src/app/frontend/shell/module.ts
--- a/src/app/frontend/shell/styles.scss
+++ b/src/app/frontend/shell/styles.scss
--- a/src/app/frontend/shell/template.html
+++ b/src/app/frontend/shell/template.html
--- a/src/app/frontend/typings/backendapi.d.ts
+++ b/src/app/frontend/typings/backendapi.d.ts
--- a/src/app/frontend/typings/frontendapi.ts
+++ b/src/app/frontend/typings/frontendapi.ts
--- a/src/app/frontend_old/common/errorhandling/errors.js
+++ b/src/app/frontend_old/common/errorhandling/errors.js
--- a/src/app/frontend_old/common/scaling/controller.js
+++ b/src/app/frontend_old/common/scaling/controller.js
--- a/src/app/frontend_old/logs/component.js
+++ b/src/app/frontend_old/logs/component.js