Show future availabilities for each flavour in a new admin UI.

Author: stuartcaunt

src/app/admin/admin.module.ts

@@ -83,6 +83,8 @@ import {
     ExtensionRequestHandlerComponent,
     HypervisorsComponent,
     HypervisorComponent,
+    AvailabilitiesComponent,
+    AvailabilityComponent,
 } from './components';
 import {ClrSpinnerModule} from "@clr/angular";
 
@@ -165,6 +167,8 @@ import {ClrSpinnerModule} from "@clr/angular";
         ExtensionRequestHandlerComponent,
         HypervisorsComponent,
         HypervisorComponent,
+        AvailabilitiesComponent,
+        AvailabilityComponent,
         CloudDevicePipe,
         CloudDeviceAllocationPipe,
         InstanceDeviceAllocationPipe,

src/app/admin/admin.routing.ts

@@ -15,8 +15,10 @@ import {
     SessionsComponent,
     UserComponent,
     ExtensionRequestsComponent,
+    HypervisorsComponent,
+    AvailabilitiesComponent,
     instanceActivate,
-    userActivate, HypervisorsComponent,
+    userActivate,
 } from './components';
 
 export const ROUTES: Routes = [
@@ -38,6 +40,9 @@ export const ROUTES: Routes = [
             {
                 path: 'compute/sessions', component: SessionsComponent,
             },
+            {
+                path: 'compute/availabilities', component: AvailabilitiesComponent,
+            },
             {
                 path: 'compute/extension_requests', component: ExtensionRequestsComponent,
             },

src/app/admin/common/components/compute-header/compute-header.component.html

@@ -11,6 +11,10 @@
                     <clr-icon shape="wrench" class="is-solid"></clr-icon>
                     Sessions
                 </a>
+                <a class="admin-tab" routerLink="/admin/compute/availabilities" routerLinkActive="admin-tab--selected">
+                    <clr-icon shape="calendar" class="is-solid"></clr-icon>
+                    Availabilities
+                </a>
                 <a class="admin-tab" routerLink="/admin/compute/extension_requests" routerLinkActive="admin-tab--selected">
                     <clr-icon shape="clock" class="is-solid"></clr-icon>
                     Extension Requests

src/app/admin/components/availabilities/availabilities.component.html

@@ -0,0 +1,36 @@
+<visa-admin-header></visa-admin-header>
+<visa-compute-admin-header></visa-compute-admin-header>
+
+
+<div class="availabilities-spinner-outer" [hidden]="!loading">
+    <div class="availabilities-spinner">
+        <clr-spinner></clr-spinner>
+    </div>
+</div>
+
+<div *ngIf="!loading" class="availabilities-overview">
+    <div class="admin-container flavours-main">
+        <div class="admin-container--main">
+
+            <clr-select-container *ngIf="multiCloudEnabled" style="margin-bottom: 16px; margin-top: 8px;">
+                <select clrSelect id="cloud" [(ngModel)]="selectedCloudClient">
+                    <option *ngFor="let cloudClient of cloudClients" [ngValue]="cloudClient">{{cloudClient? cloudClient.name + ' cloud provider' : ''}}</option>
+                </select>
+                <clr-control-helper>Please select the cloud provider</clr-control-helper>
+            </clr-select-container>
+
+            <div class="availabilities-header">
+                <h3 class="filters-box-title">Flavour Availabilities</h3>
+                <button type="button" class="btn btn-outline" [disabled]="resetDisabled" (click)="resetCharts()">Reset charts</button>
+            </div>
+
+            <div class="availabilities-content">
+                <visa-admin-availability *ngFor="let availability of availabilities"
+                                        [availability]="availability"
+                                        [axisData]="axisData$"
+                                        [reset]="resetCharts$">
+                </visa-admin-availability>
+            </div>
+        </div>
+    </div>
+</div>

src/app/admin/components/availabilities/availabilities.component.scss

@@ -0,0 +1,43 @@
+.availabilities-overview {
+}
+
+.availabilities-main {
+    margin: 0;
+}
+
+.availabilities-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.availabilities-spinner-outer {
+    position: relative;
+    width: 100%;
+}
+
+.availabilities-spinner {
+    height: 150px;
+    top: 16px;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    z-index: 999999;
+}
+
+.availabilities-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    row-gap: 16px;
+
+    &__button {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+    }
+}

src/app/admin/components/availabilities/availabilities.component.ts

@@ -0,0 +1,156 @@
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {BehaviorSubject, min, Subject} from 'rxjs';
+import gql from 'graphql-tag';
+import {Apollo} from 'apollo-angular';
+import {delay, filter, map, startWith, switchMap, takeUntil, tap} from 'rxjs/operators';
+import {Title} from '@angular/platform-browser';
+import {Hypervisor, DevicePool, Flavour, CloudClient, FlavourAvailabilitiesFuture} from '../../../core/graphql';
+
+@Component({
+    selector: 'visa-admin-availabilities',
+    templateUrl: './availabilities.component.html',
+    styleUrls: ['./availabilities.component.scss'],
+})
+export class AvailabilitiesComponent implements OnInit, OnDestroy {
+
+    private _destroy$: Subject<boolean> = new Subject<boolean>();
+    private _refresh$: Subject<void> = new Subject();
+    private _resetCharts$: Subject<void> = new Subject();
+    private _resetDisabled = true;
+    private _allAvailabilities: FlavourAvailabilitiesFuture[] = [];
+    private _availabilities: FlavourAvailabilitiesFuture[] = [];
+    private _cloudClients: CloudClient[] = [];
+    private _loading: boolean;
+    private _multiCloudEnabled = false;
+    private _selectedCloudClient$: BehaviorSubject<CloudClient> = new BehaviorSubject<CloudClient>(null);
+    private _axisData$: Subject<{min: number, max: number}> = new Subject<{min: number; max: number}>();
+
+    constructor(private readonly _apollo: Apollo,
+                private readonly _titleService: Title) {
+    }
+
+    get loading(): boolean {
+        return this._loading;
+    }
+
+    get availabilities(): FlavourAvailabilitiesFuture[] {
+        return this._availabilities;
+    }
+
+    get cloudClients(): CloudClient[] {
+        return this._cloudClients;
+    }
+
+    get multiCloudEnabled(): boolean {
+        return this._multiCloudEnabled;
+    }
+
+    get selectedCloudClient(): CloudClient {
+        return this._selectedCloudClient$.value;
+    }
+
+    set selectedCloudClient(value: CloudClient) {
+        this._selectedCloudClient$.next(value);
+    }
+
+    get axisData$(): Subject<{ min: number; max: number }> {
+        return this._axisData$;
+    }
+
+    get resetCharts$(): Subject<void> {
+        return this._resetCharts$;
+    }
+
+    get resetDisabled(): boolean {
+        return this._resetDisabled;
+    }
+
+    public ngOnInit(): void {
+        this._titleService.setTitle(`Availabilities | Cloud | Admin | VISA`);
+        this._refresh$
+            .pipe(
+                startWith(0),
+                takeUntil(this._destroy$),
+                tap(() => this._loading = true),
+                delay(250),
+                switchMap(() => this._apollo.query<any>({
+                    query: gql`
+                        query flavourAvailabilitiesFutures {
+                            flavourAvailabilitiesFutures {
+                                flavour {
+                                    id
+                                    name
+                                    memory
+                                    cpu
+                                    cloudId
+                                    devices {
+                                        devicePool {
+                                            id
+                                            name
+                                            description
+                                            resourceClass
+                                        }
+                                        unitCount
+                                    }
+                                }
+                                confidence
+                                availabilities {
+                                    date
+                                    confidence
+                                    units
+                                }
+                            }
+                            cloudClients {
+                                id
+                                name
+                            }
+                        }
+                    `
+                })),
+                map(({data}) => data),
+                tap(() => this._loading = false)
+            )
+            .subscribe(({flavourAvailabilitiesFutures, cloudClients}) => {
+                this._allAvailabilities = flavourAvailabilitiesFutures;
+                this._cloudClients = cloudClients;
+                this.selectedCloudClient = this._cloudClients[0];
+
+                this._multiCloudEnabled = cloudClients.length > 1 || flavourAvailabilitiesFutures
+                    .map(flavourAvailabilitiesFuture => flavourAvailabilitiesFuture.flavour)
+                    .map(flavour => flavour.cloudId || 0)
+                    .filter((value, index, array) => array.indexOf(value) === index)
+                    .length > 1;
+            });
+
+        this._selectedCloudClient$.pipe(
+            takeUntil(this._destroy$),
+            filter(value => !!value),
+        ).subscribe(cloudClient => {
+            const cloudId = cloudClient.id == null ? -1 : cloudClient.id;
+            this._availabilities = this._allAvailabilities
+                .filter(flavourAvailabilitiesFuture => {
+                    const flavour = flavourAvailabilitiesFuture.flavour;
+                    const flavourCloudId = flavour.cloudId == null ? -1 : flavour.cloudId;
+                    return flavourCloudId == cloudId;
+                })
+        });
+
+        this._axisData$.subscribe(() => {
+            this._resetDisabled = false;
+        })
+    }
+
+    public ngOnDestroy(): void {
+        this._destroy$.next(true);
+        this._destroy$.unsubscribe();
+    }
+
+    public onRefresh(): void {
+        this._refresh$.next();
+    }
+
+    public resetCharts(): void {
+        this._resetDisabled = true;
+        this._resetCharts$.next();
+    }
+}

src/app/admin/components/availabilities/availability-chart-data.ts

@@ -0,0 +1,106 @@
+import {Flavour, FlavourAvailability} from "../../../core/graphql";
+import {BehaviorSubject} from "rxjs";
+
+export class AvailabilityChartData {
+
+
+    private _options: any = {
+        chart: {
+            type: 'area',
+            zoomType: 'x',
+            panning: true,
+            panKey: 'shift',
+            events: {
+                selection: (event) => {
+                    if (event.xAxis) {
+                        const min = event.xAxis[0].min;
+                        const max = event.xAxis[0].max;
+                        this._axisData$.next({ min, max });
+                    }
+                    return true; // allow zooming
+                },
+
+            },
+        },
+        title: {
+            text: '',
+        },
+        xAxis: {
+            type: 'datetime',
+            dateTimeLabelFormats: {
+                day: '%e %b %Y',
+                week: '%e %b %Y',
+                month: '%b %Y',
+                year: '%Y'
+            },
+            tickPixelInterval: 150,
+            labels: {
+                style: {
+                    fontSize: 12,
+                    color: '#606060'
+                }
+            },
+            lineColor: '#a0a0a0',
+            tickColor: '#a0a0a0',
+            events: {
+                setExtremes: (event) => {
+                    if (event.trigger === 'pan') {
+                        const {min, max} = event;
+                        this._axisData$.next({ min, max });
+                    }
+                }
+            }
+        },
+        yAxis: {
+            title: '',
+            labels: {
+                style: {
+                    fontSize: 12,
+                    color: '#606060'
+                }
+            },
+            lineColor: '#a0a0a0',
+            tickColor: '#a0a0a0',
+        },
+        tooltip: {
+            // enabled: false,
+        },
+        plotOptions: {
+            series: {
+                step: true,
+                color: '#00a65a',
+                fillColor: '#edfbf1',
+            },
+        },
+        legend: {
+            enabled: false,
+        },
+        credits: {
+            enabled: false,
+        },
+        series: [],
+    }
+
+    get options(): any {
+        return this._options;
+    }
+
+    constructor(flavour: Flavour, availabilities: FlavourAvailability[], private _axisData$: BehaviorSubject<{min: number, max: number}>) {
+        const data = availabilities.map(availability => {
+            return { x: Date.parse(availability.date), y: availability.units };
+        });
+
+        const xMin = Math.min(...data.map(p => p.x));
+        const xMax = Math.max(...data.map(p => p.x)) + 24 * 60 * 60 * 1000;
+        const yMax = Math.max(...data.map(p => p.y)) * 1.1;
+        this._options.xAxis = {...this._options.xAxis, min: xMin, max: xMax};
+        this._options.yAxis = {...this._options.yAxis, min: 0, max: yMax};
+
+        data.push({x: Date.parse('2050-01-01T00:00:00.000'), y: availabilities[availabilities.length - 1].units})
+        this._options.series = [
+            {name: flavour.name, data: data },
+        ];
+
+    }
+
+}