@spinnaker/amazon 0.0.0-2025.1-0

package/src/securityGroup/configure/configSecurityGroup.mixin.controller.js

@@ -0,0 +1,366 @@
+'use strict';
+
+import UIROUTER_ANGULARJS from '@uirouter/angularjs';
+import { module } from 'angular';
+import _ from 'lodash';
+import { Subject } from 'rxjs';
+
+import {
+  AccountService,
+  filterObjectValues,
+  FirewallLabels,
+  InfrastructureCaches,
+  ModalWizard,
+  NameUtils,
+  SECURITY_GROUP_READER,
+  SecurityGroupWriter,
+  TaskMonitor,
+} from '@spinnaker/core';
+import { AWSProviderSettings } from '../../aws.settings';
+import { VpcReader } from '../../vpc/VpcReader';
+
+export const AMAZON_SECURITYGROUP_CONFIGURE_CONFIGSECURITYGROUP_MIXIN_CONTROLLER =
+  'spinnaker.amazon.securityGroup.baseConfig.controller';
+export const name = AMAZON_SECURITYGROUP_CONFIGURE_CONFIGSECURITYGROUP_MIXIN_CONTROLLER; // for backwards compatibility
+module(AMAZON_SECURITYGROUP_CONFIGURE_CONFIGSECURITYGROUP_MIXIN_CONTROLLER, [
+  UIROUTER_ANGULARJS,
+  SECURITY_GROUP_READER,
+]).controller('awsConfigSecurityGroupMixin', [
+  '$scope',
+  '$state',
+  '$uibModalInstance',
+  'application',
+  'securityGroup',
+  'securityGroupReader',
+  'cacheInitializer',
+  function ($scope, $state, $uibModalInstance, application, securityGroup, securityGroupReader, cacheInitializer) {
+    let allSecurityGroups;
+    const ctrl = this;
+    $scope.self = $scope;
+    $scope.application = application;
+    $scope.customComponentIsvalid = true;
+
+    $scope.state = {
+      submitting: false,
+      regionError: undefined,
+      refreshingSecurityGroups: false,
+      removedRules: [],
+      infiniteScroll: {
+        numToAdd: 20,
+        currentItems: 20,
+      },
+    };
+
+    $scope.allVpcs = [];
+    $scope.wizard = ModalWizard;
+    $scope.hideClassic = false;
+
+    ctrl.addMoreItems = function () {
+      $scope.state.infiniteScroll.currentItems += $scope.state.infiniteScroll.numToAdd;
+    };
+
+    const getAccount = () => $scope.securityGroup.accountName || $scope.securityGroup.credentials;
+
+    function onApplicationRefresh() {
+      // If the user has already closed the modal, do not navigate to the new details view
+      if ($scope.$$destroyed) {
+        return;
+      }
+      $uibModalInstance.close();
+      const newStateParams = {
+        name: $scope.securityGroup.name,
+        accountId: getAccount(),
+        region: $scope.securityGroup.regions[0],
+        vpcId: $scope.securityGroup.vpcId,
+        provider: 'aws',
+      };
+      if (!$state.includes('**.firewallDetails')) {
+        $state.go('.firewallDetails', newStateParams);
+      } else {
+        $state.go('^.firewallDetails', newStateParams);
+      }
+    }
+
+    function onTaskComplete() {
+      application.securityGroups.refresh();
+      application.securityGroups.onNextRefresh($scope, onApplicationRefresh);
+    }
+
+    $scope.taskMonitor = new TaskMonitor({
+      application: application,
+      title: `Creating your ${FirewallLabels.get('firewall')}`,
+      modalInstance: $uibModalInstance,
+      onTaskComplete: onTaskComplete,
+    });
+
+    $scope.securityGroup = securityGroup;
+
+    ctrl.initializeAccounts = () => {
+      return AccountService.listAllAccounts('aws').then(function (accounts) {
+        $scope.accounts = accounts.filter((a) => a.authorized !== false);
+        $scope.allAccounts = accounts;
+        ctrl.accountUpdated();
+      });
+    };
+
+    ctrl.upsert = function () {
+      $scope.taskMonitor.submit(function () {
+        return SecurityGroupWriter.upsertSecurityGroup($scope.securityGroup, application, 'Create');
+      });
+    };
+
+    function clearSecurityGroups() {
+      $scope.availableSecurityGroups = [];
+      $scope.existingSecurityGroupNames = [];
+    }
+
+    ctrl.accountUpdated = function () {
+      const securityGroup = $scope.securityGroup;
+      // sigh.
+      securityGroup.account = securityGroup.accountId = securityGroup.accountName = securityGroup.credentials;
+      AccountService.getRegionsForAccount(getAccount()).then((regions) => {
+        $scope.regions = regions.map((region) => region.name);
+        clearSecurityGroups();
+        ctrl.regionUpdated();
+        if ($scope.state.isNew) {
+          ctrl.updateName();
+        }
+      });
+    };
+
+    ctrl.regionUpdated = function () {
+      const account = getAccount();
+      const regions = $scope.securityGroup.regions || [];
+      VpcReader.listVpcs().then(function (vpcs) {
+        const vpcsByName = _.groupBy(
+          vpcs.filter((vpc) => vpc.account === account),
+          'label',
+        );
+        $scope.allVpcs = vpcs;
+        const available = [];
+        _.forOwn(vpcsByName, function (vpcsToTest, label) {
+          const foundInAllRegions = regions.every((region) => {
+            return vpcsToTest.some((test) => test.region === region && test.account === account);
+          });
+          if (foundInAllRegions) {
+            available.push({
+              ids: vpcsToTest.filter((t) => regions.includes(t.region)).map((vpc) => vpc.id),
+              label: label,
+              deprecated: vpcsToTest[0].deprecated,
+            });
+          }
+        });
+
+        $scope.activeVpcs = available.filter(function (vpc) {
+          return !vpc.deprecated;
+        });
+        $scope.deprecatedVpcs = available.filter(function (vpc) {
+          return vpc.deprecated;
+        });
+        $scope.vpcs = available;
+        $scope.state.regionError =
+          $scope.state.isClone && ($scope.securityGroup.regions || []).includes($scope.state.originRegion);
+        ctrl.updateVpcId(available);
+      });
+    };
+
+    this.updateVpcId = (available) => {
+      const lockoutDate = AWSProviderSettings.classicLaunchLockout;
+      if (!securityGroup.id && lockoutDate) {
+        const createTs = Number(_.get(application, 'attributes.createTs', 0));
+        if (createTs >= lockoutDate) {
+          $scope.hideClassic = true;
+          if (!securityGroup.vpcId && available.length) {
+            let defaultMatch;
+            if (AWSProviderSettings.defaults.vpc) {
+              const match = available.find((vpc) => vpc.label === AWSProviderSettings.defaults.vpc);
+              if (match) {
+                defaultMatch = match.ids[0];
+              }
+            }
+            securityGroup.vpcId =
+              defaultMatch || ($scope.activeVpcs.length ? $scope.activeVpcs[0].ids[0] : available[0].ids[0]);
+          }
+        }
+      }
+
+      // When cloning a security group, if a user chooses a different account to clone to, but wants to retain the same VPC in this new account, it was not possible.
+      // We matched the vpc ids from one account to another but they are never the same. In order to ensure that users still retain their VPC choice, irrespective of the account, we switched to using vpc names instead of vpc ids
+      const selectedVpc = $scope.allVpcs.find((vpc) => vpc.id === $scope.securityGroup.vpcId);
+      const match = (available || []).find((vpc) => selectedVpc && selectedVpc.label === vpc.label);
+      const defaultVpc =
+        (available || []).find((vpc) => AWSProviderSettings.defaults.vpc === vpc.label) || ($scope.activeVpcs || [])[0];
+      $scope.securityGroup.vpcId = (match && match.ids[0]) || (defaultVpc && defaultVpc.ids[0]);
+      this.vpcUpdated();
+    };
+
+    this.vpcUpdated = function () {
+      const account = getAccount();
+      const regions = $scope.securityGroup.regions;
+      if (account && regions.length) {
+        configureFilteredSecurityGroups();
+      } else {
+        clearSecurityGroups();
+      }
+      $scope.coordinatesChanged.next();
+    };
+
+    function configureFilteredSecurityGroups() {
+      const vpcId = $scope.securityGroup.vpcId || null;
+      const account = getAccount();
+      const regions = $scope.securityGroup.regions || [];
+      let existingSecurityGroupNames = [];
+      let availableSecurityGroups = [];
+
+      regions.forEach(function (region) {
+        let regionalVpcId = null;
+        if (vpcId) {
+          const baseVpc = _.find($scope.allVpcs, { id: vpcId });
+          regionalVpcId = _.find($scope.allVpcs, { account: account, region: region, name: baseVpc.name }).id;
+        }
+
+        const regionalGroupNames = _.get(allSecurityGroups, [account, 'aws', region].join('.'), [])
+          .filter((sg) => sg.vpcId === regionalVpcId)
+          .map((sg) => sg.name);
+
+        existingSecurityGroupNames = _.uniq(existingSecurityGroupNames.concat(regionalGroupNames));
+
+        if (!availableSecurityGroups.length) {
+          availableSecurityGroups = existingSecurityGroupNames;
+        } else {
+          availableSecurityGroups = _.intersection(availableSecurityGroups, regionalGroupNames);
+        }
+      });
+
+      $scope.availableSecurityGroups = availableSecurityGroups;
+      $scope.existingSecurityGroupNames = existingSecurityGroupNames;
+      $scope.state.securityGroupsLoaded = true;
+      clearInvalidSecurityGroups();
+    }
+
+    ctrl.mixinUpsert = function (descriptor) {
+      $scope.taskMonitor.submit(function () {
+        return SecurityGroupWriter.upsertSecurityGroup($scope.securityGroup, application, descriptor);
+      });
+    };
+
+    function clearInvalidSecurityGroups() {
+      const removed = $scope.state.removedRules;
+      const securityGroup = $scope.securityGroup;
+      $scope.securityGroup.securityGroupIngress = (securityGroup.securityGroupIngress || []).filter((rule) => {
+        if (
+          rule.accountName &&
+          rule.vpcId &&
+          (rule.accountName !== securityGroup.accountName || rule.vpcId !== securityGroup.vpcId)
+        ) {
+          return true;
+        }
+        if (rule.name && !$scope.availableSecurityGroups.includes(rule.name) && !removed.includes(rule.name)) {
+          removed.push(rule.name);
+          return false;
+        }
+        return true;
+      });
+      if (removed.length) {
+        ModalWizard.markDirty('Ingress');
+      }
+    }
+
+    ctrl.refreshSecurityGroups = function () {
+      $scope.state.refreshingSecurityGroups = true;
+      return cacheInitializer.refreshCache('securityGroups').then(function () {
+        return ctrl.initializeSecurityGroups().then(function () {
+          ctrl.vpcUpdated();
+          $scope.state.refreshingSecurityGroups = false;
+          setSecurityGroupRefreshTime();
+        });
+      });
+    };
+
+    function setSecurityGroupRefreshTime() {
+      $scope.state.refreshTime = InfrastructureCaches.get('securityGroups').getStats().ageMax;
+    }
+
+    allSecurityGroups = {};
+
+    $scope.allSecurityGroupsUpdated = new Subject();
+    $scope.coordinatesChanged = new Subject();
+
+    ctrl.initializeSecurityGroups = function () {
+      return securityGroupReader.getAllSecurityGroups().then(function (securityGroups) {
+        setSecurityGroupRefreshTime();
+        allSecurityGroups = securityGroups;
+        const account = $scope.securityGroup.credentials || $scope.securityGroup.accountName;
+        const region = $scope.securityGroup.regions[0];
+        const vpcId = $scope.securityGroup.vpcId || null;
+
+        let availableGroups;
+        if (account && region) {
+          availableGroups = _.filter(securityGroups[account].aws[region], { vpcId: vpcId });
+        } else {
+          availableGroups = securityGroups;
+        }
+
+        $scope.availableSecurityGroups = _.map(availableGroups, 'name');
+        const securityGroupExclusions = AWSProviderSettings.securityGroupExclusions;
+        $scope.allSecurityGroups = securityGroupExclusions
+          ? filterObjectValues(securityGroups, (name) => !securityGroupExclusions.includes(name))
+          : securityGroups;
+        $scope.allSecurityGroupsUpdated.next();
+        $scope.state.regionError =
+          $scope.state.isClone && ($scope.securityGroup.regions || []).includes($scope.state.originRegion);
+      });
+    };
+
+    ctrl.cancel = function () {
+      $uibModalInstance.dismiss();
+    };
+
+    const classicPattern = /^[\x20-\x7F]+$/;
+    const vpcPattern = /^[a-zA-Z0-9\s._\-:/()#,@[\]+=&;{}!$*]+$/;
+
+    ctrl.getCurrentNamePattern = function () {
+      return $scope.securityGroup.vpcId ? vpcPattern : classicPattern;
+    };
+
+    ctrl.updateName = function () {
+      const { securityGroup } = $scope;
+      const appName = application.isStandalone ? application.name.split('-')[0] : application.name;
+      const name = NameUtils.getClusterName(appName, securityGroup.stack, securityGroup.detail);
+      securityGroup.name = name;
+      $scope.namePreview = name;
+    };
+
+    ctrl.namePattern = {
+      test: function (name) {
+        return ctrl.getCurrentNamePattern().test(name);
+      },
+    };
+
+    ctrl.addRule = function (ruleset) {
+      ruleset.push({
+        type: 'tcp',
+        startPort: 7001,
+        endPort: 7001,
+      });
+    };
+
+    ctrl.removeRule = function (ruleset, index) {
+      ruleset.splice(index, 1);
+    };
+
+    ctrl.updateRuleType = function (type, ruleset, index) {
+      const rule = ruleset[index];
+      if (type === 'icmp' || type === 'icmpv6') {
+        rule.startPort = 0;
+        rule.endPort = 0;
+      }
+    };
+
+    ctrl.dismissRemovedRules = function () {
+      $scope.state.removedRules = [];
+      ModalWizard.markClean('Ingress');
+      ModalWizard.markComplete('Ingress');
+    };
+  },
+]);

package/src/securityGroup/configure/createSecurityGroup.html

@@ -0,0 +1,19 @@
+<ng-form role="form" name="form" novalidate>
+  <v2-modal-wizard heading="Create New {{ctrl.translate('Firewall')}}" task-monitor="taskMonitor" dismiss="$dismiss()">
+    <v2-wizard-page key="Location" label="Location">
+      <ng-include src="pages.location"></ng-include>
+    </v2-wizard-page>
+    <v2-wizard-page key="Ingress" label="Ingress" done="true">
+      <ng-include src="pages.ingress"></ng-include>
+    </v2-wizard-page>
+  </v2-modal-wizard>
+  <div class="modal-footer">
+    <button class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+    <submit-button
+      is-disabled="form.$invalid || !wizard.isComplete() || state.submitting || !customComponentIsvalid"
+      submitting="state.submitting"
+      on-click="ctrl.upsert()"
+      is-new="state.isNew"
+    ></submit-button>
+  </div>
+</ng-form>

package/src/securityGroup/configure/createSecurityGroupIngress.html

@@ -0,0 +1,100 @@
+<div class="container-fluid form-horizontal">
+  <div class="modal-body">
+    <div class="row">
+      <div class="col-md-12" ng-if="state.removedRules.length">
+        <div class="alert alert-danger">
+          <p>
+            <i class="fa fa-exclamation-triangle"></i> The following
+            <firewall-label label="firewalls"></firewall-label> could not be found in the selected account/region/VPC
+            and were removed:
+          </p>
+          <ul>
+            <li ng-repeat="securityGroup in state.removedRules">{{securityGroup}}</li>
+          </ul>
+          <p class="text-right">
+            <a class="btn btn-sm btn-primary dirty-flag-dismiss" href ng-click="ctrl.dismissRemovedRules()">Okay</a>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-12">
+        <p class="info">
+          <span class="glyphicon glyphicon-info-sign"></span> IP range rules can only be edited through the AWS Console.
+        </p>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-12">
+        <table class="table table-condensed packed">
+          <thead>
+            <tr>
+              <th style="width: 50%"><firewall-label label="Firewall"></firewall-label></th>
+              <th style="width: 15%">Protocol</th>
+              <th style="width: 15%">Start Port</th>
+              <th style="width: 15%">End Port</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="rule in securityGroup.securityGroupIngress">
+              <td>
+                <ingress-rule-group-selector
+                  rule="rule"
+                  ng-if="state.securityGroupsLoaded"
+                  security-group="securityGroup"
+                  vpcs="allVpcs"
+                  accounts="allAccounts"
+                  all-security-groups="allSecurityGroups"
+                  coordinates-changed="coordinatesChanged"
+                  all-security-groups-updated="allSecurityGroupsUpdated"
+                ></ingress-rule-group-selector>
+              </td>
+              <td>
+                <select
+                  class="form-control input-sm"
+                  ng-model="rule.type"
+                  ng-options="protocol as protocol.toUpperCase() for protocol in ['tcp', 'udp', 'icmp', 'icmpv6']"
+                  ng-change="ctrl.updateRuleType(rule.type, securityGroup.securityGroupIngress, $index)"
+                  required
+                ></select>
+              </td>
+              <td><input class="form-control input-sm" type="number" min="0" ng-model="rule.startPort" required /></td>
+              <td><input class="form-control input-sm" type="number" min="0" ng-model="rule.endPort" required /></td>
+              <td>
+                <a class="sm-label" ng-click="ctrl.removeRule(securityGroup.securityGroupIngress, $index)">
+                  <span class="glyphicon glyphicon-trash"></span
+                ></a>
+              </td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr>
+              <td colspan="5">
+                <button class="add-new col-md-12" ng-click="ctrl.addRule(securityGroup.securityGroupIngress)">
+                  <span class="glyphicon glyphicon-plus-sign"></span> Add new
+                  <firewall-label label="Firewall"></firewall-label> Rule
+                </button>
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+    <div class="form-group small" style="margin-top: 20px">
+      <div class="col-md-12">
+        <p>
+          <span ng-if="state.refreshingSecurityGroups"><span class="fa fa-sync-alt fa-spin"></span></span>
+          <firewall-label label="Firewalls"></firewall-label>
+          <span ng-if="!state.refreshingSecurityGroups">last refreshed {{ state.refreshTime | timestamp }}</span>
+          <span ng-if="state.refreshingSecurityGroups"> refreshing...</span>
+        </p>
+        <p>
+          If you're not finding a <firewall-label label="firewall"></firewall-label> that was recently added,
+          <a href ng-click="ctrl.refreshSecurityGroups()">click here</a> to refresh the list.
+        </p>
+      </div>
+    </div>
+    <security-group-details-custom security-group-details="securityGroup" ctrl="ctrl" scope="self" />
+  </div>
+</div>

package/src/securityGroup/configure/createSecurityGroupProperties.html

@@ -0,0 +1,123 @@
+<div class="container-fluid form-horizontal">
+  <div class="modal-body">
+    <div class="form-group">
+      <div
+        class="col-md-12 well"
+        ng-class="{'alert-danger': form.securityGroupName.$error.validateUnique, 'alert-info': !form.securityGroupName.$error.validateUnique}"
+      >
+        <strong>Your <firewall-label label="firewall"></firewall-label> will be named:</strong>
+        <span ng-bind="namePreview"></span>
+        <help-field key="aws.securityGroup.name"></help-field>
+        <input
+          type="hidden"
+          class="form-control input-sm"
+          ng-model="securityGroup.name"
+          ng-model-options="{allowInvalid: true}"
+          validate-unique="{{allowDuplicateNames ? '' : 'existingSecurityGroupNames'}}"
+          validate-ignore-case="true"
+          name="securityGroupName"
+          ng-pattern="ctrl.namePattern"
+          trigger-validation="securityGroup.subnet"
+          required
+        />
+        <validation-error
+          ng-if="form.securityGroupName.$error.validateUnique && securityGroup.credentials"
+          message="A {{ctrl.translate('firewall')}} named '{{namePreview}}' already exists in one or more of the selected regions. Use a unique stack and detail to create a new {{ctrl.translate('firewall')}}."
+        ></validation-error>
+        <validation-error
+          ng-if="form.securityGroupName.$error.pattern"
+          message="Name must match {{ctrl.getCurrentNamePattern().toString()}}"
+        ></validation-error>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Account</div>
+      <div class="col-md-8">
+        <account-select-field
+          component="securityGroup"
+          field="credentials"
+          accounts="accounts"
+          provider="'aws'"
+          on-change="ctrl.accountUpdated()"
+        ></account-select-field>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Regions</div>
+      <div class="col-md-8">
+        <input type="hidden" ng-model="securityGroup.regions[0]" required />
+        <checklist
+          ng-if="securityGroup.credentials"
+          items="regions"
+          model="securityGroup.regions"
+          inline="true"
+          on-change="ctrl.regionUpdated()"
+        ></checklist>
+        <p class="form-control-static" ng-if="!securityGroup.credentials">(Select an account)</p>
+        <validation-error
+          ng-if="state.regionError"
+          message="A security group cannot be cloned into a region it already exists in. Please deselect '{{state.originRegion}}' to clear this error."
+        ></validation-error>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Stack</div>
+      <div class="col-md-3">
+        <input
+          type="text"
+          class="form-control input-sm no-spel"
+          ng-model="securityGroup.stack"
+          ng-change="ctrl.updateName()"
+        />
+      </div>
+      <div class="col-md-2 sm-label-right">Detail</div>
+      <div class="col-md-3">
+        <input
+          type="text"
+          class="form-control input-sm no-spel"
+          ng-model="securityGroup.detail"
+          ng-change="ctrl.updateName()"
+        />
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">Description (required)</div>
+      <div class="col-md-8">
+        <textarea required cols="2" class="form-control input-sm no-spel" ng-model="securityGroup.description">
+        </textarea>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="col-md-3 sm-label-right">VPC <help-field key="aws.securityGroup.vpc"></help-field></div>
+      <div class="col-md-8">
+        <select
+          class="form-control input-sm"
+          ng-model="securityGroup.vpcId"
+          ng-change="ctrl.vpcUpdated()"
+          ng-if="securityGroup.regions.length"
+        >
+          <option value="" ng-if="!hideClassic">None (EC2 Classic)</option>
+          <option
+            ng-repeat="vpc in activeVpcs | orderBy: 'label'"
+            value="{{vpc.ids[0]}}"
+            ng-selected="securityGroup.vpcId === vpc.ids[0]"
+          >
+            {{vpc.label}}
+          </option>
+          <option ng-if="activeVpcs.length && deprecatedVpcs.length" disabled>---------------</option>
+          <option
+            ng-repeat="vpc in deprecatedVpcs | orderBy: 'label'"
+            value="{{vpc.ids[0]}}"
+            ng-selected="securityGroup.vpcId === vpc.ids[0]"
+          >
+            {{vpc.label}}
+          </option>
+        </select>
+        <p class="form-control-static" ng-if="!securityGroup.credentials">(Select an account)</p>
+        <p class="form-control-static" ng-if="securityGroup.credentials && !securityGroup.regions.length">
+          (Select at least one region)
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/securityGroup/configure/editSecurityGroup.html

@@ -0,0 +1,20 @@
+<ng-form role="form" name="form" novalidate>
+  <v2-modal-wizard
+    heading="Edit {{securityGroup.name}}: {{securityGroup.region}}: {{securityGroup.accountName}}"
+    task-monitor="taskMonitor"
+    dismiss="$dismiss()"
+  >
+    <v2-wizard-page key="Ingress" label="Ingress" done="true">
+      <ng-include src="pages.ingress"></ng-include>
+    </v2-wizard-page>
+  </v2-modal-wizard>
+  <div class="modal-footer">
+    <button class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+    <submit-button
+      is-disabled="form.$invalid || !wizard.isComplete() || state.submitting || !customComponentIsvalid"
+      submitting="state.submitting"
+      on-click="ctrl.upsert()"
+      is-new="state.isNew"
+    ></submit-button>
+  </div>
+</ng-form>