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

Merge pull request #2618 from Start9Labs/service

Browse Source 
refactor: change service page to the new design
This commit is contained in:
Matt Hill
2024-05-14 10:01:27 -06:00
committed by GitHub
parent ec878defab 47ff630c55
commit a7bfcdcb01
33 changed files with 533 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/startos/bindings/PackageDataEntry.ts
View File

@@ -16,6 +16,7 @@ export type PackageDataEntry = {
developerKey: string;
icon: DataUrl;
lastBackup: string | null;
nextBackup: string | null;
currentDependencies: CurrentDependencies;
actions: { [key: ActionId]: ActionMetadata };
serviceInterfaces: {

184
web/package-lock.json generated
View File

@@ -23,17 +23,17 @@
"@start9labs/argon2": "^0.1.0",
"@start9labs/emver": "^0.1.5",
"@start9labs/start-sdk": "file:../sdk/dist",
"@taiga-ui/addon-charts": "3.73.0",
"@taiga-ui/addon-commerce": "3.73.0",
"@taiga-ui/addon-mobile": "3.73.0",
"@taiga-ui/cdk": "3.73.0",
"@taiga-ui/core": "3.73.0",
"@taiga-ui/experimental": "3.73.0",
"@taiga-ui/icons": "3.73.0",
"@taiga-ui/kit": "3.73.0",
"@taiga-ui/styles": "3.73.0",
"@taiga-ui/addon-charts": "3.77.1",
"@taiga-ui/addon-commerce": "3.77.1",
"@taiga-ui/addon-mobile": "3.77.1",
"@taiga-ui/cdk": "3.77.1",
"@taiga-ui/core": "3.77.1",
"@taiga-ui/experimental": "3.77.1",
"@taiga-ui/icons": "3.77.1",
"@taiga-ui/kit": "3.77.1",
"@taiga-ui/styles": "3.77.1",
"@tinkoff/ng-dompurify": "4.0.0",
"@tinkoff/ng-event-plugins": "3.1.1",
"@tinkoff/ng-event-plugins": "3.2.0",
"ansi-to-html": "^0.7.2",
"base64-js": "^1.5.1",
"cbor": "npm:@jprochazk/cbor@^0.4.9",
@@ -5085,72 +5085,72 @@
"link": true
},
"node_modules/@taiga-ui/addon-charts": {
"version": "3.73.0",
"resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-3.73.0.tgz",
"integrity": "sha512-4zK0sXqMtuz2fVlsgbnBLMuzphCqLbsSR/owMzJxAsrlZV7Lv1VUaMHHe9sdhDBmvO3VZu2d1wNuv/Z1jVfpYQ==",
"version": "3.77.1",
"resolved": "https://registry.npmjs.org/@taiga-ui/addon-charts/-/addon-charts-3.77.1.tgz",
"integrity": "sha512-yk9cvMewoRRVxTv1sIorVgO9GBkleQyRzkT774RPQACQHizGS2Sq5dQMtetwD3usPmLR2GblDR6NM+iOyHhMIA==",
"dependencies": {
"tslib": "2.6.2"
"tslib": "^2.6.2"
},
"peerDependencies": {
"@angular/common": ">=12.0.0",
"@angular/core": ">=12.0.0",
"@ng-web-apis/common": "3.0.6",
"@taiga-ui/cdk": "^3.73.0",
"@taiga-ui/core": "^3.73.0",
"@tinkoff/ng-polymorpheus": "4.3.0"
"@ng-web-apis/common": "^3.0.6",
"@taiga-ui/cdk": "^3.77.1",
"@taiga-ui/core": "^3.77.1",
"@tinkoff/ng-polymorpheus": "^4.3.0"
}
},
"node_modules/@taiga-ui/addon-commerce": {
"version": "3.73.0",
"resolved": "https://registry.npmjs.org/@taiga-ui/addon-commerce/-/addon-commerce-3.73.0.tgz",
"integrity": "sha512-LVK1ROrutavqIvOEHCaXRcX9ZNyznz3cCQFhbLldTIgTSXoYQNNitAgG4cRmntLioLupcVnKt0JZOHiObEx49A==",
"version": "3.77.1",
"resolved": "https://registry.npmjs.org/@taiga-ui/addon-commerce/-/addon-commerce-3.77.1.tgz",
"integrity": "sha512-4qNgDZfxyzTHQdKaerw28xP8d2PCuumLM9xjlRbNE5XcnhUI+rccgZOV9MtZtQoNBl++OBPmbaT2/9+zbSqbxg==",
"dependencies": {
"tslib": "2.6.2"
"tslib": "^2.6.2"
},
"peerDependencies": {
"@angular/common": ">=12.0.0",
"@angular/core": ">=12.0.0",
"@angular/forms": ">=12.0.0",
"@maskito/angular": "1.9.0",
"@maskito/core": "1.9.0",
"@maskito/kit": "1.9.0",
"@ng-web-apis/common": "3.0.6",
"@taiga-ui/cdk": "^3.73.0",
"@taiga-ui/core": "^3.73.0",
"@taiga-ui/i18n": "^3.73.0",
"@taiga-ui/kit": "^3.73.0",
"@tinkoff/ng-polymorpheus": "4.3.0",
"@maskito/angular": "^1.9.0",
"@maskito/core": "^1.9.0",
"@maskito/kit": "^1.9.0",
"@ng-web-apis/common": "^3.0.6",
"@taiga-ui/cdk": "^3.77.1",
"@taiga-ui/core": "^3.77.1",
"@taiga-ui/i18n": "^3.77.1",
"@taiga-ui/kit": "^3.77.1",
"@tinkoff/ng-polymorpheus": "^4.3.0",
"rxjs": ">=6.0.0"
}
},
"node_modules/@taiga-ui/addon-mobile": {
"version": "3.73.0",
"resolved": "https://registry.npmjs.org/@taiga-ui/addon-mobile/-/addon-mobile-3.73.0.tgz",
"integrity": "sha512-XJ8xlmnp3fU02KjqgFtUCkcMsPmdIvksI/vmK7ZCaNunsGIYVAGSqw3/yyRV+HkX1ccqynX5johv+lligD9RtA==",
"version": "3.77.1",
"resolved": "https://registry.npmjs.org/@taiga-ui/addon-mobile/-/addon-mobile-3.77.1.tgz",
"integrity": "sha512-kRa9uNdnY9Tyz8FdGXqgbL7cKZ1Z43K3Kjey9tX3uf4BEkODPNVuQFTNzuZvOt6/ql+XtPxi/hU19ii5rvKz3A==",
"dependencies": {
"tslib": "2.6.2"
"tslib": "^2.6.2"
},
"peerDependencies": {
"@angular/cdk": ">=12.0.0",
"@angular/common": ">=12.0.0",
"@angular/core": ">=12.0.0",
"@ng-web-apis/common": "3.0.6",
"@taiga-ui/cdk": "^3.73.0",
"@taiga-ui/core": "^3.73.0",
"@taiga-ui/kit": "^3.73.0",
"@tinkoff/ng-polymorpheus": "4.3.0",
"@ng-web-apis/common": "^3.0.6",
"@taiga-ui/cdk": "^3.77.1",
"@taiga-ui/core": "^3.77.1",
"@taiga-ui/kit": "^3.77.1",
"@tinkoff/ng-polymorpheus": "^4.3.0",
"rxjs": ">=6.0.0"
}
},
"node_modules/@taiga-ui/cdk": {
"version": "3.73.0",
"resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-3.73.0.tgz",
"integrity": "sha512-bxgbetJcbB+9h6ZO0ht076A9K0UOemr5D339o8h2tQpFnjOiw7gQ0ZnpNrKXXOpb5eASnptulmwtITvagpE1lg==",
"version": "3.77.1",
"resolved": "https://registry.npmjs.org/@taiga-ui/cdk/-/cdk-3.77.1.tgz",
"integrity": "sha512-mqT1Rz/JWqah4aNVRD3iEND4XdkfsOxV100D0gbdFD5/aaiMTyL6oMEP2GGE0lSsuk1mRCixkDW0qPCbhG21yQ==",
"dependencies": {
"@ng-web-apis/common": "3.0.6",
"@ng-web-apis/mutation-observer": "3.1.0",
"@ng-web-apis/resize-observer": "3.0.6",
"@tinkoff/ng-event-plugins": "3.1.1",
"@tinkoff/ng-event-plugins": "3.2.0",
"@tinkoff/ng-polymorpheus": "4.3.0",
"tslib": "2.6.2"
},
@@ -5172,12 +5172,12 @@
"optional": true
},
"node_modules/@taiga-ui/core": {
"version": "3.73.0",
"resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-3.73.0.tgz",
"integrity": "sha512-zQ+qhgBxQK6+SrzfSHIotKI00xbPu0ZTBFyYGUT8zD0If4aN5oeR+Q5A9kUb/0rEPsHcg04TcAEtAsAtG2l/oA==",
"version": "3.77.1",
"resolved": "https://registry.npmjs.org/@taiga-ui/core/-/core-3.77.1.tgz",
"integrity": "sha512-RjrOZtkQbb+Hw+7wMTt8j76OkGiLrCDb2Ol1rmngFQfzPX5OlaRkBtNhCNoyBtI9rl4CCX2/ViCGnGmrIkHu6g==",
"dependencies": {
"@taiga-ui/i18n": "^3.73.0",
"tslib": "2.6.2"
"@taiga-ui/i18n": "^3.77.1",
"tslib": "^2.6.2"
},
"peerDependencies": {
"@angular/animations": ">=12.0.0",
@@ -5186,68 +5186,68 @@
"@angular/forms": ">=12.0.0",
"@angular/platform-browser": ">=12.0.0",
"@angular/router": ">=12.0.0",
"@ng-web-apis/common": "3.0.6",
"@ng-web-apis/mutation-observer": "3.1.0",
"@taiga-ui/cdk": "^3.73.0",
"@taiga-ui/i18n": "^3.73.0",
"@tinkoff/ng-event-plugins": "3.1.1",
"@tinkoff/ng-polymorpheus": "4.3.0",
"@ng-web-apis/common": "^3.0.6",
"@ng-web-apis/mutation-observer": "^3.1.0",
"@taiga-ui/cdk": "^3.77.1",
"@taiga-ui/i18n": "^3.77.1",
"@tinkoff/ng-event-plugins": "^3.2.0",
"@tinkoff/ng-polymorpheus": "^4.3.0",
"rxjs": ">=6.0.0"
}
},
"node_modules/@taiga-ui/experimental": {
"version": "3.73.0",
"resolved": "https://registry.npmjs.org/@taiga-ui/experimental/-/experimental-3.73.0.tgz",
"integrity": "sha512-FlMrasE7emFTNCN2a6xdU9ZCH7HIAU/xd+jjqxsi9Cf37juDLFtInFjFyQ9ZuEnhIJP3POTX+d8t/niRTPwpNw==",
"version": "3.77.1",
"resolved": "https://registry.npmjs.org/@taiga-ui/experimental/-/experimental-3.77.1.tgz",
"integrity": "sha512-UVmP0y1w9VvOoQoTH4VByZ3m45OcC0Lw//rsrNMicPCX9b5IJxgEjUAmJ+PZ/ecsgnDVKO0HD18cZt5uCVdy7w==",
"dependencies": {
"tslib": "2.6.2"
"tslib": "^2.6.2"
},
"peerDependencies": {
"@angular/common": ">=12.0.0",
"@angular/core": ">=12.0.0",
"@taiga-ui/addon-commerce": "^3.73.0",
"@taiga-ui/cdk": "^3.73.0",
"@taiga-ui/core": "^3.73.0",
"@taiga-ui/kit": "^3.73.0",
"@tinkoff/ng-polymorpheus": "4.3.0",
"@taiga-ui/addon-commerce": "^3.77.1",
"@taiga-ui/cdk": "^3.77.1",
"@taiga-ui/core": "^3.77.1",
"@taiga-ui/kit": "^3.77.1",
"@tinkoff/ng-polymorpheus": "^4.3.0",
"rxjs": ">=6.0.0"
}
},
"node_modules/@taiga-ui/i18n": {
"version": "3.73.0",
"resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-3.73.0.tgz",
"integrity": "sha512-CLyYmnnL08+P5XvnKSMhZPpJyBs4199ApMX33hPBa4MvpmykUoVXQ0nXslLECSqAcfL39N9tzWKnxyLAavXjNw==",
"version": "3.77.1",
"resolved": "https://registry.npmjs.org/@taiga-ui/i18n/-/i18n-3.77.1.tgz",
"integrity": "sha512-rC2RYMFyaRHKcoU5WUKMe2DU0urRNh0daKvRIhp8t5AnTQE1MDZHRJYVCpysr8sfXvtJdr5oHoZccavzvqjqOQ==",
"dependencies": {
"tslib": "2.6.2"
"tslib": "^2.6.2"
},
"peerDependencies": {
"@angular/core": ">=12.0.0",
"@ng-web-apis/common": "3.0.6",
"@ng-web-apis/common": "^3.0.6",
"rxjs": ">=6.0.0"
}
},
"node_modules/@taiga-ui/icons": {
"version": "3.73.0",
"resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-3.73.0.tgz",
"integrity": "sha512-3/B9NW/gQ4ad+voS57TSuz7cCElh1hcqUil4wP2P8pwS3HzgScokZpvVQs6u5jZ0Xt4v7uG4pac6pwGVsC8ndA==",
"version": "3.77.1",
"resolved": "https://registry.npmjs.org/@taiga-ui/icons/-/icons-3.77.1.tgz",
"integrity": "sha512-e9NXwxOktKM9TVDVePVkTFAuAs9jlhZCKzpAOfrme1bHVQJ1MEhD2hdj74Yn7IGKOCFjrUDQnxJ9w9POh6H9Vg==",
"dependencies": {
"tslib": "2.6.2"
"tslib": "^2.6.2"
},
"peerDependencies": {
"@taiga-ui/cdk": "^3.73.0"
"@taiga-ui/cdk": "^3.77.1"
}
},
"node_modules/@taiga-ui/kit": {
"version": "3.73.0",
"resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-3.73.0.tgz",
"integrity": "sha512-AKPjxkcKnMA4TeL5f6gBjgnJff7JJfh2YmOxHPcXXcBy/BeXzY+Lfmlgqz0P8Rtz01JouCZpWIWNayb2cGlq5g==",
"version": "3.77.1",
"resolved": "https://registry.npmjs.org/@taiga-ui/kit/-/kit-3.77.1.tgz",
"integrity": "sha512-Pyk44wDF61VZiMQHehQ3KEEBj5AsO3et8QccKwmqr13jaQzmH6ljwbbYJOwPpEVsdZbqfiI56OVxp86mi6F8mw==",
"dependencies": {
"@maskito/angular": "1.9.0",
"@maskito/core": "1.9.0",
"@maskito/kit": "1.9.0",
"@ng-web-apis/intersection-observer": "3.2.0",
"text-mask-core": "5.1.2",
"tslib": "2.6.2"
"tslib": "^2.6.2"
},
"peerDependencies": {
"@angular/common": ">=12.0.0",
@@ -5255,22 +5255,22 @@
"@angular/forms": ">=12.0.0",
"@angular/router": ">=12.0.0",
"@ng-web-apis/common": "3.0.6",
"@ng-web-apis/mutation-observer": "3.1.0",
"@ng-web-apis/resize-observer": "3.0.6",
"@taiga-ui/cdk": "^3.73.0",
"@taiga-ui/core": "^3.73.0",
"@taiga-ui/i18n": "^3.73.0",
"@tinkoff/ng-polymorpheus": "4.3.0",
"@ng-web-apis/mutation-observer": "^3.1.0",
"@ng-web-apis/resize-observer": "^3.0.6",
"@taiga-ui/cdk": "^3.77.1",
"@taiga-ui/core": "^3.77.1",
"@taiga-ui/i18n": "^3.77.1",
"@tinkoff/ng-polymorpheus": "^4.3.0",
"rxjs": ">=6.0.0"
}
},
"node_modules/@taiga-ui/styles": {
"version": "3.73.0",
"resolved": "https://registry.npmjs.org/@taiga-ui/styles/-/styles-3.73.0.tgz",
"integrity": "sha512-hFInEKxsI4fj5KZCIGzH/zY00YwE2PsUoAlzoeGqpfnOG5rY/2WFpZnLrj7yJCOkFzsFy9KUZC00d46w50ijnQ==",
"version": "3.77.1",
"resolved": "https://registry.npmjs.org/@taiga-ui/styles/-/styles-3.77.1.tgz",
"integrity": "sha512-YoPXqY1pz+13vYhHnE6hskjRtnDDGgjnZIPtx05ChN8/TDIJ6NiaWKI5Es/G4fq3vKJnq2yIZ9D2Ghm/aPItGw==",
"peerDependencies": {
"@taiga-ui/cdk": "^3.73.0",
"tslib": "2.6.2"
"@taiga-ui/cdk": "^3.77.1",
"tslib": "^2.6.2"
}
},
"node_modules/@tinkoff/ng-dompurify": {
@@ -5287,9 +5287,9 @@
}
},
"node_modules/@tinkoff/ng-event-plugins": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@tinkoff/ng-event-plugins/-/ng-event-plugins-3.1.1.tgz",
"integrity": "sha512-JC64sdpiOHmq4rZBFzqVweQoPxN7afoCuebKayEELEODho6oYiTVyM3P9T9JWUyzieSujDP7um7fiCggrWc83A==",
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@tinkoff/ng-event-plugins/-/ng-event-plugins-3.2.0.tgz",
"integrity": "sha512-n56R5xNfiytabh2WmWdQXfNU6m7dfOo3LLxlARE+DX7f5yciW2xBdDkuEHX74q8dlCuAVlW9aslSfz8c//ymwA==",
"dependencies": {
"tslib": "^2.2.0"
},

20
web/package.json
View File

@@ -45,17 +45,17 @@
"@start9labs/argon2": "^0.1.0",
"@start9labs/emver": "^0.1.5",
"@start9labs/start-sdk": "file:../sdk/dist",
"@taiga-ui/addon-charts": "3.73.0",
"@taiga-ui/addon-commerce": "3.73.0",
"@taiga-ui/addon-mobile": "3.73.0",
"@taiga-ui/cdk": "3.73.0",
"@taiga-ui/core": "3.73.0",
"@taiga-ui/experimental": "3.73.0",
"@taiga-ui/icons": "3.73.0",
"@taiga-ui/kit": "3.73.0",
"@taiga-ui/styles": "3.73.0",
"@taiga-ui/addon-charts": "3.77.1",
"@taiga-ui/addon-commerce": "3.77.1",
"@taiga-ui/addon-mobile": "3.77.1",
"@taiga-ui/cdk": "3.77.1",
"@taiga-ui/core": "3.77.1",
"@taiga-ui/experimental": "3.77.1",
"@taiga-ui/icons": "3.77.1",
"@taiga-ui/kit": "3.77.1",
"@taiga-ui/styles": "3.77.1",
"@tinkoff/ng-dompurify": "4.0.0",
"@tinkoff/ng-event-plugins": "3.1.1",
"@tinkoff/ng-event-plugins": "3.2.0",
"ansi-to-html": "^0.7.2",
"base64-js": "^1.5.1",
"cbor": "npm:@jprochazk/cbor@^0.4.9",

2
web/projects/marketplace/src/pages/show/additional/additional.component.scss
View File

@@ -10,7 +10,7 @@
& > * + * {
border-top-width: 1px;
border-bottom-width: 0px;
border-bottom-width: 0;
border-color: rgb(113 113 122);
}
}

7
web/projects/shared/styles/taiga.scss
View File

@@ -9,7 +9,7 @@
/* stylelint-disable order/order */
[tuiAppearance][data-appearance='secondary-warning'] {
background: var(--tui-warning-bg);
color: var(--tui-warning-fill);
color: var(--tui-text-01);
@include appearance-hover {
background: var(--tui-warning-bg-hover);
@@ -58,6 +58,7 @@
@include appearance-disabled {
background: #eaecee;
color: #333;
}
}
@@ -75,6 +76,7 @@
@include appearance-disabled {
background: #eaecee;
color: #333;
}
}
@@ -92,6 +94,7 @@
@include appearance-disabled {
background: #eaecee;
color: #333;
}
}
@@ -109,6 +112,7 @@
@include appearance-disabled {
background: #eaecee;
color: #333;
}
}
@@ -126,6 +130,7 @@
@include appearance-disabled {
background: #eaecee;
color: #333;
}
}

2
web/projects/ui/src/app/routes/portal/components/form/form-object/form-object.component.html
View File

@@ -7,7 +7,7 @@
class="button"
[class.button_open]="open"
[style.border-radius.%]="100"
[appearance]="invalid ? 'secondary-destructive' : 'secondary'"
[appearance]="invalid ? 'danger-solid' : 'secondary'"
></button>
<ng-content></ng-content>
{{ spec.name }}

5
web/projects/ui/src/app/routes/portal/routes/service/components/action.component.ts
View File

@@ -1,5 +1,6 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { TuiSvgModule } from '@taiga-ui/core'
import { TuiIconModule } from '@taiga-ui/experimental'
interface ActionItem {
readonly icon: string
@@ -10,7 +11,7 @@ interface ActionItem {
@Component({
selector: '[action]',
template: `
<tui-svg [src]="action.icon"></tui-svg>
<tui-icon [icon]="action.icon"></tui-icon>
<div>
<strong>{{ action.name }}</strong>
<div>{{ action.description }}</div>
@@ -18,7 +19,7 @@ interface ActionItem {
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [TuiSvgModule],
imports: [TuiIconModule],
})
export class ServiceActionComponent {
@Input({ required: true })

22
web/projects/ui/src/app/routes/portal/routes/service/components/actions.component.ts
View File

@@ -4,13 +4,16 @@ import {
inject,
Input,
} from '@angular/core'
import { Manifest } from '@startos'
import { tuiPure } from '@taiga-ui/cdk'
import { TuiButtonModule } from '@taiga-ui/experimental'
import {
TuiButtonModule,
tuiButtonOptionsProvider,
} from '@taiga-ui/experimental'
import { DependencyInfo } from 'src/app/routes/portal/routes/service/types/dependency-info'
import { ActionsService } from 'src/app/services/actions.service'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { getManifest } from 'src/app/utils/get-package-data'
import { Manifest } from '../../../../../../../../../../core/startos/bindings/Manifest'
@Component({
selector: 'service-actions',
@@ -18,7 +21,7 @@ import { Manifest } from '../../../../../../../../../../core/startos/bindings/Ma
@if (pkg.status.main.status === 'running') {
<button
tuiButton
appearance="secondary-destructive"
appearance="danger-solid"
iconLeft="tuiIconSquare"
(click)="actions.stop(manifest)"
>
@@ -27,7 +30,6 @@ import { Manifest } from '../../../../../../../../../../core/startos/bindings/Ma
<button
tuiButton
appearance="secondary"
iconLeft="tuiIconRotateCw"
(click)="actions.restart(manifest)"
>
@@ -56,10 +58,20 @@ import { Manifest } from '../../../../../../../../../../core/startos/bindings/Ma
</button>
}
`,
styles: [':host { display: flex; gap: 1rem }'],
styles: [
`
:host {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding-bottom: 1rem;
}
`,
],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [TuiButtonModule],
providers: [tuiButtonOptionsProvider({ size: 's' })],
})
export class ServiceActionsComponent {
@Input({ required: true })

34
web/projects/ui/src/app/routes/portal/routes/service/components/additional.component.ts
View File

@@ -1,34 +0,0 @@
import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { ToAdditionalPipe } from '../pipes/to-additional.pipe'
import { ServiceAdditionalItemComponent } from './additional-item.component'
@Component({
selector: 'service-additional',
template: `
<h3 class="g-title">Additional Info</h3>
<ng-container *ngFor="let additional of pkg | toAdditional">
<a
*ngIf="additional.description.startsWith('http'); else button"
class="g-action"
[additionalItem]="additional"
></a>
<ng-template #button>
<button
class="g-action"
[style.pointer-events]="!additional.icon ? 'none' : null"
[additionalItem]="additional"
(click)="additional.action?.()"
></button>
</ng-template>
</ng-container>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [CommonModule, ToAdditionalPipe, ServiceAdditionalItemComponent],
})
export class ServiceAdditionalComponent {
@Input({ required: true })
pkg!: PackageDataEntry
}

82
web/projects/ui/src/app/routes/portal/routes/service/components/backups.component.ts Normal file
View File

@@ -0,0 +1,82 @@
import { I18nPluralPipe } from '@angular/common'
import {
ChangeDetectionStrategy,
Component,
computed,
input,
} from '@angular/core'
import { RouterLink } from '@angular/router'
import { PackageDataEntry } from '@startos'
import { TuiButtonModule } from '@taiga-ui/experimental'
@Component({
selector: 'service-backups',
template: `
<div [style.flex]="1">
<small>Last backup</small>
{{ previous() | i18nPlural: ago }}
</div>
<div [style.flex]="1">
<small>Next backup</small>
{{ next() | i18nPlural: in }}
</div>
<div [style.min-width.%]="100">
<a
tuiButton
iconLeft="tuiIconPlusSquare"
routerLink="/portal/system/backups"
size="s"
appearance="secondary-warning"
>
Manage
</a>
</div>
`,
styles: `
:host {
display: flex;
gap: 1rem;
flex-wrap: wrap;
white-space: nowrap;
padding-bottom: 1rem;
small {
display: block;
text-transform: uppercase;
color: var(--tui-text-02);
}
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [TuiButtonModule, RouterLink, I18nPluralPipe],
})
export class ServiceBackupsComponent {
pkg = input.required<PackageDataEntry>()
readonly previous = computed(() =>
daysBetween(new Date(), new Date(this.pkg().lastBackup || new Date())),
)
readonly next = computed(() =>
daysBetween(new Date(), new Date(this.pkg().nextBackup || new Date())),
)
readonly ago = {
'=0': 'Never performed',
'=1': 'day ago',
other: '# days ago',
}
readonly in = {
'=0': 'Not scheduled',
'=1': 'Tomorrow',
other: 'In # days',
}
}
function daysBetween(one: Date, two: Date): number {
return Math.abs(
Math.round((one.valueOf() - two.valueOf()) / (1000 * 60 * 60 * 24)),
)
}

24
web/projects/ui/src/app/routes/portal/routes/service/components/dependencies.component.ts
View File

@@ -1,22 +1,26 @@
import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { ServiceDependencyComponent } from './dependency.component'
import { DependencyInfo } from '../types/dependency-info'
import { ServiceDependencyComponent } from './dependency.component'
@Component({
selector: 'service-dependencies',
template: `
<h3 class="g-title">Dependencies</h3>
<button
*ngFor="let dep of dependencies"
class="g-action"
[serviceDependency]="dep"
(click)="dep.action()"
></button>
@for (dep of dependencies; track $index) {
<button
class="g-action"
[serviceDependency]="dep"
(click)="dep.action()"
></button>
}
@if (!dependencies.length) {
No dependencies
}
`,
styles: ':host { display: block; min-height: var(--tui-height-s) }',
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [CommonModule, ServiceDependencyComponent],
imports: [ServiceDependencyComponent],
})
export class ServiceDependenciesComponent {
@Input({ required: true })

2
web/projects/ui/src/app/routes/portal/routes/service/components/health-check.component.ts
View File

@@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { HealthCheckResult } from '@startos'
import { TuiLoaderModule, TuiSvgModule } from '@taiga-ui/core'
import { HealthCheckResult } from '../../../../../../../../../../core/startos/bindings/HealthCheckResult'
@Component({
selector: 'service-health-check',

27
web/projects/ui/src/app/routes/portal/routes/service/components/health-checks.component.ts
View File

@@ -1,28 +1,33 @@
import { CommonModule } from '@angular/common'
import { AsyncPipe } from '@angular/common'
import {
ChangeDetectionStrategy,
Component,
inject,
Input,
} from '@angular/core'
import { HealthCheckResult } from '@startos'
import { ServiceHealthCheckComponent } from 'src/app/routes/portal/routes/service/components/health-check.component'
import { ConnectionService } from 'src/app/services/connection.service'
import { ServiceHealthCheckComponent } from './health-check.component'
import { HealthCheckResult } from '../../../../../../../../../../core/startos/bindings/HealthCheckResult'
@Component({
selector: 'service-health-checks',
template: `
<h3 class="g-title">Health Checks</h3>
<service-health-check
*ngFor="let check of checks"
class="g-action"
[check]="check"
[connected]="!!(connected$ | async)"
></service-health-check>
@for (check of checks; track $index) {
<service-health-check
class="g-action"
[check]="check"
[connected]="!!(connected$ | async)"
/>
}
@if (!checks.length) {
No health checks
}
`,
styles: ':host { display: block; min-height: var(--tui-height-s) }',
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [CommonModule, ServiceHealthCheckComponent],
imports: [AsyncPipe, ServiceHealthCheckComponent],
})
export class ServiceHealthChecksComponent {
@Input({ required: true })

70
web/projects/ui/src/app/routes/portal/routes/service/components/interface-list-item.component.ts
View File

@@ -5,35 +5,60 @@ import {
inject,
Input,
} from '@angular/core'
import { TuiSvgModule } from '@taiga-ui/core'
import { TuiButtonModule } from '@taiga-ui/experimental'
import { TuiLetModule } from '@taiga-ui/cdk'
import { TuiLoaderModule } from '@taiga-ui/core'
import { TuiButtonModule, TuiIconModule } from '@taiga-ui/experimental'
import { map, timer } from 'rxjs'
import { ConfigService } from 'src/app/services/config.service'
import { ExtendedInterfaceInfo } from '../pipes/interface-info.pipe'
@Component({
selector: 'a[serviceInterfaceListItem]',
template: `
<tui-svg [src]="info.icon" [style.color]="info.color"></tui-svg>
<div [style.flex]="1">
<strong>{{ info.name }}</strong>
<div>{{ info.description }}</div>
<div [style.color]="info.color">{{ info.typeDetail }}</div>
</div>
<a
*ngIf="info.type === 'ui'"
tuiIconButton
appearance="flat"
iconLeft="tuiIconExternalLinkLarge"
target="_blank"
rel="noreferrer"
[style.border-radius.%]="100"
[attr.href]="href"
(click.stop)="(0)"
></a>
<ng-container *tuiLet="healthCheck$ | async as check">
@if (check === null) {
<tui-loader />
} @else if (check === '') {
<tui-icon [icon]="info.icon" [style.color]="info.color" />
} @else {
<tui-icon icon="tuiIconXCircle" class="g-error" />
}
<div [style.flex]="1">
<strong>{{ info.name }}</strong>
<div>{{ info.description }}</div>
@if (check) {
<div class="g-error">
<b>Health check failed:</b>
{{ check }}
</div>
} @else {
<div [style.color]="info.color">{{ info.typeDetail }}</div>
}
</div>
@if (info.type === 'ui') {
<a
tuiIconButton
appearance="flat"
iconLeft="tuiIconExternalLinkLarge"
target="_blank"
rel="noreferrer"
title="Open"
[style.border-radius.%]="100"
[attr.href]="href"
(click.stop)="(0)"
></a>
}
</ng-container>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [TuiButtonModule, CommonModule, TuiSvgModule],
imports: [
CommonModule,
TuiButtonModule,
TuiLetModule,
TuiLoaderModule,
TuiIconModule,
],
})
export class ServiceInterfaceListItemComponent {
private readonly config = inject(ConfigService)
@@ -44,6 +69,11 @@ export class ServiceInterfaceListItemComponent {
@Input()
disabled = false
// TODO: Implement real health check
readonly healthCheck$ = timer(3000).pipe(
map(() => (Math.random() > 0.5 ? '' : 'You done f***d it up...')),
)
get href(): string | null {
return this.disabled ? null : this.config.launchableAddress(this.info)
}

28
web/projects/ui/src/app/routes/portal/routes/service/components/interface-list.component.ts
View File

@@ -1,31 +1,25 @@
import { NgForOf } from '@angular/common'
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { RouterLink } from '@angular/router'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { PackageStatus } from 'src/app/services/pkg-status-rendering.service'
import { InterfaceInfoPipe } from '../pipes/interface-info.pipe'
import { ServiceInterfaceListItemComponent } from './interface-list-item.component'
import { RouterLink } from '@angular/router'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
@Component({
selector: 'service-interface-list',
template: `
<h3 class="g-title">Service Interfaces</h3>
<a
*ngFor="let info of pkg | interfaceInfo"
class="g-action"
[serviceInterfaceListItem]="info"
[disabled]="status.primary !== 'running'"
[routerLink]="info.routerLink"
></a>
@for (info of pkg | interfaceInfo; track $index) {
<a
class="g-action"
[serviceInterfaceListItem]="info"
[disabled]="status.primary !== 'running'"
[routerLink]="info.routerLink"
></a>
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
NgForOf,
RouterLink,
InterfaceInfoPipe,
ServiceInterfaceListItemComponent,
],
imports: [RouterLink, InterfaceInfoPipe, ServiceInterfaceListItemComponent],
})
export class ServiceInterfaceListComponent {
@Input({ required: true })

10
web/projects/ui/src/app/routes/portal/routes/service/components/menu-item.component.ts
View File

@@ -1,23 +1,23 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { TuiSvgModule } from '@taiga-ui/core'
import { TuiIconModule } from '@taiga-ui/experimental'
import { ServiceMenu } from '../pipes/to-menu.pipe'
@Component({
selector: '[serviceMenuItem]',
template: `
<tui-svg [src]="menu.icon"></tui-svg>
<tui-icon [icon]="menu.icon" />
<div [style.flex]="1">
<strong>{{ menu.name }}</strong>
<div>
{{ menu.description }}
<ng-content></ng-content>
<ng-content />
</div>
</div>
<tui-svg src="tuiIconChevronRightLarge"></tui-svg>
<tui-icon icon="tuiIconChevronRight" />
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [TuiSvgModule],
imports: [TuiIconModule],
})
export class ServiceMenuItemComponent {
@Input({ required: true, alias: 'serviceMenuItem' })

1
web/projects/ui/src/app/routes/portal/routes/service/components/menu.component.ts
View File

@@ -7,7 +7,6 @@ import { RouterLink } from '@angular/router'
@Component({
selector: 'service-menu',
template: `
<h3 class="g-title">Menu</h3>
@for (menu of pkg | toMenu; track $index) {
@if (menu.routerLink) {
<a

4
web/projects/ui/src/app/routes/portal/routes/service/components/progress.component.ts
View File

@@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { Progress } from '@startos'
import { TuiProgressModule } from '@taiga-ui/kit'
import { InstallingProgressPipe } from '../pipes/install-progress.pipe'
import { Progress } from '../../../../../../../../../../core/startos/bindings/Progress'
import { InstallingProgressPipe } from 'src/app/routes/portal/routes/service/pipes/install-progress.pipe'
@Component({
selector: '[progress]',

6
web/projects/ui/src/app/routes/portal/routes/service/components/status.component.ts
View File

@@ -32,9 +32,11 @@ import { UnitConversionPipesModule } from '@start9labs/shared'
styles: [
`
:host {
font-size: x-large;
margin: 1em 0;
display: block;
font-size: x-large;
white-space: nowrap;
margin: auto 0;
height: 2.75rem;
}
`,
],

5
web/projects/ui/src/app/routes/portal/routes/service/components/additional-item.component.ts → web/projects/ui/src/app/routes/portal/routes/service/modals/additional-item.component.ts
View File

@@ -1,7 +1,10 @@
import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
import { TuiSvgModule } from '@taiga-ui/core'
import { AdditionalItem, FALLBACK_URL } from '../pipes/to-additional.pipe'
import {
AdditionalItem,
FALLBACK_URL,
} from 'src/app/routes/portal/routes/service/pipes/to-additional.pipe'
@Component({
selector: '[additionalItem]',

36
web/projects/ui/src/app/routes/portal/routes/service/modals/additional.component.ts Normal file
View File

@@ -0,0 +1,36 @@
import {
ChangeDetectionStrategy,
Component,
inject,
Input,
} from '@angular/core'
import { TuiDialogOptions } from '@taiga-ui/core'
import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { ToAdditionalPipe } from 'src/app/routes/portal/routes/service/pipes/to-additional.pipe'
import { ServiceAdditionalItemComponent } from './additional-item.component'
@Component({
selector: 'service-additional',
template: `
@for (additional of pkg | toAdditional; track $index) {
@if (additional.description.startsWith('http')) {
<a class="g-action" [additionalItem]="additional"></a>
} @else {
<button
class="g-action"
[style.pointer-events]="!additional.icon ? 'none' : null"
[additionalItem]="additional"
(click)="additional.action?.()"
></button>
}
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [ToAdditionalPipe, ServiceAdditionalItemComponent],
})
export class ServiceAdditionalModal {
readonly pkg =
inject<TuiDialogOptions<PackageDataEntry>>(POLYMORPHEUS_CONTEXT).data
}

6
web/projects/ui/src/app/routes/portal/routes/service/pipes/interface-info.pipe.ts
View File

@@ -24,17 +24,17 @@ export class InterfaceInfoPipe implements PipeTransform {
switch (val.type) {
case 'ui':
color = 'var(--tui-primary)'
icon = 'tuiIconMonitorLarge'
icon = 'tuiIconMonitor'
typeDetail = 'User Interface (UI)'
break
case 'p2p':
color = 'var(--tui-info-fill)'
icon = 'tuiIconUsersLarge'
icon = 'tuiIconUsers'
typeDetail = 'Peer-To-Peer Interface (P2P)'
break
case 'api':
color = 'var(--tui-support-09)'
icon = 'tuiIconTerminalLarge'
icon = 'tuiIconTerminal'
typeDetail = 'Application Program Interface (API)'
break
}

6
web/projects/ui/src/app/routes/portal/routes/service/pipes/to-additional.pipe.ts
View File

@@ -1,12 +1,12 @@
import { inject, Pipe, PipeTransform } from '@angular/core'
import { CopyService, MarkdownComponent } from '@start9labs/shared'
import { Manifest } from '@startos'
import { TuiDialogService } from '@taiga-ui/core'
import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
import { CopyService, MarkdownComponent } from '@start9labs/shared'
import { from } from 'rxjs'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { getManifest } from 'src/app/utils/get-package-data'
import { Manifest } from '../../../../../../../../../../core/startos/bindings/Manifest'
export const FALLBACK_URL = 'Not provided'

35
web/projects/ui/src/app/routes/portal/routes/service/pipes/to-menu.pipe.ts
View File

@@ -1,20 +1,21 @@
import { inject, Pipe, PipeTransform } from '@angular/core'
import { Params } from '@angular/router'
import { MarkdownComponent } from '@start9labs/shared'
import { Manifest } from '@startos'
import { TuiDialogService } from '@taiga-ui/core'
import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
import { from } from 'rxjs'
import {
PackageConfigData,
ConfigModal,
PackageConfigData,
} from 'src/app/routes/portal/modals/config.component'
import { ServiceAdditionalModal } from 'src/app/routes/portal/routes/service/modals/additional.component'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { FormDialogService } from 'src/app/services/form-dialog.service'
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { ProxyService } from 'src/app/services/proxy.service'
import { ServicePropertiesModal } from '../modals/properties.component'
import { getManifest } from 'src/app/utils/get-package-data'
import { Manifest } from '../../../../../../../../../../core/startos/bindings/Manifest'
import { ServicePropertiesModal } from 'src/app/routes/portal/routes/service/modals/properties.component'
export interface ServiceMenu {
icon: string
@@ -40,19 +41,19 @@ export class ToMenuPipe implements PipeTransform {
return [
{
icon: 'tuiIconListLarge',
icon: 'tuiIconList',
name: 'Instructions',
description: `Understand how to use ${manifest.title}`,
action: () => this.showInstructions(manifest),
},
{
icon: 'tuiIconSlidersLarge',
icon: 'tuiIconSliders',
name: 'Config',
description: `Customize ${manifest.title}`,
action: () => this.openConfig(manifest),
},
{
icon: 'tuiIconKeyLarge',
icon: 'tuiIconKey',
name: 'Properties',
description: `Runtime information, credentials, and other values of interest`,
action: () =>
@@ -64,13 +65,13 @@ export class ToMenuPipe implements PipeTransform {
.subscribe(),
},
{
icon: 'tuiIconZapLarge',
icon: 'tuiIconZap',
name: 'Actions',
description: `Uninstall and other commands specific to ${manifest.title}`,
routerLink: `actions`,
},
{
icon: 'tuiIconShieldLarge',
icon: 'tuiIconShield',
name: 'Outbound Proxy',
description: `Proxy all outbound traffic from ${manifest.title}`,
action: () =>
@@ -80,21 +81,33 @@ export class ToMenuPipe implements PipeTransform {
),
},
{
icon: 'tuiIconFileTextLarge',
icon: 'tuiIconFileText',
name: 'Logs',
description: `Raw, unfiltered logs`,
routerLink: 'logs',
},
{
icon: 'tuiIconInfo',
name: 'Additional Info',
description: `View package details`,
action: () =>
this.dialogs
.open(new PolymorpheusComponent(ServiceAdditionalModal), {
label: `Additional Info`,
data: pkg,
})
.subscribe(),
},
pkg.marketplaceUrl
? {
icon: 'tuiIconShoppingBagLarge',
icon: 'tuiIconShoppingBag',
name: 'Marketplace Listing',
description: `View ${manifest.title} on the Marketplace`,
routerLink: `/portal/system/marketplace`,
params: { url: pkg.marketplaceUrl, id: manifest.id },
}
: {
icon: 'tuiIconShoppingBagLarge',
icon: 'tuiIconShoppingBag',
name: 'Marketplace Listing',
description: `This package was not installed from the marketplace`,
},

4
web/projects/ui/src/app/routes/portal/routes/service/routes/actions.component.ts
View File

@@ -50,7 +50,7 @@ import { getAllPackages, getManifest } from 'src/app/utils/get-package-data'
[action]="{
name: action.name,
description: action.description,
icon: 'tuiIconPlayCircleLarge'
icon: 'tuiIconPlayCircle'
}"
(click)="handleAction(action)"
></button>
@@ -75,7 +75,7 @@ export class ServiceActionsRoute {
.pipe(filter(pkg => pkg.stateInfo.state === 'installed'))
readonly action = {
icon: 'tuiIconTrash2Large',
icon: 'tuiIconTrash2',
name: 'Uninstall',
description:
'This will uninstall the service from StartOS and delete all data permanently.',

197
web/projects/ui/src/app/routes/portal/routes/service/routes/service.component.ts
View File

@@ -2,8 +2,15 @@ import { CommonModule } from '@angular/common'
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { ActivatedRoute, NavigationExtras, Router } from '@angular/router'
import { isEmptyObject } from '@start9labs/shared'
import { HealthCheckResult, MainStatus, Manifest } from '@startos'
import { PatchDB } from 'patch-db-client'
import { combineLatest, map, switchMap } from 'rxjs'
import {
ConfigModal,
PackageConfigData,
} from 'src/app/routes/portal/modals/config.component'
import { ServiceBackupsComponent } from 'src/app/routes/portal/routes/service/components/backups.component'
import { InstallingProgressPipe } from 'src/app/routes/portal/routes/service/pipes/install-progress.pipe'
import { ConnectionService } from 'src/app/services/connection.service'
import {
DepErrorService,
@@ -21,87 +28,122 @@ import {
StatusRendering,
} from 'src/app/services/pkg-status-rendering.service'
import { DependentInfo } from 'src/app/types/dependent-info'
import { getManifest } from 'src/app/utils/get-package-data'
import { ServiceActionsComponent } from '../components/actions.component'
import { ServiceAdditionalComponent } from '../components/additional.component'
import { ServiceDependenciesComponent } from '../components/dependencies.component'
import { ServiceHealthChecksComponent } from '../components/health-checks.component'
import { ServiceInterfaceListComponent } from '../components/interface-list.component'
import { ServiceMenuComponent } from '../components/menu.component'
import { ServiceProgressComponent } from '../components/progress.component'
import { ServiceStatusComponent } from '../components/status.component'
import {
PackageConfigData,
ConfigModal,
} from 'src/app/routes/portal/modals/config.component'
import { DependencyInfo } from '../types/dependency-info'
import { getManifest } from 'src/app/utils/get-package-data'
import { InstallingProgressPipe } from 'src/app/routes/portal/routes/service/pipes/install-progress.pipe'
import { Manifest } from '../../../../../../../../../../core/startos/bindings/Manifest'
import { HealthCheckResult } from '../../../../../../../../../../core/startos/bindings/HealthCheckResult'
import { MainStatus } from '../../../../../../../../../../core/startos/bindings/MainStatus'
@Component({
template: `
@if (service$ | async; as service) {
<h3 class="g-title">Status</h3>
<service-status
[connected]="!!(connected$ | async)"
[installingInfo]="service.pkg.stateInfo.installingInfo"
[rendering]="getRendering(service.status)"
[sigtermTimeout]="
service.pkg.status.main.status === 'stopping'
? service.pkg.status.main.timeout
: null
"
/>
@if (
service.pkg.stateInfo.state === 'installing' ||
service.pkg.stateInfo.state === 'updating' ||
service.pkg.stateInfo.state === 'restoring'
) {
<p
*ngFor="
let phase of service.pkg.stateInfo.installingInfo.progress.phases
<section [style.grid-column]="'span 3'">
<h3>Status</h3>
<service-status
[connected]="!!(connected$ | async)"
[installingInfo]="service.pkg.stateInfo.installingInfo"
[rendering]="getRendering(service.status)"
[sigtermTimeout]="
service.pkg.status.main.status === 'stopping'
? service.pkg.status.main.timeout
: null
"
[progress]="phase.progress"
>
{{ phase.name }}
</p>
} @else {
@if (
service.pkg.stateInfo.state === 'installed' &&
service.status.primary !== 'backingUp'
) {
@if (connected$ | async) {
<service-actions
[pkg]="service.pkg"
[dependencies]="service.dependencies"
/>
}
/>
@if (isInstalled(service) && (connected$ | async)) {
<service-actions
[pkg]="service.pkg"
[dependencies]="service.dependencies"
/>
}
</section>
@if (isInstalled(service)) {
<section [style.grid-column]="'span 3'">
<h3>Backups</h3>
<service-backups [pkg]="service.pkg" />
</section>
<section [style.grid-column]="'span 6'">
<h3>Metrics</h3>
TODO
</section>
<section [style.grid-column]="'span 4'" [style.align-self]="'start'">
<h3>Menu</h3>
<service-menu [pkg]="service.pkg" />
</section>
<div>
<section>
<h3>Health Checks</h3>
<service-health-checks [checks]="(health$ | async) || []" />
</section>
<section>
<h3>Dependencies</h3>
<service-dependencies [dependencies]="service.dependencies" />
</section>
</div>
<section [style.grid-column]="'span 4'" [style.align-self]="'start'">
<h3>Service Interfaces</h3>
<service-interface-list
[pkg]="service.pkg"
[status]="service.status"
/>
</section>
}
@if (
service.status.primary === 'running' && (health$ | async);
as checks
) {
<service-health-checks [checks]="checks" />
}
@if (service.dependencies.length) {
<service-dependencies [dependencies]="service.dependencies" />
}
<service-menu [pkg]="service.pkg" />
<service-additional [pkg]="service.pkg" />
@if (isInstalling(service.pkg.stateInfo.state)) {
@for (
item of service.pkg.stateInfo.installingInfo?.progress?.phases;
track $index
) {
<p [progress]="item.progress">{{ item.name }}</p>
}
}
}
`,
styles: `
:host {
display: grid;
grid-template-columns: repeat(12, 1fr);
flex-direction: column;
gap: 1rem;
margin: 1rem -1rem 0;
}
:host-context(tui-root._mobile) {
display: flex;
}
section {
display: flex;
flex-direction: column;
width: 100%;
padding: 1rem 1.5rem 0.5rem;
border-radius: 1rem;
background: var(--tui-clear);
box-shadow: inset 0 7rem 0 -4rem var(--tui-clear);
clip-path: polygon(0 1.5rem, 1.5rem 0, 100% 0, 100% 100%, 0 100%);
}
h3 {
margin-bottom: 1.25rem;
}
div {
display: flex;
flex-direction: column;
gap: inherit;
grid-column: span 4;
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
@@ -113,7 +155,7 @@ import { MainStatus } from '../../../../../../../../../../core/startos/bindings/
ServiceHealthChecksComponent,
ServiceDependenciesComponent,
ServiceMenuComponent,
ServiceAdditionalComponent,
ServiceBackupsComponent,
InstallingProgressPipe,
],
})
@@ -134,13 +176,11 @@ export class ServiceRoute {
this.depErrorService.getPkgDepErrors$(pkgId),
]),
),
map(([pkg, depErrors]) => {
return {
pkg,
dependencies: this.getDepInfo(pkg, depErrors),
status: renderPkgStatus(pkg, depErrors),
}
}),
map(([pkg, depErrors]) => ({
pkg,
dependencies: this.getDepInfo(pkg, depErrors),
status: renderPkgStatus(pkg, depErrors),
})),
)
readonly health$ = this.pkgId$.pipe(
@@ -150,6 +190,16 @@ export class ServiceRoute {
map(toHealthCheck),
)
isInstalling(state: string): boolean {
return (
state === 'installing' || state === 'updating' || state === 'restoring'
)
}
isInstalled({ pkg, status }: any): boolean {
return pkg.stateInfo.state === 'installed' && status.primary !== 'backingUp'
}
getRendering({ primary }: PackageStatus): StatusRendering {
return PrimaryRendering[primary]
}
@@ -160,9 +210,9 @@ export class ServiceRoute {
): DependencyInfo[] {
const manifest = getManifest(pkg)
return Object.keys(pkg.currentDependencies)
.filter(id => !!manifest.dependencies[id])
.map(id => this.getDepValues(pkg, manifest, id, depErrors))
return Object.keys(pkg.currentDependencies).map(id =>
this.getDepValues(pkg, manifest, id, depErrors),
)
}
private getDepValues(
@@ -203,7 +253,7 @@ export class ServiceRoute {
depId: string,
depErrors: PkgDependencyErrors,
) {
const depError = depErrors[pkgManifest.id]
const depError = depErrors[depId]
let errorText: string | null = null
let fixText: string | null = null
@@ -271,10 +321,15 @@ export class ServiceRoute {
version: pkg.currentDependencies[depId].versionSpec,
}
const navigationExtras: NavigationExtras = {
// @TODO state not being used by marketplace component. Maybe it is not important to use.
state: { dependentInfo },
queryParams: { id: depId },
}
await this.router.navigate(['marketplace', depId], navigationExtras)
await this.router.navigate(
['portal', 'system', 'marketplace'],
navigationExtras,
)
}
}

2
web/projects/ui/src/app/routes/portal/routes/system/backups/modals/history.component.ts
View File

@@ -26,7 +26,7 @@ import { GetBackupIconPipe } from '../pipes/get-backup-icon.pipe'
Past Events
<button
tuiButton
appearance="secondary-destructive"
appearance="danger-solid"
[disabled]="disabled"
(click)="delete()"
>

8
web/projects/ui/src/app/routes/portal/routes/system/notifications/item.component.ts
View File

@@ -2,20 +2,20 @@ import { CommonModule } from '@angular/common'
import {
ChangeDetectionStrategy,
Component,
Input,
inject,
Input,
} from '@angular/core'
import { RouterLink } from '@angular/router'
import { Manifest } from '@startos'
import { tuiPure } from '@taiga-ui/cdk'
import { TuiSvgModule } from '@taiga-ui/core'
import { TuiLineClampModule } from '@taiga-ui/kit'
import { PatchDB } from 'patch-db-client'
import { Observable, first } from 'rxjs'
import { first, Observable } from 'rxjs'
import { ServerNotification } from 'src/app/services/api/api.types'
import { DataModel } from 'src/app/services/patch-db/data-model'
import { NotificationService } from 'src/app/services/notification.service'
import { DataModel } from 'src/app/services/patch-db/data-model'
import { toRouterLink } from 'src/app/utils/to-router-link'
import { Manifest } from '../../../../../../../../../../core/startos/bindings/Manifest'
@Component({
selector: '[notificationItem]',

8
web/projects/ui/src/app/services/actions.service.ts
View File

@@ -1,19 +1,19 @@
import { inject, Injectable } from '@angular/core'
import { ErrorService, LoadingService } from '@start9labs/shared'
import { Manifest } from '@startos'
import { TuiDialogOptions, TuiDialogService } from '@taiga-ui/core'
import { TUI_PROMPT, TuiPromptData } from '@taiga-ui/kit'
import { PatchDB } from 'patch-db-client'
import { defaultIfEmpty, filter, firstValueFrom } from 'rxjs'
import {
PackageConfigData,
ConfigModal,
PackageConfigData,
} from 'src/app/routes/portal/modals/config.component'
import { ApiService } from 'src/app/services/api/embassy-api.service'
import { FormDialogService } from 'src/app/services/form-dialog.service'
import { DataModel } from 'src/app/services/patch-db/data-model'
import { hasCurrentDeps } from 'src/app/utils/has-deps'
import { getAllPackages } from 'src/app/utils/get-package-data'
import { PatchDB } from 'patch-db-client'
import { Manifest } from '../../../../../../core/startos/bindings/Manifest'
import { hasCurrentDeps } from 'src/app/utils/has-deps'
@Injectable({
providedIn: 'root',

5
web/projects/ui/src/app/services/api/api.fixures.ts
View File

@@ -913,7 +913,7 @@ export module Mock {
integer: false,
}),
}),
displayAs: 'I\'m {{last-name}}, {{first-name}} {{last-name}}',
displayAs: `I'm {{last-name}}, {{first-name}} {{last-name}}`,
uniqueBy: 'last-name',
},
),
@@ -1295,6 +1295,7 @@ export module Mock {
icon: '/assets/img/service-icons/bitcoind.svg',
installedAt: new Date().toISOString(),
lastBackup: null,
nextBackup: null,
status: {
configured: true,
main: {
@@ -1539,6 +1540,7 @@ export module Mock {
icon: '/assets/img/service-icons/btc-rpc-proxy.png',
installedAt: new Date().toISOString(),
lastBackup: null,
nextBackup: null,
status: {
configured: false,
main: {
@@ -1681,6 +1683,7 @@ export module Mock {
icon: '/assets/img/service-icons/lnd.png',
installedAt: new Date().toISOString(),
lastBackup: null,
nextBackup: null,
status: {
configured: true,
main: {

4
web/projects/ui/src/app/services/api/mock-patch.ts
View File

@@ -146,7 +146,8 @@ export const mockPatchData: DataModel = {
},
icon: '/assets/img/service-icons/bitcoind.svg',
installedAt: new Date().toISOString(),
lastBackup: null,
lastBackup: new Date(new Date().valueOf() - 604800001).toISOString(),
nextBackup: new Date(new Date().valueOf() + 100000000).toISOString(),
status: {
configured: true,
main: {
@@ -419,6 +420,7 @@ export const mockPatchData: DataModel = {
icon: '/assets/img/service-icons/lnd.png',
installedAt: new Date().toISOString(),
lastBackup: null,
nextBackup: null,
status: {
configured: true,
main: {

1
web/projects/ui/src/app/services/patch-db/data-model.ts
View File

@@ -131,6 +131,7 @@ export type PackageDataEntry<T extends StateInfo = StateInfo> =
stateInfo: T
installedAt: string
outboundProxy: string | null
nextBackup: string | null
}
export type StateInfo = InstalledState | InstallingState | UpdatingState

3
web/tsconfig.json
View File

@@ -23,7 +23,8 @@
"paths": {
/* These paths are relative to each app base folder */
"@start9labs/marketplace": ["../marketplace/index"],
"@start9labs/shared": ["../shared/src/public-api"]
"@start9labs/shared": ["../shared/src/public-api"],
"@startos": ["../../../core/startos/bindings/index"]
},
"typeRoots": ["node_modules/@types"],
"types": ["node"]