<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<div class="container" style="padding-top: 20px">
  <div class="row">
    <div class="col-sm-4  col-sm-offset-8 text-right">
      <i class="fa fa-plus" style="cursor: pointer;" ng-click="createReplicaSet()"></i>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2" ng-repeat="(rs_ind, replicaSetState) in replicaSetStates">
      <div class="box box-solid box-success">
        <div class="box-header with-border" style="padding:5px">
          <h3 class="box-title" ng-bind="replicaSetState.rs_id" tooltip-html-unsafe="{{replicaSetState.assignmentStr}}"></h3>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" style="padding: 3px 5px;" ng-click="editReplicaSet(replicaSetState)">
              <i class="fa fa-pencil-square-o"></i>
            </button>
            <button type="button" class="btn btn-box-tool" style="padding: 3px 5px;" ng-click="removeReplicaSet(replicaSetState)">
              <i class="fa fa-trash"></i>
            </button>
          </div>
        </div>
        <div class="box-body">
          <div class="row">
            <div ng-if="replicaSetState.receiver_states.length < 3" class="col-md-6" ng-repeat="(re_ind, receiverState) in replicaSetState.receiver_states">
              <svg id="rs-{{replicaSetState.rs_id}}-re-{{receiverState.receiver.host | formatId}}_{{receiverState.receiver.port}}" width="100%" height="60"></svg>
              <div class="text-center" style="font-size: 9px; cursor: pointer;" tooltip="{{receiverState.info}}">
                <a href="/kylin/streaming/receiver/{{receiverState.receiver.host}}_{{receiverState.receiver.port}}" target="_blank">
                  <span class="label" ng-class="{'label-success': 'HEALTHY' == receiverState.state, 'label-warning': 'WARN' == receiverState.state, 'label-default': 'UNREACHABLE' == receiverState.state, 'label-danger': 'DOWN' == receiverState.state}" tooltip="{{receiverState.receiver.host}}">
                    <i ng-if="(replicaSetState.lead.host == receiverState.receiver.host) && (replicaSetState.lead.port == receiverState.receiver.port)" class="fa fa-star"></i> {{receiverState.receiver.host | limitTo: 15}}{{receiverState.receiver.host.length > 15 ? '...' : ''}}
                  </span>
                </a>
              </div>
            </div>
            <div ng-if="replicaSetState.receiver_states.length > 2" class="col-md-4" style="padding: 0 7px;" ng-repeat="(re_ind, receiverState) in replicaSetState.receiver_states">
              <svg id="rs-{{replicaSetState.rs_id}}-re-{{receiverState.receiver.host | formatId}}_{{receiverState.receiver.port}}" width="105%" height="60"></svg>
              <div class="text-center" style="font-size: 7px; margin: -5px 0 7px 0; cursor: pointer;" tooltip="{{receiverState.info}}">
                <a href="/kylin/streaming/receiver/{{receiverState.receiver.host}}_{{receiverState.receiver.port}}" target="_blank">
                  <span class="label" ng-class="{'label-success': 'HEALTHY' == receiverState.state, 'label-warning': 'WARN' == receiverState.state, 'label-default': 'UNREACHABLE' == receiverState.state, 'label-danger': 'DOWN' == receiverState.state}" tooltip="{{receiverState.receiver.host}}">
                    <i class="fa fa-star" ng-if="(replicaSetState.lead.host == receiverState.receiver.host) && (replicaSetState.lead.port == receiverState.receiver.port)"></i> {{receiverState.receiver.host | limitTo: 15}}{{receiverState.receiver.host.length > 15 ? '...' : ''}}
                  </span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="box box-solid box-primary">
        <div class="box-header with-border" style="padding:5px">
          <h3 class="box-title">Available Receiver</h3>
        </div>
        <div class="box-body">
          <div class="row">
            <div ng-if="!!availableReceiver.length" class="col-md-1" ng-repeat="(re_ind, receiverState) in availableReceiver">
              <svg id="re-{{receiverState.receiver.host | formatId}}_{{receiverState.receiver.port}}" width="100%" height="60"></svg>
              <div class="text-center" style="font-size: 9px;">
                <span class="label" ng-class="{'label-primary': 'HEALTHY' == receiverState.state, 'label-warning': 'WARN' == receiverState.state, 'label-default': 'UNREACHABLE' == receiverState.state, 'label-danger': 'DOWN' == receiverState.state}" tooltip="{{receiverState.receiver.host}}">{{receiverState.receiver.host | limitTo: 15}}{{receiverState.receiver.host.length > 15 ? '...' : ''}}</span>
              </div>
            </div>
            <div ng-if="!availableReceiver.length" class="col-md-12 text-center">
              <h4 class="text-gray">There are no available receivers.<h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-8">
      Receiver State Info:
      <span class="label label-success">HEALTHY</span>
      <span class="label label-warning">WARN</span>
      <span class="label label-danger">DOWN</span>
      <span class="label label-default">UNREACHABLE</span>
      <span class="label label-primary">AVAILABLE</span>
    </div>
  </div>
</div>

<script type="text/ng-template" id="editReplicaSet.html">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" ng-click="cancel()">
      <i class="fa fa-close"></i>
    </button>
    <h4>Edit Replica Set [{{replicaSet.rs_id}}]</h4>
  </div>
  <div class="modal-body">
    <div class="row" ng-repeat="receiver in replicaSet.receiver_states">
      <div class="col-sm-9 col-sm-offset-1 text-center">{{receiver.receiver.host}}:{{receiver.receiver.port}}</div>
      <div class="col-sm-2">
        <i class="fa fa-minus" style="color: #d2d6de; cursor: pointer;" ng-click="removeReceiver(receiver)"></i>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-9 col-sm-offset-1 text-center">
        <select class="form-control" ng-model="node.selected">
          <option value="">Please select Receiver</option>
          <option value="{{node.receiver.host}}_{{node.receiver.port}}" ng-repeat="node in availableNodes">{{node.receiver.host}}:{{node.receiver.port}}</option>
        </select>
      </div>
      <div class="col-sm-2">
        <i class="fa fa-plus" style="color: #d2d6de; cursor: pointer;" ng-click="addNodeToReplicaSet()"></i>
      </div>
    </div>
  </div>
</script>

<script type="text/ng-template" id="createReplicaSet.html">
  <div class="modal-header">
    Create Replica Set
  </div>
  <div class="modal-body">
    <div class="form-group">
      <label>Nodes:</label>
      <ui-select multiple ng-model="node.selected" theme="bootstrap" sortable="true" close-on-select="false" class="form-control">
        <ui-select-match placeholder="Select Node...">{{$item.host}}:{{$item.port}}</ui-select-match>
        <ui-select-choices repeat="node as node in availableNodes | filter:$select.search">
          {{node.host}}:{{node.port}}
        </ui-select-choices>
      </ui-select>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" ng-click="saveReplicaSet()">Save</button>
    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
  </div>
</script>