+ {{ action.name }}
+
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [TuiSvgModule],
+})
+export class ServiceActionComponent {
+ @Input({ required: true })
+ action!: ActionItem
+}
diff --git a/frontend/projects/ui/src/app/apps/portal/routes/service/components/actions.component.ts b/frontend/projects/ui/src/app/apps/portal/routes/service/components/actions.component.ts
new file mode 100644
index 000000000..80577811b
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/portal/routes/service/components/actions.component.ts
@@ -0,0 +1,238 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { ErrorService, LoadingService } from '@start9labs/shared'
+import { TuiButtonModule, TuiDialogService } from '@taiga-ui/core'
+import { tuiPure } from '@taiga-ui/cdk'
+import { TUI_PROMPT } from '@taiga-ui/kit'
+import { PatchDB } from 'patch-db-client'
+import { filter } from 'rxjs'
+import {
+ PackageStatus,
+ PrimaryStatus,
+ renderPkgStatus,
+} from 'src/app/services/pkg-status-rendering.service'
+import {
+ DataModel,
+ InterfaceInfo,
+ PackageDataEntry,
+} from 'src/app/services/patch-db/data-model'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { FormDialogService } from 'src/app/services/form-dialog.service'
+import { hasCurrentDeps } from 'src/app/util/has-deps'
+import { ServiceConfigModal } from '../modals/config.component'
+import { PackageConfigData } from '../types/package-config-data'
+import { ToDependenciesPipe } from '../pipes/to-dependencies.pipe'
+
+@Component({
+ selector: 'service-actions',
+ template: `
+
+
+
+
+
+
+
+ `,
+ styles: [':host { display: flex; gap: 1rem }'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ providers: [ToDependenciesPipe],
+ imports: [CommonModule, TuiButtonModule],
+})
+export class ServiceActionsComponent {
+ @Input({ required: true })
+ service!: PackageDataEntry
+
+ constructor(
+ private readonly dialogs: TuiDialogService,
+ private readonly errorService: ErrorService,
+ private readonly loader: LoadingService,
+ private readonly embassyApi: ApiService,
+ private readonly formDialog: FormDialogService,
+ private readonly patch: PatchDB{{ action.description }}
+
+ {{ additional.name }}
+
+ {{ additional.description }}
+ + {{ package }} +
+ The following modifications have been made to {{ package }} to satisfy + {{ dep }}: +-
+
+
{{ dep.version | displayEmver }}
+
+ {{ dep.errorText || 'Satisfied' }}
+
+
+
+ {{ dep.actionText }}
+
+ `,
+ styles: [
+ `
+ img {
+ width: 1.5rem;
+ height: 1.5rem;
+ border-radius: 100%;
+ }
+
+ tui-svg {
+ width: 1rem;
+ height: 1rem;
+ }
+ `,
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [EmverPipesModule, CommonModule, TuiSvgModule],
+})
+export class ServiceDependencyComponent {
+ @Input({ required: true, alias: 'serviceDependency' })
+ dep!: DependencyInfo
+
+ get color(): string {
+ return this.dep.errorText
+ ? 'var(--tui-warning-fill)'
+ : 'var(--tui-success-fill)'
+ }
+}
diff --git a/frontend/projects/ui/src/app/apps/portal/routes/service/components/health-check.component.ts b/frontend/projects/ui/src/app/apps/portal/routes/service/components/health-check.component.ts
new file mode 100644
index 000000000..68848965b
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/portal/routes/service/components/health-check.component.ts
@@ -0,0 +1,113 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { TuiLoaderModule, TuiSvgModule } from '@taiga-ui/core'
+import {
+ HealthCheckResult,
+ HealthResult,
+} from 'src/app/services/patch-db/data-model'
+
+@Component({
+ selector: 'service-health-check',
+ template: `
+
+ {{ check.name }}
+
+ `,
+ styles: [
+ `
+ :first-letter {
+ text-transform: uppercase;
+ }
+
+ tui-loader {
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+ `,
+ ],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [CommonModule, TuiLoaderModule, TuiSvgModule],
+})
+export class ServiceHealthCheckComponent {
+ @Input({ required: true })
+ check!: HealthCheckResult
+
+ @Input()
+ connected = false
+
+ get loading(): boolean {
+ const { result } = this.check
+
+ return (
+ !result ||
+ result === HealthResult.Starting ||
+ result === HealthResult.Loading
+ )
+ }
+
+ get icon(): string {
+ switch (this.check.result) {
+ case HealthResult.Success:
+ return 'tuiIconCheckLarge'
+ case HealthResult.Failure:
+ return 'tuiIconAlertTriangleLarge'
+ default:
+ return 'tuiIconMinusLarge'
+ }
+ }
+
+ get color(): string {
+ switch (this.check.result) {
+ case HealthResult.Success:
+ return 'var(--tui-success-fill)'
+ case HealthResult.Failure:
+ return 'var(--tui-warning-fill)'
+ case HealthResult.Starting:
+ case HealthResult.Loading:
+ return 'var(--tui-primary)'
+ default:
+ return 'var(--tui-text-02)'
+ }
+ }
+
+ get message(): string {
+ if (!this.check.result) {
+ return 'Awaiting result...'
+ }
+
+ const prefix =
+ this.check.result !== HealthResult.Failure &&
+ this.check.result !== HealthResult.Loading
+ ? this.check.result
+ : ''
+
+ switch (this.check.result) {
+ case HealthResult.Failure:
+ return prefix + this.check.error
+ case HealthResult.Starting:
+ return `${prefix}...`
+ case HealthResult.Success:
+ return `${prefix}: ${this.check.message}`
+ case HealthResult.Loading:
+ return prefix + this.check.message
+ default:
+ return prefix
+ }
+ }
+}
diff --git a/frontend/projects/ui/src/app/apps/portal/routes/service/components/interface.component.ts b/frontend/projects/ui/src/app/apps/portal/routes/service/components/interface.component.ts
new file mode 100644
index 000000000..2794c2693
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/portal/routes/service/components/interface.component.ts
@@ -0,0 +1,53 @@
+import { DOCUMENT, CommonModule } from '@angular/common'
+import {
+ ChangeDetectionStrategy,
+ Component,
+ inject,
+ Input,
+} from '@angular/core'
+import { TuiButtonModule, TuiSvgModule } from '@taiga-ui/core'
+import { ConfigService } from 'src/app/services/config.service'
+import { InterfaceInfo } from 'src/app/services/patch-db/data-model'
+import { ExtendedInterfaceInfo } from '../pipes/interface-info.pipe'
+
+@Component({
+ selector: 'button[serviceInterface]',
+ template: `
+
+ {{ message }}
+
+
+ {{ info.name }}
+
+
+ `,
+ 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' })
+ info!: ExtendedInterfaceInfo
+
+ @Input()
+ disabled = false
+
+ launchUI(info: InterfaceInfo) {
+ this.document.defaultView?.open(
+ this.config.launchableAddress(info),
+ '_blank',
+ 'noreferrer',
+ )
+ }
+}
diff --git a/frontend/projects/ui/src/app/apps/portal/routes/service/components/menu.component.ts b/frontend/projects/ui/src/app/apps/portal/routes/service/components/menu.component.ts
new file mode 100644
index 000000000..a227d4a6f
--- /dev/null
+++ b/frontend/projects/ui/src/app/apps/portal/routes/service/components/menu.component.ts
@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { TuiSvgModule } from '@taiga-ui/core'
+import { ServiceMenu } from '../pipes/to-menu.pipe'
+
+@Component({
+ selector: '[serviceMenu]',
+ template: `
+ {{ info.description }}
+ {{ info.typeDetail }}
+
+ {{ menu.name }}
+
+
+ {{ menu.description }}
+
+ Standard Actions
+ +Actions for {{ pkg.manifest.title }}
+
+
+
+ - '
+ const content = `${message}${Object.keys(breakages).map(
+ id => `
- ${packages[id].manifest.title} `, + )}
Downloading
+Validating
+Unpacking
+