Security Observability: Add image scanning

.gitignore

@@ -95,6 +95,7 @@ src/jetstream/console-database.db
 src/jetstream/config.properties
 src/jetstream/db/dbconf.yml
 src/jetstream/plugins/monocular/chart-repo/chartrepo
+src/jetstream/plugins/analysis/container/analyzers
 
 # Customisations
 

custom-src/deploy/kubernetes/custom-build.sh

@@ -21,4 +21,9 @@ function custom_image_build() {
   # Build and push an image for the Helm Repo Sync Tool
   log "-- Building/publishing Monocular Chart Repo Sync Tool"
   patchAndPushImage stratos-chartsync Dockerfile "${STRATOS_PATH}/src/jetstream/plugins/monocular/chart-repo"
+
+  # Analzyers container
+  log "-- Building/publishing Stratos Analyzers"
+  patchAndPushImage stratos-analyzers Dockerfile "${STRATOS_PATH}/src/jetstream/plugins/analysis/container"
+
 }

custom-src/frontend/app/custom/kubernetes/analysis-report-viewer/analysis-report-selector/analysis-report-selector.component.html

@@ -0,0 +1,18 @@
+<div *ngIf="analyzers$ | async as analyzers">
+
+  <mat-menu #appMenu="matMenu">
+    <button (click)="onSelected(analyzer)" mat-menu-item *ngFor="let analyzer of analyzers">{{ analyzer.title }}</button>
+    <mat-divider></mat-divider>
+    <button (click)="refreshReports($event)" mat-menu-item>
+      <mat-icon>refresh</mat-icon>
+      <span>Refresh</span>
+    </button>
+  </mat-menu>
+
+  <button mat-button [matMenuTriggerFor]="appMenu" *ngIf="analyzers.length > 0">
+    <span>{{ prompt }}</span>
+    <span *ngIf="selection">: {{ selection.title }}</span>
+    <mat-icon>arrow_drop_down</mat-icon>
+  </button>
+
+</div>

custom-src/frontend/app/custom/kubernetes/analysis-report-viewer/analysis-report-selector/analysis-report-selector.component.spec.ts

@@ -0,0 +1,38 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MDAppModule } from './../../../../core/md.module';
+
+import { AnalysisReportSelectorComponent } from './analysis-report-selector.component';
+import { KubernetesAnalysisService } from '../../services/kubernetes.analysis.service';
+import { KubernetesEndpointService } from '../../services/kubernetes-endpoint.service';
+import { KubeBaseGuidMock, KubernetesBaseTestModules } from '../../kubernetes.testing.module';
+
+describe('AnalysisReportSelectorComponent', () => {
+  let component: AnalysisReportSelectorComponent;
+  let fixture: ComponentFixture<AnalysisReportSelectorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AnalysisReportSelectorComponent ],
+      imports: [
+        KubernetesBaseTestModules,
+        MDAppModule
+      ],
+      providers: [
+        KubernetesAnalysisService,
+        KubernetesEndpointService,
+        KubeBaseGuidMock,
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnalysisReportSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

custom-src/frontend/app/custom/kubernetes/analysis-report-viewer/analysis-report-selector/analysis-report-selector.component.ts

@@ -0,0 +1,83 @@
+import { Observable, Subject } from 'rxjs';
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import { KubernetesAnalysisService } from '../../services/kubernetes.analysis.service';
+import { map, first } from 'rxjs/operators';
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-analysis-report-selector',
+  templateUrl: './analysis-report-selector.component.html',
+  styleUrls: ['./analysis-report-selector.component.scss']
+})
+export class AnalysisReportSelectorComponent implements OnInit {
+
+  public selection = { title: 'None' };
+
+  public analyzers$ = new Subject<any>();
+
+  @Input() endpoint;
+  @Input() path;
+  @Input() prompt = 'Overlay Analysis';
+  @Input() allowNone = true;
+  @Input() autoSelect;
+
+  @Output() selected = new EventEmitter<any>();
+  @Output() reportCount = new EventEmitter<number>();
+
+  autoSelected = false;
+
+  constructor(public analysisService: KubernetesAnalysisService) { }
+
+  ngOnInit() {
+    this.analyzers$.pipe(first()).subscribe(reports => {
+      // Auto-select first report
+      if (!this.autoSelected && this.autoSelect && reports.length > 0) {
+        this.onSelected(reports[0]);
+      }
+    });
+
+    this.fetchReports();
+  }
+
+  private fetchReports() {
+    this.analysisService.getByPath(this.endpoint, this.path).pipe(
+      map(d => {
+        const res = [];
+        if (this.allowNone) {
+          res.push({title: 'None'});
+        }
+        if (d) {
+          d.forEach(r => {
+            const c = {... r};
+            const title = c.type.substr(0, 1).toUpperCase() + c.type.substr(1);
+            const age = moment(c.created).fromNow(true);
+            c.title = `${title} (${age})`;
+            res.push(c);
+          });
+        }
+        this.reportCount.next(res.length);
+        return res;
+      })
+    ).subscribe(data => {
+      this.analyzers$.next(data);
+    });
+  }
+
+  // Selection changed
+  public onSelected(d) {
+    this.selection = d;
+    if (!d.id) {
+      this.selected.emit(null);
+    } else {
+      this.selected.next(d);
+    }
+  }
+
+  public refreshReports($event: MouseEvent) {
+    this.analysisService.refresh();
+    this.fetchReports();
+    $event.preventDefault();
+    $event.cancelBubble = true;
+  }
+
+}

custom-src/frontend/app/custom/kubernetes/analysis-report-viewer/analysis-report-viewer.component.html

@@ -0,0 +1 @@
+<template #reportViewer></template>

custom-src/frontend/app/custom/kubernetes/analysis-report-viewer/analysis-report-viewer.component.spec.ts

@@ -0,0 +1,29 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnalysisReportViewerComponent } from './analysis-report-viewer.component';
+import { KubernetesBaseTestModules } from '../kubernetes.testing.module';
+
+describe('AnalysisReportViewerComponent', () => {
+  let component: AnalysisReportViewerComponent;
+  let fixture: ComponentFixture<AnalysisReportViewerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AnalysisReportViewerComponent ],
+      imports: [
+        KubernetesBaseTestModules,
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnalysisReportViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

custom-src/frontend/app/custom/kubernetes/analysis-report-viewer/analysis-report-viewer.component.ts

@@ -0,0 +1,86 @@
+import {
+  Component,
+  ComponentFactoryResolver,
+  ComponentRef,
+  Input,
+  OnDestroy,
+  OnInit,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+
+import { ClairReportViewerComponent } from './clair-report-viewer/clair-report-viewer.component';
+import { KubeScoreReportViewerComponent } from './kube-score-report-viewer/kube-score-report-viewer.component';
+import { PopeyeReportViewerComponent } from './popeye-report-viewer/popeye-report-viewer.component';
+
+export interface IReportViewer {
+  // setReport(report);
+  report: any;
+}
+
+@Component({
+  selector: 'app-analysis-report-viewer',
+  templateUrl: './analysis-report-viewer.component.html',
+  styleUrls: ['./analysis-report-viewer.component.scss']
+})
+export class AnalysisReportViewerComponent implements OnInit, OnDestroy {
+
+  // Component reference for the dynamically created auth form
+  @ViewChild('reportViewer', { read: ViewContainerRef, static: true })
+  public container: ViewContainerRef;
+  private reportComponentRef: ComponentRef<IReportViewer>;
+
+  private id: string;
+
+  @Input('report')
+  set report(report: any) {
+    if (report === null || report.id === this.id) {
+      return;
+    }
+    this.id = report.id;
+    this.updateReport(report);
+  }
+
+  constructor(
+    private resolver: ComponentFactoryResolver,
+  ) { }
+
+  ngOnInit() {
+  }
+
+  updateReport(report) {
+    switch (report.format) {
+      case 'popeye':
+        this.createComponent(PopeyeReportViewerComponent, report);
+        break;
+      case 'kubescore':
+        this.createComponent(KubeScoreReportViewerComponent, report);
+        break;
+      case 'clair':
+        this.createComponent(ClairReportViewerComponent, report);
+        break;
+      }
+  }
+
+  // Dynamically create the component for the report type type
+  createComponent(component: Type<IReportViewer>, report) {
+    if (!component || !this.container) {
+      return;
+    }
+
+    if (this.reportComponentRef) {
+      this.reportComponentRef.destroy();
+    }
+    const factory = this.resolver.resolveComponentFactory<IReportViewer>(component);
+    this.reportComponentRef = this.container.createComponent<IReportViewer>(factory);
+    // this.reportComponentRef.instance.setReport(report);
+    this.reportComponentRef.instance.report = report;
+  }
+
+  ngOnDestroy() {
+    if (this.reportComponentRef) {
+      this.reportComponentRef.destroy();
+    }
+  }
+}

custom-src/frontend/app/custom/kubernetes/analysis-report-viewer/clair-report-viewer/clair-report-detail/clair-report-detail.component.html

@@ -0,0 +1,19 @@
+<div *ngIf="report" class="clair-detail">
+  <div class="clair-detail__header">
+    <div class="clair-detail__header-label"><b>Image: </b>{{ report.name }}</div>
+  </div>
+  <div class="clair-detail__main">
+    <div class="clair-detail__inner">
+      <div class="clair-detail__info-panel">
+        <div class="clair-detail__info">
+          <h1>{{ total }} vulnerabilities detected</h1>
+          <h2 *ngIf="total > 0">{{ patches }} have available patches</h2>
+        </div>
+        <div>
+          <app-clair-report-severity-summary [totals]="totals"></app-clair-report-severity-summary>
+        </div>
+      </div>
+      <app-table *ngIf="total > 0" [dataSource]="dataSource" [columns]="columns"></app-table>
+    </div>  
+  </div>  
+</div>

custom-src/frontend/app/custom/kubernetes/analysis-report-viewer/clair-report-viewer/clair-report-detail/clair-report-detail.component.scss

@@ -0,0 +1,64 @@
+
+.clair-detail {
+
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 104px);
+
+  &__header {
+    align-items: center;
+    display: flex;
+    height: 40px;
+    font-size: 14px;
+    flex: 0 0 40px;
+    border-bottom: 1px solid #ccc;
+    background-color: #eee;
+    font-weight: bold;
+    opacity: 0.7;
+    padding: 0 10px;    
+  }
+
+  &__header-label {
+    flex: 1;
+  }
+
+  &__header-count {
+    background-color: #ccc;
+    border-radius: 6px;
+    flex: 0;
+    font-size: 12px;
+    padding: 2px 10px;
+  }
+
+  &__main {
+    display: flex;
+    flex: 1;
+    height: calc(100vh - 144px);
+    overflow-y: auto;
+  }
+
+  &__inner {
+    width: 100%;
+  }
+
+  &__info {
+    padding: 10px;
+
+    h1 {
+      font-size: 18px;
+    }
+    h2 {
+      font-size: 16px;
+    }
+  }
+
+  &__info-panel {
+    display: flex;
+    flex-direction: row;
+
+    > div {
+      flex: 1;
+    }
+  }
+
+}

custom-src/frontend/app/custom/kubernetes/analysis-report-viewer/clair-report-viewer/clair-report-detail/clair-report-detail.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClairReportDetailComponent } from './clair-report-detail.component';
+
+describe('ClairReportDetailComponent', () => {
+  let component: ClairReportDetailComponent;
+  let fixture: ComponentFixture<ClairReportDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ClairReportDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClairReportDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});