@spotinst/spinnaker-deck/app/scripts/modules/google/src/loadBalancer/details/loadBalancerDetails.html

Spinnaker-Deck service, forked with support to Spotinst

<div class="details-panel">
  <div ng-if="state.loading" class="header">
    <div class="close-button">
      <a class="btn btn-link" ui-sref="^">
        <span class="glyphicon glyphicon-remove"></span>
      </a>
    </div>
    <div class="horizontal center middle">
      <loading-spinner size="'small'"></loading-spinner>
    </div>
  </div>

  <div ng-if="!state.loading" class="header">
    <div class="close-button">
      <a class="btn btn-link" ui-sref="^">
        <span class="glyphicon glyphicon-remove"></span>
      </a>
    </div>
    <div class="header-text horizontal middle">
      <span class="fa icon-sitemap"></span>
      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
        {{loadBalancer.name}}
        <render-if-feature feature="entityTags">
          <entity-notifications
            entity="loadBalancer"
            application="ctrl.application"
            placement="bottom"
            h-offset-percent="90%"
            entity-type="loadBalancer"
            page-location="details"
            on-update="ctrl.application.loadBalancers.refresh()"
          ></entity-notifications>
        </render-if-feature>
      </h3>
    </div>
    <div>
      <div class="actions">
        <div class="dropdown" uib-dropdown dropdown-append-to-body>
          <button type="button" class="btn btn-sm btn-primary dropdown-toggle" uib-dropdown-toggle>
            Load Balancer Actions <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" uib-dropdown-menu role="menu">
            <li><a href ng-click="ctrl.editLoadBalancer()">Edit Load Balancer</a></li>
            <li ng-if="!loadBalancer.instances.length">
              <a href ng-click="ctrl.deleteLoadBalancer()">Delete Load Balancer</a>
            </li>
            <li
              ng-if="loadBalancer.instances.length"
              class="disabled"
              uib-tooltip="You must detach all instances before you can delete this load balancer."
            >
              <a href ng-click="ctrl.deleteLoadBalancer()">Delete Load Balancer</a>
            </li>
            <render-if-feature feature="entityTags">
              <add-entity-tag-links
                component="loadBalancer"
                application="ctrl.application"
                entity-type="loadBalancer"
                on-update="ctrl.application.loadBalancers.refresh()"
              ></add-entity-tag-links>
            </render-if-feature>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div ng-if="!state.loading" class="content">
    <collapsible-section heading="Load Balancer Details" expanded="true">
      <dl class="dl-horizontal dl-narrow">
        <dt>Created</dt>
        <dd>{{loadBalancer.elb.createdTime | timestamp}}</dd>
        <dt>In</dt>
        <dd><account-tag account="loadBalancer.account" pad="right"></account-tag></dd>
        <dt>Region</dt>
        <dd>{{loadBalancer.region}}</dd>
        <dt>Type</dt>
        <dd>
          <gce-load-balancer-type load-balancer="loadBalancer"></gce-load-balancer-type>
        </dd>
        <dt ng-if="loadBalancer.network">Network</dt>
        <dd ng-if="loadBalancer.network">{{ctrl.getNetworkId(loadBalancer)}}</dd>
        <dt ng-if="loadBalancer.subnet">Subnet</dt>
        <dd ng-if="loadBalancer.subnet">{{ctrl.getSubnetId(loadBalancer)}}</dd>
        <dt ng-if="loadBalancer.serverGroups.length">Server Groups</dt>
        <dd ng-if="loadBalancer.serverGroups.length">
          <ul>
            <li ng-repeat="serverGroup in loadBalancer.serverGroups | orderBy: ['isDisabled', '-name']">
              <a
                ui-sref="^.serverGroup({region: serverGroup.region,
                                          accountId: serverGroup.account,
                                          serverGroup: serverGroup.name,
                                          provider: 'gce'})"
              >
                {{serverGroup.name}}
              </a>
            </li>
          </ul>
        </dd>
        <div ng-if="!ctrl.isHttpLoadBalancer(loadBalancer) && loadBalancer.elb.dnsname">
          <dt>DNS Name</dt>
          <dd>
            <a target="_blank" href="{{loadBalancer.elb.dns.protocol}}//{{loadBalancer.elb.dns.dnsname}}"
              >{{loadBalancer.elb.dns.dnsname}}</a
            >
            <copy-to-clipboard
              class="copy-to-clipboard copy-to-clipboard-sm"
              text="loadBalancer.elb.dns.dnsname"
              tool-tip="'Copy DNS Name to clipboard'"
            >
            </copy-to-clipboard>
          </dd>
        </div>
        <div ng-if="ctrl.loadBalancer.loadBalancerType === 'HTTP'">
          <dt>DNS Names</dt>
          <dd>
            <ul>
              <li ng-repeat="dns in loadBalancer.elb.dns">
                <a target="_blank" href="{{dns.protocol}}//{{dns.dnsname}}">{{dns.dnsname}}</a>
                <copy-to-clipboard
                  class="copy-to-clipboard copy-to-clipboard-sm"
                  text="dns.dnsname"
                  tool-tip="'Copy DNS Name to clipboard'"
                >
                </copy-to-clipboard>
              </li>
            </ul>
          </dd>
        </div>
        <div ng-if="ctrl.isHttpLoadBalancer(loadBalancer)">
          <gce-host-and-path-rules-button
            default-service="loadBalancer.defaultService"
            load-balancer-name="loadBalancer.name"
            host-rules="loadBalancer.hostRules"
          >
          </gce-host-and-path-rules-button>
        </div>
      </dl>
    </collapsible-section>
    <collapsible-section heading="Status" expanded="true">
      <health-counts class="pull-left" container="loadBalancer.instanceCounts"></health-counts>
    </collapsible-section>
    <collapsible-section heading="Listeners">
      <dl>
        <dt>
          Load Balancer &rarr; Instance
          <help-field
            ng-if="ctrl.isHttpLoadBalancer(loadBalancer) || loadBalancer.loadBalancerType === 'SSL' || loadBalancer.loadBalancerType === 'TCP'"
            key="gce.httpLoadBalancer.namedPort"
          ></help-field>
        </dt>
        <dd ng-repeat="listener in loadBalancer.elb.listenerDescriptions">
          {{listener.listener.protocol}}:{{listener.listener.loadBalancerPort}} &rarr;
          {{listener.listener.instanceProtocol}}:{{listener.listener.instancePort}}
        </dd>
      </dl>
    </collapsible-section>
    <collapsible-section
      heading="Backend Services"
      ng-if="ctrl.isHttpLoadBalancer(loadBalancer) || loadBalancer.backendService"
    >
      <dl class="horizontal-when-filters-collapsed" ng-switch on="loadBalancer.loadBalancerType">
        <div ng-repeat="service in loadBalancer.elb.backendServices" ng-switch-when="HTTP">
          <hr ng-if="$index > 0" />
          <gce-backend-service-details backend-service="service"></gce-backend-service-details>
        </div>

        <gce-backend-service-details
          backend-service="loadBalancer.backendService"
          ng-switch-default
        ></gce-backend-service-details>
      </dl>
    </collapsible-section>
    <collapsible-section
      ng-if="ctrl.isHttpLoadBalancer(loadBalancer) || loadBalancer.healthCheck || loadBalancer.backendService.healthCheck"
      heading="Health Checks"
    >
      <dl class="horizontal-when-filters-collapsed" ng-switch on="loadBalancer.loadBalancerType">
        <gce-health-check ng-switch-when="NETWORK" health-check="loadBalancer.healthCheck"></gce-health-check>

        <div ng-switch-when="HTTP" ng-repeat="healthCheck in loadBalancer.elb.healthChecks">
          <hr ng-if="$index > 0" />
          <gce-health-check health-check="healthCheck"></gce-health-check>
        </div>

        <gce-health-check ng-switch-default health-check="loadBalancer.backendService.healthCheck"></gce-health-check>
      </dl>
    </collapsible-section>
    <collapsible-section heading="Logs">
      <ul>
        <li ng-if="loadBalancer.logsLink">
          <a href="{{loadBalancer.logsLink}}" target="_blank">Cloud Console Logs</a>
          <copy-to-clipboard
            class="copy-to-clipboard copy-to-clipboard-sm"
            text="loadBalancer.logsLink"
            tool-tip="'Copy to clipboard'"
          >
          </copy-to-clipboard>
        </li>
      </ul>
    </collapsible-section>
  </div>
</div>