dataservices.component.html

<div>

  <div id="dataservices-breadcrumb-bar">
    <app-breadcrumbs>
      <li i18n="@@dataservices.dataservices" app-breadcrumb label="Data Virtualizations" icon="table" class="active"></li>
    </app-breadcrumbs>
  </div>

  <app-page-error [error]="pageError" *ngIf="pageError"></app-page-error>

  <div class="container-fluid dataservice-list-dataservices" *ngIf="!pageError">
    <div class="col-sm-12">
      <h2 class="app-feature-title" i18n="@@dataservices.dataservices">Data Virtualizations</h2>
    </div>
    <div class="row toolbar-pf">
      <div class="col-sm-12">
        <div class="toolbar-pf-actions" >
          <div class="form-group toolbar-pf-filter">
              <pfng-filter [config]="filterConfig"
          (onChange)="filterChanged($event)"></pfng-filter>
          </div>
          <div class="form-group">
              <pfng-sort [config]="sortConfig" (onChange)="sortChange($event)"></pfng-sort>
          </div>
          <div class="form-group">
            <a i18n="@@dataservices.addDataservice" class="btn btn-primary" (click)="onNew()">Add Data Virtualization</a>
          </div>
          <div class="form-group toolbar-pf-view-selector">
            <ul class="list-inline">
              <li *ngIf="isListLayout"><a (click)="setCardLayout()"><i class="fa fa-th"></i></a></li>
              <li *ngIf="isCardLayout"><a (click)="setListLayout()"><i class="fa fa-th-list"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- List of Dataservices -->
    <div class="row object-collection-page">
        <div class="row" *ngIf="isLoaded( connectionsLoadedTag) && !connectionsExist" >
          <div class="col-sm-12">
            <div class="form-group">
              <pfng-empty-state
                [config]="noConnectionsEmptyConfig"
                (onActionSelect)="onNewConnection()"></pfng-empty-state>
            </div>
          </div>
        </div>
        <div class="row" *ngIf="connectionsExist && isLoaded('dataservices') && allDataservices.length === 0" >
          <div class="col-sm-12">
            <div class="form-group">
              <pfng-empty-state
                [config]="noDataservicesEmptyConfig"
                (onActionSelect)="onNew()"></pfng-empty-state>
            </div>
          </div>
        </div>
      <!-- The 'loading Dataservices' card -->
      <div class="col-md-12" *ngIf="!isLoaded('dataservices') || !isLoaded( connectionsLoadedTag )">
        <div class="container-fluid container-cards-pf">
          <div class="row row-cards-pf">
            <div class="card-pf card-pf-accented">
              <div class="card-pf-heading">
                <h1 class="card-pf-title">
                  <span i18n="@@dataservices.loadingDataservices" class="spinner spinner-xs spinner-inline"></span> Loading Data Virtualizations...
                </h1>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- The list or card view -->
      <div class="col-md-12" *ngIf="isLoaded('dataservices')">
        <div class="dataservices-toast">
          <!-- Notification for Dataservice Export -->
          <pfng-toast-notification *ngIf="showExportNotification" [header]="exportNotificationHeader"
                                 [message]="exportNotificationMessage"
                                 [type]="exportNotificationType"
                                 [showClose]="true"
                                 (onCloseSelect)="onCloseExportNotification()">
          </pfng-toast-notification>
        </div>

        <div class="{{cardListAreaCss}}">
          <app-dataservices-list *ngIf="isListLayout && hasDataservices" [dataservices]="filteredDataservices" [selectedDataservices]="selectedDataservices"
                                 (activateDataservice)="onActivate($event)" (testDataservice)="onTest($event)"
                                 (publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
                                 (editDataservice)="onEdit($event)" (quickLookDataservice)="onQuickLook($event)"
                                 (downloadDataservice)="onDownload($event)" (dataserviceSelected)="onSelected($event)"
                                 (dataserviceDeselected)="onDeselected($event)"></app-dataservices-list>
          <app-dataservices-cards *ngIf="isCardLayout && hasDataservices" [dataservices]="filteredDataservices" [selectedDataservices]="selectedDataservices"
                                  (activateDataservice)="onActivate($event)" (testDataservice)="onTest($event)"
                                  (publishDataservice)="onPublish($event)" (deleteDataservice)="onDelete($event)"
                                  (editDataservice)="onEdit($event)" (quickLookDataservice)="onQuickLook($event)"
                                  (downloadDataservice)="onDownload($event)" (dataserviceSelected)="onSelected($event)"
                                  (dataserviceDeselected)="onDeselected($event)"></app-dataservices-cards>
        </div>
      </div>
      <div class="col-md-12 {{resultsAreaCss}}" *ngIf="showResults">
        <hr class="dataservice-results-hr">
        <div>
          <span class="pull-left fa fa-list-alt dataservice-results-action-icon" (click)="onTest(quickLookServiceName)"></span>
          <span class="pull-left fa fa-refresh dataservice-results-action-icon-refresh" (click)="onSubmitQuickLookQuery()"></span>
          <span class="quicklook-title">Quick Look Results for Data Virtualization '{{ quickLookServiceName }}'</span>
          <span class="pull-right fa fa-fw fa-close dataservice-results-action-icon-close" (click)="setQuickLookPanelOpenState(false)"></span>
        </div>
        <br>
        <app-sql-control [quicklook]="true" [selectedViews]="selectedViews" [serviceViews]="allServiceViews"
                                            [viewSql]="quickLookSql"></app-sql-control>
      </div>
    </div>

  </div>

</div>