Start9/start-os
2
0
Fork 0
mirror of https://github.com/Start9Labs/start-os.git synced 2026-03-27 02:41:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix nav to show from market and add more disk info

Browse Source
This commit is contained in:
Matt Hill
2021-09-12 06:17:05 -06:00
parent cfeeb81fab
commit a91199c46b
9 changed files with 195 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/app/components/install-wizard/complete/complete.component.html
View File

@@ -13,5 +13,5 @@
<div *ngIf="loading$ | async" class="center-spinner">
<ion-spinner color="warning" name="lines"></ion-spinner>
<ion-label class="long-message">{{label}}</ion-label>
<ion-label class="long-message">{{ label }}</ion-label>
</div>

5
ui/src/app/modals/app-restore/app-restore.component.html
View File

@@ -52,6 +52,11 @@
<ion-item-group>
<div *ngFor="let disk of disks">
<ion-item-divider>{{ disk.logicalname }} - {{ disk.capacity | convertBytes }}</ion-item-divider>
<p class="item-subdivider" *ngIf="disk.vendor || disk.model">
{{ disk.vendor }}
<span *ngIf="disk.vendor && disk.model"> - </span>
{{ disk.model }}
</p>
<ion-item button *ngFor="let partition of disk.partitions" (click)="presentModal(partition.logicalname)">
<ion-icon slot="start" name="save-outline" size="large"></ion-icon>
<ion-label>

285
ui/src/app/pages/apps-routes/app-show/app-show.page.html
View File

@@ -1,158 +1,157 @@
<ng-container *ngIf="!!pkg">
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<pwa-back-button></pwa-back-button>
</ion-buttons>
<ion-item lines="none">
<ion-avatar slot="start">
<img [src]="pkg['static-files'].icon" />
</ion-avatar>
<ion-label style="text-overflow: ellipsis;">
<h1 style="font-family: 'Montserrat';" [class.less-large]="pkg.manifest.title.length > 20">
{{ pkg.manifest.title }}
</h1>
<h2>{{ pkg.manifest.version | displayEmver }}</h2>
</ion-label>
</ion-item>
</ion-toolbar>
</ion-header>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<pwa-back-button></pwa-back-button>
</ion-buttons>
<ion-item lines="none">
<ion-avatar slot="start">
<img [src]="pkg['static-files'].icon" />
</ion-avatar>
<ion-label style="text-overflow: ellipsis;">
<h1 style="font-family: 'Montserrat';" [class.less-large]="pkg.manifest.title.length > 20">
{{ pkg.manifest.title }}
</h1>
<h2>{{ pkg.manifest.version | displayEmver }}</h2>
</ion-label>
</ion-item>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item-group>
<!-- ** always ** -->
<ion-item-divider>Status</ion-item-divider>
<ion-item>
<ion-label style="overflow: visible;">
<status [disconnected]="connectionFailure" size="x-large" weight="500" [rendering]="rendering"></status>
</ion-label>
<ion-button slot="end" class="action-button" *ngIf="pkg.state === PackageState.Installed && (pkg.manifest.interfaces | hasUi)" [disabled]="!(pkg.state | isLaunchable : pkg.installed.status.main.status : pkg.manifest.interfaces)" (click)="launchUi()">
<ion-icon slot="start" name="open-outline"></ion-icon>
Open UI
<ion-content>
<ion-item-group>
<!-- ** always ** -->
<ion-item-divider>Status</ion-item-divider>
<ion-item>
<ion-label style="overflow: visible;">
<status [disconnected]="connectionFailure" size="x-large" weight="500" [rendering]="rendering"></status>
</ion-label>
<ion-button slot="end" class="action-button" *ngIf="pkg.state === PackageState.Installed && (pkg.manifest.interfaces | hasUi)" [disabled]="!(pkg.state | isLaunchable : pkg.installed.status.main.status : pkg.manifest.interfaces)" (click)="launchUi()">
<ion-icon slot="start" name="open-outline"></ion-icon>
Open UI
</ion-button>
<ng-container *ngIf="!connectionFailure">
<ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.NeedsConfig" (click)="presentModalConfig()">
Configure
</ion-button>
<ng-container *ngIf="!connectionFailure">
<ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.NeedsConfig" (click)="presentModalConfig()">
Configure
</ion-button>
<ion-button slot="end" class="action-button" *ngIf="[FeStatus.Starting, FeStatus.Running, FeStatus.NeedsAttention] | includes : rendering.feStatus" color="danger" (click)="stop()">
Stop
</ion-button>
<ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.DependencyIssue" (click)="scrollToRequirements()">
Fix
</ion-button>
<ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.Stopped" color="success" (click)="tryStart()">
Start
</ion-button>
</ng-container>
</ion-item>
<ion-button slot="end" class="action-button" *ngIf="[FeStatus.Starting, FeStatus.Running, FeStatus.NeedsAttention] | includes : rendering.feStatus" color="danger" (click)="stop()">
Stop
</ion-button>
<ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.DependencyIssue" (click)="scrollToRequirements()">
Fix
</ion-button>
<ion-button slot="end" class="action-button" *ngIf="rendering.feStatus === FeStatus.Stopped" color="success" (click)="tryStart()">
Start
</ion-button>
</ng-container>
</ion-item>
<!-- ** installed ** -->
<ng-container *ngIf="pkg.state === PackageState.Installed">
<!-- ** !restoring/backing-up ** -->
<ng-container *ngIf="!([PackageMainStatus.BackingUp, PackageMainStatus.Restoring] | includes : mainStatus.status); else maintenance">
<!-- ** health checks ** -->
<ng-container *ngIf="!($any(mainStatus).health | empty)">
<ion-item-divider>Health Checks</ion-item-divider>
<ng-container *ngIf="connectionFailure">
<ion-item *ngFor="let health of $any(mainStatus).health | keyvalue">
<ion-avatar slot="start">
<ion-skeleton-text style="width: 20px; height: 20px; border-radius: 0;"></ion-skeleton-text>
</ion-avatar>
<ion-label>
<ion-skeleton-text style="width: 100px; margin-bottom: 10px;"></ion-skeleton-text>
<ion-skeleton-text style="width: 150px; margin-bottom: 10px;"></ion-skeleton-text>
</ion-label>
</ion-item>
</ng-container>
<ng-container *ngIf="!connectionFailure">
<ion-item *ngFor="let health of $any(mainStatus).health | keyvalue : asIsOrder">
<ion-spinner class="icon-spinner" color="warning" slot="start" *ngIf="['starting', 'loading'] | includes : $any(health.value).result"></ion-spinner>
<ion-icon slot="start" *ngIf="$any(health.value).result === 'success'" name="checkmark-outline" color="success"></ion-icon>
<ion-icon slot="start" *ngIf="$any(health.value).result === 'failure'" name="close" color="danger"></ion-icon>
<ion-icon slot="start" *ngIf="$any(health.value).result === 'disabled'" name="remove-outline" color="dark"></ion-icon>
<ion-label>
<p>{{ health.key }}</p>
<h2>{{ $any(health.value).result }}</h2>
<p *ngIf="$any(health.value).result === 'failure'"><ion-text color="danger">{{ $any(health.value).error }}</ion-text></p>
</ion-label>
</ion-item>
</ng-container>
</ng-container>
<!-- ** menu ** -->
<ion-item-divider>Menu</ion-item-divider>
<ion-item button detail *ngFor="let button of buttons" (click)="button.action()">
<ion-icon slot="start" [name]="button.icon"></ion-icon>
<ion-label>{{ button.title }}</ion-label>
</ion-item>
<!-- ** dependencies ** -->
<ng-container *ngIf="!(currentDependencies | empty)">
<ion-item-divider id="dependencies">Dependencies</ion-item-divider>
<!-- A current-dependency is a subset of the pkg.manifest.dependencies that is currently required as determined by the service config. -->
<ion-item *ngFor="let dep of currentDependencies | keyvalue">
<ion-thumbnail slot="start">
<img [src]="pkg.installed['dependency-info'][dep.key].icon" />
</ion-thumbnail>
<!-- ** installed ** -->
<ng-container *ngIf="pkg.state === PackageState.Installed">
<!-- ** !restoring/backing-up ** -->
<ng-container *ngIf="!([PackageMainStatus.BackingUp, PackageMainStatus.Restoring] | includes : mainStatus.status); else maintenance">
<!-- ** health checks ** -->
<ng-container *ngIf="!($any(mainStatus).health | empty)">
<ion-item-divider>Health Checks</ion-item-divider>
<ng-container *ngIf="connectionFailure">
<ion-item *ngFor="let health of $any(mainStatus).health | keyvalue">
<ion-avatar slot="start">
<ion-skeleton-text style="width: 20px; height: 20px; border-radius: 0;"></ion-skeleton-text>
</ion-avatar>
<ion-label>
<h2 style="font-family: 'Montserrat'">{{ pkg.installed['dependency-info'][dep.key].manifest.title }}</h2>
<p>{{ pkg.manifest.dependencies[dep.key].version | displayEmver }}</p>
<p><ion-text [color]="pkg.installed.status['dependency-errors'][dep.key] ? 'warning' : 'success'">{{ pkg.installed.status['dependency-errors'][dep.key] ? pkg.installed.status['dependency-errors'][dep.key].type : 'satisfied' }}</ion-text></p>
<ion-skeleton-text style="width: 100px; margin-bottom: 10px;"></ion-skeleton-text>
<ion-skeleton-text style="width: 150px; margin-bottom: 10px;"></ion-skeleton-text>
</ion-label>
</ion-item>
</ng-container>
<ng-container *ngIf="!connectionFailure">
<ion-item *ngFor="let health of $any(mainStatus).health | keyvalue : asIsOrder">
<ion-spinner class="icon-spinner" color="warning" slot="start" *ngIf="['starting', 'loading'] | includes : $any(health.value).result"></ion-spinner>
<ion-icon slot="start" *ngIf="$any(health.value).result === 'success'" name="checkmark-outline" color="success"></ion-icon>
<ion-icon slot="start" *ngIf="$any(health.value).result === 'failure'" name="close" color="danger"></ion-icon>
<ion-icon slot="start" *ngIf="$any(health.value).result === 'disabled'" name="remove-outline" color="dark"></ion-icon>
<ion-label>
<p>{{ health.key }}</p>
<h2>{{ $any(health.value).result }}</h2>
<p *ngIf="$any(health.value).result === 'failure'"><ion-text color="danger">{{ $any(health.value).error }}</ion-text></p>
</ion-label>
</ion-item>
</ng-container>
</ng-container>
<ion-button *ngIf="!pkg.installed.status['dependency-errors'][dep.key] || (pkg.installed.status['dependency-errors'][dep.key] && [DependencyErrorType.InterfaceHealthCheckFailed, DependencyErrorType.HealthCheckFailed] | includes : pkg.installed.status['dependency-errors'][dep.key].type)" slot="end" size="small" [routerLink]="['/services', dep.key]">
View
<!-- ** menu ** -->
<ion-item-divider>Menu</ion-item-divider>
<ion-item button detail *ngFor="let button of buttons" (click)="button.action()">
<ion-icon slot="start" [name]="button.icon"></ion-icon>
<ion-label>{{ button.title }}</ion-label>
</ion-item>
<!-- ** dependencies ** -->
<ng-container *ngIf="!(currentDependencies | empty)">
<ion-item-divider id="dependencies">Dependencies</ion-item-divider>
<!-- A current-dependency is a subset of the pkg.manifest.dependencies that is currently required as determined by the service config. -->
<ion-item *ngFor="let dep of currentDependencies | keyvalue">
<ion-thumbnail slot="start">
<img [src]="pkg.installed['dependency-info'][dep.key].icon" />
</ion-thumbnail>
<ion-label>
<h2 style="font-family: 'Montserrat'">{{ pkg.installed['dependency-info'][dep.key].manifest.title }}</h2>
<p>{{ pkg.manifest.dependencies[dep.key].version | displayEmver }}</p>
<p><ion-text [color]="pkg.installed.status['dependency-errors'][dep.key] ? 'warning' : 'success'">{{ pkg.installed.status['dependency-errors'][dep.key] ? pkg.installed.status['dependency-errors'][dep.key].type : 'satisfied' }}</ion-text></p>
</ion-label>
<ion-button *ngIf="!pkg.installed.status['dependency-errors'][dep.key] || (pkg.installed.status['dependency-errors'][dep.key] && [DependencyErrorType.InterfaceHealthCheckFailed, DependencyErrorType.HealthCheckFailed] | includes : pkg.installed.status['dependency-errors'][dep.key].type)" slot="end" size="small" [routerLink]="['/services', dep.key]">
View
</ion-button>
<ng-container *ngIf="pkg.installed.status['dependency-errors'][dep.key]">
<ion-button *ngIf="!patch.data['package-data'][dep.key]" slot="end" size="small" (click)="fixDep('install', dep.key)">
Install
</ion-button>
<ng-container *ngIf="pkg.installed.status['dependency-errors'][dep.key]">
<ion-button *ngIf="!patch.data['package-data'][dep.key]" slot="end" size="small" (click)="fixDep('install', dep.key)">
Install
<ng-container *ngIf="patch.data['package-data'][dep.key] && patch.data['package-data'][dep.key].state === PackageState.Installed">
<ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.NotRunning" slot="end" size="small" [routerLink]="['/services', dep.key]">
Start
</ion-button>
<ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.IncorrectVersion" slot="end" size="small" (click)="fixDep('update', dep.key)">
Update
</ion-button>
<ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.ConfigUnsatisfied" slot="end" size="small" (click)="fixDep('configure', dep.key)">
Configure
</ion-button>
</ng-container>
<ng-container *ngIf="patch.data['package-data'][dep.key] && patch.data['package-data'][dep.key].state === PackageState.Installed">
<ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.NotRunning" slot="end" size="small" [routerLink]="['/services', dep.key]">
Start
</ion-button>
<ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.IncorrectVersion" slot="end" size="small" (click)="fixDep('update', dep.key)">
Update
</ion-button>
<ion-button *ngIf="pkg.installed.status['dependency-errors'][dep.key].type === DependencyErrorType.ConfigUnsatisfied" slot="end" size="small" (click)="fixDep('configure', dep.key)">
Configure
</ion-button>
</ng-container>
<div *ngIf="patch.data['package-data'][dep.key] && patch.data['package-data'][dep.key].state !== PackageState.Installed" slot="end">
<ion-spinner [color]="patch.data['package-data'][dep.key].state === PackageState.Removing ? 'danger' : 'primary'" style="height: 3vh; width: 3vh" name="dots"></ion-spinner>
</div>
</ng-container>
</ion-item>
</ng-container>
<div *ngIf="patch.data['package-data'][dep.key] && patch.data['package-data'][dep.key].state !== PackageState.Installed" slot="end">
<ion-spinner [color]="patch.data['package-data'][dep.key].state === PackageState.Removing ? 'danger' : 'primary'" style="height: 3vh; width: 3vh" name="dots"></ion-spinner>
</div>
</ng-container>
</ion-item>
</ng-container>
<ng-template #maintenance>
App is undergoing maintenance.
</ng-template>
</ng-container>
</ion-item-group>
<!-- @TODO better maintenance messaging -->
<ng-template #maintenance>
Service is undergoing maintenance.
</ng-template>
</ng-container>
</ion-item-group>
<!-- ** installing or updating ** -->
<div *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.state" style="padding: 16px;">
<p>Downloading: {{ installProgress.downloadProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['download-complete'] ? 'success' : 'secondary'"
[value]="installProgress.downloadProgress / 100"
></ion-progress-bar>
<!-- ** installing or updating ** -->
<div *ngIf="[PackageState.Installing, PackageState.Updating] | includes : pkg.state" style="padding: 16px;">
<p>Downloading: {{ installProgress.downloadProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['download-complete'] ? 'success' : 'secondary'"
[value]="installProgress.downloadProgress / 100"
></ion-progress-bar>
<p>Validating: {{ installProgress.validateProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['validation-complete'] ? 'success' : 'secondary'"
[value]="installProgress.validateProgress / 100"
></ion-progress-bar>
<p>Validating: {{ installProgress.validateProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['validation-complete'] ? 'success' : 'secondary'"
[value]="installProgress.validateProgress / 100"
></ion-progress-bar>
<p>Unpacking: {{ installProgress.unpackProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['unpack-complete'] ? 'success' : 'secondary'"
[value]="installProgress.unpackProgress / 100"
></ion-progress-bar>
</div>
</ion-content>
</ng-container>
<p>Unpacking: {{ installProgress.unpackProgress }}%</p>
<ion-progress-bar
[color]="pkg['install-progress']['unpack-complete'] ? 'success' : 'secondary'"
[value]="installProgress.unpackProgress / 100"
></ion-progress-bar>
</div>
</ion-content>

28
ui/src/app/pages/apps-routes/app-show/app-show.page.ts
View File

@@ -58,21 +58,13 @@ export class AppShowPage {
async ngOnInit () {
this.pkgId = this.route.snapshot.paramMap.get('pkgId')
this.setValues(this.patch.data['package-data'][this.pkgId])
this.subs = [
// 1
this.patch.watch$('package-data', this.pkgId)
.subscribe(pkg => {
this.pkg = pkg
this.installProgress = !isEmptyObject(pkg['install-progress']) ? this.packageLoadingService.transform(pkg['install-progress']) : undefined
// we can safely ignore any current dependencies that are not defined in the service manifest
this.currentDependencies = { }
Object.entries(pkg.installed['current-dependencies']).forEach(([id, value]) => {
if (pkg.manifest.dependencies[id]) {
this.currentDependencies[id] = value
}
})
this.rendering = renderPkgStatus(pkg.state, pkg.installed?.status)
this.mainStatus = { ...pkg.installed?.status.main }
this.setValues(pkg)
}),
// 2
this.connectionService.watchFailure$()
@@ -174,6 +166,20 @@ export class AppShowPage {
await modal.present()
}
private setValues (pkg: PackageDataEntry): void {
this.pkg = pkg
this.installProgress = !isEmptyObject(pkg['install-progress']) ? this.packageLoadingService.transform(pkg['install-progress']) : undefined
// we can safely ignore any current dependencies that are not defined in the service manifest
this.currentDependencies = { }
Object.entries(pkg.installed?.['current-dependencies'] || { }).forEach(([id, value]) => {
if (pkg.manifest.dependencies[id]) {
this.currentDependencies[id] = value
}
})
this.mainStatus = { ...pkg.installed?.status.main }
this.rendering = renderPkgStatus(pkg.state, pkg.installed?.status)
}
private async installDep (depId: string): Promise<void> {
const title = this.pkg.installed['dependency-info'][depId].manifest.title
const version = this.pkg.manifest.dependencies[depId].version

2
ui/src/app/pages/marketplace-routes/marketplace.service.ts
View File

@@ -52,7 +52,7 @@ export class MarketplaceService {
const pkgs = await this.api.getMarketplacePkgs({
ids: [{ id, version: version || '*' }],
})
const pkg = pkgs[0]
const pkg = pkgs.find(pkg => pkg.manifest.id == id)
if (pkg) {
this.pkgs[id] = pkg
} else {

5
ui/src/app/pages/server-routes/server-backup/server-backup.page.html
View File

@@ -41,6 +41,11 @@
<ion-item-group>
<div *ngFor="let disk of disks">
<ion-item-divider>{{ disk.logicalname }} - {{ disk.capacity | convertBytes }}</ion-item-divider>
<p class="item-subdivider" *ngIf="disk.vendor || disk.model">
{{ disk.vendor }}
<span *ngIf="disk.vendor && disk.model"> - </span>
{{ disk.model }}
</p>
<ion-item button *ngFor="let partition of disk.partitions" (click)="presentModal(partition.logicalname)">
<ion-icon slot="start" name="save-outline" size="large"></ion-icon>
<ion-label>

6
ui/src/app/services/api/api.fixures.ts
View File

@@ -867,6 +867,8 @@ export module Mock {
export const Disks: RR.GetDisksRes = [
{
logicalname: '/dev/sda',
model: null,
vendor: 'SSK',
partitions: [
{
logicalname: 'sdba1',
@@ -878,11 +880,12 @@ export module Mock {
capacity: 1000000000000,
'embassy-os': {
version: '0.3.0',
name: '', // @TODO what is this?
},
},
{
logicalname: '/dev/sdb',
model: 'JMS567 SATA 6Gb/s bridge',
vendor: 'Samsung',
partitions: [
{
logicalname: 'sdba1',
@@ -900,7 +903,6 @@ export module Mock {
capacity: 10000000000,
'embassy-os': {
version: '0.3.0',
name: '', // @TODO what is this?
},
},
]

25
ui/src/app/services/api/api.types.ts
View File

@@ -290,17 +290,22 @@ export type PlatformType = 'cli' | 'ios' | 'ipad' | 'iphone' | 'android' | 'phab
export interface DiskInfo {
logicalname: string
partitions: {
logicalname: string
label: string | null
capacity: number
used: number | null
}[],
vendor: string | null,
model: string | null,
partitions: PartitionInfo[],
capacity: number
'embassy-os': {
version: string
name: string
} | null
'embassy-os': EmbassyOsDiskInfo | null
}
export interface PartitionInfo {
logicalname: string,
label: string | null,
capacity: number,
used: number | null,
}
export interface EmbassyOsDiskInfo {
version: string,
}
export interface ServerSpecs {

5
ui/src/global.scss
View File

@@ -58,6 +58,11 @@ $subheader-height: 48px;
}
}
.item-subdivider {
padding: 0 16px;
margin-top: 0;
}
.loader {
--spinner-color: var(--ion-color-warning) !important;
z-index: 40000 !important;