mirror of
https://github.com/Start9Labs/start-os.git
synced 2026-03-30 04:01:58 +00:00
ui tickets addressed
This commit is contained in:
committed by
Drew Ansbacher
parent
3c8b6e4f83
commit
8b03321434
@@ -1,9 +1,19 @@
|
||||
import { Component, Input, ViewChild } from '@angular/core'
|
||||
import { ActivatedRoute } from '@angular/router'
|
||||
import { ApiService } from 'src/app/services/api/embassy-api.service'
|
||||
import { AlertController, IonContent, LoadingController, ModalController, NavController } from '@ionic/angular'
|
||||
import {
|
||||
AlertController,
|
||||
IonContent,
|
||||
LoadingController,
|
||||
ModalController,
|
||||
NavController,
|
||||
} from '@ionic/angular'
|
||||
import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
|
||||
import { Action, PackageDataEntry, PackageMainStatus } from 'src/app/services/patch-db/data-model'
|
||||
import {
|
||||
Action,
|
||||
PackageDataEntry,
|
||||
PackageMainStatus,
|
||||
} from 'src/app/services/patch-db/data-model'
|
||||
import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
|
||||
import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
|
||||
import { Subscription } from 'rxjs'
|
||||
@@ -23,7 +33,7 @@ export class AppActionsPage {
|
||||
pkg: PackageDataEntry
|
||||
subs: Subscription[]
|
||||
|
||||
constructor (
|
||||
constructor(
|
||||
private readonly route: ActivatedRoute,
|
||||
private readonly embassyApi: ApiService,
|
||||
private readonly modalCtrl: ModalController,
|
||||
@@ -33,29 +43,32 @@ export class AppActionsPage {
|
||||
private readonly wizardBaker: WizardBaker,
|
||||
private readonly navCtrl: NavController,
|
||||
private readonly patch: PatchDbService,
|
||||
) { }
|
||||
) {}
|
||||
|
||||
ngOnInit () {
|
||||
ngOnInit() {
|
||||
this.pkgId = this.route.snapshot.paramMap.get('pkgId')
|
||||
this.subs = [
|
||||
this.patch.watch$('package-data', this.pkgId)
|
||||
.subscribe(pkg => {
|
||||
this.patch.watch$('package-data', this.pkgId).subscribe(pkg => {
|
||||
this.pkg = pkg
|
||||
}),
|
||||
]
|
||||
}
|
||||
|
||||
ngAfterViewInit () {
|
||||
ngAfterViewInit() {
|
||||
this.content.scrollToPoint(undefined, 1)
|
||||
}
|
||||
|
||||
ngOnDestroy () {
|
||||
ngOnDestroy() {
|
||||
this.subs.forEach(sub => sub.unsubscribe())
|
||||
}
|
||||
|
||||
async handleAction (action: { key: string, value: Action }) {
|
||||
async handleAction(action: { key: string; value: Action }) {
|
||||
const status = this.pkg.installed.status
|
||||
if ((action.value['allowed-statuses'] as PackageMainStatus[]).includes(status.main.status)) {
|
||||
if (
|
||||
(action.value['allowed-statuses'] as PackageMainStatus[]).includes(
|
||||
status.main.status,
|
||||
)
|
||||
) {
|
||||
if (!isEmptyObject(action.value['input-spec'])) {
|
||||
const modal = await this.modalCtrl.create({
|
||||
component: GenericFormPage,
|
||||
@@ -77,7 +90,9 @@ export class AppActionsPage {
|
||||
} else {
|
||||
const alert = await this.alertCtrl.create({
|
||||
header: 'Confirm',
|
||||
message: `Are you sure you want to execute action "${action.value.name}"? ${action.value.warning || ''}`,
|
||||
message: `Are you sure you want to execute action "${
|
||||
action.value.name
|
||||
}"? ${action.value.warning || ''}`,
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancel',
|
||||
@@ -88,7 +103,7 @@ export class AppActionsPage {
|
||||
handler: () => {
|
||||
this.executeAction(action.key)
|
||||
},
|
||||
cssClass: 'enter-click',
|
||||
cssClass: 'wide-alert enter-click',
|
||||
},
|
||||
],
|
||||
})
|
||||
@@ -100,7 +115,8 @@ export class AppActionsPage {
|
||||
let statusesStr = statuses.join(', ')
|
||||
let error = null
|
||||
if (statuses.length) {
|
||||
if (statuses.length > 1) { // oxford comma
|
||||
if (statuses.length > 1) {
|
||||
// oxford comma
|
||||
statusesStr += ','
|
||||
}
|
||||
statusesStr += ` or ${last}`
|
||||
@@ -111,7 +127,9 @@ export class AppActionsPage {
|
||||
}
|
||||
const alert = await this.alertCtrl.create({
|
||||
header: 'Forbidden',
|
||||
message: error || `Action "${action.value.name}" can only be executed when service is ${statusesStr}`,
|
||||
message:
|
||||
error ||
|
||||
`Action "${action.value.name}" can only be executed when service is ${statusesStr}`,
|
||||
buttons: ['OK'],
|
||||
cssClass: 'alert-error-message enter-click',
|
||||
})
|
||||
@@ -119,7 +137,7 @@ export class AppActionsPage {
|
||||
}
|
||||
}
|
||||
|
||||
async uninstall () {
|
||||
async uninstall() {
|
||||
const { id, title, version, alerts } = this.pkg.manifest
|
||||
const data = await wizardModal(
|
||||
this.modalCtrl,
|
||||
@@ -135,7 +153,10 @@ export class AppActionsPage {
|
||||
return this.navCtrl.navigateRoot('/services')
|
||||
}
|
||||
|
||||
private async executeAction (actionId: string, input?: object): Promise<boolean> {
|
||||
private async executeAction(
|
||||
actionId: string,
|
||||
input?: object,
|
||||
): Promise<boolean> {
|
||||
const loader = await this.loadingCtrl.create({
|
||||
spinner: 'lines',
|
||||
message: 'Executing action...',
|
||||
@@ -158,7 +179,6 @@ export class AppActionsPage {
|
||||
})
|
||||
|
||||
setTimeout(() => successModal.present(), 400)
|
||||
|
||||
} catch (e) {
|
||||
this.errToast.present(e)
|
||||
return false
|
||||
@@ -167,7 +187,7 @@ export class AppActionsPage {
|
||||
}
|
||||
}
|
||||
|
||||
asIsOrder () {
|
||||
asIsOrder() {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,51 +1,63 @@
|
||||
<ion-item-divider>Status</ion-item-divider>
|
||||
<ion-item>
|
||||
<ion-label class="label">
|
||||
<status
|
||||
size="x-large"
|
||||
weight="500"
|
||||
[disconnected]="connectionFailure"
|
||||
[installProgress]="(pkg | installState)?.totalProgress"
|
||||
[rendering]="PR[status.primary]"
|
||||
[sigtermTimeout]="pkg.manifest.main['sigterm-timeout']"
|
||||
></status>
|
||||
</ion-label>
|
||||
<ng-container *ngIf="isInstalled">
|
||||
<ion-button
|
||||
*ngIf="interfaces | hasUi"
|
||||
slot="end"
|
||||
class="action-button"
|
||||
[disabled]="!(pkg.state | isLaunchable: pkgStatus.main.status:interfaces)"
|
||||
(click)="launchUi()"
|
||||
>
|
||||
Launch UI
|
||||
<ion-icon slot="end" name="open-outline"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button
|
||||
*ngIf="!pkgStatus.configured"
|
||||
slot="end"
|
||||
class="action-button"
|
||||
(click)="presentModalConfig()"
|
||||
>
|
||||
Configure
|
||||
</ion-button>
|
||||
<ion-button
|
||||
*ngIf="isRunning"
|
||||
slot="end"
|
||||
class="action-button"
|
||||
color="danger"
|
||||
(click)="stop()"
|
||||
>
|
||||
Stop
|
||||
</ion-button>
|
||||
<ion-button
|
||||
*ngIf="isStopped"
|
||||
slot="end"
|
||||
class="action-button"
|
||||
color="success"
|
||||
(click)="tryStart()"
|
||||
>
|
||||
Start
|
||||
</ion-button>
|
||||
</ng-container>
|
||||
</ion-item>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col sizeXs="12" sizeSm="3">
|
||||
<ion-item>
|
||||
<ion-label class="label">
|
||||
<status
|
||||
size="x-large"
|
||||
weight="500"
|
||||
[disconnected]="connectionFailure"
|
||||
[installProgress]="(pkg | installState)?.totalProgress"
|
||||
[rendering]="PR[status.primary]"
|
||||
[sigtermTimeout]="pkg.manifest.main['sigterm-timeout']"
|
||||
></status>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col sizeXs="12" sizeSm="9">
|
||||
<ion-item>
|
||||
<ng-container *ngIf="isInstalled">
|
||||
<ion-button
|
||||
*ngIf="interfaces | hasUi"
|
||||
slot="end"
|
||||
class="action-button"
|
||||
[disabled]="
|
||||
!(pkg.state | isLaunchable: pkgStatus.main.status:interfaces)
|
||||
"
|
||||
(click)="launchUi()"
|
||||
>
|
||||
Launch UI
|
||||
<ion-icon slot="end" name="open-outline"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button
|
||||
*ngIf="!pkgStatus.configured"
|
||||
slot="end"
|
||||
class="action-button"
|
||||
(click)="presentModalConfig()"
|
||||
>
|
||||
Configure
|
||||
</ion-button>
|
||||
<ion-button
|
||||
*ngIf="isRunning"
|
||||
slot="end"
|
||||
class="action-button"
|
||||
color="danger"
|
||||
(click)="stop()"
|
||||
>
|
||||
Stop
|
||||
</ion-button>
|
||||
<ion-button
|
||||
*ngIf="isStopped"
|
||||
slot="end"
|
||||
class="action-button"
|
||||
color="success"
|
||||
(click)="tryStart()"
|
||||
>
|
||||
Start
|
||||
</ion-button>
|
||||
</ng-container>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
Reference in New Issue
Block a user