overview.html

<div class="overview">
  <div class="middle">
    <!-- Empty states -->
    <div ng-if="overview.showGetStarted" class="container-fluid empty-state">
      <alerts alerts="overview.state.alerts"></alerts>
      <!-- Getting started -->
      <div class="empty-state-message text-center">
        <div ng-if="project.metadata.name | canIAddToProject">
          <h2>Get started with your project.</h2>
          <p class="gutter-top">
            Use your source or an example repository to build an application
            image, or add components like databases and message queues.
          </p>
          <p class="gutter-top">
            <a ng-if="overview.catalogLandingPageEnabled" href="./" class="btn btn-lg btn-primary">
              Browse Catalog
            </a>
            <a ng-if="!overview.catalogLandingPageEnabled" ng-href="project/{{projectName}}/create" class="btn btn-lg btn-primary">
              Add to Project
            </a>
          </p>
        </div>
        <div ng-if="!(project.metadata.name | canIAddToProject)">
          <h2>Welcome to project {{projectName}}.</h2>
          <ng-include src="'views/_request-access.html'"></ng-include>
        </div>
      </div>
    </div>
    <div ng-if="overview.showLoading" class="container-fluid loading-message">
      Loading...
    </div>
    <div ng-if="!overview.showGetStarted && !overview.showLoading">
      <div class="middle-header">
        <div class="container-fluid toolbar-container">
          <div class="data-toolbar" role="toolbar" aria-label="Filter Toolbar">
            <div class="data-toolbar-filter" role="group">
              <ui-select
                class="data-toolbar-dropdown"
                ng-model="overview.filterBy"
                search-enabled="false"
                append-to-body="true"
                ng-disabled="overview.disableFilter">
                <ui-select-match>{{$select.selected.label}}</ui-select-match>
                <ui-select-choices repeat="option.id as option in overview.filterByOptions">
                  {{option.label}}
                </ui-select-choices>
              </ui-select>
              <div ng-if="overview.filterBy === 'label'" class="label-filter">
                <!-- FIXME: This disables the add button but not the label filter selectize controlers. -->
                <fieldset ng-disabled="overview.disableFilter">
                  <project-filter></project-filter>
                </fieldset>
              </div>
              <div ng-if="overview.filterBy === 'name'" class="name-filter">
                <form role="form" class="search-pf has-button">
                  <div class="form-group filter-controls has-clear">
                    <div class="search-pf-input-group">
                      <label for="name-filter" class="sr-only">Filter by name</label>
                      <input
                        type="text"
                        class="form-control"
                        ng-model="overview.filterText"
                        placeholder="Filter by name"
                        autocorrect="off"
                        autocapitalize="none"
                        spellcheck="false"
                        ng-disabled="overview.disableFilter">
                      <button
                        type="button"
                        class="clear"
                        aria-hidden="true"
                        ng-if="overview.filterText && !overview.disableFilter"
                        ng-click="overview.filterText = ''">
                        <span class="pficon pficon-close"></span>
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <div class="vertical-divider"></div>
            <div class="view-by-options">
              <span class="data-toolbar-label">List by</span>
              <ui-select class="data-toolbar-dropdown" ng-model="overview.viewBy" search-enabled="false">
                <ui-select-match>{{$select.selected.label}}</ui-select-match>
                <ui-select-choices repeat="option.id as option in overview.viewByOptions">
                  {{option.label}}
                </ui-select-choices>
              </ui-select>
            </div>
          </div>
          <div ng-if="overview.filterActive" class="filter-status">
            <span ng-if="overview.viewBy !== 'pipeline'">
              Showing <strong>{{overview.filteredSize}}</strong> of <strong>{{overview.size}}</strong> items
            </span>
            <span ng-if="overview.viewBy === 'pipeline' && overview.pipelineBuildConfigs | hashSize">
              Showing <strong>{{overview.filteredPipelineBuildConfigs | hashSize}}</strong> of <strong>{{overview.pipelineBuildConfigs | hashSize}}</strong> pipelines
            </span>
          </div>
        </div>
      </div>
      <div class="middle-content">
        <div class="container-fluid">
          <alerts alerts="overview.state.alerts"></alerts>
          <div ng-if="overview.everythingFiltered && overview.viewBy !== 'pipeline'">
            <div class="empty-state-message text-center h2">
              The filter is hiding all resources.
              <a href="" ng-click="overview.clearFilter()" role="button" class="nowrap">Clear Filter</a>
            </div>
          </div>
          <div ng-if="!overview.everythingFiltered || overview.viewBy === 'pipeline'">
            <div ng-if="overview.viewBy === 'app'" ng-repeat="app in overview.apps">
              <div ng-if="app" class="app-heading">
                <h2>
                  <div class="component-label">Application</div>
                  <span ng-bind-html="app | highlightKeywords : overview.state.filterKeywords"></span>
                </h2>
                <div ng-if="route = overview.bestRouteByApp[app]" class="pull-right">
                  <h3 class="overview-route">
                    <span ng-if="route | isWebRoute">
                      <a ng-href="{{route | routeWebURL}}" target="_blank">
                        {{route | routeLabel}}
                        <i class="fa fa-external-link" aria-hidden="true"></i>
                      </a>
                    </span>
                    <span ng-if="!(route | isWebRoute)">{{route | routeLabel}}</span>
                  </h3>
                </div>
              </div>
              <h2 ng-if="!app">
                Other Resources
              </h2>
              <div class="list-pf">
                <overview-list-row
                     ng-repeat="deploymentConfig in overview.filteredDeploymentConfigsByApp[app] track by (deploymentConfig | uid)"
                     ng-init="dcName = deploymentConfig.metadata.name"
                     api-object="deploymentConfig"
                     current="overview.currentByDeploymentConfig[dcName]"
                     previous="overview.getPreviousReplicationController(deploymentConfig)"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="deployment in overview.filteredDeploymentsByApp[app] track by (deployment | uid)"
                     api-object="deployment"
                     current="overview.currentByDeploymentUID[deployment.metadata.uid]"
                     previous="overview.replicaSetsByDeploymentUID[deployment.metadata.uid][1]"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="replicationController in overview.filteredReplicationControllersByApp[app] track by (replicationController | uid)"
                     api-object="replicationController"
                     current="replicationController"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="replicaSet in overview.filteredReplicaSetsByApp[app] track by (replicaSet | uid)"
                     api-object="replicaSet"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="statefulSet in overview.filteredStatefulSetsByApp[app] track by (statefulSet | uid)"
                     api-object="statefulSet"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="pod in overview.filteredMonopodsByApp[app] track by (pod | uid)"
                     api-object="pod"
                     state="overview.state">
                </overview-list-row>
              </div>
            </div>
            <div ng-if="overview.viewBy === 'resource'">
              <div ng-if="overview.filteredDeploymentConfigs | hashSize">
                <h2>
                  <span ng-if="overview.deployments | hashSize">
                    Deployment Configs
                  </span>
                  <span ng-if="!(overview.deployments | hashSize)">
                    Deployments
                  </span>
                </h2>
                <div class="list-pf">
                  <overview-list-row
                       ng-repeat="deploymentConfig in overview.filteredDeploymentConfigs track by (deploymentConfig | uid)"
                       ng-init="dcName = deploymentConfig.metadata.name"
                       api-object="deploymentConfig"
                       current="overview.currentByDeploymentConfig[dcName]"
                       previous="overview.getPreviousReplicationController(deploymentConfig)"
                       state="overview.state">
                  </overview-list-row>
                </div>
              </div>
              <div ng-if="overview.filteredDeployments | hashSize">
                <h2>Deployments</h2>
                <div class="list-pf">
                  <overview-list-row
                       ng-repeat="deployment in overview.filteredDeployments track by (deployment | uid)"
                       api-object="deployment"
                       current="overview.currentByDeploymentUID[deployment.metadata.uid]"
                       previous="overview.replicaSetsByDeploymentUID[deployment.metadata.uid][1]"
                       state="overview.state">
                  </overview-list-row>
                </div>
              </div>
              <div ng-if="overview.filteredReplicationControllers | hashSize">
                <h2>Replication Controllers</h2>
                <div class="list-pf">
                  <overview-list-row
                       ng-repeat="replicationController in overview.filteredReplicationControllers track by (replicationController | uid)"
                       api-object="replicationController"
                       state="overview.state">
                  </overview-list-row>
                </div>
              </div>
              <div ng-if="overview.filteredReplicaSets | hashSize">
                <h2>Replica Sets</h2>
                <div class="list-pf">
                  <overview-list-row
                       ng-repeat="replicaSet in overview.filteredReplicaSets track by (replicaSet | uid)"
                       api-object="replicaSet"
                       state="overview.state">
                  </overview-list-row>
                </div>
              </div>
              <div ng-if="overview.filteredStatefulSets | hashSize">
                <h2>Stateful Sets</h2>
                <div class="list-pf">
                  <overview-list-row
                       ng-repeat="statefulSet in overview.filteredStatefulSets track by (statefulSet | uid)"
                       api-object="statefulSet"
                       state="overview.state">
                  </overview-list-row>
                </div>
              </div>
              <div ng-if="overview.filteredMonopods | hashSize">
                <h2>Pods</h2>
                <div class="list-pf">
                  <overview-list-row
                       ng-repeat="pod in overview.filteredMonopods track by (pod | uid)"
                       api-object="pod"
                       state="overview.state">
                  </overview-list-row>
                </div>
              </div>
            </div>
            <div ng-if="overview.viewBy === 'pipeline'">
              <!-- TODO: Reuse pipelines empty state message from pipelines.html -->
              <div ng-if="!overview.pipelineBuildConfigs.length" class="empty-state-message text-center">
                <h2>No pipelines.</h2>
                <div ng-if="project.metadata.name | canIAddToProject">
                  <p>
                    No pipelines have been added to project {{projectName}}.
                    <br>
                    Learn more about
                    <a ng-href="{{ 'pipeline-builds' | helpLink}}" target="_blank">Pipeline Builds</a>
                    and the
                    <a ng-href="{{ 'pipeline-plugin' | helpLink}}" target="_blank">OpenShift Pipeline Plugin</a>.
                  </p>
                  <p ng-if="(project.metadata.name | canIAddToProject) && overview.samplePipelineURL">
                    <a ng-href="{{overview.samplePipelineURL}}" class="btn btn-lg btn-primary">
                      Create Sample Pipeline
                    </a>
                  </p>
                </div>
                <div ng-if="!(project.metadata.name | canIAddToProject)">
                  <ng-include src="'views/_request-access.html'"></ng-include>
                </div>
              </div>
              <div ng-if="(overview.pipelineBuildConfigs | hashSize) && !(overview.filteredPipelineBuildConfigs | hashSize)">
                <div class="empty-state-message text-center h2">
                  All pipelines are filtered.
                  <a href="" ng-click="overview.clearFilter()" role="button" class="nowrap">Clear Filter</a>
                </div>
              </div>
              <div ng-repeat="pipeline in overview.filteredPipelineBuildConfigs track by (pipeline | uid)">
                <div ng-if="'buildconfigs/instantiate' | canI : 'create'" class="pull-right">
                  <button
                      class="btn btn-default"
                      ng-if="'buildconfigs/instantiate' | canI : 'create'"
                      ng-click="overview.startBuild(pipeline)">
                    Start Pipeline
                  </button>
                </div>
                <h2>
                  <div class="component-label">Pipeline</div>
                  <span ng-bind-html="pipeline.metadata.name | highlightKeywords : overview.state.filterKeywords"></span>
                </h2>
                <div ng-if="!(overview.recentPipelinesByBuildConfig[pipeline.metadata.name] | hashSize)" class="mar-bottom-lg">
                  No pipeline runs.
                </div>
                <div ng-if="overview.recentPipelinesByBuildConfig[pipeline.metadata.name] | hashSize" class="build-pipelines">
                  <div ng-repeat="pipeline in overview.recentPipelinesByBuildConfig[pipeline.metadata.name] track by (pipeline | uid)"
                       class="row build-pipeline-wrapper animate-repeat">
                    <div class="col-sm-12">
                      <build-pipeline build="pipeline" build-config-name-on-expanded="true" collapse-pending="true"></build-pipeline>
                    </div>
                  </div>
                </div>
                <div ng-if="!overview.deploymentConfigsByPipeline[pipeline.metadata.name].length" class="mar-bottom-lg">
                  This pipeline is not associated with any deployments.
                </div>
                <div ng-if="overview.deploymentConfigsByPipeline[pipeline.metadata.name].length" class="list-pf">
                  <overview-list-row
                       ng-repeat="dcName in overview.deploymentConfigsByPipeline[pipeline.metadata.name]"
                       api-object="overview.deploymentConfigs[dcName]"
                       current="overview.currentByDeploymentConfig[dcName]"
                       previous="overview.getPreviousReplicationController(deploymentConfig)"
                       state="overview.state"
                       hide-pipelines="true">
                  </overview-list-row>
                </div>
              </div>

              <!-- Currently we only filter the pipelines. Hide "Other Resources" if a pipeline filter is active or if we're showing the pipeline empty state message. -->
              <div class="list-pf" ng-if="overview.pipelineViewHasOtherResources && !overview.hidePipelineOtherResources">
                <h2>Other Resources</h2>
                <overview-list-row
                     ng-repeat="deploymentConfig in overview.deploymentConfigsNoPipeline track by (deploymentConfig | uid)"
                     ng-init="dcName = deploymentConfig.metadata.name"
                     api-object="deploymentConfig"
                     current="overview.currentByDeploymentConfig[dcName]"
                     previous="overview.getPreviousReplicationController(deploymentConfig)"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="deployment in overview.deployments track by (deployment | uid)"
                     api-object="deployment"
                     current="overview.currentByDeploymentUID[deployment.metadata.uid]"
                     previous="overview.replicaSetsByDeploymentUID[deployment.metadata.uid][1]"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="replicationController in overview.vanillaReplicationControllers track by (replicationController | uid)"
                     api-object="replicationController"
                     current="replicationController"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="replicaSet in overview.vanillaReplicaSets track by (replicaSet | uid)"
                     api-object="replicaSet"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="statefulSet in overview.statefulSets track by (statefulSet | uid)"
                     api-object="statefulSet"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="pod in overview.monopods track by (pod | uid)"
                     api-object="pod"
                     state="overview.state">
                </overview-list-row>
              </div>
            </div>

            <!-- Show provisioned services. -->
            <div ng-if="overview.filteredServiceInstances.length && !overview.hidePipelineOtherResources">
              <h2>
                Provisioned Services
              </h2>
              <div class="list-pf">
                <service-instance-row
                  ng-repeat="serviceInstance in overview.filteredServiceInstances track by (serviceInstance | uid)"
                  api-object="serviceInstance"
                  bindings="overview.bindingsByInstanceRef[serviceInstance.metadata.name]"
                  state="overview.state"></service-instance-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>