<project-header class="top-header"></project-header>
  <project-page>

    <!-- Middle section -->
    <div class="middle-section">
      <div id="scrollable-content" class="middle-container has-scroll">
        <div class="middle-header">
          <div class="container-fluid">
            <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
            <alerts alerts="alerts"></alerts>
            <h1>
              Project Settings
              <div class="pull-right dropdown">
                <button type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown">
                  Actions
                  <span class="caret" aria-hidden="true"></span>
                </button>
                <a href=""
                   class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
                   data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
                <ul class="dropdown-menu actions action-button">
                  <li>
                    <a
                      href=""
                      role="button"
                      class="button-edit"
                      ng-click="setEditing(true)"
                      ng-class="{ 'disabled-link': show.editing }">Edit</a>
                  </li>
                  <li>
                    <delete-link
                      class="button-delete"
                      kind="Project"
                      resource-name="{{project.metadata.name}}"
                      project-name="{{project.metadata.name}}"
                      display-name="{{(project | displayName)}}"
                      alerts="alerts">
                    </delete-link>
                  </li>
                </ul>
              </div>
            </h1>
          </div>
        </div><!-- /middle-header-->
        <div class="middle-content">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12">
                <div class="resource-details">
                  <div class="row">
                    <div class="col-lg-6">
                      <ng-include
                        src="'views/_settings-general-info.html'"></ng-include>
                    </div>
                  </div><!-- /row -->
                </div><!-- /resource details -->


                <div ng-if="(quotas | hashSize) === 0">
                  <h2>
                    <span>Quota</span>
                  </h2>
                  <div class="help-block">{{quotaHelp}}</div>
                  <p><em>{{emptyMessageQuotas}}</em></p>
                </div>

                <div ng-repeat="quota in quotas | orderBy: 'metadata.name'" class="gutter-bottom">
                  <h2>
                    Quota <span ng-if="(quotas | hashSize) > 1">{{quota.metadata.name}}</span>
                  </h2>
                  <div ng-if="$first" class="help-block">{{quotaHelp}}</div>
                  <dl ng-if="quota.spec.scopes.length">
                    <dt>Scopes:</dt>
                    <dd>
                      <div ng-repeat="scope in quota.spec.scopes">
                        {{scope | startCase}}
                        <span class="text-muted small">
                          <span ng-switch="scope" class="hide-ng-leave">
                            <span ng-switch-when="Terminating">&mdash; Matches pods that have an active deadline.</span>
                            <span ng-switch-when="NotTerminating">&mdash; Matches pods that do not have an active deadline.</span>
                            <span ng-switch-when="BestEffort">&mdash; Matches pods that have best effort quality of service.</span>
                            <span ng-switch-when="NotBestEffort">&mdash; Matches pods that do not have best effort quality of service.</span>
                          </span>
                        </span>
                      </div>
                    </dd>
                  </dl>
                  <div>
                    <div row wrap mobile="column">
                      <div flex></div>
                      <div column ng-if="quota.status.hard.cpu" class="center-block gutter-bottom">
                        <h3 class="text-center">CPU <small>Request</small></h3>
                        <quota-usage-chart used="quota.status.used.cpu" total="quota.status.hard.cpu" type="cpu" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div column ng-if="quota.status.hard.memory" class="center-block gutter-bottom">
                        <h3 class="text-center">Memory <small>Request</small></h3>
                        <quota-usage-chart used="quota.status.used.memory" total="quota.status.hard.memory" type="memory" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div flex></div>
                    </div>
                    <div row wrap mobile="column">
                      <div flex></div>
                      <div column ng-if="quota.status.hard['requests.cpu']" class="center-block gutter-bottom">
                        <h3 class="text-center">CPU <small>Request</small></h3>
                        <quota-usage-chart used="quota.status.used['requests.cpu']" total="quota.status.hard['requests.cpu']" type="cpu" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div column ng-if="quota.status.hard['requests.memory']" class="center-block gutter-bottom">
                        <h3 class="text-center">Memory <small>Request</small></h3>
                        <quota-usage-chart used="quota.status.used['requests.memory']" total="quota.status.hard['requests.memory']" type="memory" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div flex></div>
                    </div>
                    <div row wrap mobile="column">
                      <div flex></div>
                      <div column ng-if="quota.status.hard['limits.cpu']" class="center-block gutter-bottom">
                        <h3 class="text-center">CPU <small>Limit</small></h3>
                        <quota-usage-chart used="quota.status.used['limits.cpu']" total="quota.status.hard['limits.cpu']" type="cpu" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div column ng-if="quota.status.hard['limits.memory']" class="center-block gutter-bottom">
                        <h3 class="text-center">Memory <small>Limit</small></h3>
                        <quota-usage-chart used="quota.status.used['limits.memory']" total="quota.status.hard['limits.memory']" type="memory" class="quota-chart"></quota-usage-chart>
                      </div>
                      <div flex></div>
                    </div>
                  </div>

                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <th>Resource type</th>
                        <th>Used</th>
                        <th>Max</th>
                      </thead>
                      <tbody>
                        <tr ng-if='!quota.status.used' class="danger">
                          <td colspan="5">
                            <span data-toggle="tooltip" title="Missing quota status" class="pficon pficon-error-circle-o" style="cursor: help;"></span>
                            Status has not been reported on this quota usage record.  Any resources limited by this quota record can not be allocated.
                          </td>
                        </tr>
                        <!-- Don't show quotas for type `resourcequotas`. They are frequently at limit,
                             which is not something to worry about, and only a cluster admin can create
                             those resources anyway. -->
                        <tr ng-repeat="(resourceType, specMax) in quota.spec.hard"
                            ng-if="resourceType !== 'resourcequotas'"
                            ng-class="{
                              warning: (quota.status.used[resourceType] | usageValue) >= (quota.status.hard[resourceType] | usageValue)
                            }">
                          <td>
                            {{resourceType | humanizeQuotaResource}}
                            <span ng-if="(quota.status.used[resourceType] | usageValue) >= (quota.status.hard[resourceType] | usageValue)" data-toggle="tooltip" title="Quota limit reached" class="pficon pficon-warning-triangle-o" style="cursor: help; vertical-align: middle;"></span>
                          </td>
                          <td>
                            <span ng-if="!quota.status.used">&mdash;</span>
                            <span ng-if="quota.status.used">{{quota.status.used[resourceType] | usageWithUnits : resourceType}}</span>
                          </td>
                          <td>
                            <span ng-if="!quota.status.hard">{{specMax  | usageWithUnits : resourceType}}</span>
                            <span ng-if="quota.status.hard">{{quota.status.hard[resourceType]  | usageWithUnits : resourceType}}</span>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>


                <div ng-if="(limitRanges | hashSize) === 0">
                  <h2>Limit Range</h2>
                  <div class="help-block">{{limitRangeHelp}}</div>
                  <p><em>{{emptyMessageLimitRanges}}</em></p>
                </div>

                <div ng-repeat="(limitRangeName, limitRange) in limitRanges">
                  <h2>
                    Limit Range <span ng-if="(limitRanges | hashSize) > 1">{{limitRangeName}}</span>
                  </h2>
                  <div ng-if="$first" class="help-block">{{limitRangeHelp}}</div>
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        <th>Resource type</th>
                        <th>
                          <span class="nowrap">
                            Min
                            <i class="small pficon pficon-help" data-toggle="tooltip" title="The minimum amount of this compute resource that can be requested."></i>
                          </span>
                        </th>
                        <th>
                          <span class="nowrap">
                            Max
                            <i class="small pficon pficon-help" data-toggle="tooltip" title="The maximum amount of this compute resource that can be requested.  The limit must also be below the maximum value."></i>
                           </span>
                        </th>
                        <th>
                          Default
                          <span class="nowrap">
                            Request
                            <i class="small pficon pficon-help" data-toggle="tooltip" title="A container will default to request this amount of a compute resource if no request is specified. The system will guarantee the requested amount of compute resource when scheduling a container for execution. If a quota is enabled for this compute resource, the quota usage is incremented by the requested value."></i>
                          </span>
                        </th>
                        <th>
                          Default
                          <span class="nowrap">
                            Limit
                            <i class="small pficon pficon-help" data-toggle="tooltip" title="The default limit defines the maximum amount of compute resource the container may have access to during execution if no limit is specified. If no request is made for the compute resource on the container or via a Default Request value, the container will default to request the limit."></i>
                          </span>
                        </th>
                        <th>
                          Max Limit/Request
                          <span class="nowrap">
                            Ratio
                            <i class="small pficon pficon-help" data-toggle="tooltip" title="If specified, the compute resource must have a request and limit that are both non-zero, where limit divided by request is less than or equal to the specified amount; this represents the max burst for the compute resource during execution."></i>
                          </span>
                        </th>
                      </thead>
                      <tbody>
                        <tr ng-repeat-start="limit in limitRange.spec.limits"></tr>
                        <tr ng-repeat="(type, typeLimits) in limitsByType[limitRangeName][limit.type]">
                          <td>{{limit.type}} {{type | computeResourceLabel : true}}</td>
                          <td>{{(typeLimits.min | usageWithUnits : type) || "&mdash;"}}</td>
                          <td>{{(typeLimits.max | usageWithUnits : type) || "&mdash;"}}</td>
                          <td>{{(typeLimits.defaultRequest | usageWithUnits : type) || "&mdash;"}}</td>
                          <td>{{(typeLimits["default"] | usageWithUnits : type) || "&mdash;"}}</td>
                          <td>{{typeLimits.maxLimitRequestRatio || "&mdash;"}}</td>
                        </tr>
                        <tr ng-repeat-end></tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div><!-- /col-* -->
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </project-page>
