<link href="css/clustermanagement.css?v=2.7.0-TR3" rel="stylesheet"/>
<link href="css/rdf-details-side-panel.css?v=2.7.0-TR3" rel="stylesheet"/>
<link href="js/lib/d3-tip/d3-tip.css?v=2.7.0-TR3" rel="stylesheet"/>

<title>{{'view.clusterManagement.title' | translate}}</title>

<h1>
    {{title}}
    <span class="btn btn-link"
          ng-class="{ 'help-button': showExternalElements, 'help-button-disabled': !showExternalElements }"
          uib-popover-template="'js/angular/templates/titlePopoverTemplate.html'"
          popover-trigger="mouseenter"
          popover-placement="bottom"
          popover-append-to-body="true"><span class="icon-info text-tertiary"></span></span>
</h1>

<div onto-loader-new
     ng-show="loader"
     class="cluster-loader"
     message="getLoaderMessage"
     size="75">
</div>

<div class="clearfix mb-2 d-flex" ng-if="!loader && clusterConfiguration">
    <div class="action-buttons">
        <div ng-if="isAdmin()" class="buttons-wrapper">
            <button type="button" class="btn btn-secondary delete-cluster-btn mr-2"
                    ng-click="showDeleteDialog()"
                    gdb-tooltip="{{'cluster_management.buttons.delete_cluster_tooltip' | translate}}"
                    tooltip-placement="bottom">
                <span class="icon-trash"></span> {{'cluster_management.buttons.delete_cluster' | translate}}
            </button>
            <button type="button" class="btn btn-secondary remove-node-btn" ng-if="currentLeader"
                    ng-click="showRemoveNodesFromClusterDialog()"
                    gdb-tooltip="{{'cluster_management.buttons.remove_nodes_btn_tooltip' | translate}}" tooltip-placement="bottom">
                <span class="icon-minus"></span> {{'cluster_management.buttons.remove_nodes_btn' | translate}}
            </button>
            <button type="button" class="btn btn-primary add-node-btn" ng-if="currentLeader"
                    ng-click="showAddNodeToClusterDialog()"
                    gdb-tooltip="{{'cluster_management.buttons.add_nodes_btn_tooltip' | translate}}" tooltip-placement="bottom">
                <span class="icon-plus"></span> {{'cluster_management.buttons.add_nodes_btn' | translate}}
            </button>
            <button type="button" class="btn btn-primary replace-nodes-btn mr-2" ng-if="currentLeader"
                    ng-click="showReplaceNodesDialog()"
                    gdb-tooltip="{{'cluster_management.buttons.replace_nodes_btn_tooltip' | translate}}" tooltip-placement="bottom">
                <span class="icon-exchange"></span> {{'cluster_management.buttons.replace_nodes_btn' | translate}}
            </button>
        </div>
    </div>
    <button class="btn btn-link preview-cluster-config-btn"
            ng-click="toggleSidePanel()"
            gdb-tooltip="{{'cluster_management.buttons.show_cluster_settings_tooltip' | translate}}"
            tooltip-placement="left"><span class="icon-settings settings-icon small"></span></button>
</div>

<div id="nodeTooltip" class="nodetooltip" ng-hide="selectedNode == null">
    <a href="{{selectedNode.endpoint}}" class="break-word"><strong>{{selectedNode.endpoint}}</strong></a>
    <hr style="margin-top: 10px; margin-bottom: 10px"/>
    <div class="row">
        <div class="col-sm-6">{{'cluster_management.cluster_status.node.rpc_address' | translate}}</div>
        <div class="col-sm-6 break-word">{{selectedNode.address}}</div>
    </div>
    <div class="row">
        <div class="col-sm-6">{{'cluster_management.cluster_status.node.state' | translate}}</div>
        <div class="col-sm-6">{{selectedNode.nodeState}}</div>
    </div>
    <div class="row">
        <div class="col-sm-6">{{'cluster_management.cluster_status.node.term' | translate}}</div>
        <div class="col-sm-6">{{selectedNode.term}}</div>
    </div>
    <div class="row">
        <div class="col-sm-6">{{'cluster_management.cluster_status.node.last_log_term' | translate}}</div>
        <div class="col-sm-6">{{selectedNode.lastLogTerm}}</div>
    </div>
    <div class="row">
        <div class="col-sm-6">{{'cluster_management.cluster_status.node.last_log_index' | translate}}</div>
        <div class="col-sm-6">{{selectedNode.lastLogIndex}}</div>
    </div>
</div>

<div ng-if="!loader" class="cluster-view">
    <div cluster-graphical-view></div>
    <div id="toggle-legend-button" class="toggle-legend-btn">
        <button class="btn btn-link"
                ng-click="toggleLegend()"
                gdb-tooltip="{{'cluster_management.cluster_page.toggle_legend_btn' | translate}}"
                tooltip-placement="right">
            <span class="icon-help toggle-legend-icon"></span>
        </button>
    </div>
</div>

<pageslide ng-show="clusterConfiguration"
           ps-class="rdf-info-side-panel"
           ps-open="shouldShowClusterSettingsPanel"
           onopen="onopen"
           onclose="onclose"
           ps-side="right"
           ps-custom-height="calc(100vh - 55px)"
           ps-size="25vw">
    <div class="rdf-side-panel-content break-word-alt p-1 pt-2">
        <button class="close mb-1 ml-1" ng-click="toggleSidePanel()"></button>
        <h3 class="hovered-parent">
            {{'cluster_management.cluster_configuration.label' | translate}}
        </h3>
        <div class="mb-2" ng-if="isAdmin()">
            <button type="button" class="btn btn-primary edit-cluster-configuration"
                    ng-if="currentNode.nodeState === NodeState.LEADER"
                    ng-click="showEditConfigurationDialog()"
                    gdb-tooltip="{{'cluster_management.buttons.edit_cluster_tooltip' | translate}}"
                    tooltip-placement="bottom">
                <span class="icon-edit mr-1"></span>{{'cluster_management.buttons.edit_cluster' | translate}}
            </button>
        </div>
        <div class="datasource mb-1">
            <div class="item clearfix break-word-alt small">
                {{'cluster_management.cluster_configuration_properties.election_min_timeout' | translate}}
                <em class="icon-info text-primary"
                    gdb-tooltip="{{'cluster_management.cluster_configuration_properties.election_min_timeout_tooltip' | translate}}"></em>
            </div>
            <div class="data-value">
                <span>{{clusterConfiguration.electionMinTimeout | number}}</span>
            </div>
        </div>
        <div class="datasource mb-1">
            <div class="item clearfix break-word-alt small">
                {{'cluster_management.cluster_configuration_properties.election_range_timeout' | translate}}
                <em class="icon-info text-primary"
                    gdb-tooltip="{{'cluster_management.cluster_configuration_properties.election_range_timeout_tooltip' | translate}}"></em>
            </div>
            <div class="data-value">
                <span>{{clusterConfiguration.electionRangeTimeout | number}}</span>
            </div>
        </div>
        <div class="datasource mb-1">
            <div class="item clearfix break-word-alt small">
                {{'cluster_management.cluster_configuration_properties.heartbeat_interval' | translate}}
                <em class="icon-info text-primary"
                    gdb-tooltip="{{'cluster_management.cluster_configuration_properties.heartbeat_interval_tooltip' | translate}}"></em>
            </div>
            <div class="data-value">
                <span>{{clusterConfiguration.heartbeatInterval | number}}</span>
            </div>
        </div>
        <div class="datasource mb-1">
            <div class="item clearfix break-word-alt small">
                {{'cluster_management.cluster_configuration_properties.message_size_kb' | translate}}
                <em class="icon-info text-primary"
                    gdb-tooltip="{{'cluster_management.cluster_configuration_properties.message_size_kb_tooltip' | translate}}"></em>
            </div>
            <div class="data-value">
                <span>{{clusterConfiguration.messageSizeKB | number}}</span>
            </div>
        </div>
        <div class="datasource mb-1">
            <div class="item clearfix break-word-alt small">
                {{'cluster_management.cluster_configuration_properties.verification_timeout' | translate}}
                <em class="icon-info text-primary"
                    gdb-tooltip="{{'cluster_management.cluster_configuration_properties.verification_timeout_tooltip' | translate}}"></em>
            </div>
            <div class="data-value">
                <span>{{clusterConfiguration.verificationTimeout | number}}</span>
            </div>
        </div>
        <div class="datasource mb-1">
            <div class="item clearfix break-word-alt small">
                {{'cluster_management.cluster_configuration_properties.transaction_log_maximum_size_gb' | translate}}
                <em class="icon-info text-primary"
                    gdb-tooltip="{{'cluster_management.cluster_configuration_properties.transaction_log_maximum_size_gb_tooltip' | translate}}"></em>
            </div>
            <div class="data-value">
                <span>{{clusterConfiguration.transactionLogMaximumSizeGB | number}}</span>
            </div>
        </div>
        <h4>{{'cluster_management.cluster_configuration.nodes_list_label' | translate}}</h4>
        <ul>
            <li ng-repeat="node in clusterModel.nodes">
                <a class="data-value" href="{{node.endpoint}}" target="_blank">{{node.endpoint}}</a>
                <div class="small">{{ 'cluster_management.cluster_status.node.rpc_address' | translate }}: <span class="data-value">{{node.address}}</span>
                </div>
                <div class="small">{{ 'cluster_management.cluster_status.node.state' | translate }}: <span class="data-value">{{node.nodeState}}</span></div>
            </li>
        </ul>
    </div>
</pageslide>
