diff --git a/web/projects/ui/src/app/routes/portal/components/header/header.component.ts b/web/projects/ui/src/app/routes/portal/components/header/header.component.ts index 7c76bb03c..4278a5c2b 100644 --- a/web/projects/ui/src/app/routes/portal/components/header/header.component.ts +++ b/web/projects/ui/src/app/routes/portal/components/header/header.component.ts @@ -1,16 +1,16 @@ -import { AsyncPipe } from '@angular/common' -import { ChangeDetectionStrategy, Component, inject } from '@angular/core' -import { toSignal } from '@angular/core/rxjs-interop' import { - IsActiveMatchOptions, - RouterLink, - RouterLinkActive, -} from '@angular/router' + ChangeDetectionStrategy, + Component, + inject, + OnInit, + viewChild, + ViewContainerRef, +} from '@angular/core' +import { toSignal } from '@angular/core/rxjs-interop' import { PatchDB } from 'patch-db-client' -import { BreadcrumbsService } from 'src/app/services/breadcrumbs.service' import { DataModel } from 'src/app/services/patch-db/data-model' +import { TitleService } from 'src/app/services/title.service' import { HeaderMenuComponent } from './menu.component' -import { HeaderMobileComponent } from './mobile.component' import { HeaderNavigationComponent } from './navigation.component' import { HeaderSnekDirective } from './snek.directive' import { HeaderStatusComponent } from './status.component' @@ -19,7 +19,8 @@ import { HeaderStatusComponent } from './status.component' selector: 'header[appHeader]', template: ` -
+
+
[tuiIconButton] { + margin-inline-start: -1rem; + } + } } `, ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ - RouterLink, - RouterLinkActive, - AsyncPipe, HeaderStatusComponent, HeaderNavigationComponent, HeaderSnekDirective, - HeaderMobileComponent, HeaderMenuComponent, ], }) -export class HeaderComponent { - readonly options = OPTIONS - readonly breadcrumbs$ = inject(BreadcrumbsService) +export class HeaderComponent implements OnInit { + private readonly title = inject(TitleService) + + readonly vcr = viewChild.required('vcr', { read: ViewContainerRef }) readonly snekScore = toSignal( inject>(PatchDB).watch$( 'ui', @@ -144,11 +161,8 @@ export class HeaderComponent { ), { initialValue: 0 }, ) -} -const OPTIONS: IsActiveMatchOptions = { - paths: 'exact', - queryParams: 'ignored', - fragment: 'ignored', - matrixParams: 'ignored', + ngOnInit() { + this.title.register(this.vcr()) + } } diff --git a/web/projects/ui/src/app/routes/portal/components/header/menu.component.ts b/web/projects/ui/src/app/routes/portal/components/header/menu.component.ts index 263048d26..6b6369a31 100644 --- a/web/projects/ui/src/app/routes/portal/components/header/menu.component.ts +++ b/web/projects/ui/src/app/routes/portal/components/header/menu.component.ts @@ -1,16 +1,11 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core' import { RouterLink } from '@angular/router' -import { - TuiButton, - TuiDataList, - TuiDialogService, - TuiDropdown, - TuiIcon, -} from '@taiga-ui/core' +import { TuiResponsiveDialogService } from '@taiga-ui/addon-mobile' +import { TuiButton, TuiDataList, TuiDropdown, TuiIcon } from '@taiga-ui/core' import { ApiService } from 'src/app/services/api/embassy-api.service' import { AuthService } from 'src/app/services/auth.service' -import { RESOURCES } from 'src/app/utils/resources' import { STATUS } from 'src/app/services/status.service' +import { RESOURCES } from 'src/app/utils/resources' import { ABOUT } from './about.component' @Component({ @@ -102,7 +97,7 @@ import { ABOUT } from './about.component' export class HeaderMenuComponent { private readonly api = inject(ApiService) private readonly auth = inject(AuthService) - private readonly dialogs = inject(TuiDialogService) + private readonly dialogs = inject(TuiResponsiveDialogService) open = false diff --git a/web/projects/ui/src/app/routes/portal/components/header/mobile.component.ts b/web/projects/ui/src/app/routes/portal/components/header/mobile.component.ts deleted file mode 100644 index a988e3cc6..000000000 --- a/web/projects/ui/src/app/routes/portal/components/header/mobile.component.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { TuiIcon } from '@taiga-ui/core' -import { - ChangeDetectionStrategy, - Component, - inject, - Input, -} from '@angular/core' -import { RouterLink } from '@angular/router' -import { WA_WINDOW } from '@ng-web-apis/common' -import { Breadcrumb } from 'src/app/services/breadcrumbs.service' - -@Component({ - standalone: true, - selector: '[headerMobile]', - template: ` - @if (headerMobile && headerMobile.length > 1) { - - - - } - {{ title }} - - `, - styles: [ - ` - @import '@taiga-ui/core/styles/taiga-ui-local'; - - :host { - display: flex; - align-items: center; - font-size: 1rem; - - > * { - display: none; - } - } - - .title { - @include text-overflow(); - max-width: calc(100% - 5rem); - text-transform: capitalize; - - &:first-child { - margin-inline-start: 1rem; - } - } - - :host-context(tui-root._mobile) { - > * { - display: block; - } - } - `, - ], - changeDetection: ChangeDetectionStrategy.OnPush, - imports: [TuiIcon, RouterLink], -}) -export class HeaderMobileComponent { - private readonly win = inject(WA_WINDOW) - - @Input() headerMobile: readonly Breadcrumb[] | null = [] - - get title() { - return ( - this.headerMobile?.[this.headerMobile?.length - 1]?.title || - (this.win.location.search ? 'Utilities' : 'Services') - ) - } - - get back() { - return ( - this.headerMobile?.[this.headerMobile?.length - 2]?.routerLink || - '/portal/services' - ) - } -} diff --git a/web/projects/ui/src/app/routes/portal/components/tabs.component.ts b/web/projects/ui/src/app/routes/portal/components/tabs.component.ts index bf8b3cac3..eed5739bc 100644 --- a/web/projects/ui/src/app/routes/portal/components/tabs.component.ts +++ b/web/projects/ui/src/app/routes/portal/components/tabs.component.ts @@ -7,8 +7,8 @@ import { } from '@angular/core' import { toSignal } from '@angular/core/rxjs-interop' import { RouterLink, RouterLinkActive } from '@angular/router' -import { TuiSheetDialogService, TuiTabBar } from '@taiga-ui/addon-mobile' -import { TuiDialogService, TuiIcon } from '@taiga-ui/core' +import { TuiResponsiveDialogService, TuiTabBar } from '@taiga-ui/addon-mobile' +import { TuiIcon } from '@taiga-ui/core' import { TuiBadgeNotification } from '@taiga-ui/kit' import { ABOUT } from 'src/app/routes/portal/components/header/about.component' import { BadgeService } from 'src/app/services/badge.service' @@ -133,8 +133,7 @@ const FILTER = ['/portal/services', '/portal/settings', '/portal/marketplace'] ], }) export class TabsComponent { - private readonly sheets = inject(TuiSheetDialogService) - private readonly dialogs = inject(TuiDialogService) + private readonly dialogs = inject(TuiResponsiveDialogService) private readonly links = viewChildren(RouterLinkActive) index = 3 @@ -154,7 +153,7 @@ export class TabsComponent { } more(content: TemplateRef) { - this.sheets.open(content, { label: 'Start OS' }).subscribe({ + this.dialogs.open(content, { label: 'Start OS' }).subscribe({ complete: () => this.update(), }) } diff --git a/web/projects/ui/src/app/routes/portal/portal.component.ts b/web/projects/ui/src/app/routes/portal/portal.component.ts index 2c04ca9f9..67a592020 100644 --- a/web/projects/ui/src/app/routes/portal/portal.component.ts +++ b/web/projects/ui/src/app/routes/portal/portal.component.ts @@ -1,12 +1,9 @@ -import { TuiScrollbar } from '@taiga-ui/core' import { CommonModule } from '@angular/common' import { ChangeDetectionStrategy, Component, inject } from '@angular/core' -import { takeUntilDestroyed } from '@angular/core/rxjs-interop' -import { NavigationEnd, Router, RouterOutlet } from '@angular/router' +import { RouterOutlet } from '@angular/router' +import { TuiScrollbar } from '@taiga-ui/core' import { PatchDB } from 'patch-db-client' -import { filter } from 'rxjs' import { TabsComponent } from 'src/app/routes/portal/components/tabs.component' -import { BreadcrumbsService } from 'src/app/services/breadcrumbs.service' import { DataModel } from 'src/app/services/patch-db/data-model' import { HeaderComponent } from './components/header/header.component' @@ -48,15 +45,5 @@ import { HeaderComponent } from './components/header/header.component' ], }) export class PortalComponent { - private readonly breadcrumbs = inject(BreadcrumbsService) - private readonly _ = inject(Router) - .events.pipe( - filter((event): event is NavigationEnd => event instanceof NavigationEnd), - takeUntilDestroyed(), - ) - .subscribe(e => { - this.breadcrumbs.update(e.url.replace('/portal/services/', '')) - }) - readonly name$ = inject>(PatchDB).watch$('ui', 'name') } diff --git a/web/projects/ui/src/app/routes/portal/routes/logs/logs.component.ts b/web/projects/ui/src/app/routes/portal/routes/logs/logs.component.ts index acfaca8d0..6f54c95dc 100644 --- a/web/projects/ui/src/app/routes/portal/routes/logs/logs.component.ts +++ b/web/projects/ui/src/app/routes/portal/routes/logs/logs.component.ts @@ -4,9 +4,11 @@ import { TuiSelectModule, TuiTextfieldControllerModule } from '@taiga-ui/legacy' import { LogsComponent } from 'src/app/routes/portal/components/logs/logs.component' import { RR } from 'src/app/services/api/api.types' import { ApiService } from 'src/app/services/api/embassy-api.service' +import { TitleDirective } from 'src/app/services/title.service' @Component({ template: ` + Logs Marketplace
@@ -152,14 +152,13 @@ import { DataModel } from 'src/app/services/patch-db/data-model' MarketplaceTileComponent, MarketplaceMenuComponent, MarketplaceNotificationComponent, - MarketplaceControlsComponent, - MarketplacePreviewComponent, MarketplaceSidebarsComponent, TuiScrollbar, FilterPackagesPipeModule, + TitleDirective, ], }) -export class MarketplaceComponent { +export default class MarketplaceComponent { private readonly categoryService = inject(AbstractCategoryService) private readonly marketplaceService = inject(MarketplaceService) private readonly router = inject(Router) diff --git a/web/projects/ui/src/app/routes/portal/routes/marketplace/marketplace.routes.ts b/web/projects/ui/src/app/routes/portal/routes/marketplace/marketplace.routes.ts index 4cee0a2c9..38a0d2500 100644 --- a/web/projects/ui/src/app/routes/portal/routes/marketplace/marketplace.routes.ts +++ b/web/projects/ui/src/app/routes/portal/routes/marketplace/marketplace.routes.ts @@ -4,8 +4,7 @@ const MARKETPLACE_ROUTES: Routes = [ { path: '', pathMatch: 'full', - loadComponent: () => - import('./marketplace.component').then(m => m.MarketplaceComponent), + loadComponent: () => import('./marketplace.component'), }, ] diff --git a/web/projects/ui/src/app/routes/portal/routes/metrics/metrics.component.ts b/web/projects/ui/src/app/routes/portal/routes/metrics/metrics.component.ts index 884f4b336..3981b5991 100644 --- a/web/projects/ui/src/app/routes/portal/routes/metrics/metrics.component.ts +++ b/web/projects/ui/src/app/routes/portal/routes/metrics/metrics.component.ts @@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core' import { toSignal } from '@angular/core/rxjs-interop' import { TuiProgress } from '@taiga-ui/kit' import { CpuComponent } from 'src/app/routes/portal/routes/metrics/cpu.component' +import { TitleDirective } from 'src/app/services/title.service' import { TemperatureComponent } from 'src/app/routes/portal/routes/metrics/temperature.component' import { MetricComponent } from 'src/app/routes/portal/routes/metrics/metric.component' import { MetricsService } from 'src/app/routes/portal/routes/metrics/metrics.service' @@ -12,6 +13,7 @@ import { TimeService } from 'src/app/services/time.service' standalone: true, selector: 'app-metrics', template: ` + Metrics
Notifications

+ `, styles: ` - :host { - width: 100%; - margin: 0 -1rem; + td:first-child { + white-space: nowrap; + max-width: 10rem; + overflow: hidden; + text-overflow: ellipsis; } - strong { - white-space: nowrap; + td:last-child { + text-align: right; + grid-area: span 2; + } + + span { + margin-inline-start: 0.5rem; + vertical-align: middle; + } + + :host-context(tui-root._mobile) { + display: grid; + grid-template-columns: min-content 1fr min-content; + align-items: center; + padding: 1rem 0.5rem; + gap: 0.5rem; + + td { + padding: 0; + } } `, changeDetection: ChangeDetectionStrategy.OnPush, - imports: [TuiTitle, TuiFade], - hostDirectives: [TuiCell], + imports: [TuiButton, TuiAvatar], }) export class ServiceActionRequestComponent { private readonly actionService = inject(ActionService) - @Input({ required: true }) - actionRequest!: T.ActionRequest + readonly actionRequest = input.required() + readonly services = input.required>() - @Input({ required: true }) - pkg!: PackageDataEntry - - @HostListener('click') - async handleAction() { - const { title } = getManifest(this.pkg) - const { actionId, packageId } = this.actionRequest + readonly pkg = computed(() => this.services()[this.actionRequest().packageId]) + readonly title = computed(() => getManifest(this.pkg()).title) + async handle() { this.actionService.present({ pkgInfo: { - id: packageId, - title, - mainStatus: this.pkg.status.main, - icon: this.pkg.icon, + id: this.actionRequest().packageId, + title: this.title(), + mainStatus: this.pkg().status.main, + icon: this.pkg().icon, }, actionInfo: { - id: actionId, - metadata: this.pkg.actions[actionId], + id: this.actionRequest().actionId, + metadata: this.pkg().actions[this.actionRequest().actionId], }, - requestInfo: this.actionRequest, + requestInfo: this.actionRequest(), }) } } diff --git a/web/projects/ui/src/app/routes/portal/routes/services/components/action-requests.component.ts b/web/projects/ui/src/app/routes/portal/routes/services/components/action-requests.component.ts index b93e2aa90..47a8b0eb4 100644 --- a/web/projects/ui/src/app/routes/portal/routes/services/components/action-requests.component.ts +++ b/web/projects/ui/src/app/routes/portal/routes/services/components/action-requests.component.ts @@ -4,73 +4,57 @@ import { computed, input, } from '@angular/core' -import { T } from '@start9labs/start-sdk' +import { TuiTable } from '@taiga-ui/addon-table' import { PackageDataEntry } from 'src/app/services/patch-db/data-model' -import { getManifest } from 'src/app/utils/get-package-data' import { ServiceActionRequestComponent } from './action-request.component' - -type ActionRequest = T.ActionRequest & { - actionName: string -} +import { ServicePlaceholderComponent } from './placeholder.component' @Component({ standalone: true, selector: 'service-action-requests', template: ` - @for (request of requests().critical; track $index) { - - } - @for (request of requests().important; track $index) { - - } - @if (requests().critical.length + requests().important.length === 0) { -
No pending tasks
+
Tasks
+ + + + + + + + + + + @for (item of requests(); track $index) { + + } + +
ServiceTypeDescription
+ @if (!requests().length) { + + All tasks complete + } `, styles: ` - small { - margin-inline-start: 0.25rem; - padding-inline-start: 0.5rem; - box-shadow: inset 1px 0 var(--tui-border-normal); - } - - blockquote { - text-align: center; - font: var(--tui-font-text-l); - color: var(--tui-text-tertiary); + :host { + grid-column: span 6; } `, + host: { class: 'g-card' }, changeDetection: ChangeDetectionStrategy.OnPush, - imports: [ServiceActionRequestComponent], + imports: [ + TuiTable, + ServiceActionRequestComponent, + ServicePlaceholderComponent, + ], }) export class ServiceActionRequestsComponent { readonly pkg = input.required() - readonly requests = computed(() => { - const { id } = getManifest(this.pkg()) - const critical: ActionRequest[] = [] - const important: ActionRequest[] = [] + readonly services = input.required>() + readonly requests = computed(() => Object.values(this.pkg().requestedActions) - .filter(r => r.active && r.request.packageId === id) - .forEach(r => { - const action = { - ...r.request, - actionName: this.pkg().actions[r.request.actionId].name, - } - - if (r.request.severity === 'critical') { - critical.push(action) - } else { - important.push(action) - } - }) - - return { critical, important } - }) + .filter(r => r.active) + .sort((a, b) => a.request.severity.localeCompare(b.request.severity)), + ) } diff --git a/web/projects/ui/src/app/routes/portal/routes/services/components/actions.component.ts b/web/projects/ui/src/app/routes/portal/routes/services/components/actions.component.ts index fc044cb01..d10045e0a 100644 --- a/web/projects/ui/src/app/routes/portal/routes/services/components/actions.component.ts +++ b/web/projects/ui/src/app/routes/portal/routes/services/components/actions.component.ts @@ -56,8 +56,22 @@ import { getManifest } from 'src/app/utils/get-package-data' grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1rem; justify-content: center; + inline-size: 20rem; + max-inline-size: 100%; margin-block-start: 1rem; } + + :host-context(tui-root._mobile) { + display: flex; + margin: 0; + inline-size: min-content; + + [tuiButton] { + font-size: 0; + gap: 0; + border-radius: 100%; + } + } `, ], changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/web/projects/ui/src/app/routes/portal/routes/services/components/dependencies.component.ts b/web/projects/ui/src/app/routes/portal/routes/services/components/dependencies.component.ts index 851799282..155a42648 100644 --- a/web/projects/ui/src/app/routes/portal/routes/services/components/dependencies.component.ts +++ b/web/projects/ui/src/app/routes/portal/routes/services/components/dependencies.component.ts @@ -5,7 +5,7 @@ import { TuiIcon, TuiTitle } from '@taiga-ui/core' import { TuiAvatar } from '@taiga-ui/kit' import { TuiCell } from '@taiga-ui/layout' import { PackageDataEntry } from 'src/app/services/patch-db/data-model' -import { ServiceActionRequestsComponent } from './action-requests.component' +import { ServicePlaceholderComponent } from './placeholder.component' @Component({ selector: 'service-dependencies', @@ -24,33 +24,15 @@ import { ServiceActionRequestsComponent } from './action-requests.component' - @if (services[d.key]; as service) { - - } } @empty { -
No dependencies
+ + No dependencies + } `, styles: ` - a { - margin: 0 -1rem; - - &::after { - display: none; - } - } - - service-action-requests { - display: block; - padding: 1rem 0 0 2.375rem; - margin: -1rem 0 1rem 1.125rem; - box-shadow: inset 0.125rem 0 var(--tui-border-normal); - } - - blockquote { - text-align: center; - font: var(--tui-font-text-l); - color: var(--tui-text-tertiary); + :host { + grid-column: span 3; } `, host: { class: 'g-card' }, @@ -58,12 +40,12 @@ import { ServiceActionRequestsComponent } from './action-requests.component' standalone: true, imports: [ KeyValuePipe, + RouterLink, TuiCell, TuiAvatar, TuiTitle, - ServiceActionRequestsComponent, - RouterLink, TuiIcon, + ServicePlaceholderComponent, ], }) export class ServiceDependenciesComponent { diff --git a/web/projects/ui/src/app/routes/portal/routes/services/components/error.component.ts b/web/projects/ui/src/app/routes/portal/routes/services/components/error.component.ts index b980ff300..072c69770 100644 --- a/web/projects/ui/src/app/routes/portal/routes/services/components/error.component.ts +++ b/web/projects/ui/src/app/routes/portal/routes/services/components/error.component.ts @@ -54,7 +54,7 @@ import { getManifest } from 'src/app/utils/get-package-data' `, styles: ` :host { - grid-column: span 2; + grid-column: span 4; } header { diff --git a/web/projects/ui/src/app/routes/portal/routes/services/components/health-check.component.ts b/web/projects/ui/src/app/routes/portal/routes/services/components/health-check.component.ts index 1bd96dae3..0ce752e8d 100644 --- a/web/projects/ui/src/app/routes/portal/routes/services/components/health-check.component.ts +++ b/web/projects/ui/src/app/routes/portal/routes/services/components/health-check.component.ts @@ -1,62 +1,61 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core' import { T } from '@start9labs/start-sdk' -import { TuiIcon, TuiLoader, TuiTitle } from '@taiga-ui/core' -import { TuiSkeleton } from '@taiga-ui/kit' -import { TuiCell } from '@taiga-ui/layout' +import { TuiIcon, TuiLoader } from '@taiga-ui/core' @Component({ - selector: 'service-health-check', + standalone: true, + selector: 'tr[healthCheck]', template: ` - @if (loading) { - - } @else { - - } - - - {{ connected ? check.name : '' }} - - - {{ connected ? message : '' }} + {{ healthCheck.name }} + + + @if (loading) { + + } @else { + + } + {{ message }} - + `, styles: [ ` - :first-letter { - text-transform: uppercase; + span { + display: flex; + align-items: center; + gap: 0.5rem; } - tui-loader { - width: 1.5rem; - height: 1.5rem; + :host-context(tui-root._mobile) { + display: flex; + flex-direction: column; + + td:first-child { + font-weight: bold; + padding-bottom: 0; + } + + td:last-child { + color: var(--tui-text-secondary); + } } `, ], - hostDirectives: [TuiCell], changeDetection: ChangeDetectionStrategy.OnPush, - standalone: true, - imports: [TuiLoader, TuiIcon, TuiTitle, TuiSkeleton], + imports: [TuiLoader, TuiIcon], }) export class ServiceHealthCheckComponent { @Input({ required: true }) - check!: T.NamedHealthCheckResult - - @Input() - connected = false + healthCheck!: T.NamedHealthCheckResult get loading(): boolean { - const { result } = this.check + const { result } = this.healthCheck return !result || result === 'starting' || result === 'loading' } get icon(): string { - switch (this.check.result) { + switch (this.healthCheck.result) { case 'success': return '@tui.check' case 'failure': @@ -67,7 +66,7 @@ export class ServiceHealthCheckComponent { } get color(): string { - switch (this.check.result) { + switch (this.healthCheck.result) { case 'success': return 'var(--tui-status-positive)' case 'failure': @@ -82,21 +81,21 @@ export class ServiceHealthCheckComponent { } get message(): string { - if (!this.check.result) { + if (!this.healthCheck.result) { return 'Awaiting result...' } - switch (this.check.result) { + switch (this.healthCheck.result) { case 'starting': return 'Starting...' case 'success': - return `Success: ${this.check.message}` + return `Success: ${this.healthCheck.message}` case 'loading': case 'failure': - return this.check.message + return this.healthCheck.message // disabled default: - return this.check.result + return this.healthCheck.result } } } diff --git a/web/projects/ui/src/app/routes/portal/routes/services/components/health-checks.component.ts b/web/projects/ui/src/app/routes/portal/routes/services/components/health-checks.component.ts index fcfed15fb..aa1c29163 100644 --- a/web/projects/ui/src/app/routes/portal/routes/services/components/health-checks.component.ts +++ b/web/projects/ui/src/app/routes/portal/routes/services/components/health-checks.component.ts @@ -1,42 +1,42 @@ -import { AsyncPipe } from '@angular/common' -import { - ChangeDetectionStrategy, - Component, - inject, - Input, -} from '@angular/core' +import { ChangeDetectionStrategy, Component, input } from '@angular/core' import { T } from '@start9labs/start-sdk' -import { ServiceHealthCheckComponent } from 'src/app/routes/portal/routes/services/components/health-check.component' -import { ConnectionService } from 'src/app/services/connection.service' +import { TuiTable } from '@taiga-ui/addon-table' +import { ServiceHealthCheckComponent } from './health-check.component' +import { ServicePlaceholderComponent } from './placeholder.component' @Component({ standalone: true, selector: 'service-health-checks', template: `
Health Checks
- @for (check of checks; track $index) { - - } @empty { -
No health checks
+ + + + + + + + + @for (check of checks(); track $index) { + + } + +
NameStatus
+ @if (!checks().length) { + + No health checks + } `, styles: ` - blockquote { - text-align: center; - font: var(--tui-font-text-l); - color: var(--tui-text-tertiary); + :host { + grid-column: span 3; } `, host: { class: 'g-card' }, changeDetection: ChangeDetectionStrategy.OnPush, - imports: [AsyncPipe, ServiceHealthCheckComponent], + imports: [ServiceHealthCheckComponent, ServicePlaceholderComponent, TuiTable], }) export class ServiceHealthChecksComponent { - @Input({ required: true }) - checks: readonly T.NamedHealthCheckResult[] = [] - - readonly connected$ = inject(ConnectionService) + readonly checks = input.required() } diff --git a/web/projects/ui/src/app/routes/portal/routes/services/components/interface.component.ts b/web/projects/ui/src/app/routes/portal/routes/services/components/interface.component.ts index 6b492d1ec..e8ff3b69b 100644 --- a/web/projects/ui/src/app/routes/portal/routes/services/components/interface.component.ts +++ b/web/projects/ui/src/app/routes/portal/routes/services/components/interface.component.ts @@ -25,8 +25,10 @@ import { MappedInterface } from '../types/mapped-interface' {{ info.type }} - {{ info.description }} - + + {{ info.description }} + + @if (info.public) {