@spinnaker/oracle 0.0.0-main-2

package/src/serverGroup/configure/wizard/serverGroupWizard.html

@@ -0,0 +1,40 @@
+<form name="form" class="form-horizontal" novalidate>
+  <div ng-if="state.requiresTemplateSelection">
+    <ng-include src="pages.templateSelection"></ng-include>
+  </div>
+  <div ng-if="!state.loaded" style="height: 200px" class="horizontal center middle">
+    <loading-spinner size="'small'"></loading-spinner>
+  </div>
+  <div ng-if="!state.requiresTemplateSelection">
+    <v2-modal-wizard ng-show="state.loaded" heading="{{title}}" task-monitor="taskMonitor" dismiss="$dismiss()">
+      <v2-wizard-page key="location" label="Basic Settings" mark-complete-on-view="false">
+        <ng-include src="pages.basicSettings"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="instance-type" label="Instance Type" mark-complete-on-view="false">
+        <ng-include src="pages.instanceType"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="capacity" label="Capacity" done="true">
+        <ng-include src="pages.capacity"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="loadBalancers" label="Load Balancers" done="true">
+        <ng-include src="pages.loadBalancers"></ng-include>
+      </v2-wizard-page>
+      <v2-wizard-page key="network" label="Network Settings" done="true">
+        <ng-include src="pages.networkSettings"></ng-include>
+      </v2-wizard-page>
+    </v2-modal-wizard>
+    <div class="modal-footer" ng-if="state.loaded">
+      <button ng-disabled="taskMonitor.submitting" class="btn btn-default btn-cancel" ng-click="ctrl.cancel()">
+        Cancel
+      </button>
+      <submit-button
+        ng-if="ctrl.showSubmitButton()"
+        is-disabled="!ctrl.isValid() || taskMonitor.submitting"
+        label="command.viewState.submitButtonLabel"
+        submitting="taskMonitor.submitting"
+        on-click="ctrl.submit()"
+        is-new="true"
+      ></submit-button>
+    </div>
+  </div>
+</form>

package/src/serverGroup/configure/wizard/templateSelection/templateSelection.html

@@ -0,0 +1,9 @@
+<deploy-initializer
+  cloud-provider="oracle"
+  command="command"
+  application="application"
+  parent-state="state"
+  dismiss="ctrl.cancel()"
+  template-selection-text="ctrl.templateSelectionText"
+  on-template-selected="ctrl.templateSelected()"
+></deploy-initializer>

package/src/serverGroup/details/resize/resizeCapacity.component.html

@@ -0,0 +1,36 @@
+<ng-form name="resizeCapacityForm">
+  <div>
+    <div class="form-group">
+      <div class="col-md-12">
+        <p>Sets desired instance count for this server group.</p>
+      </div>
+    </div>
+    <div class="form-group form-inline">
+      <div class="col-md-3 sm-label-right">Current size</div>
+      <div class="col-md-6">
+        <input
+          type="number"
+          class="form-control input-sm"
+          ng-model="$ctrl.serverGroup.capacity.desired"
+          style="width: 60px"
+          readonly
+        />
+        instance<span ng-if="$ctrl.currentSize.desired > 1">s</span>
+      </div>
+    </div>
+    <div class="form-group form-inline">
+      <div class="col-md-3 sm-label-right">Resize to</div>
+      <div class="col-md-6">
+        <input
+          type="number"
+          class="form-control input-sm highlight-pristine"
+          ng-model="$ctrl.command.newSize"
+          min="0"
+          required
+          style="width: 60px"
+        />
+        instance<span ng-if="$ctrl.currentSize.desired > 1">s</span>
+      </div>
+    </div>
+  </div>
+</ng-form>

package/src/serverGroup/details/resize/resizeCapacity.component.js

@@ -0,0 +1,42 @@
+'use strict';
+
+import * as angular from 'angular';
+import _ from 'lodash';
+
+import { SERVER_GROUP_WRITER } from '@spinnaker/core';
+
+export const ORACLE_SERVERGROUP_DETAILS_RESIZE_RESIZECAPACITY_COMPONENT =
+  'spinnaker.oracle.serverGroup.details.resize.capacity.component';
+export const name = ORACLE_SERVERGROUP_DETAILS_RESIZE_RESIZECAPACITY_COMPONENT; // for backwards compatibility
+angular
+  .module(ORACLE_SERVERGROUP_DETAILS_RESIZE_RESIZECAPACITY_COMPONENT, [SERVER_GROUP_WRITER])
+  .component('oracleResizeCapacity', {
+    bindings: {
+      command: '=',
+      application: '=',
+      serverGroup: '=',
+      formMethods: '=',
+    },
+    templateUrl: require('./resizeCapacity.component.html'),
+    controller: [
+      '$scope',
+      'serverGroupWriter',
+      function ($scope, serverGroupWriter) {
+        this.command.newSize = null;
+
+        angular.extend(this.formMethods, {
+          formIsValid: () => _.every([this.command.newSize !== null, $scope.resizeCapacityForm.$valid]),
+          submitMethod: () => {
+            return serverGroupWriter.resizeServerGroup(this.serverGroup, this.application, {
+              capacity: { min: this.command.newSize, max: this.command.newSize, desired: this.command.newSize },
+              serverGroupName: this.serverGroup.name,
+              targetSize: this.command.newSize,
+              region: this.serverGroup.region,
+              interestingHealthProviderNames: this.command.interestingHealthProviderNames,
+              reason: this.command.reason,
+            });
+          },
+        });
+      },
+    ],
+  });

package/src/serverGroup/details/resize/resizeServerGroup.controller.js

@@ -0,0 +1,62 @@
+'use strict';
+
+import { module } from 'angular';
+
+import { TaskMonitor } from '@spinnaker/core';
+import { ORACLE_COMMON_FOOTER_COMPONENT } from '../../../common/footer.component';
+
+import { ORACLE_SERVERGROUP_DETAILS_RESIZE_RESIZECAPACITY_COMPONENT } from './resizeCapacity.component';
+
+export const ORACLE_SERVERGROUP_DETAILS_RESIZE_RESIZESERVERGROUP_CONTROLLER =
+  'spinnaker.oracle.serverGroup.details.resize.controller';
+export const name = ORACLE_SERVERGROUP_DETAILS_RESIZE_RESIZESERVERGROUP_CONTROLLER; // for backwards compatibility
+module(ORACLE_SERVERGROUP_DETAILS_RESIZE_RESIZESERVERGROUP_CONTROLLER, [
+  ORACLE_SERVERGROUP_DETAILS_RESIZE_RESIZECAPACITY_COMPONENT,
+  ORACLE_COMMON_FOOTER_COMPONENT,
+]).controller('oracleResizeServerGroupCtrl', [
+  '$scope',
+  '$uibModalInstance',
+  'application',
+  'serverGroup',
+  function ($scope, $uibModalInstance, application, serverGroup) {
+    $scope.serverGroup = serverGroup;
+    $scope.application = application;
+    $scope.verification = {};
+    $scope.command = {};
+    $scope.formMethods = {};
+
+    if (application && application.attributes) {
+      if (application.attributes.platformHealthOnlyShowOverride && application.attributes.platformHealthOnly) {
+        $scope.command.interestingHealthProviderNames = ['Oracle'];
+      }
+
+      $scope.command.platformHealthOnlyShowOverride = application.attributes.platformHealthOnlyShowOverride;
+    }
+
+    this.isValid = function () {
+      if (!$scope.verification.verified) {
+        return false;
+      }
+      return $scope.formMethods.formIsValid();
+    };
+
+    $scope.taskMonitor = new TaskMonitor({
+      application: application,
+      title: 'Resizing ' + serverGroup.name,
+      modalInstance: $uibModalInstance,
+    });
+
+    this.resize = function () {
+      this.submitting = true;
+      if (!this.isValid()) {
+        return;
+      }
+
+      $scope.taskMonitor.submit($scope.formMethods.submitMethod);
+    };
+
+    this.cancel = function () {
+      $uibModalInstance.dismiss();
+    };
+  },
+]);

package/src/serverGroup/details/resize/resizeServerGroup.html

@@ -0,0 +1,33 @@
+<div modal-page class="confirmation-modal">
+  <task-monitor monitor="taskMonitor"></task-monitor>
+  <form role="form" ng-if="!ctrl.submitting">
+    <modal-close dismiss="$dismiss()"></modal-close>
+    <div class="modal-header">
+      <h4 class="modal-title">Resize {{serverGroup.name}}</h4>
+    </div>
+    <div class="modal-body confirmation-modal">
+      <div class="form-horizontal">
+        <oracle-resize-capacity
+          server-group="serverGroup"
+          form-methods="formMethods"
+          application="application"
+          command="command"
+        ></oracle-resize-capacity>
+      </div>
+      <div class="row" ng-if="command.platformHealthOnlyShowOverride">
+        <div class="col-sm-10 col-sm-offset-1">
+          <platform-health-override command="command" platform-health-type="'Oracle'" show-help-details="true">
+          </platform-health-override>
+        </div>
+      </div>
+      <task-reason command="command"></task-reason>
+    </div>
+    <oracle-footer
+      action="ctrl.resize()"
+      cancel="ctrl.cancel()"
+      is-valid="ctrl.isValid()"
+      account="serverGroup.account"
+      verification="verification"
+    ></oracle-footer>
+  </form>
+</div>

package/src/serverGroup/details/rollback/rollbackServerGroup.controller.js

@@ -0,0 +1,73 @@
+'use strict';
+
+import { module } from 'angular';
+
+import { SERVER_GROUP_WRITER, TaskMonitor } from '@spinnaker/core';
+import { ORACLE_COMMON_FOOTER_COMPONENT } from '../../../common/footer.component';
+
+export const ORACLE_SERVERGROUP_DETAILS_ROLLBACK_ROLLBACKSERVERGROUP_CONTROLLER =
+  'spinnaker.oracle.serverGroup.details.rollback.controller';
+export const name = ORACLE_SERVERGROUP_DETAILS_ROLLBACK_ROLLBACKSERVERGROUP_CONTROLLER; // for backwards compatibility
+module(ORACLE_SERVERGROUP_DETAILS_ROLLBACK_ROLLBACKSERVERGROUP_CONTROLLER, [
+  SERVER_GROUP_WRITER,
+  ORACLE_COMMON_FOOTER_COMPONENT,
+]).controller('oracleRollbackServerGroupCtrl', [
+  '$scope',
+  '$uibModalInstance',
+  'serverGroupWriter',
+  'application',
+  'serverGroup',
+  'disabledServerGroups',
+  function ($scope, $uibModalInstance, serverGroupWriter, application, serverGroup, disabledServerGroups) {
+    $scope.serverGroup = serverGroup;
+    $scope.disabledServerGroups = disabledServerGroups.sort((a, b) => b.name.localeCompare(a.name));
+    $scope.verification = {};
+
+    $scope.command = {
+      rollbackType: 'EXPLICIT',
+      rollbackContext: {
+        rollbackServerGroupName: serverGroup.name,
+      },
+    };
+
+    if (application && application.attributes) {
+      if (application.attributes.platformHealthOnlyShowOverride && application.attributes.platformHealthOnly) {
+        $scope.command.interestingHealthProviderNames = ['Oracle'];
+      }
+
+      $scope.command.platformHealthOnlyShowOverride = application.attributes.platformHealthOnlyShowOverride;
+    }
+
+    this.isValid = function () {
+      const command = $scope.command;
+      if (!$scope.verification.verified) {
+        return false;
+      }
+
+      return command.rollbackContext.restoreServerGroupName !== undefined;
+    };
+
+    $scope.taskMonitor = new TaskMonitor({
+      application: application,
+      title: 'Rollback ' + serverGroup.name,
+      modalInstance: $uibModalInstance,
+    });
+
+    this.rollback = function () {
+      this.submitting = true;
+      if (!this.isValid()) {
+        return;
+      }
+
+      const submitMethod = function () {
+        return serverGroupWriter.rollbackServerGroup(serverGroup, application, $scope.command);
+      };
+
+      $scope.taskMonitor.submit(submitMethod);
+    };
+
+    this.cancel = function () {
+      $uibModalInstance.dismiss();
+    };
+  },
+]);

package/src/serverGroup/details/rollback/rollbackServerGroup.html

@@ -0,0 +1,41 @@
+<div modal-page class="confirmation-modal">
+  <task-monitor monitor="taskMonitor"></task-monitor>
+  <form role="form" ng-if="!ctrl.submitting">
+    <modal-close dismiss="$dismiss()"></modal-close>
+    <div class="modal-header">
+      <h4 class="modal-title">Rollback {{serverGroup.name}}</h4>
+    </div>
+    <div class="modal-body confirmation-modal">
+      <div class="row">
+        <div class="col-sm-3 sm-label-right">Restore to</div>
+        <div class="col-sm-6">
+          <ui-select ng-model="command.rollbackContext.restoreServerGroupName" class="form-control input-sm">
+            <ui-select-match placeholder="Select...">{{$select.selected.name}}</ui-select-match>
+            <ui-select-choices repeat="serverGroup.name as serverGroup in disabledServerGroups">
+              <span ng-bind-html="serverGroup.name"></span>
+            </ui-select-choices>
+          </ui-select>
+        </div>
+      </div>
+      <div class="row" ng-if="command.platformHealthOnlyShowOverride">
+        <div class="col-sm-10 col-sm-offset-1">
+          <platform-health-override
+            command="command"
+            platform-health-type="'Oracle'"
+            show-help-details="true"
+            field-columns="12"
+          >
+          </platform-health-override>
+        </div>
+      </div>
+      <task-reason command="command"></task-reason>
+    </div>
+    <gce-footer
+      action="ctrl.rollback()"
+      cancel="ctrl.cancel()"
+      is-valid="ctrl.isValid()"
+      account="serverGroup.account"
+      verification="verification"
+    ></gce-footer>
+  </form>
+</div>

package/src/serverGroup/details/serverGroupDetails.controller.js

@@ -0,0 +1,230 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import { module } from 'angular';
+
+import {
+  ConfirmationModalService,
+  NetworkReader,
+  SERVER_GROUP_WRITER,
+  ServerGroupReader,
+  ServerGroupWarningMessageService,
+  SubnetReader,
+} from '@spinnaker/core';
+
+import { ORACLE_IMAGE_IMAGE_READER } from '../../image/image.reader';
+import { ORACLE_SERVERGROUP_DETAILS_RESIZE_RESIZESERVERGROUP_CONTROLLER } from './resize/resizeServerGroup.controller';
+import { ORACLE_SERVERGROUP_DETAILS_ROLLBACK_ROLLBACKSERVERGROUP_CONTROLLER } from './rollback/rollbackServerGroup.controller';
+
+export const ORACLE_SERVERGROUP_DETAILS_SERVERGROUPDETAILS_CONTROLLER =
+  'spinnaker.oracle.serverGroup.details.controller';
+export const name = ORACLE_SERVERGROUP_DETAILS_SERVERGROUPDETAILS_CONTROLLER; // for backwards compatibility
+module(ORACLE_SERVERGROUP_DETAILS_SERVERGROUPDETAILS_CONTROLLER, [
+  UIROUTER_ANGULARJS,
+  SERVER_GROUP_WRITER,
+  ORACLE_IMAGE_IMAGE_READER,
+  ORACLE_SERVERGROUP_DETAILS_RESIZE_RESIZESERVERGROUP_CONTROLLER,
+  ORACLE_SERVERGROUP_DETAILS_ROLLBACK_ROLLBACKSERVERGROUP_CONTROLLER,
+]).controller('oracleServerGroupDetailsCtrl', [
+  '$scope',
+  '$state',
+  '$uibModal',
+  'app',
+  'serverGroup',
+  'serverGroupWriter',
+  'oracleImageReader',
+  function ($scope, $state, $uibModal, app, serverGroup, serverGroupWriter, oracleImageReader) {
+    const provider = 'oracle';
+
+    this.application = app;
+    this.serverGroup = serverGroup;
+
+    this.state = {
+      loading: true,
+    };
+
+    /////////////////////////////////////////////////////////
+    // Fetch data
+    /////////////////////////////////////////////////////////
+
+    const retrieveServerGroup = () => {
+      return ServerGroupReader.getServerGroup(
+        app.name,
+        serverGroup.accountId,
+        serverGroup.region,
+        serverGroup.name,
+      ).then((details) => {
+        cancelLoader();
+        details.account = serverGroup.accountId;
+        this.serverGroup = details;
+        retrieveNetwork();
+        retrieveSubnet();
+        retrieveImage();
+      });
+    };
+
+    const retrieveNetwork = () => {
+      NetworkReader.listNetworksByProvider(provider).then((networks) => {
+        this.serverGroup.network = _.chain(networks)
+          .filter({ account: this.serverGroup.account, id: this.serverGroup.launchConfig.vpcId })
+          .head()
+          .value();
+      });
+    };
+
+    const retrieveSubnet = () => {
+      SubnetReader.getSubnetByIdAndProvider(this.serverGroup.launchConfig.subnetId, provider).then((subnet) => {
+        this.serverGroup.subnet = subnet;
+      });
+    };
+
+    const retrieveImage = () => {
+      oracleImageReader
+        .getImage(this.serverGroup.launchConfig.imageId, this.serverGroup.region, this.serverGroup.account)
+        .then((image) => {
+          if (!image) {
+            image = { id: this.serverGroup.launchConfig.imageId, name: this.serverGroup.launchConfig.imageId };
+          }
+          this.serverGroup.image = image;
+        });
+    };
+
+    ////////////////////////////////////////////////////////////
+    // Actions. Triggered by server group details dropdown menu
+    ////////////////////////////////////////////////////////////
+
+    this.destroyServerGroup = function destroyServerGroup() {
+      const serverGroup = this.serverGroup;
+      const taskMonitor = {
+        application: app,
+        title: 'Destroying ' + serverGroup.name,
+        onTaskComplete: function () {
+          if ($state.includes('**.serverGroup', stateParams)) {
+            $state.go('^');
+          }
+        },
+      };
+
+      const submitMethod = function () {
+        return serverGroupWriter.destroyServerGroup(serverGroup, app);
+      };
+
+      const stateParams = {
+        name: serverGroup.name,
+        account: serverGroup.account,
+        region: serverGroup.region,
+      };
+
+      ConfirmationModalService.confirm({
+        header: 'Really destroy ' + serverGroup.name + '?',
+        buttonText: 'Destroy ' + serverGroup.name,
+        account: serverGroup.account,
+        taskMonitorConfig: taskMonitor,
+        submitMethod: submitMethod,
+      });
+    };
+
+    this.resizeServerGroup = () => {
+      $uibModal.open({
+        templateUrl: require('./resize/resizeServerGroup.html'),
+        controller: 'oracleResizeServerGroupCtrl as ctrl',
+        resolve: {
+          serverGroup: () => {
+            return this.serverGroup;
+          },
+          application: () => {
+            return app;
+          },
+        },
+      });
+    };
+
+    this.rollbackServerGroup = () => {
+      $uibModal.open({
+        templateUrl: require('./rollback/rollbackServerGroup.html'),
+        controller: 'oracleRollbackServerGroupCtrl as ctrl',
+        resolve: {
+          serverGroup: () => this.serverGroup,
+          disabledServerGroups: () => {
+            const sgSummary = _.find(app.serverGroups.data, {
+              name: this.serverGroup.name,
+              account: this.serverGroup.account,
+              region: this.serverGroup.region,
+            });
+            const cluster = _.find(app.clusters, { name: sgSummary.cluster, account: this.serverGroup.account });
+            return _.filter(cluster.serverGroups, { isDisabled: true, region: this.serverGroup.region });
+          },
+          application: () => app,
+        },
+      });
+    };
+
+    this.disableServerGroup = () => {
+      const serverGroup = this.serverGroup;
+
+      const taskMonitor = {
+        application: app,
+        title: 'Disabling ' + serverGroup.name,
+      };
+
+      const submitMethod = (params) => serverGroupWriter.disableServerGroup(serverGroup, app, params);
+
+      const confirmationModalParams = {
+        header: 'Really disable ' + serverGroup.name + '?',
+        buttonText: 'Disable ' + serverGroup.name,
+        account: serverGroup.account,
+        taskMonitorConfig: taskMonitor,
+        platformHealthOnlyShowOverride: app.attributes.platformHealthOnlyShowOverride,
+        platformHealthType: 'Oracle',
+        submitMethod: submitMethod,
+        askForReason: true,
+      };
+
+      ServerGroupWarningMessageService.addDisableWarningMessage(app, serverGroup, confirmationModalParams);
+
+      if (app.attributes.platformHealthOnlyShowOverride && app.attributes.platformHealthOnly) {
+        confirmationModalParams.interestingHealthProviderNames = ['Oracle'];
+      }
+
+      ConfirmationModalService.confirm(confirmationModalParams);
+    };
+
+    this.enableServerGroup = () => {
+      const serverGroup = this.serverGroup;
+
+      const taskMonitor = {
+        application: app,
+        title: 'Enabling ' + serverGroup.name,
+      };
+
+      const submitMethod = (params) => serverGroupWriter.enableServerGroup(serverGroup, app, params);
+
+      const confirmationModalParams = {
+        header: 'Really enable ' + serverGroup.name + '?',
+        buttonText: 'Enable ' + serverGroup.name,
+        account: serverGroup.account,
+        taskMonitorConfig: taskMonitor,
+        platformHealthOnlyShowOverride: app.attributes.platformHealthOnlyShowOverride,
+        platformHealthType: 'Oracle',
+        submitMethod: submitMethod,
+        askForReason: true,
+      };
+
+      if (app.attributes.platformHealthOnlyShowOverride && app.attributes.platformHealthOnly) {
+        confirmationModalParams.interestingHealthProviderNames = ['Oracle'];
+      }
+
+      ConfirmationModalService.confirm(confirmationModalParams);
+    };
+
+    const cancelLoader = () => {
+      this.state.loading = false;
+    };
+
+    retrieveServerGroup().then(() => {
+      if (!$scope.$$destroyed) {
+        app.serverGroups.onRefresh($scope, retrieveServerGroup);
+      }
+    });
+  },
+]);

package/src/serverGroup/details/serverGroupDetails.html

@@ -0,0 +1,94 @@
+<div class="details-panel" ng-class="{ disabled: ctrl.serverGroup.isDisabled }">
+  <div class="header" ng-if="ctrl.state.loading">
+    <div class="close-button">
+      <a class="btn btn-link" ui-sref="^">
+        <span class="glyphicon glyphicon-remove"></span>
+      </a>
+    </div>
+    <div class="horizontal center spinner-container">
+      <loading-spinner size="'small'"></loading-spinner>
+    </div>
+  </div>
+  <div class="header" ng-if="!ctrl.state.loading">
+    <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">
+      <h3 class="horizontal middle space-between flex-1" select-on-dbl-click>{{ctrl.serverGroup.name}}</h3>
+    </div>
+    <div>
+      <div class="actions" ng-class="{ insights: ctrl.serverGroup.insightActions.length > 0 }">
+        <div class="dropdown" uib-dropdown dropdown-append-to-body>
+          <button type="button" class="btn btn-sm btn-primary dropdown-toggle" uib-dropdown-toggle>
+            Server Group Actions <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu" uib-dropdown-menu role="menu">
+            <li><a href ng-if="!ctrl.serverGroup.disabled" ng-click="ctrl.disableServerGroup()">Disable</a></li>
+            <li><a href ng-if="ctrl.serverGroup.disabled" ng-click="ctrl.enableServerGroup()">Enable</a></li>
+            <li><a href ng-click="ctrl.destroyServerGroup()">Destroy</a></li>
+            <li><a href ng-click="ctrl.resizeServerGroup()">Resize</a></li>
+            <li><a href ng-click="ctrl.rollbackServerGroup()">Rollback</a></li>
+          </ul>
+        </div>
+        <div class="dropdown" ng-if="ctrl.serverGroup.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 ctrl.serverGroup.insightActions">
+              <a target="_blank" href="{{action.url}}">{{action.label}}</a>
+            </li>
+          </ul>
+        </div>
+        <div class="clearfix"></div>
+      </div>
+    </div>
+  </div>
+  <div class="content" ng-if="!ctrl.state.loading">
+    <h4 class="text-center" ng-if="ctrl.serverGroup.isDisabled">[SERVER GROUP IS DISABLED]</h4>
+    <server-group-running-tasks-details server-group="ctrl.serverGroup"></server-group-running-tasks-details>
+    <collapsible-section heading="Server Group Information" expanded="true">
+      <dl class="dl-horizontal dl-narrow">
+        <dt>Created</dt>
+        <dd>{{ctrl.serverGroup.createdTime | timestamp}}</dd>
+        <dt>In</dt>
+        <dd>
+          <account-tag account="ctrl.serverGroup.account" pad="right"></account-tag>
+          {{ctrl.serverGroup.region}}
+        </dd>
+        <dt>VCN</dt>
+        <dd>{{ctrl.serverGroup.network.name}}</dd>
+        <dt>Subnet</dt>
+        <dd>{{ctrl.serverGroup.subnet.name}}</dd>
+        <dt>Avail Domain</dt>
+        <dd>{{ctrl.serverGroup.zone}}</dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Size" expanded="true">
+      <dl class="dl-horizontal dl-narrow">
+        <dt>Desired</dt>
+        <dd>{{ctrl.serverGroup.capacity.desired}}</dd>
+        <dt>Current</dt>
+        <dd>{{ctrl.serverGroup.instances.length}}</dd>
+      </dl>
+    </collapsible-section>
+    <collapsible-section heading="Launch Configuration">
+      <dl class="dl-horizontal dl-narrow">
+        <dt>Name</dt>
+        <dd>{{ctrl.serverGroup.name}}</dd>
+        <dt>Image</dt>
+        <dd>{{ctrl.serverGroup.image.name}}</dd>
+        <dt>Instance Type</dt>
+        <dd>{{ctrl.serverGroup.launchConfig.shape}}</dd>
+        <dt>VCN</dt>
+        <dd>{{ctrl.serverGroup.network.name}}</dd>
+        <dt>Subnet</dt>
+        <dd>{{ctrl.serverGroup.subnet.name}}</dd>
+        <dt>SSH Key</dt>
+        <dd>{{ctrl.serverGroup.launchConfig.sshAuthorizedKeys}}</dd>
+      </dl>
+    </collapsible-section>
+  </div>
+</div>