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

basic info checkpoint (#1230)

Browse Source 
* basic info

* preview manifest

* textarea not long

* show error message details always

* reinstall button in marketplace

Co-authored-by: Drew Ansbacher <drew@start9labs.com>
Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>
This commit is contained in:
Drew Ansbacher
2022-02-21 12:44:25 -07:00
committed by GitHub
parent 6a7ab4d188
commit 9b4e5f0805
29 changed files with 956 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/projects/diagnostic-ui/src/app/services/http.service.ts
View File

@@ -5,40 +5,43 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http'
providedIn: 'root',
})
export class HttpService {
constructor(private readonly http: HttpClient) {}
constructor (
private readonly http: HttpClient,
) { }
async rpcRequest<T> (options: RPCOptions): Promise<T> {
async rpcRequest<T>(options: RPCOptions): Promise<T> {
const res = await this.httpRequest<RPCResponse<T>>(options)
if (isRpcError(res)) throw new RpcError(res.error)
if (isRpcSuccess(res)) return res.result
}
async httpRequest<T> (body: RPCOptions): Promise<T> {
async httpRequest<T>(body: RPCOptions): Promise<T> {
const url = `${window.location.protocol}//${window.location.hostname}:${window.location.port}/rpc/v1`
return this.http.post(url, body)
.toPromise().then(a => a as T)
.catch(e => { throw new HttpError(e) })
return this.http
.post(url, body)
.toPromise()
.then(a => a as T)
.catch(e => {
throw new HttpError(e)
})
}
}
function RpcError (e: RPCError['error']): void {
function RpcError(e: RPCError['error']): void {
const { code, message, data } = e
this.code = code
this.message = message
if (typeof data === 'string') {
this.details = e.data
this.revision = null
this.message = `${message}\n\n${data}`
} else {
this.details = data.details
if (data.details) {
this.message = `${message}\n\n${data.details}`
} else {
this.message = message
}
}
}
function HttpError (e: HttpErrorResponse): void {
function HttpError(e: HttpErrorResponse): void {
const { status, statusText } = e
this.code = status
@@ -47,11 +50,15 @@ function HttpError (e: HttpErrorResponse): void {
this.revision = null
}
function isRpcError<Error, Result> (arg: { error: Error } | { result: Result}): arg is { error: Error } {
function isRpcError<Error, Result>(
arg: { error: Error } | { result: Result },
): arg is { error: Error } {
return !!(arg as any).error
}
function isRpcSuccess<Error, Result> (arg: { error: Error } | { result: Result}): arg is { result: Result } {
function isRpcSuccess<Error, Result>(
arg: { error: Error } | { result: Result },
): arg is { result: Result } {
return !!(arg as any).result
}
@@ -84,14 +91,18 @@ export interface RPCSuccess<T> extends RPCBase {
export interface RPCError extends RPCBase {
error: {
code: number,
code: number
message: string
data?: {
details: string
} | string
data?:
| {
details: string
}
| string
}
}
export type RPCResponse<T> = RPCSuccess<T> | RPCError
type HttpError = HttpErrorResponse & { error: { code: string, message: string } }
type HttpError = HttpErrorResponse & {
error: { code: string; message: string }
}

8
frontend/projects/setup-wizard/src/app/app.component.ts
View File

@@ -10,14 +10,14 @@ import { StateService } from './services/state.service'
styleUrls: ['app.component.scss'],
})
export class AppComponent {
constructor (
constructor(
private readonly apiService: ApiService,
private readonly errorToastService: ErrorToastService,
private readonly navCtrl: NavController,
private readonly stateService: StateService,
) { }
) {}
async ngOnInit () {
async ngOnInit() {
try {
const status = await this.apiService.getStatus()
if (status.migrating || status['product-key']) {
@@ -30,7 +30,7 @@ export class AppComponent {
await this.navCtrl.navigateForward(`/recover`)
}
} catch (e) {
this.errorToastService.present(`${e.message}: ${e.details}`)
this.errorToastService.present(e.message)
}
}
}

45
frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.ts
View File

@@ -1,6 +1,15 @@
import { Component } from '@angular/core'
import { AlertController, LoadingController, ModalController, NavController } from '@ionic/angular'
import { ApiService, DiskInfo, DiskRecoverySource } from 'src/app/services/api/api.service'
import {
AlertController,
LoadingController,
ModalController,
NavController,
} from '@ionic/angular'
import {
ApiService,
DiskInfo,
DiskRecoverySource,
} from 'src/app/services/api/api.service'
import { ErrorToastService } from 'src/app/services/error-toast.service'
import { StateService } from 'src/app/services/state.service'
import { PasswordPage } from '../../modals/password/password.page'
@@ -14,7 +23,7 @@ export class EmbassyPage {
storageDrives: DiskInfo[] = []
loading = true
constructor (
constructor(
private readonly apiService: ApiService,
private readonly navCtrl: NavController,
private readonly modalController: ModalController,
@@ -22,26 +31,34 @@ export class EmbassyPage {
private readonly stateService: StateService,
private readonly loadingCtrl: LoadingController,
private readonly errorToastService: ErrorToastService,
) { }
) {}
async ngOnInit () {
async ngOnInit() {
await this.getDrives()
}
tooSmall (drive: DiskInfo) {
tooSmall(drive: DiskInfo) {
return drive.capacity < 34359738368
}
async refresh () {
async refresh() {
this.loading = true
await this.getDrives()
}
async getDrives () {
async getDrives() {
this.loading = true
try {
const { disks, reconnect } = await this.apiService.getDrives()
this.storageDrives = disks.filter(d => !d.partitions.map(p => p.logicalname).includes((this.stateService.recoverySource as DiskRecoverySource)?.logicalname))
this.storageDrives = disks.filter(
d =>
!d.partitions
.map(p => p.logicalname)
.includes(
(this.stateService.recoverySource as DiskRecoverySource)
?.logicalname,
),
)
if (!this.storageDrives.length && reconnect.length) {
const list = `<ul>${reconnect.map(recon => `<li>${recon}</li>`)}</ul>`
const alert = await this.alertCtrl.create({
@@ -63,7 +80,7 @@ export class EmbassyPage {
}
}
async chooseDrive (drive: DiskInfo) {
async chooseDrive(drive: DiskInfo) {
if (!!drive.partitions.find(p => p.used) || !!drive.guid) {
const alert = await this.alertCtrl.create({
header: 'Warning',
@@ -96,7 +113,7 @@ export class EmbassyPage {
}
}
private async presentModalPassword (drive: DiskInfo): Promise<void> {
private async presentModalPassword(drive: DiskInfo): Promise<void> {
const modal = await this.modalController.create({
component: PasswordPage,
componentProps: {
@@ -110,7 +127,7 @@ export class EmbassyPage {
await modal.present()
}
private async setupEmbassy (drive: DiskInfo, password: string): Promise<void> {
private async setupEmbassy(drive: DiskInfo, password: string): Promise<void> {
const loader = await this.loadingCtrl.create({
message: 'Transferring encrypted data. This could take a while...',
})
@@ -125,7 +142,9 @@ export class EmbassyPage {
await this.navCtrl.navigateForward(`/init`)
}
} catch (e) {
this.errorToastService.present(`${e.message}: ${e.details}. Restart Embassy to try again.`)
this.errorToastService.present(
`${e.message}\n\nRestart Embassy to try again.`,
)
console.error(e)
} finally {
loader.dismiss()

80
frontend/projects/setup-wizard/src/app/pages/recover/recover.page.ts
View File

@@ -1,5 +1,11 @@
import { Component, Input } from '@angular/core'
import { AlertController, IonicSafeString, LoadingController, ModalController, NavController } from '@ionic/angular'
import {
AlertController,
IonicSafeString,
LoadingController,
ModalController,
NavController,
} from '@ionic/angular'
import { CifsModal } from 'src/app/modals/cifs-modal/cifs-modal.page'
import { ApiService, DiskBackupTarget } from 'src/app/services/api/api.service'
import { ErrorToastService } from 'src/app/services/error-toast.service'
@@ -17,7 +23,7 @@ export class RecoverPage {
mappedDrives: MappedDisk[] = []
hasShownGuidAlert = false
constructor (
constructor(
private readonly apiService: ApiService,
private readonly navCtrl: NavController,
private readonly modalCtrl: ModalController,
@@ -26,45 +32,48 @@ export class RecoverPage {
private readonly loadingCtrl: LoadingController,
private readonly errorToastService: ErrorToastService,
public readonly stateService: StateService,
) { }
) {}
async ngOnInit () {
async ngOnInit() {
await this.getDrives()
}
async refresh () {
async refresh() {
this.loading = true
await this.getDrives()
}
driveClickable (mapped: MappedDisk) {
return mapped.drive['embassy-os']?.full && (this.stateService.hasProductKey || mapped.is02x)
driveClickable(mapped: MappedDisk) {
return (
mapped.drive['embassy-os']?.full &&
(this.stateService.hasProductKey || mapped.is02x)
)
}
async getDrives () {
async getDrives() {
this.mappedDrives = []
try {
const { disks, reconnect } = await this.apiService.getDrives()
disks.filter(d => d.partitions.length).forEach(d => {
d.partitions.forEach(p => {
const drive: DiskBackupTarget = {
vendor: d.vendor,
model: d.model,
logicalname: p.logicalname,
label: p.label,
capacity: p.capacity,
used: p.used,
'embassy-os': p['embassy-os'],
}
this.mappedDrives.push(
{
disks
.filter(d => d.partitions.length)
.forEach(d => {
d.partitions.forEach(p => {
const drive: DiskBackupTarget = {
vendor: d.vendor,
model: d.model,
logicalname: p.logicalname,
label: p.label,
capacity: p.capacity,
used: p.used,
'embassy-os': p['embassy-os'],
}
this.mappedDrives.push({
hasValidBackup: p['embassy-os']?.full,
is02x: drive['embassy-os']?.version.startsWith('0.2'),
drive,
},
)
})
})
})
})
if (!this.mappedDrives.length && reconnect.length) {
const list = `<ul>${reconnect.map(recon => `<li>${recon}</li>`)}</ul>`
@@ -85,7 +94,11 @@ export class RecoverPage {
if (!!importableDrive && !this.hasShownGuidAlert) {
const alert = await this.alertCtrl.create({
header: 'Embassy Data Drive Detected',
message: new IonicSafeString(`${importableDrive.vendor || 'Unknown Vendor'} - ${importableDrive.model || 'Unknown Model' } contains Embassy data. To use this drive and its data <i>as-is</i>, click "Use Drive". This will complete the setup process.<br /><br /><b>Important</b>. If you are trying to restore from backup or update from 0.2.x, DO NOT click "Use Drive". Instead, click "Cancel" and follow instructions.`),
message: new IonicSafeString(
`${importableDrive.vendor || 'Unknown Vendor'} - ${
importableDrive.model || 'Unknown Model'
} contains Embassy data. To use this drive and its data <i>as-is</i>, click "Use Drive". This will complete the setup process.<br /><br /><b>Important</b>. If you are trying to restore from backup or update from 0.2.x, DO NOT click "Use Drive". Instead, click "Cancel" and follow instructions.`,
),
buttons: [
{
role: 'cancel',
@@ -103,13 +116,13 @@ export class RecoverPage {
this.hasShownGuidAlert = true
}
} catch (e) {
this.errorToastService.present(`${e.message}: ${e.details}`)
this.errorToastService.present(e.message)
} finally {
this.loading = false
}
}
async presentModalCifs (): Promise<void> {
async presentModalCifs(): Promise<void> {
const modal = await this.modalCtrl.create({
component: CifsModal,
})
@@ -130,7 +143,7 @@ export class RecoverPage {
await modal.present()
}
async select (target: DiskBackupTarget) {
async select(target: DiskBackupTarget) {
const is02x = target['embassy-os'].version.startsWith('0.2')
if (this.stateService.hasProductKey) {
@@ -154,7 +167,8 @@ export class RecoverPage {
if (!is02x) {
const alert = await this.alertCtrl.create({
header: 'Error',
message: 'In order to use this image, you must select a drive containing a valid 0.2.x Embassy.',
message:
'In order to use this image, you must select a drive containing a valid 0.2.x Embassy.',
buttons: [
{
role: 'cancel',
@@ -179,7 +193,7 @@ export class RecoverPage {
}
}
private async importDrive (guid: string) {
private async importDrive(guid: string) {
const loader = await this.loadingCtrl.create({
message: 'Importing Drive',
})
@@ -188,13 +202,13 @@ export class RecoverPage {
await this.stateService.importDrive(guid)
await this.navCtrl.navigateForward(`/init`)
} catch (e) {
this.errorToastService.present(`${e.message}: ${e.details}`)
this.errorToastService.present(e.message)
} finally {
loader.dismiss()
}
}
private async selectRecoverySource (logicalname: string, password?: string) {
private async selectRecoverySource(logicalname: string, password?: string) {
this.stateService.recoverySource = {
type: 'disk',
logicalname,
@@ -204,7 +218,6 @@ export class RecoverPage {
}
}
@Component({
selector: 'drive-status',
templateUrl: './drive-status.component.html',
@@ -215,7 +228,6 @@ export class DriveStatusComponent {
@Input() is02x: boolean
}
interface MappedDisk {
is02x: boolean
hasValidBackup: boolean

150
frontend/projects/setup-wizard/src/app/services/api/http.service.ts
View File

@@ -1,5 +1,10 @@
import { Injectable } from '@angular/core'
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http'
import {
HttpClient,
HttpErrorResponse,
HttpHeaders,
HttpParams,
} from '@angular/common/http'
import { Observable } from 'rxjs'
import * as aesjs from 'aes-js'
import * as pbkdf2 from 'pbkdf2'
@@ -11,15 +16,12 @@ export class HttpService {
fullUrl: string
productKey: string
constructor (
private readonly http: HttpClient,
) {
constructor(private readonly http: HttpClient) {
const port = window.location.port
this.fullUrl = `${window.location.protocol}//${window.location.hostname}:${port}/rpc/v1`
}
async rpcRequest<T> (body: RPCOptions, encrypted = true): Promise<T> {
async rpcRequest<T>(body: RPCOptions, encrypted = true): Promise<T> {
const httpOpts = {
method: Method.POST,
body,
@@ -42,17 +44,17 @@ export class HttpService {
if (isRpcSuccess(res)) return res.result
}
async encryptedHttpRequest<T> (httpOpts: {
body: RPCOptions;
url: string;
async encryptedHttpRequest<T>(httpOpts: {
body: RPCOptions
url: string
}): Promise<T> {
const urlIsRelative = httpOpts.url.startsWith('/')
const url = urlIsRelative ?
this.fullUrl + httpOpts.url :
httpOpts.url
const url = urlIsRelative ? this.fullUrl + httpOpts.url : httpOpts.url
const encryptedBody = await AES_CTR.encryptPbkdf2(this.productKey, encodeUtf8(JSON.stringify(httpOpts.body)))
const encryptedBody = await AES_CTR.encryptPbkdf2(
this.productKey,
encodeUtf8(JSON.stringify(httpOpts.body)),
)
const options = {
responseType: 'arraybuffer',
body: encryptedBody.buffer,
@@ -67,9 +69,14 @@ export class HttpService {
const req = this.http.post(url, options.body, options)
return (req)
return req
.toPromise()
.then(res => AES_CTR.decryptPbkdf2(this.productKey, (res as any).body as ArrayBuffer))
.then(res =>
AES_CTR.decryptPbkdf2(
this.productKey,
(res as any).body as ArrayBuffer,
),
)
.then(res => JSON.parse(res))
.catch(e => {
if (!e.status && !e.statusText) {
@@ -80,46 +87,56 @@ export class HttpService {
})
}
async httpRequest<T> (httpOpts: {
body: RPCOptions;
url: string;
async httpRequest<T>(httpOpts: {
body: RPCOptions
url: string
}): Promise<T> {
const urlIsRelative = httpOpts.url.startsWith('/')
const url = urlIsRelative ?
this.fullUrl + httpOpts.url :
httpOpts.url
const url = urlIsRelative ? this.fullUrl + httpOpts.url : httpOpts.url
const options = {
responseType: 'json',
body: httpOpts.body,
observe: 'events',
reportProgress: false,
headers: { 'content-type': 'application/json', accept: 'application/json' },
headers: {
'content-type': 'application/json',
accept: 'application/json',
},
} as any
const req: Observable<{ body: T }> = this.http.post(url, httpOpts.body, options) as any
const req: Observable<{ body: T }> = this.http.post(
url,
httpOpts.body,
options,
) as any
return (req)
return req
.toPromise()
.then(res => res.body)
.catch(e => { throw new HttpError(e) })
.catch(e => {
throw new HttpError(e)
})
}
}
function RpcError (e: RPCError['error']): void {
function RpcError(e: RPCError['error']): void {
const { code, message, data } = e
this.code = code
this.message = message
if (typeof data !== 'string') {
this.details = data.details
if (typeof data === 'string') {
this.message = `${message}\n\n${data}`
} else {
this.details = data
if (data.details) {
this.message = `${message}\n\n${data.details}`
} else {
this.message = message
}
}
}
function HttpError (e: HttpErrorResponse): void {
function HttpError(e: HttpErrorResponse): void {
const { status, statusText } = e
this.code = status
@@ -127,17 +144,21 @@ function HttpError (e: HttpErrorResponse): void {
this.details = null
}
function EncryptionError (e: HttpErrorResponse): void {
function EncryptionError(e: HttpErrorResponse): void {
this.code = null
this.message = 'Invalid Key'
this.details = null
}
function isRpcError<Error, Result> (arg: { error: Error } | { result: Result }): arg is { error: Error } {
function isRpcError<Error, Result>(
arg: { error: Error } | { result: Result },
): arg is { error: Error } {
return !!(arg as any).error
}
function isRpcSuccess<Error, Result> (arg: { error: Error } | { result: Result }): arg is { result: Result } {
function isRpcSuccess<Error, Result>(
arg: { error: Error } | { result: Result },
): arg is { result: Result } {
return !!(arg as any).result
}
@@ -152,7 +173,7 @@ export enum Method {
export interface RPCOptions {
method: string
params?: {
[param: string]: string | number | boolean | object | string[] | number[];
[param: string]: string | number | boolean | object | string[] | number[]
}
}
@@ -172,27 +193,35 @@ export interface RPCSuccess<T> extends RPCBase {
export interface RPCError extends RPCBase {
error: {
code: number,
code: number
message: string
data?: {
details: string
} | string
data?:
| {
details: string
}
| string
}
}
export type RPCResponse<T> = RPCSuccess<T> | RPCError
type HttpError = HttpErrorResponse & { error: { code: string, message: string } }
type HttpError = HttpErrorResponse & {
error: { code: string; message: string }
}
export interface HttpOptions {
method: Method
url: string
headers?: HttpHeaders | {
[header: string]: string | string[]
}
params?: HttpParams | {
[param: string]: string | string[]
}
headers?:
| HttpHeaders
| {
[header: string]: string | string[]
}
params?:
| HttpParams
| {
[param: string]: string | string[]
}
responseType?: 'json' | 'text' | 'arrayBuffer'
withCredentials?: boolean
body?: any
@@ -200,7 +229,10 @@ export interface HttpOptions {
}
type AES_CTR = {
encryptPbkdf2: (secretKey: string, messageBuffer: Uint8Array) => Promise<Uint8Array>
encryptPbkdf2: (
secretKey: string,
messageBuffer: Uint8Array,
) => Promise<Uint8Array>
decryptPbkdf2: (secretKey, arr: ArrayBuffer) => Promise<string>
}
@@ -211,7 +243,10 @@ export const AES_CTR: AES_CTR = {
const key = pbkdf2.pbkdf2Sync(secretKey, salt, 1000, 256 / 8, 'sha256')
const aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(counter))
const aesCtr = new aesjs.ModeOfOperation.ctr(
key,
new aesjs.Counter(counter),
)
const encryptedBytes = aesCtr.encrypt(messageBuffer)
return new Uint8Array([...counter, ...salt, ...encryptedBytes])
},
@@ -223,21 +258,26 @@ export const AES_CTR: AES_CTR = {
const cipher = buff.slice(32)
const key = pbkdf2.pbkdf2Sync(secretKey, salt, 1000, 256 / 8, 'sha256')
const aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(counter))
const aesCtr = new aesjs.ModeOfOperation.ctr(
key,
new aesjs.Counter(counter),
)
const decryptedBytes = aesCtr.decrypt(cipher)
return aesjs.utils.utf8.fromBytes(decryptedBytes)
},
}
export const encode16 = (buffer: Uint8Array) => buffer.reduce((str, byte) => str + byte.toString(16).padStart(2, '0'), '')
export const decode16 = hexString => new Uint8Array(hexString.match(/.{1,2}/g).map(byte => parseInt(byte, 16)))
export const encode16 = (buffer: Uint8Array) =>
buffer.reduce((str, byte) => str + byte.toString(16).padStart(2, '0'), '')
export const decode16 = hexString =>
new Uint8Array(hexString.match(/.{1,2}/g).map(byte => parseInt(byte, 16)))
export function encodeUtf8 (str: string): Uint8Array {
export function encodeUtf8(str: string): Uint8Array {
const encoder = new TextEncoder()
return encoder.encode(str)
}
export function decodeUtf8 (arr: Uint8Array): string {
export function decodeUtf8(arr: Uint8Array): string {
return new TextDecoder().decode(arr)
}
}

2
frontend/projects/setup-wizard/src/app/services/state.service.ts
View File

@@ -52,7 +52,7 @@ export class StateService {
progress = await this.apiService.getRecoveryStatus()
} catch (e) {
this.errorToastService.present(
`${e.message}: ${e.details}.\nRestart Embassy to try again.`,
`${e.message}\n\nRestart Embassy to try again.`,
)
}
if (progress) {

3
frontend/projects/ui/src/app/app.component.html
View File

@@ -133,7 +133,7 @@
<ion-icon name="desktop-outline"></ion-icon>
<ion-icon name="download-outline"></ion-icon>
<ion-icon name="earth-outline"></ion-icon>
<ion-icon name="ellipse"></ion-icon>
<ion-icon name="ellipsis-horizontal-outline"></ion-icon>
<ion-icon name="eye-off-outline"></ion-icon>
<ion-icon name="eye-outline"></ion-icon>
<ion-icon name="file-tray-stacked-outline"></ion-icon>
@@ -164,6 +164,7 @@
<ion-icon name="reload"></ion-icon>
<ion-icon name="remove"></ion-icon>
<ion-icon name="remove-circle-outline"></ion-icon>
<ion-icon name="remove-outline"></ion-icon>
<ion-icon name="rocket-outline"></ion-icon>
<ion-icon name="save-outline"></ion-icon>
<ion-icon name="shield-checkmark-outline"></ion-icon>

277
frontend/projects/ui/src/app/components/form-object/form-object.component.html
View File

@@ -1,23 +1,40 @@
<ion-item-group [formGroup]="formGroup">
<div *ngFor="let entry of formGroup.controls | keyvalue : asIsOrder">
<div *ngFor="let entry of formGroup.controls | keyvalue: asIsOrder">
<!-- union enum -->
<ng-container *ngIf="unionSpec && entry.key === unionSpec.tag.id">
<p class="input-label">{{ unionSpec.tag.name }}</p>
<ion-item>
<ion-button *ngIf="unionSpec.tag.description" class="slot-start" fill="clear" size="small" (click)="presentUnionTagDescription(unionSpec.tag.name, unionSpec.tag.description)">
<ion-button
*ngIf="unionSpec.tag.description"
class="slot-start"
fill="clear"
size="small"
(click)="
presentUnionTagDescription(
unionSpec.tag.name,
unionSpec.tag.description
)
"
>
<ion-icon name="help-circle-outline"></ion-icon>
</ion-button>
<ion-label>{{ unionSpec.tag.name }}</ion-label>
<!-- class enter-click disables the enter click on the modal behind the select -->
<ion-select
[interfaceOptions]="{ message: getWarningText(unionSpec.warning), cssClass: 'enter-click' }"
[interfaceOptions]="{
message: getWarningText(unionSpec.warning),
cssClass: 'enter-click'
}"
slot="end"
placeholder="Select"
[formControlName]="unionSpec.tag.id"
[selectedText]="unionSpec.tag['variant-names'][entry.value.value]"
(ionChange)="updateUnion($event)"
>
<ion-select-option *ngFor="let option of Object.keys(unionSpec.variants)" [value]="option">
<ion-select-option
*ngFor="let option of Object.keys(unionSpec.variants)"
[value]="option"
>
{{ unionSpec.tag['variant-names'][option] }}
</ion-select-option>
</ion-select>
@@ -25,70 +42,124 @@
</ng-container>
<ng-container *ngIf="objectSpec[entry.key] as spec">
<!-- primitive -->
<ng-container *ngIf="['string', 'number', 'boolean', 'enum'] | includes : spec.type">
<ng-container
*ngIf="['string', 'number', 'boolean', 'enum'] | includes: spec.type"
>
<!-- label -->
<h4 class="input-label">
<form-label [data]="{
spec: spec,
new: current && current[entry.key] === undefined,
edited: entry.value.dirty
}"></form-label>
<form-label
[data]="{
spec: spec,
new: current && current[entry.key] === undefined,
edited: entry.value.dirty
}"
></form-label>
</h4>
<!-- string or number -->
<ion-item color="dark" *ngIf="spec.type === 'string' || spec.type === 'number'">
<ion-input
[type]="spec.type === 'string' && spec.masked && !unmasked[entry.key] ? 'password' : 'text'"
[inputmode]="spec.type === 'number' ? 'tel' : 'text'"
<ion-item
color="dark"
*ngIf="spec.type === 'string' || spec.type === 'number'"
>
<ion-textarea
*ngIf="spec.type === 'string' && spec.textarea; else notTextArea"
[placeholder]="spec.placeholder || 'Enter ' + spec.name"
[formControlName]="entry.key"
(ionFocus)="presentAlertChangeWarning(entry.key, spec)"
(ionChange)="handleInputChange()"
>
</ion-input>
<ion-button *ngIf="spec.type === 'string' && spec.masked" slot="end" fill="clear" color="light" (click)="unmasked[entry.key] = !unmasked[entry.key]">
<ion-icon slot="icon-only" [name]="unmasked[entry.key] ? 'eye-off-outline' : 'eye-outline'" size="small"></ion-icon>
</ion-textarea>
<ng-template #notTextArea>
<ion-input
[type]="
spec.type === 'string' && spec.masked && !unmasked[entry.key]
? 'password'
: 'text'
"
[inputmode]="spec.type === 'number' ? 'tel' : 'text'"
[placeholder]="spec.placeholder || 'Enter ' + spec.name"
[formControlName]="entry.key"
(ionFocus)="presentAlertChangeWarning(entry.key, spec)"
(ionChange)="handleInputChange()"
>
</ion-input>
</ng-template>
<ion-button
*ngIf="spec.type === 'string' && spec.masked"
slot="end"
fill="clear"
color="light"
(click)="unmasked[entry.key] = !unmasked[entry.key]"
>
<ion-icon
slot="icon-only"
[name]="unmasked[entry.key] ? 'eye-off-outline' : 'eye-outline'"
size="small"
></ion-icon>
</ion-button>
<ion-note *ngIf="spec.type === 'number' && spec.units" slot="end" color="light" style="font-size: medium;">{{ spec.units }}</ion-note>
<ion-note
*ngIf="spec.type === 'number' && spec.units"
slot="end"
color="light"
style="font-size: medium"
>{{ spec.units }}</ion-note
>
</ion-item>
<!-- boolean -->
<ion-item *ngIf="spec.type === 'boolean'">
<ion-label>{{ spec.name }}</ion-label>
<ion-toggle slot="end" [formControlName]="entry.key" (ionChange)="handleBooleanChange(entry.key, spec)"></ion-toggle>
<ion-toggle
slot="end"
[formControlName]="entry.key"
(ionChange)="handleBooleanChange(entry.key, spec)"
></ion-toggle>
</ion-item>
<!-- enum -->
<ion-item *ngIf="spec.type === 'enum'">
<ion-label>{{ spec.name }}</ion-label>
<!-- class enter-click disables the enter click on the modal behind the select -->
<ion-select
[interfaceOptions]="{ message: getWarningText(spec.warning), cssClass: 'enter-click' }"
[interfaceOptions]="{
message: getWarningText(spec.warning),
cssClass: 'enter-click'
}"
slot="end"
placeholder="Select"
[formControlName]="entry.key"
[selectedText]="spec['value-names'][formGroup.get(entry.key).value]"
>
<ion-select-option *ngFor="let option of spec.values" [value]="option">
<ion-select-option
*ngFor="let option of spec.values"
[value]="option"
>
{{ spec['value-names'][option] }}
</ion-select-option>
</ion-select>
</ion-item>
</ng-container>
<!-- object or union -->
<ng-container *ngIf="spec.type === 'object' || spec.type ==='union'">
<ng-container *ngIf="spec.type === 'object' || spec.type === 'union'">
<!-- label -->
<ion-item-divider (click)="toggleExpandObject(entry.key)" style="cursor: pointer;">
<form-label [data]="{
<ion-item-divider
(click)="toggleExpandObject(entry.key)"
style="cursor: pointer"
>
<form-label
[data]="{
spec: spec,
new: current && current[entry.key] === undefined,
edited: entry.value.dirty
}"
></form-label>
<ion-icon
slot="end"
name="chevron-up"
[ngStyle]="{
'transform': objectDisplay[entry.key].expanded ? 'rotate(0deg)' : 'rotate(180deg)',
'transition': 'transform 0.25s ease-out'
}"
slot="end"
name="chevron-up"
[ngStyle]="{
transform: objectDisplay[entry.key].expanded
? 'rotate(0deg)'
: 'rotate(180deg)',
transition: 'transform 0.25s ease-out'
}"
></ion-icon>
</ion-item-divider>
<!-- body -->
@@ -96,17 +167,18 @@
[id]="getElementId(entry.key)"
[ngStyle]="{
'max-height': objectDisplay[entry.key].height,
'overflow': 'hidden',
overflow: 'hidden',
'transition-property': 'max-height',
'transition-duration': '.25s'
}"
>
>
<div class="nested-wrapper">
<form-object
[objectSpec]="
spec.type === 'union' ?
spec.variants[$any(entry.value).controls[spec.tag.id].value] :
spec.spec"
spec.type === 'union'
? spec.variants[$any(entry.value).controls[spec.tag.id].value]
: spec.spec
"
[formGroup]="$any(entry.value)"
[current]="current ? current[entry.key] : undefined"
[unionSpec]="spec.type === 'union' ? spec : undefined"
@@ -117,15 +189,25 @@
</ng-container>
<!-- list (not enum) -->
<ng-container *ngIf="spec.type === 'list' && spec.subtype !== 'enum'">
<ng-container *ngIf="formGroup.get(entry.key) as formArr" [formArrayName]="entry.key">
<ng-container
*ngIf="formGroup.get(entry.key) as formArr"
[formArrayName]="entry.key"
>
<!-- label -->
<ion-item-divider>
<form-label [data]="{
spec: spec,
new: current && current[entry.key] === undefined,
edited: entry.value.dirty
}"></form-label>
<ion-button fill="clear" color="primary" slot="end" (click)="addListItemWrapper(entry.key, spec)">
<form-label
[data]="{
spec: spec,
new: current && current[entry.key] === undefined,
edited: entry.value.dirty
}"
></form-label>
<ion-button
fill="clear"
color="primary"
slot="end"
(click)="addListItemWrapper(entry.key, spec)"
>
<ion-icon slot="start" name="add"></ion-icon>
Add
</ion-button>
@@ -133,25 +215,38 @@
<!-- body -->
<div class="nested-wrapper">
<div
*ngFor="let abstractControl of $any(formArr).controls; let i = index;"
*ngFor="
let abstractControl of $any(formArr).controls;
let i = index
"
class="ion-padding-top"
>
<!-- nested -->
<ng-container *ngIf="spec.subtype === 'object' || spec.subtype === 'union'">
<ng-container
*ngIf="spec.subtype === 'object' || spec.subtype === 'union'"
>
<!-- nested label -->
<ion-item button (click)="toggleExpandListObject(entry.key, i)">
<form-label [data]="{
spec: $any({ name: objectListDisplay[entry.key][i].displayAs || 'Entry ' + (i + 1) }),
new: false,
edited: abstractControl.dirty,
invalid: abstractControl.invalid
}"></form-label>
<form-label
[data]="{
spec: $any({
name:
objectListDisplay[entry.key][i].displayAs ||
'Entry ' + (i + 1)
}),
new: false,
edited: abstractControl.dirty,
invalid: abstractControl.invalid
}"
></form-label>
<ion-icon
slot="end"
name="chevron-up"
[ngStyle]="{
'transform': objectListDisplay[entry.key][i].expanded ? 'rotate(0deg)' : 'rotate(180deg)',
'transition': 'transform 0.4s ease-out'
transform: objectListDisplay[entry.key][i].expanded
? 'rotate(0deg)'
: 'rotate(180deg)',
transition: 'transform 0.4s ease-out'
}"
></ion-icon>
</ion-item>
@@ -160,25 +255,41 @@
[id]="getElementId(entry.key, i)"
[ngStyle]="{
'max-height': objectListDisplay[entry.key][i].height,
'overflow': 'hidden',
overflow: 'hidden',
'transition-property': 'max-height',
'transition-duration': '.5s',
'transition-delay': '.05s'
}"
>
>
<form-object
[objectSpec]="
spec.subtype === 'union' ?
$any(spec.spec).variants[abstractControl.controls[$any(spec.spec).tag.id].value] :
$any(spec.spec).spec"
spec.subtype === 'union'
? $any(spec.spec).variants[
abstractControl.controls[$any(spec.spec).tag.id]
.value
]
: $any(spec.spec).spec
"
[formGroup]="abstractControl"
[current]="current && current[entry.key] ? current[entry.key][i] : undefined"
[unionSpec]="spec.subtype === 'union' ? $any(spec.spec) : undefined"
(onInputChange)="updateLabel(entry.key, i, spec.spec['display-as'])"
[current]="
current && current[entry.key]
? current[entry.key][i]
: undefined
"
[unionSpec]="
spec.subtype === 'union' ? $any(spec.spec) : undefined
"
(onInputChange)="
updateLabel(entry.key, i, spec.spec['display-as'])
"
(onExpand)="resize(entry.key, i)"
></form-object>
<div style="text-align: right; padding-top: 12px;">
<ion-button fill="clear" (click)="presentAlertDelete(entry.key, i)" color="danger">
<div style="text-align: right; padding-top: 12px">
<ion-button
fill="clear"
(click)="presentAlertDelete(entry.key, i)"
color="danger"
>
<ion-icon slot="start" name="close"></ion-icon>
Delete
</ion-button>
@@ -186,16 +297,24 @@
</div>
</ng-container>
<!-- string or number -->
<ion-item-group *ngIf="spec.subtype === 'string' || spec.subtype === 'number'">
<ion-item-group
*ngIf="spec.subtype === 'string' || spec.subtype === 'number'"
>
<ion-item color="dark">
<ion-input
[type]="$any(spec.spec).masked ? 'password' : 'text'"
[inputmode]="spec.subtype === 'number' ? 'tel' : 'text'"
[placeholder]="$any(spec.spec).placeholder || 'Enter ' + spec.name"
[placeholder]="
$any(spec.spec).placeholder || 'Enter ' + spec.name
"
[formControlName]="i"
>
</ion-input>
<ion-button slot="end" color="danger" (click)="presentAlertDelete(entry.key, i)">
<ion-button
slot="end"
color="danger"
(click)="presentAlertDelete(entry.key, i)"
>
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-item>
@@ -212,18 +331,28 @@
</ng-container>
<!-- list (enum) -->
<ng-container *ngIf="spec.type === 'list' && spec.subtype === 'enum'">
<ng-container *ngIf="formGroup.get(entry.key) as formArr" [formArrayName]="entry.key">
<ng-container
*ngIf="formGroup.get(entry.key) as formArr"
[formArrayName]="entry.key"
>
<!-- label -->
<p class="input-label">
<form-label [data]="{
spec: spec,
new: current && current[entry.key] === undefined,
edited: entry.value.dirty
}"></form-label>
<form-label
[data]="{
spec: spec,
new: current && current[entry.key] === undefined,
edited: entry.value.dirty
}"
></form-label>
</p>
<!-- list -->
<ion-item button detail="false" color="dark" (click)="presentModalEnumList(entry.key, $any(spec), formArr.value)">
<ion-label style="white-space: nowrap !important;">
<ion-item
button
detail="false"
color="dark"
(click)="presentModalEnumList(entry.key, $any(spec), formArr.value)"
>
<ion-label style="white-space: nowrap !important">
<h2>{{ getEnumListDisplay(formArr.value, $any(spec.spec)) }}</h2>
</ion-label>
<ion-button slot="end" fill="clear" color="light">
@@ -240,4 +369,4 @@
</form-error>
</ng-container>
</div>
</ion-item-group>
</ion-item-group>

7
frontend/projects/ui/src/app/pages/developer-routes/dev-config/dev-config.page.scss
View File

@@ -1,7 +0,0 @@
.centered{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: scale(2);
}

4
frontend/projects/ui/src/app/pages/developer-routes/dev-config/dev-config.page.ts
View File

@@ -75,9 +75,7 @@ export class DevConfigPage {
value: this.code,
})
} catch (e) {
this.errToast.present({
message: 'Auto save error: Your changes are not saved.',
} as any)
this.errToast.present(e)
} finally {
this.saving = false
}

4
frontend/projects/ui/src/app/pages/developer-routes/dev-instructions/dev-instructions.page.ts
View File

@@ -59,9 +59,7 @@ export class DevInstructionsPage {
value: this.code,
})
} catch (e) {
this.errToast.present({
message: 'Auto save error: Your changes are not saved.',
} as any)
this.errToast.present(e)
} finally {
this.saving = false
}

30
frontend/projects/ui/src/app/pages/developer-routes/dev-manifest/dev-manifest.module.ts Normal file
View File

@@ -0,0 +1,30 @@
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { IonicModule } from '@ionic/angular'
import { RouterModule, Routes } from '@angular/router'
import { DevManifestPage } from './dev-manifest.page'
import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
import { BackupReportPageModule } from 'src/app/modals/backup-report/backup-report.module'
import { FormsModule } from '@angular/forms'
import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor'
const routes: Routes = [
{
path: '',
component: DevManifestPage,
},
]
@NgModule({
imports: [
CommonModule,
IonicModule,
RouterModule.forChild(routes),
BadgeMenuComponentModule,
BackupReportPageModule,
FormsModule,
MonacoEditorModule,
],
declarations: [DevManifestPage],
})
export class DevManifestPageModule {}

17
frontend/projects/ui/src/app/pages/developer-routes/dev-manifest/dev-manifest.page.html Normal file
View File

@@ -0,0 +1,17 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button
[defaultHref]="'/developer/projects/' + projectId"
></ion-back-button>
</ion-buttons>
<ion-title> Manifest </ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ngx-monaco-editor
[options]="editorOptions"
[(ngModel)]="manifest"
></ngx-monaco-editor>
</ion-content>

0
frontend/projects/ui/src/app/pages/developer-routes/dev-manifest/dev-manifest.page.scss Normal file
View File

32
frontend/projects/ui/src/app/pages/developer-routes/dev-manifest/dev-manifest.page.ts Normal file
View File

@@ -0,0 +1,32 @@
import { Component } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import * as yaml from 'js-yaml'
import { take } from 'rxjs/operators'
import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
@Component({
selector: 'dev-manifest',
templateUrl: 'dev-manifest.page.html',
styleUrls: ['dev-manifest.page.scss'],
})
export class DevManifestPage {
projectId: string
editorOptions = { theme: 'vs-dark', language: 'yaml', readOnly: true }
manifest: string = ''
constructor(
private readonly route: ActivatedRoute,
private readonly patchDb: PatchDbService,
) {}
ngOnInit() {
this.projectId = this.route.snapshot.paramMap.get('projectId')
this.patchDb
.watch$('ui', 'dev', this.projectId)
.pipe(take(1))
.subscribe(devData => {
this.manifest = yaml.dump(devData['basic-info'])
})
}
}

6
frontend/projects/ui/src/app/pages/developer-routes/developer-list/developer-list.page.html
View File

@@ -29,11 +29,9 @@
<ion-button
slot="end"
fill="clear"
color="danger"
(click)="presentAlertDelete(entry.key, $event)"
(click)="presentAction(entry.key, $event)"
>
<ion-icon slot="start" name="close"></ion-icon>
Delete
<ion-icon name="ellipsis-horizontal-outline"></ion-icon>
</ion-button>
</ion-item>
</ion-content>

82
frontend/projects/ui/src/app/pages/developer-routes/developer-list/developer-list.page.ts
View File

@@ -1,5 +1,7 @@
import { Component } from '@angular/core'
import {
ActionSheetButton,
ActionSheetController,
AlertController,
LoadingController,
ModalController,
@@ -15,7 +17,6 @@ import { ConfigSpec } from 'src/app/pkg-config/config-types'
import * as yaml from 'js-yaml'
import { v4 } from 'uuid'
import { DevData } from 'src/app/services/patch-db/data-model'
import { Subscription } from 'rxjs'
import { ErrorToastService } from 'src/app/services/error-toast.service'
import { ActivatedRoute } from '@angular/router'
import { DestroyService } from '@start9labs/shared'
@@ -40,6 +41,7 @@ export class DeveloperListPage {
private readonly route: ActivatedRoute,
private readonly destroy$: DestroyService,
private readonly patch: PatchDbService,
private readonly actionCtrl: ActionSheetController,
) {}
ngOnInit() {
@@ -75,6 +77,60 @@ export class DeveloperListPage {
await modal.present()
}
async presentAction(id: string, event: Event) {
event.stopPropagation()
const buttons: ActionSheetButton[] = [
{
text: 'Edit Name',
icon: 'pencil',
handler: () => {
this.openEditNameModal(id)
},
},
{
text: 'Delete',
icon: 'trash',
role: 'destructive',
handler: () => {
this.presentAlertDelete(id)
},
},
]
const action = await this.actionCtrl.create({
header: this.devData[id].name,
subHeader: 'Manage project',
mode: 'ios',
buttons,
})
await action.present()
}
async openEditNameModal(id: string) {
const curName = this.devData[id].name
const options: GenericInputOptions = {
title: 'Edit Name',
message: 'Edit the name of your project.',
label: 'Name',
useMask: false,
placeholder: curName,
nullable: true,
initialValue: curName,
buttonText: 'Save',
submitFn: (value: string) => this.editName(id, value),
}
const modal = await this.modalCtrl.create({
componentProps: { options },
cssClass: 'alertlike-modal',
presentingElement: await this.modalCtrl.getTop(),
component: GenericInputComponent,
})
await modal.present()
}
async createProject(name: string) {
// fail silently if duplicate project name
if (
@@ -104,14 +160,13 @@ export class DeveloperListPage {
await this.api.setDbValue({ pointer: `/dev`, value: { [id]: def } })
}
} catch (e) {
this.errToast.present({ message: `Error saving project data` } as any)
this.errToast.present(e)
} finally {
loader.dismiss()
}
}
async presentAlertDelete(id: string, event: Event) {
event.stopPropagation()
async presentAlertDelete(id: string) {
const alert = await this.alertCtrl.create({
header: 'Caution',
message: `Are you sure you want to delete this project?`,
@@ -132,6 +187,23 @@ export class DeveloperListPage {
await alert.present()
}
async editName(id: string, newName: string) {
const loader = await this.loadingCtrl.create({
spinner: 'lines',
message: 'Saving...',
cssClass: 'loader',
})
await loader.present()
try {
await this.api.setDbValue({ pointer: `/dev/${id}/name`, value: newName })
} catch (e) {
this.errToast.present(e)
} finally {
loader.dismiss()
}
}
async delete(id: string) {
const loader = await this.loadingCtrl.create({
spinner: 'lines',
@@ -145,7 +217,7 @@ export class DeveloperListPage {
delete devDataToSave[id]
await this.api.setDbValue({ pointer: `/dev`, value: devDataToSave })
} catch (e) {
this.errToast.present({ message: `Error deleting project data` } as any)
this.errToast.present(e)
} finally {
loader.dismiss()
}

8
frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.module.ts
View File

@@ -5,6 +5,10 @@ import { RouterModule, Routes } from '@angular/router'
import { DeveloperMenuPage } from './developer-menu.page'
import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
import { BackupReportPageModule } from 'src/app/modals/backup-report/backup-report.module'
import { GenericFormPageModule } from 'src/app/modals/generic-form/generic-form.module'
import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor'
import { FormsModule } from '@angular/forms'
import { SharedPipesModule } from '../../../../../../shared/src/pipes/shared/shared.module'
const routes: Routes = [
{
@@ -20,6 +24,10 @@ const routes: Routes = [
RouterModule.forChild(routes),
BadgeMenuComponentModule,
BackupReportPageModule,
GenericFormPageModule,
FormsModule,
MonacoEditorModule,
SharedPipesModule,
],
declarations: [DeveloperMenuPage],
})

23
frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.html
View File

@@ -4,11 +4,32 @@
<ion-back-button defaultHref="/developer"></ion-back-button>
</ion-buttons>
<ion-title>{{ patchDb.data.ui.dev[projectId].name}}</ion-title>
<ion-buttons slot="end">
<ion-button routerLink="manifest">View Manifest</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item-divider>Components</ion-item-divider>
<ion-item button (click)="openBasicInfoModal()">
<ion-icon slot="start" name="information-circle-outline"></ion-icon>
<ion-label>
<h2>Basic Info</h2>
<p>Complete basic info for your package</p>
</ion-label>
<ion-icon
slot="end"
color="success"
name="checkmark"
*ngIf="!(projectData['basic-info'] | empty)"
></ion-icon>
<ion-icon
slot="end"
color="warning"
name="remove-outline"
*ngIf="projectData['basic-info'] | empty"
></ion-icon>
</ion-item>
<ion-item button detail routerLink="instructions" routerDirection="forward">
<ion-icon slot="start" name="list-outline"></ion-icon>
<ion-label>

70
frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.ts
View File

@@ -1,20 +1,90 @@
import { Component } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { LoadingController, ModalController } from '@ionic/angular'
import { GenericFormPage } from 'src/app/modals/generic-form/generic-form.page'
import { BasicInfo, getBasicInfoSpec } from './form-info'
import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { ErrorToastService } from 'src/app/services/error-toast.service'
import { takeUntil } from 'rxjs/operators'
import { DevProjectData } from 'src/app/services/patch-db/data-model'
import { DestroyService } from '../../../../../../shared/src/services/destroy.service'
import * as yaml from 'js-yaml'
@Component({
selector: 'developer-menu',
templateUrl: 'developer-menu.page.html',
styleUrls: ['developer-menu.page.scss'],
providers: [DestroyService],
})
export class DeveloperMenuPage {
projectId: string
projectData: DevProjectData
constructor(
private readonly route: ActivatedRoute,
private readonly modalCtrl: ModalController,
private readonly loadingCtrl: LoadingController,
private readonly api: ApiService,
private readonly errToast: ErrorToastService,
private readonly destroy$: DestroyService,
public readonly patchDb: PatchDbService,
) {}
ngOnInit() {
this.projectId = this.route.snapshot.paramMap.get('projectId')
this.patchDb
.watch$('ui', 'dev', this.projectId)
.pipe(takeUntil(this.destroy$))
.subscribe(pd => {
this.projectData = pd
})
}
async openBasicInfoModal() {
const modal = await this.modalCtrl.create({
component: GenericFormPage,
componentProps: {
title: 'Basic Info',
spec: getBasicInfoSpec(this.projectData),
buttons: [
{
text: 'Save',
handler: basicInfo => {
basicInfo.description = {
short: basicInfo.short,
long: basicInfo.long,
}
delete basicInfo.short
delete basicInfo.long
this.saveBasicInfo(basicInfo as BasicInfo)
},
isSubmit: true,
},
],
},
})
await modal.present()
}
async saveBasicInfo(basicInfo: BasicInfo) {
const loader = await this.loadingCtrl.create({
spinner: 'lines',
message: 'Saving...',
cssClass: 'loader',
})
await loader.present()
try {
await this.api.setDbValue({
pointer: `/dev/${this.projectId}/basic-info`,
value: basicInfo,
})
} catch (e) {
this.errToast.present(e)
} finally {
loader.dismiss()
}
}
}

164
frontend/projects/ui/src/app/pages/developer-routes/developer-menu/form-info.ts Normal file
View File

@@ -0,0 +1,164 @@
import { ConfigSpec } from 'src/app/pkg-config/config-types'
import { DevProjectData } from 'src/app/services/patch-db/data-model'
export type BasicInfo = {
id: string
title: string
'service-version-number': string
'release-notes': string
license: string
'wrapper-repo': string
'upstream-repo'?: string
'support-site'?: string
'marketing-site'?: string
description: {
short: string
long: string
}
}
export function getBasicInfoSpec(devData: DevProjectData): ConfigSpec {
const basicInfo = devData['basic-info']
return {
id: {
type: 'string',
name: 'ID',
description: 'The package identifier used by the OS',
placeholder: 'e.g. bitcoind',
nullable: false,
masked: false,
copyable: true,
pattern: '^([a-z][a-z0-9]*)(-[a-z0-9]+)*$',
'pattern-description': 'Must be kebab case',
default: basicInfo?.id,
},
title: {
type: 'string',
name: 'Title',
description: 'A human readable service title',
placeholder: 'e.g. Bitcoin Core',
nullable: false,
masked: false,
copyable: true,
default: basicInfo ? basicInfo.title : devData.name,
},
'service-version-number': {
type: 'string',
name: 'Service Version Number',
description:
'Service version - accepts up to four digits, where the last confirms to revisions necessary for EmbassyOS - see documentation: https://github.com/Start9Labs/emver-rs. This value will change with each release of the service',
placeholder: 'e.g. 0.1.2.3',
nullable: false,
masked: false,
copyable: true,
pattern: '^([0-9]+).([0-9]+).([0-9]+).([0-9]+)$',
'pattern-description': 'Must be valid Emver version',
default: basicInfo?.['service-version-number'],
},
'release-notes': {
type: 'string',
name: 'Release Notes',
description: 'A human readable service title',
placeholder: 'e.g. Bitcoin Core',
nullable: false,
masked: false,
copyable: true,
textarea: true,
default: basicInfo?.['release-notes'],
},
license: {
type: 'enum',
name: 'License',
values: [
'gnu-agpl-v3',
'gnu-gpl-v3',
'gnu-lgpl-v3',
'mozilla-public-license-2.0',
'apache-license-2.0',
'mit',
'boost-software-license-1.0',
'the-unlicense',
'custom',
],
'value-names': {
'gnu-agpl-v3': 'GNU AGPLv3',
'gnu-gpl-v3': 'GNU GPLv3',
'gnu-lgpl-v3': 'GNU LGPLv3',
'mozilla-public-license-2.0': 'Mozilla Public License 2.0',
'apache-license-2.0': 'Apache License 2.0',
mit: 'mit',
'boost-software-license-1.0': 'Boost Software License 1.0',
'the-unlicense': 'The Unlicense',
custom: 'Custom',
},
description: 'Example description for enum select',
default: 'mit',
},
'wrapper-repo': {
type: 'string',
name: 'Wrapper Repo',
description:
'The Start9 wrapper repository URL for the package. This repo contains the manifest file (this), any scripts necessary for configuration, backups, actions, or health checks',
placeholder: 'e.g. www.github.com/example',
nullable: false,
masked: false,
copyable: true,
default: basicInfo?.['wrapper-repo'],
},
'upstream-repo': {
type: 'string',
name: 'Upstream Repo',
description: 'The original project repository URL',
placeholder: 'e.g. www.github.com/example',
nullable: true,
masked: false,
copyable: true,
default: basicInfo?.['upstream-repo'],
},
'support-site': {
type: 'string',
name: 'Support Site',
description: 'URL to the support site / channel for the project',
placeholder: 'e.g. www.start9labs.com',
nullable: true,
masked: false,
copyable: true,
default: basicInfo?.['support-site'],
},
'marketing-site': {
type: 'string',
name: 'Marketing Site',
description: 'URL to the marketing site / channel for the project',
placeholder: 'e.g. www.start9labs.com',
nullable: true,
masked: false,
copyable: true,
default: basicInfo?.['marketing-site'],
},
short: {
type: 'string',
name: 'Short Description',
description:
'This is the first description visible to the user in the marketplace',
nullable: false,
masked: false,
copyable: false,
textarea: true,
default: basicInfo?.description?.short,
pattern: '^.{1,320}$',
'pattern-description': 'Must be shorter than 320 characters',
},
long: {
type: 'string',
name: 'Long Description',
description: `This description will display with additional details in the service's individual marketplace page`,
nullable: false,
masked: false,
copyable: false,
textarea: true,
default: basicInfo?.description?.long,
pattern: '^.{1,5000}$',
'pattern-description': 'Must be shorter than 5000 characters',
},
}
}

7
frontend/projects/ui/src/app/pages/developer-routes/developer-routing.module.ts
View File

@@ -33,6 +33,13 @@ const routes: Routes = [
m => m.DevInstructionsPageModule,
),
},
{
path: 'projects/:projectId/manifest',
loadChildren: () =>
import('./dev-manifest/dev-manifest.module').then(
m => m.DevManifestPageModule,
),
},
]
@NgModule({

7
frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
View File

@@ -89,6 +89,13 @@
>
Update
</ion-button>
<ion-button
*ngIf="(localPkg.manifest.version | compareEmver : pkg.manifest.version) === 0 && (localStorageService.showDevTools$ | async)"
expand="block"
(click)="tryInstall()"
>
Reinstall
</ion-button>
<ion-button
*ngIf="(localPkg.manifest.version | compareEmver : pkg.manifest.version) === 1"
expand="block"

2
frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts
View File

@@ -24,6 +24,7 @@ import { Subscription } from 'rxjs'
import { MarkdownPage } from 'src/app/modals/markdown/markdown.page'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { MarketplacePkg } from 'src/app/services/api/api.types'
import { LocalStorageService } from 'src/app/services/local-storage.service'
@Component({
selector: 'marketplace-show',
@@ -52,6 +53,7 @@ export class MarketplaceShowPage {
private readonly patch: PatchDbService,
private readonly embassyApi: ApiService,
private readonly marketplaceService: MarketplaceService,
public readonly localStorageService: LocalStorageService,
) {}
async ngOnInit() {

20
frontend/projects/ui/src/app/pages/server-routes/marketplaces/marketplaces.page.ts
View File

@@ -142,9 +142,7 @@ export class MarketplacesPage {
try {
await this.marketplaceService.getMarketplaceData({}, url)
} catch (e) {
this.errToast.present({
message: `Could not connect to ${url}`,
} as any)
this.errToast.present(e)
loader.dismiss()
return
}
@@ -164,9 +162,7 @@ export class MarketplacesPage {
try {
await this.marketplaceService.load()
} catch (e) {
this.errToast.present({
message: `Error syncing marketplace data`,
} as any)
this.errToast.present(e)
} finally {
loader.dismiss()
}
@@ -219,7 +215,7 @@ export class MarketplacesPage {
const { name } = await this.marketplaceService.getMarketplaceData({}, url)
marketplace['known-hosts'][id] = { name, url }
} catch (e) {
this.errToast.present({ message: `Could not connect to ${url}` } as any)
this.errToast.present(e)
loader.dismiss()
return
}
@@ -229,7 +225,7 @@ export class MarketplacesPage {
try {
await this.api.setDbValue({ pointer: `/marketplace`, value: marketplace })
} catch (e) {
this.errToast.present({ message: `Error saving marketplace data` } as any)
this.errToast.present(e)
} finally {
loader.dismiss()
}
@@ -259,7 +255,7 @@ export class MarketplacesPage {
marketplace['known-hosts'][id] = { name, url }
marketplace['selected-id'] = id
} catch (e) {
this.errToast.present({ message: `Could not connect to ${url}` } as any)
this.errToast.present(e)
loader.dismiss()
return
}
@@ -269,7 +265,7 @@ export class MarketplacesPage {
try {
await this.api.setDbValue({ pointer: `/marketplace`, value: marketplace })
} catch (e) {
this.errToast.present({ message: `Error saving marketplace data` } as any)
this.errToast.present(e)
loader.dismiss()
return
}
@@ -279,9 +275,7 @@ export class MarketplacesPage {
try {
await this.marketplaceService.load()
} catch (e) {
this.errToast.present({
message: `Error syncing marketplace data`,
} as any)
this.errToast.present(e)
} finally {
loader.dismiss()
}

1
frontend/projects/ui/src/app/pkg-config/config-types.ts
View File

@@ -34,6 +34,7 @@ export interface ValueSpecString extends ListValueSpecString, WithStandalone {
type: 'string'
default?: DefaultString
nullable: boolean
textarea?: boolean
}
export interface ValueSpecNumber extends ListValueSpecNumber, WithStandalone {

24
frontend/projects/ui/src/app/services/error-toast.service.ts
View File

@@ -8,11 +8,9 @@ import { RequestError } from './http.service'
export class ErrorToastService {
private toast: HTMLIonToastElement
constructor (
private readonly toastCtrl: ToastController,
) { }
constructor(private readonly toastCtrl: ToastController) {}
async present (e: RequestError, link?: string): Promise<void> {
async present(e: RequestError, link?: string): Promise<void> {
console.error(e)
if (this.toast) return
@@ -36,7 +34,7 @@ export class ErrorToastService {
await this.toast.present()
}
async dismiss (): Promise<void> {
async dismiss(): Promise<void> {
if (this.toast) {
await this.toast.dismiss()
this.toast = undefined
@@ -44,11 +42,11 @@ export class ErrorToastService {
}
}
export function getErrorMessage (e: RequestError, link?: string): string | IonicSafeString {
let message: string | IonicSafeString
if (e.message) message = `${message ? message + ' ' : ''}${e.message}`
if (e.details) message = `${message ? message + ': ' : ''}${e.details}`
export function getErrorMessage(
e: RequestError,
link?: string,
): string | IonicSafeString {
let message: string | IonicSafeString = e.message
if (!message) {
message = 'Unknown Error.'
@@ -56,8 +54,10 @@ export function getErrorMessage (e: RequestError, link?: string): string | Ionic
}
if (link) {
message = new IonicSafeString(`${message}<br /><br /><a href=${link} target="_blank" rel="noreferrer" style="color: white;">Get Help</a>`)
message = new IonicSafeString(
`${message}<br /><br /><a href=${link} target="_blank" rel="noreferrer" style="color: white;">Get Help</a>`,
)
}
return message
}
}

107
frontend/projects/ui/src/app/services/http.service.ts
View File

@@ -1,5 +1,10 @@
import { Injectable } from '@angular/core'
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http'
import {
HttpClient,
HttpErrorResponse,
HttpHeaders,
HttpParams,
} from '@angular/common/http'
import { Observable, from, interval, race } from 'rxjs'
import { map, take } from 'rxjs/operators'
import { ConfigService } from './config.service'
@@ -12,7 +17,7 @@ import { AuthService } from './auth.service'
export class HttpService {
fullUrl: string
constructor (
constructor(
private readonly http: HttpClient,
private readonly config: ConfigService,
private readonly auth: AuthService,
@@ -21,9 +26,9 @@ export class HttpService {
this.fullUrl = `${window.location.protocol}//${window.location.hostname}:${port}`
}
async rpcRequest<T> (rpcOpts: RPCOptions): Promise<T> {
async rpcRequest<T>(rpcOpts: RPCOptions): Promise<T> {
const { url, version } = this.config.api
rpcOpts.params = rpcOpts.params || { }
rpcOpts.params = rpcOpts.params || {}
const httpOpts: HttpOptions = {
method: Method.POST,
body: rpcOpts,
@@ -40,17 +45,15 @@ export class HttpService {
if (isRpcSuccess(res)) return res.result
}
async httpRequest<T> (httpOpts: HttpOptions): Promise<T> {
async httpRequest<T>(httpOpts: HttpOptions): Promise<T> {
if (httpOpts.withCredentials !== false) {
httpOpts.withCredentials = true
}
const urlIsRelative = httpOpts.url.startsWith('/')
const url = urlIsRelative ?
this.fullUrl + httpOpts.url :
httpOpts.url
const url = urlIsRelative ? this.fullUrl + httpOpts.url : httpOpts.url
Object.keys(httpOpts.params || { }).forEach(key => {
Object.keys(httpOpts.params || {}).forEach(key => {
if (httpOpts.params[key] === undefined) {
delete httpOpts.params[key]
}
@@ -69,36 +72,51 @@ export class HttpService {
let req: Observable<{ body: T }>
switch (httpOpts.method) {
case Method.GET: req = this.http.get(url, options) as any; break
case Method.POST: req = this.http.post(url, httpOpts.body, options) as any; break
case Method.PUT: req = this.http.put(url, httpOpts.body, options) as any; break
case Method.PATCH: req = this.http.patch(url, httpOpts.body, options) as any; break
case Method.DELETE: req = this.http.delete(url, options) as any; break
case Method.GET:
req = this.http.get(url, options) as any
break
case Method.POST:
req = this.http.post(url, httpOpts.body, options) as any
break
case Method.PUT:
req = this.http.put(url, httpOpts.body, options) as any
break
case Method.PATCH:
req = this.http.patch(url, httpOpts.body, options) as any
break
case Method.DELETE:
req = this.http.delete(url, options) as any
break
}
return (httpOpts.timeout ? withTimeout(req, httpOpts.timeout) : req)
.toPromise()
.then(res => res.body)
.catch(e => { throw new HttpError(e) })
.catch(e => {
throw new HttpError(e)
})
}
}
function RpcError (e: RPCError['error']): void {
function RpcError(e: RPCError['error']): void {
const { code, message, data } = e
this.code = code
this.message = message
if (typeof data === 'string') {
this.details = e.data
this.message = `${message}\n\n${data}`
this.revision = null
} else {
this.details = data.details
if (data.details) {
this.message = `${message}\n\n${data.details}`
} else {
this.message = message
}
this.revision = data.revision
}
}
function HttpError (e: HttpErrorResponse): void {
function HttpError(e: HttpErrorResponse): void {
const { status, statusText } = e
this.code = status
@@ -107,11 +125,15 @@ function HttpError (e: HttpErrorResponse): void {
this.revision = null
}
function isRpcError<Error, Result> (arg: { error: Error } | { result: Result}): arg is { error: Error } {
function isRpcError<Error, Result>(
arg: { error: Error } | { result: Result },
): arg is { error: Error } {
return !!(arg as any).error
}
function isRpcSuccess<Error, Result> (arg: { error: Error } | { result: Result}): arg is { result: Result } {
function isRpcSuccess<Error, Result>(
arg: { error: Error } | { result: Result },
): arg is { result: Result } {
return !!(arg as any).result
}
@@ -154,36 +176,49 @@ export interface RPCError extends RPCBase {
error: {
code: number
message: string
data?: {
details: string
revision: Revision | null
debug: string | null
} | string
data?:
| {
details: string
revision: Revision | null
debug: string | null
}
| string
}
}
export type RPCResponse<T> = RPCSuccess<T> | RPCError
type HttpError = HttpErrorResponse & { error: { code: string, message: string } }
type HttpError = HttpErrorResponse & {
error: { code: string; message: string }
}
export interface HttpOptions {
method: Method
url: string
headers?: HttpHeaders | {
[header: string]: string | string[]
}
params?: HttpParams | {
[param: string]: string | string[]
}
headers?:
| HttpHeaders
| {
[header: string]: string | string[]
}
params?:
| HttpParams
| {
[param: string]: string | string[]
}
responseType?: 'json' | 'text'
withCredentials?: boolean
body?: any
timeout?: number
}
function withTimeout<U> (req: Observable<U>, timeout: number): Observable<U> {
function withTimeout<U>(req: Observable<U>, timeout: number): Observable<U> {
return race(
from(req.toPromise()), // this guarantees it only emits on completion, intermediary emissions are suppressed.
interval(timeout).pipe(take(1), map(() => { throw new Error('timeout') })),
interval(timeout).pipe(
take(1),
map(() => {
throw new Error('timeout')
}),
),
)
}

14
frontend/projects/ui/src/app/services/patch-db/data-model.ts
View File

@@ -1,5 +1,6 @@
import { ConfigSpec } from 'src/app/pkg-config/config-types'
import { InstallProgress, PackageState } from '@start9labs/shared'
import { BasicInfo } from 'src/app/pages/developer-routes/developer-menu/form-info'
export interface DataModel {
'server-info': ServerInfo
@@ -28,11 +29,14 @@ export interface UIMarketplaceData {
}
export interface DevData {
[id: string]: {
name: string
instructions?: string
config?: string
}
[id: string]: DevProjectData
}
export interface DevProjectData {
name: string
instructions?: string
config?: string
'basic-info'?: BasicInfo
}
export interface ServerInfo {