feat: Add feature card to adapter page

ui/deployment/feature-cards.yml

@@ -29,3 +29,7 @@
   componentPath: './dataset/components/dataset-feature-card/dataset-feature-card.component'
   componentName: DatasetFeatureCardComponent
   moduleName: spDatasets
+- id: adapter
+  componentPath: './connect/components/connect-feature-card/connect-feature-card.component'
+  componentName: ConnectFeatureCardComponent
+  moduleName: spConnect

ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element-runtime-info/live-preview-table/live-preview-table.component.html

@@ -20,7 +20,7 @@
     @if (showTitle) {
         <p>{{ 'Here is a preview of your data:' | translate }}</p>
     }
-    <table mat-table [dataSource]="runtimeInfo">
+    <table mat-table [dataSource]="runtimeInfo" [class.compact]="compact">
         <ng-container matColumnDef="runtimeName">
             <th mat-header-cell *matHeaderCellDef>
                 <strong>{{ 'Runtime Name' | translate }}</strong>
@@ -30,32 +30,34 @@
             </td>
         </ng-container>
 
-        <ng-container matColumnDef="label">
-            <th mat-header-cell *matHeaderCellDef>
-                <strong>{{ 'Field Name' | translate }}</strong>
-            </th>
-            <td mat-cell *matCellDef="let element">
-                {{ element.label }}
-            </td>
-        </ng-container>
+        @if (!compact) {
+            <ng-container matColumnDef="label">
+                <th mat-header-cell *matHeaderCellDef>
+                    <strong>{{ 'Field Name' | translate }}</strong>
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    {{ element.label }}
+                </td>
+            </ng-container>
 
-        <ng-container matColumnDef="description">
-            <th mat-header-cell *matHeaderCellDef>
-                <strong>{{ 'Description' | translate }}</strong>
-            </th>
-            <td mat-cell *matCellDef="let element">
-                {{ element.description }}
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="description">
+                <th mat-header-cell *matHeaderCellDef>
+                    <strong>{{ 'Description' | translate }}</strong>
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    {{ element.description }}
+                </td>
+            </ng-container>
 
-        <ng-container matColumnDef="runtimeType">
-            <th mat-header-cell *matHeaderCellDef>
-                <strong>{{ 'Type' | translate }}</strong>
-            </th>
-            <td mat-cell *matCellDef="let element">
-                {{ element.runtimeType }}
-            </td>
-        </ng-container>
+            <ng-container matColumnDef="runtimeType">
+                <th mat-header-cell *matHeaderCellDef>
+                    <strong>{{ 'Type' | translate }}</strong>
+                </th>
+                <td mat-cell *matCellDef="let element">
+                    {{ element.runtimeType }}
+                </td>
+            </ng-container>
+        }
 
         <ng-container matColumnDef="value">
             <th mat-header-cell *matHeaderCellDef>

ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element-runtime-info/live-preview-table/live-preview-table.component.scss

@@ -41,3 +41,12 @@
     text-align: center;
     background: #ffe7ad;
 }
+
+.mat-mdc-table.compact {
+    --mat-table-row-item-container-height: 36px;
+
+    .mat-mdc-header-cell,
+    .mat-mdc-cell {
+        font-size: var(--font-size-xs);
+    }
+}

ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element-runtime-info/live-preview-table/live-preview-table.component.ts

@@ -16,7 +16,7 @@
  *
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { EventSchema } from '@streampipes/platform-services';
 import { RuntimeInfo } from '../pipeline-element-runtime-info.model';
 import {
@@ -53,7 +53,7 @@ import { TranslatePipe } from '@ngx-translate/core';
         TranslatePipe,
     ],
 })
-export class LivePreviewTableComponent {
+export class LivePreviewTableComponent implements OnInit {
     @Input()
     eventSchema: EventSchema;
 
@@ -63,13 +63,14 @@ export class LivePreviewTableComponent {
     @Input()
     showTitle = true;
 
-    displayedColumns: string[] = [
-        'runtimeName',
-        'label',
-        'description',
-        'runtimeType',
-        'value',
-    ];
+    @Input()
+    compact = false;
+
+    displayedColumns: string[] = [];
 
-    constructor() {}
+    ngOnInit() {
+        this.displayedColumns = this.compact
+            ? ['runtimeName', 'value']
+            : ['runtimeName', 'label', 'description', 'runtimeType', 'value'];
+    }
 }

ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element-runtime-info/pipeline-element-runtime-info.component.html

@@ -18,6 +18,7 @@
 
 @if (runtimeInfo) {
     <sp-live-preview-table
+        [compact]="compact"
         [showTitle]="showTitle"
         [eventSchema]="streamDescription.eventSchema"
         [runtimeInfo]="runtimeInfo"

ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element-runtime-info/pipeline-element-runtime-info.component.ts

@@ -38,7 +38,6 @@ import { LivePreviewErrorComponent } from './live-preview-error/live-preview-err
 @Component({
     selector: 'sp-pipeline-element-runtime-info',
     templateUrl: './pipeline-element-runtime-info.component.html',
-    styleUrls: ['./pipeline-element-runtime-info.component.scss'],
     imports: [LivePreviewTableComponent, LivePreviewErrorComponent],
 })
 export class PipelineElementRuntimeInfoComponent implements OnInit, OnDestroy {
@@ -48,6 +47,9 @@ export class PipelineElementRuntimeInfoComponent implements OnInit, OnDestroy {
     @Input()
     showTitle = true;
 
+    @Input()
+    compact = false;
+
     runtimeData: { runtimeName: string; value: any }[];
     runtimeInfo: RuntimeInfo[];
     timer: any;

ui/src/app/connect/components/connect-feature-card/connect-feature-card.component.html

@@ -0,0 +1,116 @@
+<!--
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+  -->
+
+@if (adapter) {
+    <div fxFlexFill fxLayout="column" class="feature-card-outer">
+        <sp-feature-card-header
+            [title]="adapter.name"
+            [description]="adapter.description"
+            [icon]="assetLinkType?.linkIcon"
+            [iconColor]="assetLinkType?.linkColor"
+            [detailsLink]="assetLinkType?.navPaths"
+            (close)="onClose?.()"
+            (onDetailsClick)="navigateToAdapter()"
+        >
+        </sp-feature-card-header>
+
+        <div class="feature-card-meta-card meta-card">
+            <sp-feature-card-meta-section [label]="'Status' | translate">
+                <div
+                    class="feature-card-meta-box"
+                    fxLayout="row"
+                    fxLayoutAlign="start center"
+                    fxLayoutGap="0.75rem"
+                >
+                    <mat-icon class="feature-card-meta-icon">
+                        {{ adapter.running ? 'play_circle' : 'pause_circle' }}
+                    </mat-icon>
+                    <div>
+                        <div class="feature-card-meta-field-label">
+                            {{ 'Adapter status' | translate }}
+                        </div>
+                        <sp-label
+                            class="mt-xs"
+                            textCase="uppercase"
+                            [tone]="getStatusTone()"
+                            size="small"
+                            variant="soft"
+                        >
+                            {{ getStatusLabel() | translate }}
+                        </sp-label>
+                    </div>
+                </div>
+            </sp-feature-card-meta-section>
+
+            <div class="feature-card-meta-section__label">
+                {{ 'Preview info' | translate }}
+            </div>
+            <div class="adapter-info-table" fxLayout="column">
+                <div class="adapter-info-row">
+                    <span class="adapter-info-key">{{
+                        'Created' | translate
+                    }}</span>
+                    <span class="adapter-info-value">{{
+                        formatDate(adapter.createdAt)
+                    }}</span>
+                </div>
+
+                <div class="adapter-info-row">
+                    <span class="adapter-info-key">{{
+                        'Output stream' | translate
+                    }}</span>
+                    <span class="adapter-info-value">{{
+                        getOutputStreamName()
+                    }}</span>
+                </div>
+
+                <div class="adapter-info-row">
+                    <span class="adapter-info-key">{{
+                        'Schema fields' | translate
+                    }}</span>
+                    <span class="adapter-info-value">{{
+                        getFieldCount()
+                    }}</span>
+                </div>
+            </div>
+        </div>
+
+        <div fxFlex fxLayout="column" class="feature-preview-wrapper">
+            <div class="adapter-live-preview">
+                <div class="feature-card-meta-section__label">
+                    {{ 'Live preview' | translate }}
+                </div>
+
+                <div class="adapter-live-preview__content">
+                    @if (streamDescription) {
+                        <sp-pipeline-element-runtime-info
+                            [compact]="true"
+                            [showTitle]="false"
+                            [streamDescription]="streamDescription"
+                        >
+                        </sp-pipeline-element-runtime-info>
+                    } @else {
+                        <span class="adapter-preview-empty">{{
+                            'No live preview available.' | translate
+                        }}</span>
+                    }
+                </div>
+            </div>
+        </div>
+    </div>
+}

ui/src/app/connect/components/connect-feature-card/connect-feature-card.component.scss

@@ -0,0 +1,99 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+:host {
+    width: 100%;
+    height: 100%;
+}
+
+.meta-card {
+    display: flex;
+    flex-direction: column;
+}
+
+.adapter-info-table {
+    gap: 0.25rem;
+}
+
+.adapter-info-row {
+    display: grid;
+    grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
+    gap: 0.75rem;
+    align-items: start;
+    padding: 0.5rem 0.625rem;
+    border-radius: 0.375rem;
+    border: 1px solid transparent;
+}
+
+.adapter-info-row:nth-child(odd) {
+    background: var(--color-bg-1);
+    border-color: color-mix(in srgb, var(--color-bg-3) 45%, transparent);
+}
+
+.adapter-info-row:nth-child(even) {
+    background: var(--color-bg-0);
+    border-color: color-mix(in srgb, var(--color-bg-3) 65%, transparent);
+}
+
+.adapter-info-key {
+    font-size: var(--text-xs, 0.75rem);
+    font-weight: 600;
+    opacity: 0.78;
+    line-height: 1.2;
+    word-break: break-word;
+    text-transform: capitalize;
+    letter-spacing: 0.03em;
+    padding-top: 0.125rem;
+}
+
+.adapter-info-value {
+    min-width: 0;
+    font-size: var(--text-sm, 0.85rem);
+    font-weight: var(--font-weight-bold);
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+    border-left: 1px solid var(--color-bg-3);
+    padding-left: 0.75rem;
+    opacity: 0.95;
+}
+
+.adapter-live-preview {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    gap: 0.5rem;
+}
+
+.adapter-live-preview__content {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    border: 1px solid var(--color-bg-3);
+    border-radius: 0.5rem;
+    padding: 0.25rem;
+}
+
+.adapter-preview-empty {
+    display: block;
+    padding: 0.5rem;
+}
+
+.adapter-live-preview__content > sp-pipeline-element-runtime-info {
+    display: block;
+}