blob: b03854a8a8ac088121e1bdc7c2060848acd6a658 [file] [log] [blame]
<div *ngIf="resourceType && resourceType !== 'Topologies' && resourceType !== 'Service Definitions'" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
{{ getTitleSubject() }} Detail
<span *ngIf="showEditOptions() == false" style="padding-left: 15%;" class="text-danger text-center"> Read Only (generated file) </span>
<span *ngIf="hasSelectedResource()" class="pull-right">{{resourceService.getResourceDisplayName(resource)}}</span>
</h4>
</div>
<!-- Provider Configuration Details -->
<div class="panel-body"
*ngIf="hasSelectedResource() && resourceType === 'Provider Configurations'">
<div *ngIf="referencedProviderConfigError" class="alert alert-warning alert-dismissible"
role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"
(click)="referencedProviderConfigError=false">
<span aria-hidden="true">&times;</span>
</button>
Cannot remove <strong>{{resourceService.getResourceDisplayName(resource)}}</strong>
because it is referenced by one or more descriptors
</div>
<div style="padding-bottom: 10px">
<span><strong>Providers</strong></span>
<span *ngIf="!isAddingProvider"
class="clickable inline-glyph glyphicon glyphicon-plus-sign btn btn-xs pull-right"
(click)="isAddingProvider=true"
data-toggle="tooltip" title="Add Provider"></span>
<span *ngIf="isAddingProvider" class="inline-editor inlineEditForm pull-right">
<input type="text" value="name" onClick="this.setSelectionRange(0, this.value.length)"
#newProviderName>
<input type="text" value="role" onClick="this.setSelectionRange(0, this.value.length)"
#newProviderRole>
<button class="btn btn-xs"
(click)="isAddingProvider=false;
addProvider(newProviderName.value, newProviderRole.value)">
<span class="glyphicon glyphicon-ok "></span>
</button>
<button class="btn btn-xs" (click)="isAddingProvider=false">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div class="panel panel-default" *ngFor="let provider of providers">
<div class="panel-heading">
<span>&nbsp;</span>
<span [class]="'clickable inline-glyph glyhpicon glyphicon-' + (isShowProvider(provider) ? 'minus' : 'plus')"
(click)="toggleShowProvider(provider)"></span>
<span><strong>{{ provider.role }}</strong></span>
<span class="clickable inline-glyph glyphicon glyphicon-remove pull-right btn btn-xs"
[title]="'Remove ' + provider.role"
(click)="onRemoveProvider(provider.name)"
data-toggle="tooltip"></span>
</div>
<div class="panel-body" *ngIf="isShowProvider(provider)">
<strong>Name</strong> {{ provider.name }}<br>
<strong>Enabled</strong>&nbsp;<input type="checkbox"
[checked]="isProviderEnabled(provider)"
(click)="onProviderEnabled(provider)"><br>
<div>
<span [class]="'clickable inline-glyph glyhpicon glyphicon-' + (isShowProviderParams(provider) ? 'minus' : 'plus')"
(click)="toggleShowProviderParams(provider)"></span>
<span><strong>Params</strong></span>
<span *ngIf="!isAddingProviderParam(provider)"
class="clickable inline-glyph glyphicon glyphicon-plus-sign btn btn-xs"
(click)="setAddingProviderParam(provider,true)"
data-toggle="tooltip" title="Add Param"></span>
<span *ngIf="isAddingProviderParam(provider)"
class="inline-editor inlineEditForm">
<input type="text" value="name" onClick="this.setSelectionRange(0, this.value.length)"
#newParamName>
<input type="text" value="value" onClick="this.setSelectionRange(0, this.value.length)"
#newParamValue>
<button class="btn btn-xs"
(click)="setAddingProviderParam(provider,false);
addProviderParam(provider, newParamName.value, newParamValue.value);
showProviderParams(provider)">
<span class="glyphicon glyphicon-ok "></span>
</button>
<button class="btn btn-xs" (click)="setAddingProviderParam(provider,false)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
<div class="panel panel-default table-responsive"
*ngIf="isShowProviderParams(provider)">
<table class="table table-sm">
<tr *ngFor="let paramName of getProviderParamNames(provider)">
<td>
<span class="clickable inline-glyph glyphicon glyphicon-remove btn btn-xs"
title="Remove Param"
(click)="onRemoveProviderParam(provider, paramName)"
data-toggle="tooltip"></span>
</td>
<td><strong>{{ paramName }}</strong></td>
<td>
<span class="inline-editable"
(click)="setProviderParamEditFlag(provider, paramName, true)"
*ngIf="!getProviderParamEditFlag(provider, paramName)">{{provider.params[paramName]}}</span>
<span *ngIf="getProviderParamEditFlag(provider, paramName)"
class="inline-editor inlineEditForm">
<input type="text" size="30" [(ngModel)]="provider.params[paramName]">
<button class="btn btn-xs"
(click)="setProviderParamEditFlag(provider, paramName, false);changedProviders=providers">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button class="btn btn-xs"
(click)="setProviderParamEditFlag(provider, paramName, false)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</td>
</tr>
</table>
</div> <!-- Provider params -->
</div>
</div> <!-- Provider Details -->
</div> <!-- Provider panel -->
<div> <!-- Provider Configuration Modification Buttons -->
<button type="button"
title="Remove Provider Configuration"
class="btn btn-default btn-sm pull-left"
(click)="deleteConfirmModal.open('md')"
*ngIf="showEditOptions()"
data-toggle="tooltip">
<span class="glyphicon glyphicon-trash"></span>
</button>
<span class="pull-right">
<button type="button"
title="Discard Changes"
class="btn btn-default btn-sm"
[disabled]="!changedProviders"
(click)="discardConfirmModal.open('md')"
*ngIf="showEditOptions()"
data-toggle="tooltip">
<span class="glyphicon glyphicon-refresh"></span>
</button>
<span>&nbsp;</span>
<button type="button"
title="Update Provider Configuration"
class="btn btn-default btn-sm"
[disabled]="!changedProviders"
(click)="persistChanges()"
*ngIf="showEditOptions()"
data-toggle="tooltip">
<span class="glyphicon glyphicon-floppy-disk"></span>
</button>
</span>
</div>
</div> <!-- Provider Configuration Details -->
<!-- Descriptor Details -->
<div class="panel-body" *ngIf="hasSelectedResource() && resourceType === 'Descriptors'">
<div> <!-- Provider Config reference -->
<div class="panel panel-default col-md-12">
<span class="col-md-12 pull-left">
<span class="col-md-sm"><strong>Provider Configuration</strong>&nbsp;</span>
<span class="col-md-sm inline-editable" (click)="editModePC=true"
*ngIf="!editModePC">{{descriptor.providerConfig}}</span>
<span class="col-md-sm inline-editor inlineEditForm" *ngIf="editModePC">
<input type="text" size="40" [(ngModel)]="descriptor.providerConfig">
<button class="btn btn-xs" (click)="editModePC=false;descriptor.setDirty()">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button class="btn btn-xs" (click)="editModePC=false">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
&nbsp;
<button id="chooseProviderConfig"
class="btn btn-xs"
(click)="chooseProviderConfigModal.open(descriptor, 'sm')"
[disabled]="editModePC"
type="submit"
data-toggle="tooltip"
title="Choose Provider Configuration">
<span class="glyphicon glyphicon-edit"></span>
</button>
</span>
</div>
<app-provider-config-selector #choosePC></app-provider-config-selector>
</div> <!-- Provider Config reference -->
<br><br>
<div class="panel panel-default">
<div class="panel-heading">
<span [class]="'clickable inline-glyph glyhpicon glyphicon-' + (isShowServices() ? 'minus' : 'plus')"
(click)="toggleShowServices()"></span>
<span><strong>Services</strong></span>
<span *ngIf="!isAddingService"
class="clickable inline-glyph glyphicon glyphicon-plus-sign btn btn-xs"
(click)="isAddingService=true"
data-toggle="tooltip" title="Add Service"></span>
<span *ngIf="isAddingService" class="inline-editor inlineEditForm">
<input type="text" value="name" onClick="this.setSelectionRange(0, this.value.length)"
#newServiceName>
<button class="btn btn-xs"
(click)="isAddingService=false;
descriptor.addService(newServiceName.value);
showServices()">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button class="btn btn-xs" (click)="isAddingService=false">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div class="panel-body table-responsive" *ngIf="isShowServices()">
<table class="table table-striped table-sm">
<tr *ngFor="let service of descriptor.services">
<td>
<div>
<span [class]="!getServiceVersionEditFlag(service) && !service.version ? 'inline-editable' : ''"
(click)="setServiceVersionEditFlag(service, true)"
title="Set version"
data-toggle="tooltip"><strong>{{ service.name }}</strong></span>
<span *ngIf="!getServiceVersionEditFlag(service) && service.version"
(click)="setServiceVersionEditFlag(service, true)"
[class]="service.version ? 'inline-editable' : ''">({{service.version}}
)</span>
<span *ngIf="getServiceVersionEditFlag(service)"
class="inline-editor inlineEditForm">
<input type="text" size="40" [(ngModel)]="service.version">
<button class="btn btn-xs"
(click)="setServiceVersionEditFlag(service, false);descriptor.onVersionChanged(service)">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button class="btn btn-xs" (click)="setServiceVersionEditFlag(service, false)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
<span class="clickable inline-glyph glyphicon glyphicon-remove btn btn-xs pull-right"
[title]="'Remove ' + service.name"
(click)="onRemoveDescriptorService(service.name)"
data-toggle="tooltip"></span>
</div>
<div>
<span [class]="'clickable inline-glyph glyhpicon glyphicon-' + (isShowServiceParams(service) ? 'minus' : 'plus')"
(click)="toggleShowServiceParams(service)"></span>
<span>Params</span><span>&nbsp;</span>
<span *ngIf="!isAddingServiceParam(service)"
class="clickable inline-glyph glyphicon glyphicon-plus-sign btn btn-xs"
(click)="setAddingServiceParam(service,true)"
data-toggle="tooltip"
title="Add Param"></span>
<span *ngIf="isAddingServiceParam(service)"
class="inline-editor inlineEditForm">
<input type="text" value="name"
onClick="this.setSelectionRange(0, this.value.length)" #newParamName>
<input type="text" value="value"
onClick="this.setSelectionRange(0, this.value.length)" #newParamValue>
<button class="btn btn-xs"
(click)="setAddingServiceParam(service,false);
descriptor.addServiceParam(service, newParamName.value, newParamValue.value);
showServiceParams(service)">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button class="btn btn-xs" (click)="setAddingServiceParam(service,false)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div class="table-responsive" *ngIf="isShowServiceParams(service)">
<table class="table table-sm"
*ngIf="descriptor.getServiceParamNames(service).length > 0">
<tr *ngFor="let paramKey of descriptor.getServiceParamNames(service)">
<td width="5%">
<span class="clickable inline-glyph glyphicon glyphicon-remove btn btn-xs"
title="Remove Param"
(click)="onRemoveDescriptorServiceParam(service.name, paramKey)"
data-toggle="tooltip"></span>
</td>
<td width="30%"><strong>{{ paramKey }}</strong></td>
<td width="65%" align="left">
<span class="inline-editable"
(click)="setServiceParamEditFlag(service, paramKey, true)"
*ngIf="!getServiceParamEditFlag(service, paramKey)">{{descriptor.getServiceParamValue(service, paramKey)}}</span>
<span *ngIf="getServiceParamEditFlag(service, paramKey)"
class="inline-editor inlineEditForm">
<input type="text" size="40" [(ngModel)]="service.params[paramKey]">
<button class="btn btn-xs"
(click)="setServiceParamEditFlag(service, paramKey, false);descriptor.setDirty()">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button class="btn btn-xs"
(click)="setServiceParamEditFlag(service, paramKey, false)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</td>
</tr>
</table>
</div>
<div>
<span [class]="'clickable inline-glyph glyhpicon glyphicon-' + (isShowServiceURLs(service) ? 'minus' : 'plus')"
(click)="toggleShowServiceURLs(service)"></span>
<span>URLs</span><span>&nbsp;</span>
<span *ngIf="!isAddingServiceURL(service)"
(click)="setAddingServiceURL(service,true)"
class="inline-glyph glyphicon glyphicon-plus-sign btn btn-xs"
data-toggle="tooltip" title="Add URL"></span>
<span *ngIf="isAddingServiceURL(service)"
class="inline-editor inlineEditForm">
<input type="text" value="url"
onClick="this.setSelectionRange(0, this.value.length)" #newURL>
<button class="btn btn-xs"
(click)="setAddingServiceURL(service,false);
descriptor.addServiceURL(service, newURL.value);
showServiceURLs(service)">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button class="btn btn-xs" (click)="setAddingServiceURL(service,false)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
<div class="table-responsive" *ngIf="isShowServiceURLs(service)">
<table class="table table-sm"
*ngIf="service.urls && service.urls.length > 0">
<tr *ngFor="let url of service.urls; let i = index; trackBy:trackByServiceURLIndex">
<td width="5%">
<span class="clickable inline-glyph glyphicon glyphicon-remove btn btn-xs"
title="Remove URL"
(click)="onRemoveDescriptorServiceURL(service.name, url)"
data-toggle="tooltip"></span>
</td>
<td width="95%">
<span class="inline-editable"
(click)="setServiceURLEditFlag(service, i, true)"
*ngIf="!getServiceURLEditFlag(service, i)">{{url}}</span>
<span *ngIf="getServiceURLEditFlag(service, i)"
class="inline-editor inlineEditForm">
<input type="text" size="50" [(ngModel)]="service.urls[i]">
<button class="btn btn-xs"
(click)="setServiceURLEditFlag(service, i, false);descriptor.setDirty()">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button class="btn btn-xs"
(click)="setServiceURLEditFlag(service, i, false)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div> <!-- Services table -->
</div> <!-- Services panel -->
<div class="panel panel-default"> <!-- Discovery panel -->
<div class="panel-heading">
<span [class]="'clickable inline-glyph glyhpicon glyphicon-' + (isShowServiceDiscovery() ? 'minus' : 'plus')"
(click)="toggleShowServiceDiscovery()"></span>
<span><strong>Discovery Details</strong></span>
</div>
<div class="panel-body" *ngIf="isShowServiceDiscovery()">
<table class="table table-sm">
<!-- Discovery type field -->
<tr>
<td width="20%">
<span>
<strong>Type</strong>
</span>
</td>
<td>
<span>
<select id="select" autofocus required class="md-select form-control"
[(ngModel)]="descriptor.discoveryType" (change)="descriptor.setDirty()">
<option *ngFor="let typeOption of resourceService.discoveryTypes"
class="md-option"
[value]="typeOption"
[selected]="descriptor.discoveryType === typeOption">{{typeOption}}</option>
</select>
</span>
</td>
</tr>
<!-- Discovery address field -->
<tr>
<td width="20%">
<span [class]="!editModeAddress && !descriptor.discoveryAddress ? 'inline-editable' : ''"
(click)="editModeAddress=true">
<strong>Address</strong>
</span>
<span *ngIf="!editModeAddress && !descriptor.discoveryAddress">&nbsp;&nbsp;</span>
</td>
<td>
<span class="inline-editable"
(click)="editModeAddress=true"
*ngIf="!editModeAddress">{{ descriptor.discoveryAddress }}</span>
<span *ngIf="editModeAddress" class="inline-editor inlineEditForm">
<input type="text" size="40" [(ngModel)]="descriptor.discoveryAddress">
<button class="btn btn-xs" (click)="editModeAddress=false;descriptor.setDirty()">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button class="btn btn-xs" (click)="editModeAddress=false">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</td>
</tr>
<!-- Discovery cluster field -->
<tr>
<td width="20%">
<span [class]="!editModeCluster && !descriptor.discoveryCluster ? 'inline-editable' : ''"
(click)="editModeCluster=true">
<strong>Cluster</strong>
</span>
<span *ngIf="!editModeCluster && !descriptor.discoveryCluster">&nbsp;&nbsp;</span>
</td>
<td>
<span class="inline-editable"
(click)="editModeCluster=true"
*ngIf="!editModeCluster">{{ descriptor.discoveryCluster}}</span>
<span *ngIf="editModeCluster" class="inline-editor inlineEditForm">
<input type="text" size="40" [(ngModel)]="descriptor.discoveryCluster">
<button class="btn btn-xs" (click)="editModeCluster=false;descriptor.setDirty()">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button class="btn btn-xs" (click)="editModeCluster=false">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</td>
</tr>
<!-- Discovery user field -->
<tr>
<td width="20%">
<span [class]="!editModeUser && !descriptor.discoveryUser ? 'inline-editable' : ''"
(click)="editModeUser=true">
<strong>Username</strong>
</span>
<span *ngIf="!editModeUser && !descriptor.discoveryUser">&nbsp;&nbsp;</span>
</td>
<td>
<span class="inline-editable"
(click)="editModeUser=true"
*ngIf="!editModeUser">{{ descriptor.discoveryUser }}</span>
<span *ngIf="editModeUser" class="inline-editor inlineEditForm">
<input type="text" size="40" [(ngModel)]="descriptor.discoveryUser">
<button class="btn btn-xs" (click)="editModeUser=false;descriptor.setDirty()">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button class="btn btn-xs" (click)="editModeUser=false">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</td>
</tr>
<!-- Discovery password alias field -->
<tr>
<td width="20%">
<span [class]="!editModeAlias && !descriptor.discoveryPassAlias ? 'inline-editable' : ''"
(click)="editModeAlias=true">
<strong>Password Alias</strong>
</span>
<span *ngIf="!editModeAlias && !descriptor.discoveryPassAlias">&nbsp;&nbsp;</span>
</td>
<td>
<span class="inline-editable"
(click)="editModeAlias=true"
*ngIf="!editModeAlias">{{ descriptor.discoveryPassAlias }}</span>
<span *ngIf="editModeAlias" class="inline-editor inlineEditForm">
<input type="text" size="40" [(ngModel)]="descriptor.discoveryPassAlias">
<button class="btn btn-xs" (click)="editModeAlias=false;descriptor.setDirty()">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button class="btn btn-xs" (click)="editModeAlias=false">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</td>
</tr>
</table>
</div><!-- Discovery details -->
</div><!-- Discovery panel -->
<div> <!-- Descriptor Modification Buttons -->
<button type="button"
title="Remove Descriptor"
class="btn btn-default btn-sm pull-left"
(click)="deleteConfirmModal.open('md')"
data-toggle="tooltip"
*ngIf="showEditOptions()">
<span class="glyphicon glyphicon-trash"></span>
</button>
<span class="pull-right">
<button type="button"
title="Discard Changes"
class="btn btn-default btn-sm"
[disabled]="!descriptor.isDirty()"
(click)="discardConfirmModal.open('md')"
data-toggle="tooltip"
*ngIf="showEditOptions()">
<span class="glyphicon glyphicon-refresh"></span>
</button>
<span>&nbsp;</span>
<button type="button"
title="Update Descriptor"
class="btn btn-default btn-sm"
[disabled]="!descriptor.isDirty()"
(click)="persistChanges()"
data-toggle="tooltip"
*ngIf="showEditOptions()">
<span class="glyphicon glyphicon-floppy-disk"></span>
</button>
</span>
</div>
</div> <!-- Descriptor Details -->
<div> <!-- Confirmation Modal Dialogs -->
<bs-modal (onClose)="deleteResource()" #deleteConfirmModal>
<bs-modal-header [showDismiss]="true">
<h4 class="modal-title">Deleting {{getTitleSubject()}}</h4>
</bs-modal-header>
<bs-modal-body>Are you sure you want to delete
<strong>{{resourceService.getResourceDisplayName(resource)}}</strong>?
</bs-modal-body>
<bs-modal-footer>
<button type="button"
class="btn btn-default btn-sm"
data-dismiss="deleteConfirmModal"
(click)="deleteConfirmModal.dismiss()">Cancel
</button>
<button type="button"
class="btn btn-primary btn-sm"
(click)="deleteConfirmModal.close()">Ok
</button>
</bs-modal-footer>
</bs-modal>
<bs-modal (onClose)="discardChanges()" #discardConfirmModal>
<bs-modal-header [showDismiss]="true">
<h4 class="modal-title">Discard {{getTitleSubject()}} Changes</h4>
</bs-modal-header>
<bs-modal-body>Are you sure you want to discard
<strong>{{resourceService.getResourceDisplayName(resource)}}</strong> changes?
</bs-modal-body>
<bs-modal-footer>
<button type="button"
class="btn btn-default btn-sm"
data-dismiss="revertConfirmModal"
(click)="discardConfirmModal.dismiss()">Cancel
</button>
<button type="button"
class="btn btn-primary btn-sm"
(click)="discardConfirmModal.close()">Ok
</button>
</bs-modal-footer>
</bs-modal>
</div>
</div>
<!-- Topology Details -->
<div *ngIf="resourceType === 'Topologies'">
<app-topology-detail></app-topology-detail>
</div>
<!-- Service Definition Details -->
<div *ngIf="resourceType === 'Service Definitions'">
<app-servicedefinition-detail></app-servicedefinition-detail>
</div>