Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Move extension install logic to base component #3245

Merged
merged 4 commits into from
Sep 28, 2018
Merged

Move extension install logic to base component #3245

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1582287
move extension install logic to base component
Sep 27, 2018
1676b29
pr updates
Sep 27, 2018
5caa3f3
Merge branch 'dev' into algrunin-integrate-extension-install
Sep 28, 2018
428c026
remove extra deploymentDetails
Sep 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
273 changes: 268 additions & 5 deletions client/src/app/extension-install/base-extension-install-component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,303 @@ import { errorIds } from './../shared/models/error-ids';
import { PortalResources } from './../shared/models/portal-resources';
import { FunctionAppContextComponent } from 'app/shared/components/function-app-context-component';
import { TranslateService } from '@ngx-translate/core';
import { RuntimeExtension } from 'app/shared/models/binding';
import { ExtensionInstallStatus } from 'app/shared/models/extension-install-status';
import { Observable } from 'rxjs/Observable';
import { PortalService } from 'app/shared/services/portal.service';

export abstract class BaseExtensionInstallComponent extends FunctionAppContextComponent {
ammanifold marked this conversation as resolved.
Show resolved Hide resolved

public neededExtensions: RuntimeExtension[];
public runtimeExtensions: RuntimeExtension[];
public allInstalled = false;
public installing = false;
public installJobs: ExtensionInstallStatus[] = [];
public uninstallJobs: ExtensionInstallStatus[] = [];
public installFailed = false;
public correctAppState: boolean;
public oldExtensionIds: string[] = [];

constructor(
componentName: string,
functionAppService: FunctionAppService,
public functionAppService: FunctionAppService,
broadcastService: BroadcastService,
private _aiService: AiService,
public translateService: TranslateService,
public portalService: PortalService,
setBusy?: Function) {
super(componentName, functionAppService, broadcastService, setBusy);
}

takeHostOffline() {
if (this.neededExtensions.length > 0) {
this.installing = true;
ammanifold marked this conversation as resolved.
Show resolved Hide resolved
this.installFailed = false;

// Put host into offline state
this.functionAppService.updateHostState(this.context, 'offline')
.subscribe(r => {
if (r.isSuccessful) {
// Ensure host is offline
this.correctAppState = false;
this.pollHostStatus(0, 'Offline');
} else {
this.showComponentError({
message: this.translateService.instant(PortalResources.functionDev_hostErrorMessage, { error: r.error }),
errorId: errorIds.failedToUpdateHostToOffline,
resourceId: this.context.site.id,
});
}
});
}
}

updateExtensions() {
if (this.oldExtensionIds.length > 0) {
this.removeOldExtensions();
} else {
this.installNeededExtensions();
}
}

installNeededExtensions() {
// Install Extensions
const extensionCalls = this.neededExtensions.map(extension => {
return this.functionAppService.installExtension(this.context, extension);
});

// Check install status
Observable.zip(...extensionCalls).subscribe((r) => {
this.installJobs = r.filter(i => i.isSuccessful).map(i => i.result);
this.pollInstallationStatus(0);
});
}

removeOldExtensions() {
// Uninstall Extensions
const extensionCalls = this.oldExtensionIds.map(id => {
return this.functionAppService.uninstallExtension(this.context, id);
});

// Check uninstall status
return Observable.zip(...extensionCalls).subscribe((r) => {
this.uninstallJobs = r.filter(i => i.isSuccessful).map(i => i.result);
this.pollUninstallationStatus(0);
});
}

getNeededExtensions(runtimeExtensions: RuntimeExtension[]): Observable<RuntimeExtension[]> {
const neededExtensions: RuntimeExtension[] = [];
return this.functionAppService.getHostExtensions(this.context)
.map(r => {
// no extensions installed, all template extensions are required
if (!r.isSuccessful || !r.result.extensions) {
return runtimeExtensions;
}

runtimeExtensions.forEach(runtimeExtension => {
const ext = r.result.extensions.find(installedExtention => {
return installedExtention.id === runtimeExtension.id
&& installedExtention.version === runtimeExtension.version;
});
if (!ext) {
neededExtensions.push(runtimeExtension);

// Check if an older version of the extension needs to be uninstalled
const old = r.result.extensions.find(installedExtention => {
return installedExtention.id === runtimeExtension.id;
});
if (old) {
this.oldExtensionIds.push(runtimeExtension.id);
}
}
});

return neededExtensions;
});
}

setInstallationVariables(neededExtensions: RuntimeExtension[]) {
this.neededExtensions = !!neededExtensions ? neededExtensions : [];
this.allInstalled = this.neededExtensions.length === 0;

if (this.allInstalled) {
return Observable.of(null);
}
return this.functionAppService.getExtensionJobsStatus(this.context)
.map(r => {
if (!r.isSuccessful || r.result.jobs.length === 0) {
return;
}

this.installing = true;
this.neededExtensions.forEach(neededExtension => {
const ext = !!r.result.jobs.find(inProgressExtension => {
return neededExtension.id === inProgressExtension.properties.id
&& neededExtension.version === inProgressExtension.properties.version;
});
this.installing = this.installing && ext;
});
});
}

pollHostStatus(tryNumber: number, desiredState: 'Offline' | 'Running') {
const timeOut = 1000; // milliseconds per request
const maxTries = 60; // should wait 1 minute maximum
setTimeout(() => {
if (tryNumber > maxTries) {
this.showTimeoutError(this.context);
return;
}

if (!this.correctAppState) {
this.functionAppService.getFunctionHostStatus(this.context)
.subscribe(r => {
if (r.isSuccessful && r.result.state) {
this.correctAppState = r.result.state === desiredState;
}
return this.pollHostStatus(tryNumber + 1, desiredState);
});
} else if (desiredState === 'Offline') {
this.updateExtensions();
} else if (desiredState === 'Running') {
this.getNeededExtensions(this.runtimeExtensions)
.subscribe((extensions) => {
this.installing = false;
this.setInstallationVariables(extensions);
});
}
}, timeOut);
}

pollUninstallationStatus(tryNumber: number) {
const timeOut = 1000; // milliseconds per request
const maxTries = 180; // should wait 3 minutes maximum
setTimeout(() => {
if (tryNumber > maxTries) {
this.showTimeoutError(this.context);
return;
}

if (this.uninstallJobs.length > 0) {
this.functionAppService.getExtensionJobsStatus(this.context)
.subscribe(r => {
if (r.isSuccessful) {
if (r.result.jobs.length !== 0) {
return this.pollUninstallationStatus(tryNumber + 1);
} else {
this.installNeededExtensions();
}
} else {
this.showComponentError({
message: this.translateService.instant(PortalResources.extensionUninstallError),
errorId: errorIds.failedToUninstallExtensions,
resourceId: this.context.site.id,
});
}
});
} else {
this.installNeededExtensions();
}
}, timeOut);
}

pollInstallationStatus(timeOut: number) {
setTimeout(() => {
if (timeOut > 600) {
this.getNeededExtensions(this.runtimeExtensions).subscribe((extensions) => {
this.setInstallationVariables(extensions);
if (!this.allInstalled) {
this.showTimeoutError(this.context);
}
});
return;
}

if (this.installJobs.length > 0) {
this.installing = true;
const status = this.installJobs
.filter(job => job && job.id)
.map(job => {
return this.functionAppService.getExtensionInstallStatus(this.context, job.id)
.map(r => {
return {
installStatusResult: r,
job: job,
};
});
});

// No installation to keep track of
// All extension installations resulted in error like 500
if (status.length === 0) {
this.installing = false;
return;
}

Observable.zip(...status).subscribe(responses => {
const job: ExtensionInstallStatus[] = [];
responses.forEach(r => {
const jobInstallationStatusResult = r.installStatusResult;
const jobObject = r.job;
// if failed then show error, remove from status tracking queue
if (jobInstallationStatusResult.isSuccessful && jobInstallationStatusResult.result.status === 'Failed') {
this.showInstallFailed(this.context, jobInstallationStatusResult.result.id);
}
// error status also show up here, error is different from failed
else if (jobInstallationStatusResult.isSuccessful &&
jobInstallationStatusResult.result.status !== 'Succeeded' &&
jobInstallationStatusResult.result.status !== 'Failed') {
job.push(jobInstallationStatusResult.result);
} else if (!jobInstallationStatusResult.isSuccessful) {
job.push(jobObject);
}
});
this.installJobs = job;
this.pollInstallationStatus(timeOut + 1);
});
} else {
// Put host into running state
this.functionAppService.updateHostState(this.context, 'running')
.subscribe(r => {
if (r.isSuccessful) {
// Ensure host is running
this.correctAppState = false;
this.pollHostStatus(0, 'Running');
} else {
this.showComponentError({
message: this.translateService.instant(PortalResources.functionDev_hostErrorMessage, { error: r.error }),
errorId: errorIds.failedToUpdateHostToRunning,
resourceId: this.context.site.id,
});
}
});
}
}, 1000);
}

showTimeoutError(context: FunctionAppContext) {
this.showComponentError({
message: this.translateService.instant(PortalResources.timeoutInstallingFunctionRuntimeExtension),
errorId: errorIds.timeoutInstallingFunctionRuntimeExtension,
resourceId: context.site.id
resourceId: context.site.id,
});

this._aiService.trackEvent(errorIds.timeoutInstallingFunctionRuntimeExtension, {
content: this.translateService.instant(PortalResources.timeoutInstallingFunctionRuntimeExtension)
content: this.translateService.instant(PortalResources.timeoutInstallingFunctionRuntimeExtension),
});
}

showInstallFailed(context: FunctionAppContext, id) {
this.showComponentError({
message: this.translateService.instant(PortalResources.failedToInstallFunctionRuntimeExtensionForId, { installationId: id }),
errorId: errorIds.timeoutInstallingFunctionRuntimeExtension,
resourceId: context.site.id
resourceId: context.site.id,
});

this._aiService.trackEvent(errorIds.timeoutInstallingFunctionRuntimeExtension, {
content: this.translateService.instant(PortalResources.failedToInstallFunctionRuntimeExtension)
content: this.translateService.instant(PortalResources.failedToInstallFunctionRuntimeExtension),
});
}

}
8 changes: 4 additions & 4 deletions client/src/app/extension-install/extension-install.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,26 @@
<i class="fa fa-refresh fa-spin fa-fw"></i> {{ 'installingExtension' | translate }}
</div>
</div>
<div *ngIf="extensions && extensions.length > 0 && !loading && !installing">
<div *ngIf="neededExtensions && neededExtensions.length > 0 && !loading && !installing">
<div class="panel panel-default fit-width">
<div class="panel-heading">
<i class="fa fa-warning"></i> {{ 'extension_install_warning' | translate }}
</div>
<div class="panel-body">
<div *ngIf="!integrateText">{{ 'extension_template_warning' | translate }}</div>
<div *ngIf="integrateText">{{ 'extension_integrate_warning' | translate }}</div>
<div *ngFor="let nugetPackage of extensions">
<div *ngFor="let nugetPackage of neededExtensions">
<i class="fa fa-warning"></i> {{nugetPackage.id}}
</div>
</div>
<div class="panel-footer">
<a class="link left" (click)="installRequiredExtensions()">
<a class="link left" (click)="takeHostOffline()">
Copy link
Contributor

@ehamai ehamai Sep 27, 2018 •
edited by ammanifold

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

takeHostOffline [](start = 46, length = 15)

This changed from installing extensions, to taking the host offline. Is that equivalent? #Resolved

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup :). That's now the first step of the process with the new APIs

In reply to: 221088702 [](ancestors = 221088702)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But where in that function does it actually do anything related to installing? I only see code to take it offline.

In reply to: 221089285 [](ancestors = 221089285,221088702)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ACtually never mind. I see the call to pollHostStatus. takeHostOffline is a bit of a misleading name though. Can you change it back to installExtensions maybe?

In reply to: 221089939 [](ancestors = 221089939,221089285,221088702)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Once it's taken offline it's called to updateExtensions

In reply to: 221089939 [](ancestors = 221089939,221089285,221088702)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure

In reply to: 221090456 [](ancestors = 221090456,221089939,221089285,221088702)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although I think it's best to have that call into the takeHostOffline function

In reply to: 221090757 [](ancestors = 221090757,221090456,221089939,221089285,221088702)

{{ 'extension_install_button' | translate }}
</a>
</div>
</div>
</div>
<div class="panel panel-default fit-width" *ngIf="installationSucceeded && !loading && !installing" role="alert">
<div class="panel panel-default fit-width" *ngIf="allInstalled && !loading && !installing" role="alert">
<div class="panel-heading">
<i class="fa fa-check-circle"></i> {{ 'extension_install_success' | translate }}
</div>
Expand Down