deployment-config.html

<div class="middle">
  <div class="middle-header">
    <div class="container-fluid">
      <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
      <alerts alerts="alerts"></alerts>
      <div>
        <h1 class="contains-actions">
          <div class="pull-right dropdown" ng-if="deploymentConfig" ng-hide="!('deploymentConfigs' | canIDoAny)">
            <!-- Primary Actions -->
            <button
                ng-if="deploymentConfigsInstantiateVersion | canI : 'create'"
                class="btn btn-default hidden-xs"
                ng-click="startLatestDeployment()"
                ng-disabled="!canDeploy()">
              Deploy
            </button>

            <!-- Secondary Actions -->
            <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 dropdown-menu-right actions action-button">
              <li class="visible-xs-inline" ng-class="{ disabled: !canDeploy() }" ng-if="deploymentConfigsInstantiateVersion | canI : 'create'">
                <a href=""
                  role="button"
                  ng-attr-aria-disabled="{{canDeploy() ? undefined : 'true'}}"
                  ng-class="{ 'disabled-link': !canDeploy() }"
                  ng-click="startLatestDeployment()">Deploy</a>
              </li>
              <li ng-if="deploymentConfigsVersion | canI : 'update'">
                <a ng-href="{{deploymentConfig | editResourceURL}}" role="button">Edit</a>
              </li>
              <li class="divider" ng-if="deploymentConfigsVersion | canI : 'update'"></li>
              <li ng-if="!deploymentConfig.spec.paused && !updatingPausedState && (deploymentConfigsVersion | canI : 'update')">
                <a href="" ng-click="setPaused(true)" role="button">Pause Rollouts</a>
              </li>
              <li ng-if="deploymentConfig.spec.paused && !updatingPausedState && (deploymentConfigsVersion | canI : 'update')">
                <a href="" ng-click="setPaused(false)" role="button">Resume Rollouts</a>
              </li>
              <li ng-if="deploymentConfigsVersion | canI : 'update'">
                <a ng-href="project/{{project.metadata.name}}/attach-pvc?kind=DeploymentConfig&name={{deploymentConfig.metadata.name}}"
                   role="button">Add Storage</a>
              </li>
              <li ng-if="!autoscalers.length && (horizontalPodAutoscalersVersion | canI : 'create')">
                <!-- Create a new HPA. -->
                <a ng-href="project/{{projectName}}/edit/autoscaler?kind=DeploymentConfig&name={{deploymentConfig.metadata.name}}"
                   role="button">Add Autoscaler</a>
              </li>
              <li ng-if="autoscalers.length === 1 && (horizontalPodAutoscalersVersion | canI : 'update')">
                <!-- Edit an existing HPA. -->
                <a ng-href="project/{{projectName}}/edit/autoscaler?kind=HorizontalPodAutoscaler&group=autoscaling&name={{autoscalers[0].metadata.name}}"
                  role="button">Edit Autoscaler</a>
              </li>
              <li ng-if="deploymentConfigsVersion | canI : 'update'">
                <a ng-href="project/{{projectName}}/set-limits?kind=DeploymentConfig&name={{deploymentConfig.metadata.name}}"
                  role="button">Edit Resource Limits</a>
              </li>
              <li ng-if="deploymentConfigsVersion | canI : 'update'">
                <a ng-href="{{healthCheckURL}}" role="button">Edit Health Checks</a>
              </li>
              <li ng-if="deploymentConfigsVersion | canI : 'update'">
                <a ng-href="{{deploymentConfig | editYamlURL}}" role="button">Edit YAML</a>
              </li>
              <li class="divider" ng-if="deploymentConfigsVersion | canI : 'update'"></li>
              <li ng-if="deploymentConfigsVersion | canI : 'delete'">
                <delete-link
                  kind="DeploymentConfig"
                  resource-name="{{deploymentConfig.metadata.name}}"
                  project-name="{{deploymentConfig.metadata.namespace}}"
                  alerts="alerts"
                  hpa-list="autoscalers">
                </delete-link>
              </li>
            </ul>
          </div>
          {{deploymentConfigName}}
          <!-- <span ng-if="deploymentConfig.status.details.message" class="pficon pficon-warning-triangle-o" style="cursor: help;" data-toggle="popover" data-trigger="hover" dynamic-content="{{deploymentConfig.status.details.message}}"></span> -->
          <small class="meta" ng-if="deploymentConfig">created <span am-time-ago="deploymentConfig.metadata.creationTimestamp"></span></small>
        </h1>
        <labels labels="deploymentConfig.metadata.labels" clickable="true" kind="deployments" title-kind="deployment configs" project-name="{{deploymentConfig.metadata.namespace}}" limit="3"></labels>
      </div>
    </div>
  </div><!-- /middle-header-->
  <div class="middle-content" persist-tab-state>
    <div class="container-fluid">
      <div ng-if="!loaded">Loading...</div>
      <div class="row" ng-if="loaded">
        <div class="col-md-12" ng-class="{ 'hide-tabs' : !deploymentConfig }">
          <div ng-if="deploymentConfig.spec.paused && !updatingPausedState" class="alert alert-info animate-if">
            <span class="pficon pficon-info" aria-hidden="true"></span>
            <strong>{{deploymentConfig.metadata.name}} is paused.</strong>
            This will stop any new rollouts or triggers from running until resumed.
            <span ng-if="!updatingPausedState && (deploymentConfigsVersion | canI : 'update')" class="nowrap">
              <a href="" ng-click="setPaused(false)" role="button">Resume Rollouts</a>
            </span>
          </div>
          <uib-tabset>
            <uib-tab active="selectedTab.history">
              <uib-tab-heading>History</uib-tab-heading>
              <div ng-if="mostRecent" class="deployment-config-summary">
                <!-- Show the latest deployment status first. -->
                <div class="h3">
                  <span class="latest-status">
                    <status-icon status="mostRecent | deploymentStatus"></status-icon>
                    Deployment
                    <!-- Line break comments to prevent whitespace from being underlined on link hover. -->
                    <a ng-href="{{mostRecent | navigateResourceURL}}"><!--
                      --><span ng-if="mostRecent | annotation : 'deploymentVersion'">#{{mostRecent | annotation : 'deploymentVersion'}}</span><!--
                      --><span ng-if="!(mostRecent | annotation : 'deploymentVersion')">{{mostRecent.metadata.name}}</span><!--
                    --></a>
                    <span ng-if="(mostRecent | deploymentStatus) !== 'Failed'">is</span>
                    {{mostRecent | deploymentStatus | lowercase}}.
                    <a ng-href="{{mostRecent | navigateResourceURL}}?tab=logs">View Log</a>
                  </span>
                  <!-- TODO: Deployment log -->
                </div>
                <div class="last-timestamp meta text-muted">
                  created <span am-time-ago="mostRecent.metadata.creationTimestamp"></span>
                </div>
              </div>
              <div class="table-filter-extension">
                <div class="data-toolbar">
                  <div class="data-toolbar-filter">
                    <project-filter></project-filter>
                  </div>
                </div>
              </div>
              <table class="table table-bordered table-mobile">
                <thead>
                  <tr>
                    <th>Deployment</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Trigger</th>
                  </tr>
                </thead>
                <tbody ng-if="(deployments | hashSize) == 0">
                  <tr><td colspan="4"><em>{{emptyMessage}}</em></td></tr>
                </tbody>
                <tbody ng-if="(deployments | hashSize) > 0">
                  <tr ng-repeat="deployment in orderedDeployments">
                    <td data-title="Deployment">
                      <!-- Deployment number and link -->
                      <span ng-if="deployment | annotation : 'deploymentVersion'">
                        <a ng-href="{{deployment | navigateResourceURL}}">#{{deployment | annotation : 'deploymentVersion'}}</a>
                        <span ng-if="deploymentConfig.status.latestVersion == (deployment | annotation : 'deploymentVersion')">(latest)</span>
                      </span>
                    </td>
                    <td data-title="Status">
                      <div row class="status">
                        <status-icon status="deployment | deploymentStatus" disable-animation></status-icon>
                        <span flex>
                          {{deployment | deploymentStatus}}<span ng-if="(deployment | deploymentStatus) == 'Active' || (deployment | deploymentStatus) == 'Running'">,
                          <span ng-if="deployment.spec.replicas !== deployment.status.replicas">{{deployment.status.replicas}}/</span>{{deployment.spec.replicas}} replica<span ng-if="deployment.spec.replicas != 1">s</span></span>
                        </span>
                        <!-- TODO would be nice to have the deploymentStatusReason in a popup, when there is one -->
                      </div>
                    </td>
                    <td data-title="Created">
                      <span am-time-ago="deployment.metadata.creationTimestamp"></span>
                    </td>
                    <td data-title="Trigger">
                      <span ng-if="!deployment.causes.length">Unknown</span>
                      <span ng-if="deployment.causes.length">
                        <span ng-repeat="cause in deployment.causes">
                          <span ng-switch="cause.type">
                            <span ng-switch-when="ImageChange">
                              <span ng-if="cause.imageTrigger.from">
                                <abbr title="{{cause.imageTrigger.from | imageObjectRef : null : true}}">Image</abbr> change
                              </span>
                            </span>
                            <span ng-switch-when="ConfigChange">Config change</span>
                            <span ng-switch-default>{{cause.type}}</span>
                          </span>
                        </span>
                      </span>
                  </td>
                </tr>
              </tbody>
              </table>
            </uib-tab>
            <uib-tab active="selectedTab.configuration">
              <uib-tab-heading>Configuration</uib-tab-heading>
              <div class="resource-details" ng-if="deploymentConfig">
                <div class="row">
                  <div class="col-lg-6">
                    <!--
                      Show a header at lg and xl screen sizes to balance the columns, but hide
                      it at smaller widths since "Details" is not very meaningful.
                    -->
                    <h3 class="hidden visible-lg visible-xl">Details</h3>
                    <dl class="dl-horizontal left">
                      <dt>Selectors:</dt>
                      <dd>
                        <selector selector="deploymentConfig.spec.selector"></selector>
                      </dd>
                      <dt>Replicas:</dt>
                      <dd>
                        <replicas spec="deploymentConfig.spec.replicas"
                                  disable-scaling="autoscalers.length || deploymentInProgress"
                                  scale-fn="scale(replicas)"
                                  deployment="deploymentConfig"></replicas>
                        <span ng-if="autoscalers.length">(autoscaled)</span>
                      </dd>

                      <dt ng-if-start="deploymentConfig.spec.strategy.type">Strategy:</dt>
                      <dd ng-if-end>{{deploymentConfig.spec.strategy.type}}</dd>

                      <div ng-if="deploymentConfig.spec.strategy.rollingParams || deploymentConfig.spec.strategy.recreateParams">
                        <dt>Timeout:</dt>
                        <dd>{{strategyParams.timeoutSeconds}} sec</dd>
                        <dt ng-if-start="deploymentConfig.spec.strategy.rollingParams">Update Period:</dt>
                        <dd>{{strategyParams.updatePeriodSeconds}} sec</dd>
                        <dt>Interval:</dt>
                        <dd>{{strategyParams.intervalSeconds}} sec</dd>
                        <dt>Max Unavailable:</dt>
                        <dd>{{strategyParams.maxUnavailable}}</dd>
                        <dt>Max Surge:</dt>
                        <dd ng-if-end>{{strategyParams.maxSurge}}</dd>
                      </div>
                      <!-- TODO: Surface the parameters for the recreate and custom strategies -->
                    </dl>
                    <h3>Template</h3>
                    <pod-template
                        pod-template="deploymentConfig.spec.template"
                        images-by-docker-reference="imagesByDockerReference"
                        builds="builds"
                        detailed="true"
                        add-health-check-url="{{(deploymentConfigsVersion | canI : 'update') ? healthCheckURL : ''}}">
                    </pod-template>
                    <h3>Volumes</h3>
                    <p ng-if="!deploymentConfig.spec.template.spec.volumes.length && !(deploymentConfigsVersion | canI : 'update')">
                      none
                    </p>
                    <volumes
                        volumes="deploymentConfig.spec.template.spec.volumes"
                        namespace="project.metadata.name"
                        can-remove="deploymentConfigsVersion | canI : 'update'"
                        remove-fn="removeVolume(volume)">
                    </volumes>
                    <p ng-if="deploymentConfigsVersion | canI : 'update'">
                      <a ng-href="project/{{project.metadata.name}}/attach-pvc?kind=DeploymentConfig&name={{deploymentConfig.metadata.name}}">Add Storage</a>
                      <span class="action-divider" aria-hidden="true">|</span>
                      <a ng-href="project/{{project.metadata.name}}/add-config-volume?kind=DeploymentConfig&name={{deploymentConfig.metadata.name}}">Add Config Files</a>
                    </p>
                  </div>

                  <!-- Autoscaling -->
                  <div class="col-lg-6">
                    <h3>Autoscaling</h3>

                    <!-- Show any warnings. -->
                    <div ng-repeat="warning in hpaWarnings" class="alert alert-warning">
                      <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
                      <span class="sr-only">Warning:</span>
                      {{warning.message}}

                      <!-- If the CPU request is missing, add an action to set one. -->
                      <a ng-href="project/{{projectName}}/set-limits?kind=DeploymentConfig&name={{deploymentConfig.metadata.name}}"
                         ng-if="warning.reason === 'NoCPURequest' && (deploymentConfigsVersion | canI : 'update')"
                         role="button">Edit Resource
                        <span ng-if="!('cpu' | isRequestCalculated : project)">Requests and</span> Limits</a>
                    </div>

                    <!-- Create autoscaler -->
                    <div ng-if="!autoscalers.length">
                      <a ng-if="horizontalPodAutoscalersVersion | canI : 'create'" ng-href="project/{{projectName}}/edit/autoscaler?kind=DeploymentConfig&name={{deploymentConfig.metadata.name}}"
                         role="button">Add Autoscaler</a>
                      <span ng-if="!(horizontalPodAutoscalersVersion | canI : 'create')">Autoscaling is not enabled. There are no autoscalers for this deployment config.</span>
                    </div>

                    <!-- HPA details -->
                    <div ng-repeat="hpa in autoscalers">
                      <hpa hpa="hpa" project="project" show-scale-target="false" alerts="alerts"></hpa>
                    </div>
                  </div>

                  <div class="col-lg-6" ng-if="deploymentConfig.spec.strategy.type !== 'Custom'">
                    <h3>
                      Hooks
                      <span class="learn-more-inline">
                        <a ng-href="{{'lifecycle_hooks' | helpLink}}" target="_blank">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></a>
                      </span>
                    </h3>
                    <div ng-if="strategyParams.pre">
                      <lifecycle-hook deployment-config="deploymentConfig" type="pre"></lifecycle-hook>
                    </div>
                    <div ng-if="strategyParams.mid">
                      <lifecycle-hook deployment-config="deploymentConfig" type="mid"></lifecycle-hook>
                    </div>
                    <div ng-if="strategyParams.post">
                      <lifecycle-hook deployment-config="deploymentConfig" type="post"></lifecycle-hook>
                    </div>
                    <div ng-if="!strategyParams.pre && !strategyParams.mid && !strategyParams.post">
                      none
                    </div>
                  </div>

                  <div class="col-lg-6">
                    <h3>Triggers</h3>
                    <dl class="dl-horizontal left">
                      <dt>Manual (CLI):
                        <a href="{{'deployment-operations' | helpLink}}" target="_blank">
                          <span class="learn-more-block">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></span>
                        </a>
                      </dt>
                      <dd>
                        <copy-to-clipboard clipboard-text="'oc rollout latest dc/' + deploymentConfig.metadata.name + ' -n ' + project.metadata.name"></copy-to-clipboard>
                      </dd>
                      <div ng-repeat="trigger in deploymentConfig.spec.triggers">
                        <span ng-switch="trigger.type">
                          <span ng-switch-default>{{trigger.type}}</span>
                          <span ng-switch-when="ImageChange" ng-if="trigger.imageChangeParams.from">
                            <dt>New Image For:</dt>
                            <dd>
                              {{trigger.imageChangeParams.from | imageObjectRef : deploymentConfig.metadata.namespace}}
                              <small ng-if="!trigger.imageChangeParams.automatic" class="text-muted">(disabled)</small>
                            </dd>
                          </span>
                          <span ng-switch-when="ConfigChange">
                            <dt>Change Of:</dt>
                            <dd>Config</dd>
                          </span>
                        </span>
                      </div>
                    </dl>
                  </div>

                  <!-- Service Bindings -->
                  <div class="col-lg-6">
                    <resource-service-bindings
                      project="project"
                      project-context="projectContext"
                      api-object="deploymentConfig">
                    </resource-service-bindings>
                  </div>

                </div>
                <annotations annotations="deploymentConfig.metadata.annotations"></annotations>
              </div>
            </uib-tab>
            <uib-tab heading="Environment" active="selectedTab.environment" ng-if="deploymentConfig">
              <uib-tab-heading>Environment</uib-tab-heading>
              <edit-environment-variables api-object="deploymentConfig"></edit-environment-variables>
            </uib-tab>
            <uib-tab active="selectedTab.events" ng-if="eventsVersion | canI : 'watch'">
              <uib-tab-heading>Events</uib-tab-heading>
              <events api-objects="[ deploymentConfig ]" project-context="projectContext" ng-if="selectedTab.events"></events>
            </uib-tab>
          </uib-tabset>
        </div><!-- /col-* -->
      </div>
    </div>
  </div><!-- /middle-content -->
</div>