System Utilities
-
- @for (
- item of system | keyvalue | tuiFilter: bySearch : search;
- track $index
- ) {
-
- } @empty {
- Nothing found
- }
-
-
+
+
+
+
+
+
+
+
+ | + | Name | +Version | +Status | +Controls | +
|---|---|---|---|---|
| No services installed | +||||
+ @for (item of items; track $index) {
+
+ {{ value }}
+ }
+
+ }
+
+ `,
+ styles: `
+ @import '@taiga-ui/core/styles/taiga-ui-local';
+
+ :host {
+ --clip-path: polygon(
+ 0 2rem,
+ 1.25rem 0,
+ 8.75rem 0,
+ calc(10rem + 0.1em) calc(2rem - 0.1em),
+ calc(100% - 1.25rem) 2rem,
+ 100% 4rem,
+ 100% calc(100% - 2rem),
+ calc(100% - 1.25rem) 100%,
+ 1.25rem 100%,
+ 0 calc(100% - 2rem)
+ );
+ }
+
+ .links {
+ display: grid;
+ grid-template: 1fr 1fr / 1fr 1fr 1fr;
+ gap: 0.75rem;
+ padding: 1.5rem;
+ font-size: min(0.75rem, 1.25vw);
+ }
+
+ .link {
+ @include transition(background);
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ aspect-ratio: 1/1;
+ border-radius: 0.25rem;
+ border: 1px solid var(--tui-clear);
+
+ tui-icon {
+ width: 50%;
+ height: 50%;
+ }
+
+ tui-badge-notification {
+ position: absolute;
+ top: 10%;
+ right: 10%;
+ }
+
+ &:hover {
+ background: var(--tui-clear);
+ }
+ }
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [TuiIconModule, RouterLink, TuiBadgeNotificationModule, AsyncPipe],
+})
+export class UtilitiesComponent {
+ private readonly badge = inject(BadgeService)
+ readonly items = Object.keys(SYSTEM_UTILITIES)
+ .filter(key => key !== '/portal/system/notifications')
+ .map(key => ({
+ ...SYSTEM_UTILITIES[key],
+ routerLink: key,
+ notification$: this.badge.getCount(key),
+ }))
+}
diff --git a/web/projects/ui/src/app/apps/portal/routes/desktop/dektop-loading.service.ts b/web/projects/ui/src/app/apps/portal/routes/desktop/dektop-loading.service.ts
deleted file mode 100644
index f0e50f0f2..000000000
--- a/web/projects/ui/src/app/apps/portal/routes/desktop/dektop-loading.service.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { inject, Injectable } from '@angular/core'
-import { PatchDB } from 'patch-db-client'
-import {
- endWith,
- ignoreElements,
- Observable,
- shareReplay,
- startWith,
- take,
- tap,
-} from 'rxjs'
-import { DataModel } from 'src/app/services/patch-db/data-model'
-import { DesktopService } from '../../services/desktop.service'
-
-/**
- * This service loads initial values for desktop items
- * and is used to show loading indicator.
- */
-@Injectable({
- providedIn: 'root',
-})
-export class DektopLoadingService extends Observable{{ info.description }}
{{ info.typeDetail }}
-
+ [attr.href]="href"
+ (click.stop)="(0)"
+ >
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [TuiButtonModule, CommonModule, TuiSvgModule],
})
export class ServiceInterfaceComponent {
- private readonly document = inject(DOCUMENT)
private readonly config = inject(ConfigService)
@Input({ required: true, alias: 'serviceInterface' })
@@ -44,11 +44,7 @@ export class ServiceInterfaceComponent {
@Input()
disabled = false
- launchUI(info: InterfaceInfo) {
- this.document.defaultView?.open(
- this.config.launchableAddress(info),
- '_blank',
- 'noreferrer',
- )
+ get href(): string | null {
+ return this.disabled ? null : this.config.launchableAddress(this.info)
}
}
diff --git a/web/projects/ui/src/app/apps/portal/routes/service/components/status.component.ts b/web/projects/ui/src/app/apps/portal/routes/service/components/status.component.ts
index db021af59..2fce9e78e 100644
--- a/web/projects/ui/src/app/apps/portal/routes/service/components/status.component.ts
+++ b/web/projects/ui/src/app/apps/portal/routes/service/components/status.component.ts
@@ -12,18 +12,17 @@ import { InstallProgressPipe } from '../pipes/install-progress.pipe'
@Component({
selector: 'service-status',
template: `
-
+ @if (installProgress) {
+
+ Installing
+
+ {{ installProgress | installProgress }}
+
+ } @else {
{{ connected ? rendering.display : 'Unknown' }}
-
- Downloading
Validating
Unpacking
-Status
{{ cat.key }}
+
- (ServiceConfigModal, {
+ label: `${manifest.title} configuration`,
+ data: { pkgId: manifest.id },
+ })
+ }
+
+ async start({ manifest }: PackageDataEntry, unmet: boolean): Promise {
+ const deps = `${manifest.title} has unmet dependencies. It will not work as expected.`
+
+ if (
+ (!unmet || (await this.alert(deps))) &&
+ (!manifest.alerts.start || (await this.alert(manifest.alerts.start)))
+ ) {
+ this.doStart(manifest.id)
+ }
+ }
+
+ stop(pkg: PackageDataEntry): void {
+ const { title, alerts } = pkg.manifest
+
+ let content = alerts.stop || ''
+
+ if (hasCurrentDeps(pkg)) {
+ const depMessage = `Services that depend on ${title} will no longer work properly and may crash`
+ content = content ? `${content}.\n\n${depMessage}` : depMessage
+ }
+
+ if (content) {
+ this.dialogs
+ .open(TUI_PROMPT, getOptions(content, 'Stop'))
+ .pipe(filter(Boolean))
+ .subscribe(() => this.doStop(pkg.manifest.id))
+ } else {
+ this.doStop(pkg.manifest.id)
+ }
+ }
+
+ restart(pkg: PackageDataEntry): void {
+ if (hasCurrentDeps(pkg)) {
+ this.dialogs
+ .open(
+ TUI_PROMPT,
+ getOptions(
+ `Services that depend on ${pkg.manifest} may temporarily experiences issues`,
+ 'Restart',
+ ),
+ )
+ .pipe(filter(Boolean))
+ .subscribe(() => this.doRestart(pkg.manifest.id))
+ } else {
+ this.doRestart(pkg.manifest.id)
+ }
+ }
+
+ private async doStart(id: string): Promise {
+ const loader = this.loader.open(`Starting...`).subscribe()
+
+ try {
+ await this.api.startPackage({ id })
+ } catch (e: any) {
+ this.errorService.handleError(e)
+ } finally {
+ loader.unsubscribe()
+ }
+ }
+
+ private async doStop(id: string): Promise {
+ const loader = this.loader.open(`Stopping...`).subscribe()
+
+ try {
+ await this.api.stopPackage({ id })
+ } catch (e: any) {
+ this.errorService.handleError(e)
+ } finally {
+ loader.unsubscribe()
+ }
+ }
+
+ private async doRestart(id: string): Promise {
+ const loader = this.loader.open(`Restarting...`).subscribe()
+
+ try {
+ await this.api.restartPackage({ id })
+ } catch (e: any) {
+ this.errorService.handleError(e)
+ } finally {
+ loader.unsubscribe()
+ }
+ }
+
+ private alert(content: string): Promise {
+ return firstValueFrom(
+ this.dialogs
+ .open(TUI_PROMPT, getOptions(content))
+ .pipe(defaultIfEmpty(false)),
+ )
+ }
+}
+
+function getOptions(
+ content: string,
+ yes = 'Continue',
+): Partial> {
+ return {
+ label: 'Warning',
+ size: 's',
+ data: {
+ content,
+ yes,
+ no: 'Cancel',
+ },
+ }
+}
diff --git a/web/projects/ui/src/app/apps/portal/services/badge.service.ts b/web/projects/ui/src/app/apps/portal/services/badge.service.ts
index e8ff3982f..2039e4db9 100644
--- a/web/projects/ui/src/app/apps/portal/services/badge.service.ts
+++ b/web/projects/ui/src/app/apps/portal/services/badge.service.ts
@@ -10,9 +10,11 @@ import {
map,
Observable,
pairwise,
+ shareReplay,
startWith,
switchMap,
} from 'rxjs'
+import { EOSService } from 'src/app/services/eos.service'
import { DataModel } from 'src/app/services/patch-db/data-model'
import { MarketplaceService } from 'src/app/services/marketplace.service'
import { ConnectionService } from 'src/app/services/connection.service'
@@ -23,6 +25,10 @@ import { ConnectionService } from 'src/app/services/connection.service'
export class BadgeService {
private readonly emver = inject(Emver)
private readonly patch = inject(PatchDB)
+ private readonly settings$ = combineLatest([
+ this.patch.watch$('server-info', 'ntp-synced'),
+ inject(EOSService).updateAvailable$,
+ ]).pipe(map(([synced, update]) => Number(!synced) + Number(update)))
private readonly marketplace = inject(
AbstractMarketplaceService,
) as MarketplaceService
@@ -47,7 +53,7 @@ export class BadgeService {
),
)
- private readonly updateCount$ = combineLatest([
+ private readonly updates$ = combineLatest([
this.marketplace.getMarketplace$(true),
this.local$,
]).pipe(
@@ -65,12 +71,15 @@ export class BadgeService {
new Set(),
).size,
),
+ shareReplay(1),
)
getCount(id: string): Observable {
switch (id) {
case '/portal/system/updates':
- return this.updateCount$
+ return this.updates$
+ case '/portal/system/settings':
+ return this.settings$
default:
return EMPTY
}
diff --git a/web/projects/ui/src/app/apps/portal/services/desktop.service.ts b/web/projects/ui/src/app/apps/portal/services/desktop.service.ts
deleted file mode 100644
index ac63cfbbd..000000000
--- a/web/projects/ui/src/app/apps/portal/services/desktop.service.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { inject, Injectable } from '@angular/core'
-import { TuiAlertService } from '@taiga-ui/core'
-import { ApiService } from 'src/app/services/api/embassy-api.service'
-
-@Injectable({
- providedIn: 'root',
-})
-export class DesktopService {
- private readonly alerts = inject(TuiAlertService)
- private readonly api = inject(ApiService)
-
- order = new Map()
- items: readonly string[] = []
-
- add(id: string) {
- if (this.items.includes(id)) return
-
- this.items = this.items.concat(id)
- this.save(this.items)
- }
-
- remove(id: string) {
- if (!this.items.includes(id)) return
-
- this.items = this.items.filter(x => x !== id)
- this.save(this.items)
- }
-
- save(ids: readonly string[] = []) {
- this.api
- .setDbValue(['desktop'], Array.from(new Set(ids)))
- .catch(() =>
- this.alerts
- .open(
- 'Desktop might be out of sync. Please refresh the page to fix it.',
- { status: 'warning' },
- )
- .subscribe(),
- )
- }
-
- reorder(order: Map) {
- this.order = order
-
- const items: string[] = [...this.items]
-
- Array.from(this.order.entries()).forEach(([index, order]) => {
- items[order] = this.items[index]
- })
-
- this.save(items)
- }
-}
diff --git a/web/projects/ui/src/app/apps/portal/services/services.service.ts b/web/projects/ui/src/app/apps/portal/services/services.service.ts
index 8afc6f43e..458e83227 100644
--- a/web/projects/ui/src/app/apps/portal/services/services.service.ts
+++ b/web/projects/ui/src/app/apps/portal/services/services.service.ts
@@ -13,15 +13,8 @@ export class ServicesService extends Observable {
private readonly services$ = inject(PatchDB)
.watch$('package-data')
.pipe(
- map(pkgs => Object.values(pkgs)),
- startWith([]),
- pairwise(),
- filter(([prev, next]) => {
- const length = next.length
- return !length || prev.length !== length
- }),
- map(([_, pkgs]) =>
- pkgs.sort((a, b) =>
+ map(pkgs =>
+ Object.values(pkgs).sort((a, b) =>
b.manifest.title.toLowerCase() > a.manifest.title.toLowerCase()
? -1
: 1,
diff --git a/web/projects/ui/src/app/apps/portal/types/navigation-item.ts b/web/projects/ui/src/app/apps/portal/types/navigation-item.ts
deleted file mode 100644
index ea912247c..000000000
--- a/web/projects/ui/src/app/apps/portal/types/navigation-item.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface NavigationItem {
- readonly routerLink: string
- readonly icon: string
- readonly title: string
-}
diff --git a/web/projects/ui/src/app/apps/portal/utils/to-navigation-item.ts b/web/projects/ui/src/app/apps/portal/utils/to-navigation-item.ts
index b33afe3a4..d4109d496 100644
--- a/web/projects/ui/src/app/apps/portal/utils/to-navigation-item.ts
+++ b/web/projects/ui/src/app/apps/portal/utils/to-navigation-item.ts
@@ -1,8 +1,13 @@
import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
import { SYSTEM_UTILITIES } from '../constants/system-utilities'
-import { NavigationItem } from '../types/navigation-item'
import { toRouterLink } from './to-router-link'
+export interface NavigationItem {
+ readonly routerLink: string
+ readonly icon: string
+ readonly title: string
+}
+
export function toNavigationItem(
id: string,
packages: Record = {},
diff --git a/web/projects/ui/src/app/common/svg-definitions.component.ts b/web/projects/ui/src/app/common/svg-definitions.component.ts
index 36d6462b9..b73909485 100644
--- a/web/projects/ui/src/app/common/svg-definitions.component.ts
+++ b/web/projects/ui/src/app/common/svg-definitions.component.ts
@@ -6,6 +6,20 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
template: `