ManageIQ/manageiq-ui-classic

View on GitHub
app/views/ops/_settings_replication_tab.html.haml

Summary

Maintainability
Test Coverage
- if @sb[:active_tab] == "settings_replication"
  - @angular_form = true

  %form.form-horizontal#form_div{"name"          => "angularForm",
                                 "ng-controller" => "pglogicalReplicationFormController",
                                 "ng-show"       => "afterGet"}
    .form-group{"ng-class" => "{'has-error': angularForm.subscriptions.$invalid}"}
      %label.col-md-2.control-label
        = _('Type')
      .col-md-2
        = select_tag('replication_type',
                          options_for_select([["<#{_('None')}>", 'none'], ["Global", 'global'], ["Remote", 'remote']]),
                          "ng-model"                    => "pglogicalReplicationModel.replication_type",
                          "ng-change"                   => "replicationTypeChanged()",
                          "miqrequired"                 => "",
                          "checkchange"                 => "",
                          "selectpicker-for-select-tag" => "")

    .subscriptions_div{"ng-if" => "pglogicalReplicationModel.replication_type == 'global'"}
      %h3
        = _('Subscriptions')
      %br
        %span{"style"=>"color:red", "ng-show" => "subscriptionInValidMessage()"}
          = _("At least 1 subscription must be added to save server replication type")
      %table{:width => "100%", :align => "bottom"}
        %tr
          %td#buttons_on{:align => "right"}
            %button.btn.btn-primary{:type => "button", "ng-disabled" => "addInProgress()",  "ng-click" => "enableSubscriptionAdd()",  :align => "left"}= _('Add Subscription')
            %br
            %br
      %table.table.table-striped.table-hover.table-condensed.table-bordered
        %thead
          %th= _('Database')
          %th= _('Host')
          %th= _('Username')
          %th= _('Password')
          %th= _('Port')
          %th= _('Backlog')
          %th= _('Status')
          %th= _('Region')
          %th{:colspan => 2}=_('Actions')
        %tbody
          %tr{"ng-if" => "pglogicalReplicationModel.addEnabled"}
            %td
              %input.form-control{"type"        => "text",
                                  "id"          => "host",
                                  "name"        => "host",
                                  "ng-model"    => "pglogicalReplicationModel.dbname",
                                  "miqrequired" => "",
                                  "checkchange" => ""}
            %td
              %input.form-control{"type"        => "text",
                                  "id"          => "host",
                                  "name"        => "host",
                                  "ng-model"    => "pglogicalReplicationModel.host",
                                  "miqrequired" => "",
                                  "checkchange" => ""}
            %td
              %input.form-control{"type"        => "text",
                                  "id"          => "userid",
                                  "name"        => "userid",
                                  "ng-model"    => "pglogicalReplicationModel.user",
                                  "miqrequired" => "",
                                  "checkchange" => ""}
            %td
              %input.form-control{"type"        => "password",
                                  "id"          => "password",
                                  "name"        => "password",
                                  "ng-model"    => "pglogicalReplicationModel.password",
                                  :autocomplete => "off",
                                  "placeholder" => placeholder_if_present("pglogicalReplicationModel.password"),
                                  "miqrequired" => "",
                                  "checkchange" => ""}
            %td
              %input.form-control{"type"        => "text",
                                  "id"          => "port",
                                  "name"        => "port",
                                  "ng-model"    => "pglogicalReplicationModel.port"}
            %td
            %td
            %td
            %td{:class => "action-cell"}
              %button.btn.btn-default.btn-block.btn-sm{:type => "button", "ng-disabled" => "!subscriptionValid()",  "ng-click" => "addSubscription()"}= _('Accept')

            %td
              .dropdown.pull-right.dropdown-kebab-pf
                %button.btn.btn-link.dropdown-toggle{"data-toggle" => "dropdown", "aria-haspopup" => "true"}
                  %span.fa.fa-ellipsis-v
                %ul.dropdown-menu.dropdown-menu-right.3
                  %li
                    %a{:class => "disabled", "ng-show" => "!subscriptionValid()"}
                      = _('Validate')
                  %li
                    %a{"ng-show" => "subscriptionValid()", "ng-click" => "validateSubscription()"}
                      = _('Validate')
                  %li
                    %a{"ng-click" => "discardSubscription()"}
                      = _('Discard')

          %tr{"ng-repeat" => "subscription in pglogicalReplicationModel.subscriptions track by $index", "ng-form" => "rowForm", "ng-class" => "{'danger': showCancelDelete($index)}"}
            %td{"ng-if" => "!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index)",
                "ng-class"=>"{'active': showChanged($index, 'dbname')}"}
              {{subscription.dbname}}
            %td{"ng-if" => "pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index",
                "ng-class"=>"{'active': showChanged($index, 'dbname')}"}
              %input.form-control{"type"        => "text",
                                  "name"        => "dbname",
                                  "ng-model"    => "pglogicalReplicationModel.dbname",
                                  "ng-change"   => "showChanged($index, 'dbname')",
                                  "miqrequired" => ""}

            %td{"ng-if" => "!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index)",
                "ng-class"=>"{'active': showChanged($index, 'host')}"}
              {{subscription.host}}
            %td{"ng-if" => "pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index",
                "ng-class"=>"{'active': showChanged($index, 'host')}"}
              %input.form-control{"type"        => "text",
                                  "name"        => "host",
                                  "ng-model"    => "pglogicalReplicationModel.host",
                                  "miqrequired" => ""}
            %td{"ng-if" => "!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index)",
                "ng-class"=>"{'active': showChanged($index, 'user')}"}
              {{subscription.user}}
            %td{"ng-if" => "pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index",
                "ng-class"=>"{'active': showChanged($index, 'user')}"}
              %input.form-control{"type"        => "text",
                                  "name"        => "user",
                                  "ng-model"    => "pglogicalReplicationModel.user",
                                  "miqrequired" => ""}

            %td{"ng-if" => "!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index)",
                "ng-class"=>"{'active': showChanged($index, 'password')}"}
              ●●●●●●●●
            %td{"ng-if" => "pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index",
                "ng-class"=>"{'active': showChanged($index, 'password')}"}
              %input.form-control{"type"        => "password",
                                  :autocomplete => "off",
                                  "name"        => "password",
                                  "ng-model"    => "pglogicalReplicationModel.password",
                                  "ng-disabled" => "!subscription.newRecord"}

            %td{"ng-if" => "!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index)",
                "ng-class"=>"{'active': showChanged($index, 'port')}"}
              {{subscription.port}}
            %td{"ng-if" => "pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index",
                "ng-class"=>"{'active': showChanged($index, 'port')}"}
              %input.form-control{"type"        => "text",
                                  "name"        => "port",
                                  "ng-model"    => "pglogicalReplicationModel.port"}

            %td
              {{subscription.backlog}}
            %td
              {{subscription.status}}
            %td
              {{subscription.provider_region}}
            %td{:class => "action-cell", "ng-show" => "showCancelDelete($index)"}
              %button.btn.btn-default.btn-block.btn-sm{:type => "button", "ng-click" => "cancelDelete($index)"}
                = _('Cancel Delete')

            %td{:class => "action-cell","ng-show" => "!showCancelDelete($index) && (!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index))"}
              %button.btn.btn-default.btn-block.btn-sm{:type => "button", "ng-disabled" => "addInProgress()",  "ng-click" => "enableSubscriptionUpdate($index)"}
                = _('Update')
            %td{"ng-show" => "!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index)"}
              .dropdown.pull-right.dropdown-kebab-pf
                %button.btn.btn-link.dropdown-toggle{"data-toggle" => "dropdown", "aria-haspopup" => "true", "ng-disabled" => "showCancelDelete($index)"}
                  %span.fa.fa-ellipsis-v
                %ul.dropdown-menu.dropdown-menu-right.3
                  %li
                    %a{"ng-click" => "removeSubscription($index)"}
                      = _('Delete')
                  %li
                    %a{"ng-click" => "validateSubscription($index)"}
                      = _('Validate')

            %td{:class => "action-cell", "ng-show" => "!showCancelDelete($index) && pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index"}
              %button.btn.btn-default.btn-block.btn-sm{:type => "button", "ng-disabled" => "!subscriptionValid()", "ng-click" => "addSubscription($index)"}= _('Accept')

            %td{"ng-show" => "pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index"}
              .dropdown.pull-right.dropdown-kebab-pf
                %button.btn.btn-link.dropdown-toggle{"data-toggle" => "dropdown", "aria-haspopup" => "true", "ng-disabled" => "showCancelDelete($index)"}
                  %span.fa.fa-ellipsis-v
                %ul.dropdown-menu.dropdown-menu-right.3
                  %li
                    %a{:class => "disabled", "ng-show" => "!subscriptionValid()"}
                      = _('Validate')
                  %li
                    %a{"ng-show" => "subscriptionValid()", "ng-click" => "validateSubscription($index)"}
                      = _('Validate')
                  %li
                    %a{"ng-click" => "discardSubscription($index)"}
                      = _('Discard')

    .button-group{:align => "right"}
      %miq-button{:name      => t = _("Save"),
                  :title     => t,
                  :alt       => t,
                  :enabled   => "saveEnabled(angularForm)",
                  'on-click' => "saveClicked()"}
      %miq-button{:name      => t = _("Reset"),
                  :title     => t,
                  :alt       => t,
                  :enabled   => "saveEnabled(angularForm)",
                  'on-click' => "resetClicked()"}
  :javascript
    ManageIQ.angular.app.value('pglogicalReplicationFormId', 'new');
    miq_bootstrap('#form_div');