Merge 05d2899 into 6b09d81

AzureFunctions.AngularClient/src/app/function-monitor/monitor-applicationinsights/monitor-applicationinsights.component.html

@@ -0,0 +1,93 @@
+<ng-sidebar-container style="height:100vh" [animate]="true">
+  <div ng-sidebar-content>
+    <command-bar>
+      <command displayText="{{ 'refresh' | translate }}"
+        (click)="refresh()"
+        iconUrl="image/reset.svg"></command>
+
+      <command displayText="{{ 'runInAppInsights' | translate }}"
+        (click)="openAppInsightsQueryEditor()"
+        iconUrl="image/open-external.svg"></command>
+    </command-bar>
+
+    <div id="essentials-container">
+      <div class="essentials-col">
+        <div>
+          <label id="applicationInsightsInstanceLabel">{{ 'appInsightsInstance' | translate }}</label>
+          <div tabindex="0"
+                id="applicationInsightsInstanceValue"
+                aria-labelledby="applicationInsightsInstanceLabel applicationInsightsInstanceValue">
+                <a class="link" (click)="openInAppInsights()" tabindex="0">{{applicationInsightsInstanceName}}</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="essentials-col">
+        <div>
+          <label id="successCountLabel">{{ 'functionMonitor_successAggregate_30days' | translate }}</label>
+          <div tabindex="0"
+                id="successCountValue"
+                class="success"
+                aria-labelledby="successCountLabel successCountValue">
+                {{successCount}}
+          </div>
+        </div>
+      </div>
+
+      <div class="essentials-col">
+        <div>
+          <label id="errorsCountLabel">{{ 'functionMonitor_errorsAggregate_30days' | translate }}</label>
+          <div tabindex="0"
+                id="errorsCountValue"
+                class="fail"
+                aria-labelledby="errorsCountLabel errorsCountValue">
+                {{errorsCount}}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="function-monitor-content">
+        <tbl [items]="invocationTraces" #table="tbl">
+          <tr>
+            <th><tbl-th name="timestamp">{{ ('date' | translate).toUpperCase() }}</tbl-th></th>
+            <th><tbl-th name="success">{{ ('success' | translate).toUpperCase() }}</tbl-th></th>
+            <th><tbl-th name="resultCode">{{ ('resultCode' | translate).toUpperCase() }}</tbl-th></th>
+            <th><tbl-th name="duration">{{ ('duration' | translate).toUpperCase() }}</tbl-th></th>
+            <th><tbl-th name="id">{{ ('operationId' | translate).toUpperCase() }}</tbl-th></th>
+          </tr>
+
+          <tr *ngFor="let trace of invocationTraces">
+            <td><a class="link" (click)="showTraceHistory(trace)">{{trace.timestamp}}</a></td>
+            <td>{{trace.success}}</td>
+            <td>{{trace.resultCode}}</td>
+            <td>{{trace.duration}}</td>
+            <td>{{trace.operationId}}</td>
+          </tr>
+
+          <tr *ngIf="invocationTraces.length === 0">
+            <td *ngIf="isLoading" colspan="5">{{'functionMonitor_loading' | translate}}</td>
+            <td *ngIf="!isLoading" colspan="5">{{'noResults' | translate}}</td>
+          </tr>
+
+        </tbl>
+    </div>
+  </div>
+
+  <ng-sidebar #sidebar [(opened)]="sidePanelOpened"
+    [mode]="'over'"
+    [position]="'right'"
+    [closeOnClickOutside]="true"
+    [trapFocus]="false"
+    [autoFocus]="true"
+    [sidebarClass]="'sidebar-monitor-details'"
+    [ariaLabel]="'Trace Details'"
+    [animate]="true"
+    [closeOnClickBackdrop]="false"
+    [showBackdrop]="false">
+
+    <monitor-details *ngIf="sidePanelOpened" [monitorDetailsInfoInput]="monitorDetailsInfo" (closePanel)="closeSidePanel()">
+    </monitor-details>
+
+  </ng-sidebar>
+</ng-sidebar-container>

AzureFunctions.AngularClient/src/app/function-monitor/monitor-applicationinsights/monitor-applicationinsights.component.scss

@@ -0,0 +1,51 @@
+@import '../../../sass/common/variables';
+
+.function-monitor-content{
+    padding: 24px 24px;
+    width: 100%;
+    height: 100%;
+}
+
+#essentials-container{
+    border-bottom: $border;
+    padding: 10px 20px 12px 20px;
+}
+
+.essentials-col{
+    min-width: 175px;
+    display: inline-block;
+    font-size: 13px;
+
+    label{
+        margin-bottom: 0px;
+        font-size: 11px;
+        font-weight: normal;
+        color: $label-text-color;
+    }
+
+    .link{
+        &:hover{
+            color: $primary-color-hover;
+        }
+    }
+
+    > div{
+        padding: 10px;
+    }
+
+    img{
+        display: inline-block;
+        margin-right: 5px;
+        height: 13px;
+        width: 13px;
+        margin-top: -2px;
+    }
+
+    .success {
+        color: $success-color;
+    }
+
+    .fail {
+        color: $error-color;
+    }
+}

AzureFunctions.AngularClient/src/app/function-monitor/monitor-applicationinsights/monitor-applicationinsights.component.spec.ts

@@ -0,0 +1,3 @@
+describe('MonitorApplicationinsightsComponent', () => {
+
+});

AzureFunctions.AngularClient/src/app/function-monitor/monitor-applicationinsights/monitor-applicationinsights.component.ts

@@ -0,0 +1,106 @@
+import { Component, Input, Injector } from '@angular/core';
+import { ComponentNames } from '../../shared/models/constants';
+import { FeatureComponent } from '../../shared/components/feature-component';
+import { FunctionMonitorInfo, MonitorDetailsInfo } from '../../shared/models/function-monitor';
+import { Observable } from 'rxjs/Observable';
+import { ApplicationInsightsService } from '../../shared/services/application-insights.service';
+import { TranslateService } from '@ngx-translate/core';
+import { PortalResources } from '../../shared/models/portal-resources';
+import { AIInvocationTrace } from '../../shared/models/application-insights';
+import { PortalService } from '../../shared/services/portal.service';
+
+@Component({
+  selector: ComponentNames.monitorApplicationInsights,
+  templateUrl: './monitor-applicationinsights.component.html',
+  styleUrls: ['./../function-monitor.component.scss', './monitor-applicationinsights.component.scss']
+})
+
+export class MonitorApplicationInsightsComponent extends FeatureComponent<FunctionMonitorInfo> {
+
+  @Input() set functionMonitorInfoInput(functionMonitorInfo: FunctionMonitorInfo) {
+    this.isLoading = true;
+    this.successCount = this._translateService.instant(PortalResources.loading);
+    this.errorsCount = this._translateService.instant(PortalResources.loading);
+    this.applicationInsightsInstanceName = this._translateService.instant(PortalResources.loading);
+    this.monitorDetailsInfo = null;
+    this.sidePanelOpened = false;
+    this.setBusy();
+    this.setInput(functionMonitorInfo);
+  }
+
+  public successCount: string;
+  public errorsCount: string;
+  public applicationInsightsInstanceName: string;
+  public functionMonitorInfo: FunctionMonitorInfo;
+  public invocationTraces: AIInvocationTrace[] = [];
+  public isLoading: boolean = true;
+  public monitorDetailsInfo: MonitorDetailsInfo;
+  public sidePanelOpened: boolean = false;
+
+  constructor(
+    private _portalService: PortalService,
+    private _translateService: TranslateService,
+    private _applicationInsightsService: ApplicationInsightsService,
+    injector: Injector) {
+    super(ComponentNames.monitorApplicationInsights, injector, 'dashboard');
+    this.featureName = ComponentNames.functionMonitor;
+  }
+
+  protected setup(functionMonitorInfoInputEvent: Observable<FunctionMonitorInfo>) {
+    return functionMonitorInfoInputEvent
+      .switchMap(functionMonitorInfo => Observable.zip(
+        Observable.of(functionMonitorInfo),
+        this._applicationInsightsService.getLast30DaysSummary(functionMonitorInfo.appInsightsResourceDescriptor.getTrimmedResourceId(), functionMonitorInfo.functionInfo.name),
+        this._applicationInsightsService.getInvocationTraces(functionMonitorInfo.appInsightsResourceDescriptor.getTrimmedResourceId(), functionMonitorInfo.functionInfo.name)
+      ))
+      .do(tuple => {
+        this.functionMonitorInfo = tuple[0];
+        this.invocationTraces = tuple[2];
+        const monthlySummary = tuple[1];
+        this.applicationInsightsInstanceName = this.functionMonitorInfo.appInsightsResourceDescriptor.instanceName;
+
+        this.successCount = monthlySummary.successCount.toString();
+        this.errorsCount = monthlySummary.failedCount.toString();
+        this.isLoading = false;
+      });
+  }
+
+  public showTraceHistory(trace: AIInvocationTrace): void {
+    this.sidePanelOpened = true;
+    this.monitorDetailsInfo = {
+      functionMonitorInfo: this.functionMonitorInfo,
+      operationId: trace.operationId,
+      id: trace.id
+    };
+  }
+
+  public closeSidePanel() {
+      this.sidePanelOpened = false;
+  }
+
+  public refresh() {
+    this.sidePanelOpened = false;
+    this.setInput(this.functionMonitorInfo);
+  }
+
+  public openInAppInsights() {
+    this._portalService.openBlade(
+      {
+          detailBlade: 'AspNetOverview',
+          detailBladeInputs: {
+              id: this.functionMonitorInfo.appInsightsResourceDescriptor.getTrimmedResourceId()
+          },
+          extension: 'AppInsightsExtension'
+      },
+      ComponentNames.functionMonitor);
+  }
+
+  public openAppInsightsQueryEditor() {
+    const url = this._applicationInsightsService.getInvocationTracesDirectUrl(
+      this.functionMonitorInfo.appInsightsResourceDescriptor.getResourceIdForDirectUrl(),
+      this.functionMonitorInfo.functionInfo.name);
+
+    window.open(url, '_blank');
+  }
+
+}

AzureFunctions.AngularClient/src/app/function-monitor/monitor-classic/monitor-classic.component.html

@@ -0,0 +1,33 @@
+<command-bar>
+    <command displayText="{{ 'refresh' | translate }}"
+        (click)="refreshMonitorClassicData()"
+        iconUrl="image/reset.svg"></command>
+</command-bar>
+
+<div class="function-monitor-content">
+
+    <div class="alert alert-warning alert-dismissible" role="alert">
+        <img src="image/appInsights.svg"/>
+        <span [innerHTML]="'monitoring_appInsights' | translate"></span>
+    </div>
+
+    <div id="function-aggregates">
+        <aggregate-block [title]="successAggregateHeading"
+            [value]="successAggregate"
+            class="success-aggregate">
+                {{'functionMonitor_loading' | translate}}
+        </aggregate-block>
+
+        <aggregate-block [title]="errorsAggregateHeading"
+            [value]="errorsAggregate"
+            class="error-aggregate">
+                {{'functionMonitor_loading' | translate}}
+        </aggregate-block>
+
+        <div style="clear: both"></div>
+    </div>
+
+    <table-function-monitor
+        [functionMonitorInfoInput] = "functionMonitorInfo">
+    </table-function-monitor>
+</div>

AzureFunctions.AngularClient/src/app/function-monitor/monitor-classic/monitor-classic.component.scss

@@ -0,0 +1,38 @@
+@import '../../../sass/common/variables';
+
+.alert {
+    img {
+        height: 20px;
+    }
+}
+
+.ai-icon {
+    display:flex;
+    text-align: center;
+    padding-top: 50px;
+    div:nth-child(1) {
+        flex-grow:1;
+        img {
+            height:50px;
+            width: 100%;
+        }
+    }    
+}
+
+.function-monitor-content{
+    padding: 25px 25px;
+    width: 100%;
+    height: 100%;
+
+
+    .success-aggregate {
+        float:left;
+        width: 45%;
+        margin-right:2%
+    }
+
+    .error-aggregate {
+        float:left;
+        width: 45%;
+    }
+}

AzureFunctions.AngularClient/src/app/function-monitor/monitor-classic/monitor-classic.component.spec.ts

@@ -0,0 +1,3 @@
+describe('MonitorClassicComponent', () => {
+
+});