remote-access/configurations/remote-access-configuration-list/remote-access-configuration-list.component.ts
OnInit
| selector | c8y-remote-access-configuration-list |
| standalone | true |
| imports |
DataGridModule
TitleComponent
C8yTranslateDirective
ActionBarItemComponent
IconDirective
EmptyStateComponent
C8yTranslatePipe
|
| templateUrl | ./remote-access-configuration-list.component.html |
Properties |
Methods |
|
constructor(remoteAccess: RemoteAccessService, activatedRoute: ActivatedRoute, modalService: ModalService, alert: AlertService, bsModalService: BsModalService, translateService: TranslateService)
|
|||||||||||||||||||||
|
Parameters :
|
| Async addEndpoint |
addEndpoint()
|
|
Returns :
any
|
| Async defaultAddEndpoint | |||||||||
defaultAddEndpoint(deviceId: string, provider: RemoteAccessProtocolProvider)
|
|||||||||
|
Parameters :
Returns :
unknown
|
| Async defaultEditEndpoint | |||||||||
defaultEditEndpoint(deviceId: string, configuration: RemoteAccessConfiguration)
|
|||||||||
|
Parameters :
Returns :
unknown
|
| getProtocolProviderForConfiguration | ||||||
getProtocolProviderForConfiguration(configuration: RemoteAccessConfiguration)
|
||||||
|
Parameters :
Returns :
any
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Async reload |
reload()
|
|
Returns :
any
|
| actionControls |
Type : ActionControl[]
|
Default value : [
{
type: BuiltInActionType.Edit,
callback: async (entry: RemoteAccessConfiguration) => {
const provider = this.getProtocolProviderForConfiguration(entry);
try {
let result: RemoteAccessConfiguration;
if (provider.editEndpoint) {
result = await provider.editEndpoint(this.deviceId, entry);
} else {
result = await this.defaultEditEndpoint(this.deviceId, entry);
}
if (!result) {
return;
}
this.alert.success(gettext('Endpoint saved.'));
} catch (e) {
console.warn(e);
this.alert.danger(gettext('Failed to save endpoint.'), e);
}
this.reload();
}
},
{
type: BuiltInActionType.Delete,
callback: async (entry: RemoteAccessConfiguration) => {
const result = await this.modalService.confirm(
gettext('Delete endpoint'),
this.translateService.instant(
gettext(
`You are about to delete endpoint "{{ endpointName }}". Do you want to proceed?`
),
{ endpointName: entry.name }
),
Status.DANGER,
{ cancel: gettext('Cancel'), ok: gettext('Delete') }
);
if (!result) {
return;
}
const provider = this.getProtocolProviderForConfiguration(entry);
try {
await provider.removeEndpoint(this.deviceId, entry);
this.alert.success(gettext('Endpoint deleted.'));
} catch (e) {
console.warn(e);
this.alert.danger(gettext('Failed to delete endpoint.'), e);
}
this.reload();
}
}
]
|
| columns |
Type : Column[]
|
Default value : [
new IconDeviceGridColumn(
{
headerCellRendererComponent: EmptyComponent
},
context => {
const provider = this.protocolProviders.find(p => p.protocolName === context.item.protocol);
return provider?.protocolIcon || 'laptop';
}
),
{
name: 'name',
header: gettext('Endpoint'),
path: 'name'
},
{
name: 'hostname',
header: gettext('Host'),
path: 'hostname'
},
{
name: 'port',
header: gettext('Port'),
path: 'port'
},
{
name: 'protocol',
header: gettext('Protocol'),
path: 'protocol'
},
{
name: 'connect',
header: gettext('Connect'),
cellRendererComponent: RemoteAccessConnectButtonComponent
}
]
|
| deviceId |
Type : string
|
| displayOptions |
Type : DisplayOptions
|
Default value : {
bordered: false,
striped: true,
filter: true,
gridHeader: true,
hover: true
}
|
| gridTitle |
Default value : gettext('Remote access endpoints')
|
| pagination |
Type : Pagination
|
Default value : {
pageSize: 10,
currentPage: 1
}
|
| protocolProviders |
Type : RemoteAccessProtocolProvider[]
|
Default value : []
|
| rows |
Type : RemoteAccessConfiguration[]
|
Default value : []
|
<c8y-title translate>Remote access</c8y-title>
<c8y-action-bar-item [placement]="'right'">
<button
class="btn btn-link"
(click)="addEndpoint()"
[disabled]="!protocolProviders?.length"
[attr.data-cy]="'remoteAccessConfigurationList--add-endpoint'"
>
<i [c8yIcon]="'plus-circle'"></i>
<span translate>Add endpoint</span>
</button>
</c8y-action-bar-item>
<div class="content-fullpage d-flex d-col border-top">
<c8y-data-grid
[title]="gridTitle"
[rows]="rows"
[columns]="columns"
[pagination]="pagination"
(onReload)="reload()"
[actionControls]="actionControls"
[displayOptions]="displayOptions"
>
<c8y-ui-empty-state
[icon]="'window-restore'"
[title]="'No endpoints configured.' | translate"
[subtitle]="'Click below to add your first endpoint.' | translate"
[horizontal]="false"
>
<button
class="btn btn-default"
(click)="addEndpoint()"
translate
>
Add endpoint
</button>
</c8y-ui-empty-state>
</c8y-data-grid>
</div>