instanceDetails.html

<div class="details-panel">
  <div class="header" ng-if="state.loading">
    <div class="close-button" ng-if="!state.standalone">
      <a class="btn btn-link" ui-sref="^">
        <span class="glyphicon glyphicon-remove"></span>
      </a>
    </div>
    <h4 class="text-center">
      <span us-spinner="{radius:20, width:6, length: 12}"></span>
    </h4>
  </div>
  <div class="header" ng-if="!state.loading">
    <div class="close-button" ng-if="!state.standalone">
      <a class="btn btn-link" ui-sref="^">
        <span class="glyphicon glyphicon-remove"></span>
      </a>
    </div>
    <div class="header-text horizontal middle">
      <span class="glyphicon glyphicon-hdd {{instance.healthState}}"></span>
      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>
        {{instance ? instance.id : instanceIdNotFound}}
      </h3>

      <copy-to-clipboard
        ng-if="instance"
        class="copy-to-clipboard"
        text="sshLink"
        tool-tip="'Copy titus-ssh command to clipboard'">
      </copy-to-clipboard>
    </div>
    <div>
      <div class="actions" ng-class="{ insights: instance.insightActions.length > 0 }" ng-if="instance.placement">
        <div class="dropdown" uib-dropdown dropdown-append-to-body>
          <button type="button" class="btn btn-sm btn-primary dropdown-toggle" ng-disabled="disabled" uib-dropdown-toggle>
            Titus Task Actions <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" uib-dropdown-menu role="menu">
            <li><a href ng-click="ctrl.enableInstanceInDiscovery()" ng-if="ctrl.canRegisterWithDiscovery()">Enable in Discovery</a></li>
            <li><a href ng-click="ctrl.disableInstanceInDiscovery()" ng-if="ctrl.hasHealthState('Discovery', 'Up') || ctrl.hasHealthState('Discovery', 'Down')">Disable in Discovery</a></li>
            <li><a href ng-click="ctrl.terminateInstance()">Terminate</a></li>
            <li><a href ng-click="ctrl.terminateInstanceAndShrinkServerGroup()">Terminate and Shrink Server Group</a></li>
          </ul>
        </div>
        <div class="dropdown" ng-if="instance.insightActions.length > 0" uib-dropdown dropdown-append-to-body>
          <button type="button" class="btn btn-sm btn-default dropdown-toggle" uib-dropdown-toggle>
            Insight <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" uib-dropdown-menu role="menu">
            <li ng-repeat="action in instance.insightActions"
                analytics-on="click"
                analytics-category="Insight Menu (Instance)"
                analytics-event="{{action.label}} clicked"
                analytics-label="{{instance.account}}/{{instance.region}}/{{instance.name}}/{{instance.serverGroup}}">
              <a target=_blank href="{{action.url}}">{{action.label}}</a>
            </li>
          </ul>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
  <div class="content" ng-if="!state.loading && instance">
    <collapsible-section heading="Titus Task Information" expanded="true">
      <dl class="dl-horizontal dl-flex">
        <dt>Task Id</dt>
        <dd><a href="{{ctrl.titusUiEndpoint}}jobs/{{instance.jobId}}/tasks/{{instance.id}}" target="_blank">{{instance.id}}</a></dd>
        <dt>Instance Id</dt>
        <dd>{{instance.instanceId}}
          <copy-to-clipboard
            class="copy-to-clipboard"
            text="instance.instanceId"
            tool-tip="'Copy instance Id to clipboard'">
          </copy-to-clipboard>
        </dd>
        <dt>Job Id</dt>
        <dd><a href="{{ctrl.titusUiEndpoint}}jobs/{{instance.jobId}}" target="_blank">{{instance.jobId}}</a></dd>
        <dt ng-if="instance.serverGroup">Job Name</dt>
        <dd ng-if="instance.serverGroup">{{instance.serverGroup}}</dd>
        <dt>Launched</dt>
        <dd ng-if="instance.launchTime">{{instance.launchTime | timestamp}}</dd>
        <dd ng-if="!instance.launchTime">(Unknown)</dd>
      </dl>
    </collapsible-section>
    <collapsible-section heading="Task Placement" expanded="true">
      <dl class="dl-horizontal dl-flex">
        <dt>Account</dt>
        <dd><account-tag account="instance.account" pad="right"></account-tag></dd>
        <dt>Region</dt>
        <dd>{{instance.placement.region}}</dd>
        <dt>Host</dt>
        <dd>{{instance.placement.host}}</dd>
        <dt ng-if="instance.resources.ports && ctrl.hasPorts()">Port(s)</dt>
        <dd ng-if="instance.resources.ports && ctrl.hasPorts()">
          <div ng-repeat="(key, val) in instance.resources.ports">
            {{key}} -> {{val}}
          </div>
        </dd>
        <dt ng-if="instance.placement.containerIp">Container IP</dt>
        <dd ng-if="instance.placement.containerIp">{{instance.placement.containerIp}}
          <copy-to-clipboard
            class="copy-to-clipboard"
            text="instance.placement.containerIp"
            tool-tip="'Copy container IP clipboard'">
          </copy-to-clipboard>
        </dd>
      </dl>
    </collapsible-section>
    <collapsible-section heading="Task Resources" expanded="true">
      <dl class="dl-horizontal dl-flex">
        <dt>CPU(s)</dt>
        <dd>{{instance.resources.cpu}}</dd>
        <dt>Memory</dt>
        <dd>{{instance.resources.memory}} MB</dd>
        <dt>Disk</dt>
        <dd>{{instance.resources.disk}} MB</dd>
        <dt>Network</dt>
        <dd>{{instance.resources.networkMbps}} Mbps</dd>
        <dt>GPU(s)</dt>
        <dd>{{instance.resources.gpu}}</dd>
      </dl>
    </collapsible-section>
    <collapsible-section heading="Status" expanded="true">
      <p ng-if="instance.healthState !== 'Starting' && !healthMetrics.length">
        No health metrics found for this instance
      </p>
      <p ng-if="instance.healthState === 'Starting' && !healthMetrics.length">
        <span class="glyphicon glyphicon-Starting-triangle"></span> <strong>Starting</strong>
      </p>
      <dl class="horizontal-when-filters-collapsed">
        <dt ng-repeat-start="metric in healthMetrics | orderBy: 'type'">{{metric.type | robotToHuman}}</dt>
        <dd ng-repeat-end>
          <div ng-if="metric.type !== 'TargetGroup'">
            <span uib-tooltip="{{metric.state.toLowerCase() === 'down' ? metric.description : ''}}" tooltip-placement="left">
              <span class="glyphicon glyphicon-{{metric.state}}-triangle"></span>
              {{metric.state | robotToHuman}}
            </span>
            <span class="pad-left small">
              <a ng-if="metric.healthCheckUrl" target="_blank" href="{{metric.healthCheckUrl}}">Health Check</a>
              <span ng-if="metric.healthCheckUrl && metric.statusPageUrl"> | </span>
              <a ng-if="metric.statusPageUrl" target="_blank" href="{{metric.statusPageUrl}}">Status</a>
              <span ng-if="metric.type === 'Discovery'"> |
                <a target="_blank" href="{{ctrl.discoveryInfoLink}}">Discovery Info</a>
              </span>
            </span>
          </div>
          <div ng-if="metric.type === 'TargetGroup' && metric.targetGroups.length" ng-repeat="targetGroup in metric.targetGroups">
            <instance-load-balancer-health load-balancer="targetGroup"></instance-load-balancer-health>
          </div>
        </dd>
      </dl>
    </collapsible-section>
    <collapsible-section heading="Security Groups">
      <ul>
        <li ng-repeat="securityGroup in securityGroups | orderBy:'name'">
          <a
            ui-sref="^.securityGroupDetails({name: securityGroup.name, accountId: securityGroup.account, region: instance.region, vpcId: securityGroup.vpcId, provider: 'aws'})">
            {{securityGroup.name}} ({{securityGroup.id}})
          </a>
        </li>
      </ul>
    </collapsible-section>
    <collapsible-section heading="Task Logs">
      <ul>
        <li><a href="{{ctrl.titusUiEndpoint}}jobs/{{instance.jobId}}/tasks/{{instance.id}}/logs/live" target="_blank">Task Logs</a></li>
      </ul>
    </collapsible-section>
    <instance-links address="baseIpAddress" application="application" instance="instance"></instance-links>
  </div>
  <div class="content" ng-if="!state.loading && !instance">
    <div class="content-section">
      <div class="content-body text-center">
        <h3>Instance not found.</h3>
      </div>
    </div>
  </div>
</div>