Skip to content

Commit

Permalink
changed styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@ck-c8y
ck-c8y committed Jan 9, 2025
1 parent fb2d0c3 commit 2ea2346
Showing 1 changed file with 127 additions and 76 deletions.
203 changes: 127 additions & 76 deletions dynamic-mapping-ui/src/shared/connector-details/connector-details.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

<!--
~ Copyright (c) 2022 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
~ and/or its subsidiaries and/or its affiliates and/or their licensors.
Expand All @@ -18,82 +19,129 @@
~
~ @authors Christof Strack
-->
<c8y-title>{{configuration?.name}}</c8y-title>
<c8y-breadcrumb>
<c8y-breadcrumb-item [icon]="'cog'" [label]="'Configuration' | translate"
[path]="'sag-ps-pkg-dynamic-mapping/node3/serviceConfiguration'">
</c8y-breadcrumb-item>
<c8y-breadcrumb-item [label]="'Connectors' | translate"
[path]="'sag-ps-pkg-dynamic-mapping/node3/connectorConfiguration'">
</c8y-breadcrumb-item>
<c8y-breadcrumb-item [label]="configuration?.name"></c8y-breadcrumb-item>
</c8y-breadcrumb>
<div class="card card--fullpage content-fullpage">
<div class="elevation-sm p-24">
<form class="form-horizontal">
<div class="d-grid grid__col--6-6--md">
<div>
<c8y-form-group>
<label class="col-sm-3 control-label">Connector name</label>
<div class="col-sm-8"><input class="form-control" [value]="configuration?.name" readonly></div>
</c8y-form-group>
</div>
<div>
<c8y-form-group>
<label class="m-l-8 c8y-switch"> <input type="checkbox" [checked]="configuration?.enabled"
(change)="onConfigurationToggle()" />
<span></span>Connector status</label>
</c8y-form-group>
</div>
</div>
<div class="d-grid grid__col--6-6--md">
<div>
<c8y-form-group>
<label class="col-sm-3 control-label">Connector type</label>
<div class="col-sm-8"> <input class="form-control" [value]="configuration?.connectorType" readonly></div>
</c8y-form-group>
</div>
<div>
<button class="btn btn-default" title="{{ 'Update connector' | translate }}" (click)="onConfigurationUpdate()"
[disabled]="configuration?.enabled">
<i c8yIcon="pencil"></i>
{{ 'Update connector' | translate }}
</button>
<button class="btn btn-default" title="{{ 'View connector' | translate }}" (click)="onConfigurationUpdate()"
[disabled]="!configuration?.enabled">
<i c8yIcon="eye"></i>
{{ 'View connector' | translate }}
</button>
<c8y-title>{{ configuration?.name }}</c8y-title>
<c8y-breadcrumb>
<c8y-breadcrumb-item
[icon]="'cog'"
[label]="'Configuration' | translate"
[path]="'sag-ps-pkg-dynamic-mapping/node3/serviceConfiguration'"
>
</c8y-breadcrumb-item>
<c8y-breadcrumb-item
[label]="'Connectors' | translate"
[path]="'sag-ps-pkg-dynamic-mapping/node3/connectorConfiguration'"
>
</c8y-breadcrumb-item>
<!-- <c8y-breadcrumb-item [label]="configuration?.name"></c8y-breadcrumb-item> -->
<c8y-breadcrumb-item [label]="'Details & logs'"></c8y-breadcrumb-item>
</c8y-breadcrumb>
<div class="card card--fullpage content-fullpage d-col">
<div class="p-24 separator-bottom">
<form class="form-horizontal">
<div class="d-grid grid__col--6-6--md">
<div>
<c8y-form-group>
<label class="col-sm-3 control-label">Connector name</label>
<div class="col-sm-8">
<input
class="form-control"
[value]="configuration?.name"
readonly
/>
</div>
</c8y-form-group>
</div>
<div>
<c8y-form-group>
<label class="m-l-8 c8y-switch">
<input
type="checkbox"
[checked]="configuration?.enabled"
(change)="onConfigurationToggle()"
/>
<span></span>Connector status</label
>
</c8y-form-group>
</div>
</div>
</div>
</form>
</div>
<div class="elevation-sm _inner-scroll m-t-16 p-24">
<c8y-form-group>
<form class="form-inline">
<label class="control-label m-r-8" title="{{ 'Filter connector logs' | translate }}">Filter connector
logs</label>
<div class="c8y-select-wrapper">
<select class="form-control" style="width: 280px" [(ngModel)]="filterStatusLog.type" name="type">
<ng-container *ngFor="let lt of LoggingEventTypeMap | keyvalue">
<option [ngValue]="lt.key"
*ngIf="lt.value['component'] == 'd11r_connector' || lt.value['component'] == LoggingEventTypeMap[LoggingEventType.ALL].component">
{{ lt.key | formatStringAsWords }}
</option>
</ng-container>
</select>
<div class="d-grid grid__col--6-6--md">
<div>
<c8y-form-group>
<label class="col-sm-3 control-label">Connector type</label>
<div class="col-sm-8">
<input
class="form-control"
[value]="configuration?.connectorType"
readonly
/>
</div>
</c8y-form-group>
</div>
<div>
<button
class="btn btn-default"
title="{{ 'Update connector' | translate }}"
(click)="onConfigurationUpdate()"
[disabled]="configuration?.enabled"
>
<i c8yIcon="pencil"></i>
{{ 'Update connector' | translate }}
</button>
<button
class="btn btn-default"
title="{{ 'View connector' | translate }}"
(click)="onConfigurationUpdate()"
[disabled]="!configuration?.enabled"
>
<i c8yIcon="eye"></i>
{{ 'View connector' | translate }}
</button>
</div>
</div>
<button type="submit" (click)="updateStatusLogs()" class="btn btn-default btn-sm m-l-16">
Update
</button>
</form>
</c8y-form-group>
<div class="inner-scroll">
<div class="page-sticky-header c8y-list__item c8y-list--timeline" style="top: 0px !important">
</div>
<div>
<c8y-form-group class="p-l-24 p-t-24">
<form class="form-inline">
<label
class="control-label m-r-8"
title="{{ 'Filter connector logs' | translate }}"
>Filter connector logs</label
>
<div class="c8y-select-wrapper">
<select
class="form-control"
style="width: 280px"
[(ngModel)]="filterStatusLog.type"
name="type"
>
<ng-container *ngFor="let lt of LoggingEventTypeMap | keyvalue">
<option
[ngValue]="lt.key"
*ngIf="
lt.value['component'] == 'd11r_connector' ||
lt.value['component'] ==
LoggingEventTypeMap[LoggingEventType.ALL].component
"
>
{{ lt.key | formatStringAsWords }}
</option>
</ng-container>
</select>
</div>
<button
type="submit"
(click)="updateStatusLogs()"
class="btn btn-default btn-sm m-l-16"
>
Update
</button>
</form>
</c8y-form-group>
</div>
<div class="flex-auto p-l-24" style="overflow-y: hidden">
<div class="c8y-list__item c8y-list--timeline" style="background: var(--c8y-page-sticky-header-background-default)!important;">
<div class="d-flex">
<!-- <div class="c8y-list--timeline__item__date">
<p class="m-0 text-medium text-truncate" title="Date">Date</p>
</div> -->
<div class="c8y-list__item__block flex-grow">
<div class="c8y-list__item__body">
<div class="d-flex">
Expand Down Expand Up @@ -125,9 +173,12 @@
</c8y-li-body>
</c8y-li>
</c8y-li-timeline>
<c8y-ui-empty-state *ngIf="(statusLogs$ | async)?.length === 0" [icon]="'logs'"
[title]="'No logs entries for this connectors.'" [horizontal]="true"></c8y-ui-empty-state>
<c8y-ui-empty-state
*ngIf="(statusLogs$ | async)?.length === 0"
[icon]="'logs'"
[title]="'No logs entries for this connectors.'"
[horizontal]="true"
></c8y-ui-empty-state>
</c8y-list-group>
</div>
</div>
</div>
</div>

0 comments on commit 2ea2346

Please sign in to comment.