<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="base/resource"/>
    <title>YARN应用 - Big Whale</title>
    <link href="../libs/bootstrap-select/bootstrap-select.min.css" rel="stylesheet"/>
    <link href="../css/common.css" rel="stylesheet"/>
</head>
<body ng-app="content-app" ng-controller="content-controller">
<div class="container-fluid animated fadeInDown">
    <div class="bw-nav">
        <div class="row">
            <ol class="breadcrumb">
                <li class="active">Yarn应用</li>
            </ol>
            <a class="bw-refresh" onclick="location.reload()" title="刷新">
                <i class="fa fa-refresh" style="font-size: 18px"></i>
            </a>
        </div>
    </div>
    <div class="bw-body">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-12 search-form">
                    <form class="form-inline" ng-submit="options.mypage.toFirst()">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="名称包含" ng-model="options.query.name">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="app id" ng-model="options.query.appId">
                        </div>
                        <div class="form-group" th:if="${session.user.root}">
                            <label for="query_select_uid">用户</label>
                            <select id="query_select_uid" class="selectpicker show-tick" data-live-search="true"
                                    ng-model="options.query.uid" ng-options="item.id as item.username for item in userList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="query_select_clusterId">集群</label>
                            <select id="query_select_clusterId" class="selectpicker show-tick"
                                    ng-model="options.query.clusterId" ng-options="item.id as item.name for item in clusterList">
                                <option value="">不限</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success">搜索</button>
                        </div>
                    </form>
                </div>
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>
                                        操作
                                    </th>
                                    <th th:if="${session.user.root}">
                                        用户
                                    </th>
                                    <th class="order" ng-click="sort('name', asc)">
                                        <div>名称</div>
                                        <div>
                                            <i class="glyphicon glyphicon-triangle-top" ng-class="(title === 'name' && asc === true) ? 'active' : ''"></i>
                                            <i class="glyphicon glyphicon-triangle-bottom" ng-class="(title === 'name' && asc === false) ? 'active' : ''"></i>
                                        </div>
                                    </th>
                                    <th class="order" ng-click="sort('applicationType', asc)">
                                        <div>类型</div>
                                        <div>
                                            <i class="glyphicon glyphicon-triangle-top" ng-class="(title === 'applicationType' && asc === true) ? 'active' : ''"></i>
                                            <i class="glyphicon glyphicon-triangle-bottom" ng-class="(title === 'applicationType' && asc === false) ? 'active' : ''"></i>
                                        </div>
                                    </th>
                                    <th>
                                        集群
                                    </th>
                                    <th>
                                        脚本
                                    </th>
                                    <th>
                                        URL
                                    </th>
                                    <th>
                                        状态
                                    </th>
                                    <th class="order" ng-click="sort('startedTime', asc)">
                                        <div>开始时间</div>
                                        <div>
                                            <i class="glyphicon glyphicon-triangle-top" ng-class="(title === 'startedTime' && asc === true) ? 'active' : ''"></i>
                                            <i class="glyphicon glyphicon-triangle-bottom" ng-class="(title === 'startedTime' && asc === false) ? 'active' : ''"></i>
                                        </div>
                                    </th>
                                    <th class="order" ng-click="sort('updateTime', asc)">
                                        <div>更新时间</div>
                                        <div>
                                            <i class="glyphicon glyphicon-triangle-top" ng-class="(title === 'updateTime' && asc === true) ? 'active' : ''"></i>
                                            <i class="glyphicon glyphicon-triangle-bottom" ng-class="(title === 'updateTime' && asc === false) ? 'active' : ''"></i>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in options.items | orderBy : title : !asc">
                                    <td>
                                        <p class="operate">
                                            <span ng-click="onKillItem(item)">
                                                <i class="glyphicon glyphicon-stop" aria-hidden="true" title="停止"></i>
                                            </span>
                                        </p>
                                    </td>
                                    <td th:if="${session.user.root}">
                                        {{userMap[item.uid].username}}
                                    </td>
                                    <td>
                                        <span class="script-name">{{item.name}}</span>
                                    </td>
                                    <td>
                                        {{item.applicationType}}
                                    </td>
                                    <td>
                                        {{clusterMap[item.clusterId].name}}
                                    </td>
                                    <td>
                                        <span class="script-name">{{scriptMap[item.scriptId].name}}</span>
                                    </td>
                                    <td>
                                        <a href="{{item.trackingUrl}}" target="_blank">{{item.appId}}</a>
                                    </td>
                                    <td>
                                        <label ng-if="yarnJobStateMap[item.state]" class="label label-{{yarnJobStateMap[item.state].style}}">
                                            {{yarnJobStateMap[item.state].name}}
                                        </label>
                                    </td>
                                    <td>
                                        {{item.startedTime}}
                                    </td>
                                    <td>
                                        {{item.updateTime}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <mypage ng-model="options"></mypage>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<script src="../libs/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../libs/bootstrap-select/i18n/defaults-zh_CN.js" type="text/javascript"></script>
<script src="../libs/angular-1.3.9/angular.min.js" type="text/javascript"></script>
<script src="../libs/angular-1.3.9/myangular.js" type="text/javascript"></script>
<script src="../js/common.js" type="text/javascript"></script>
<script th:inline="javascript">
    var user = [[${session.user}]];
    var app = angular.module('content-app', []);
    registerHttpInterceptor(app);
    registerPage(app);
    app.controller('content-controller', function ($scope, $http) {
        var appId = [[${appId}]];
        getScript($scope, $http, false);
        getCluster($scope, $http);
        if (user.root) {
            getAuthUser($scope, $http);
        }
        appendYarnJobState($scope);
        defineSort($scope);

        //删除
        $scope.onKillItem = function (item) {
            swal({
                title: '确认停止？',
                type: 'question',
                showConfirmButton: true,
                showCancelButton: true
            }).then(function (result) {
                if (result.value) {
                    $http.post('./kill.api?appId=' + item.appId)
                        .success(function (data) {
                            $scope.reload();
                            swal({
                                title: '停止成功',
                                type: 'success',
                                showConfirmButton: false,
                                timer: 1500
                            });
                        });
                }
            });
        };

        // 刷新
        $scope.reload = function () {
            $scope.options.mypage.reload();
        };

        // 获取数据列表
        $scope.options = {
            query: {
                appId: appId
            },
            listUrl: './getpage.api'
        };

    });
</script>
</body>
</html>