gateway-admin-ui/admin-ui/app/resource-detail/resource-detail.component.html

<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>