From 8c66a25b9027bd5749671e6e649b72c214e05cea Mon Sep 17 00:00:00 2001
From: kaixinqiqi <xiaoqi@dangdang.com>
Date: Fri, 21 Apr 2017 16:44:40 +0800
Subject: [PATCH] Refactor for cloud page style

---
 .../src/main/resources/console/css/common.css |  33 +++
 .../resources/console/html/app/add_app.html   |   2 +-
 .../console/html/app/apps_overview.html       |  72 +++---
 .../console/html/app/modify_app.html          |   2 +-
 .../console/html/history/job_dashboard.html   |   4 +
 .../html/history/job_exec_details.html        | 128 +++++-----
 .../console/html/history/job_exec_status.html | 144 ++++++-----
 .../resources/console/html/job/add_job.html   |   2 +-
 .../console/html/job/job_status.html          | 180 +++++++-------
 .../console/html/job/jobs_overview.html       |  74 +++---
 .../console/html/job/modify_job.html          |   2 +-
 .../src/main/resources/console/index.html     | 231 +++++++++++++++---
 .../main/resources/console/js/app/add_app.js  |   2 +-
 .../resources/console/js/app/app_common.js    |   8 +-
 .../resources/console/js/app/apps_overview.js |  35 ++-
 .../resources/console/js/app/modify_app.js    |   2 +-
 .../resources/console/js/common/common.js     |  80 ++++++
 .../console/js/history/job_exec_details.js    |   3 +-
 .../src/main/resources/console/js/index.js    |  17 +-
 .../main/resources/console/js/job/add_job.js  |   2 +-
 .../resources/console/js/job/job_common.js    |  18 +-
 .../resources/console/js/job/jobs_overview.js |  40 +--
 .../resources/console/js/job/modify_job.js    |   2 +-
 23 files changed, 685 insertions(+), 398 deletions(-)

diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/css/common.css b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/css/common.css
index dfefdd38c6..bbcbab69ff 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/css/common.css
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/css/common.css
@@ -99,3 +99,36 @@
 .app-width-size{
     width:97%;
 }
+/* index css */
+#control-sidebar-theme-demo-options-tab li {
+    float:left; 
+    width: 33.33333%; 
+    padding: 5px;
+}
+#control-sidebar-theme-demo-options-tab li a {
+    display: block; 
+    box-shadow: 0 0 3px rgba(0,0,0,0.4);
+}
+.top-span {
+    display:block; 
+    width: 100%; 
+    float: left; 
+    height: 7px; 
+}
+#span-black{
+    background: #fefefe;
+}
+.down-span-left {
+    display:block; 
+    width: 20%; 
+    float: left; 
+    height: 20px; 
+    background: #222d32;
+}
+.down-span-right {
+    display:block; 
+    width: 80%; 
+    float: left; 
+    height: 20px; 
+    background: #f4f5f7;
+}
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/app/add_app.html b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/app/add_app.html
index 84cf364468..9d5a2f3885 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/app/add_app.html
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/app/add_app.html
@@ -69,7 +69,7 @@
             </div>
             <div class="form-group">
                 <div class="center-font">
-                    <button id="save-button" type="submit" class="btn btn-primary">确定</button>
+                    <button id="save-button" type="submit" class="btn-xs btn-primary">确定</button>
                 </div>
             </div>
         </form>
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/app/apps_overview.html b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/app/apps_overview.html
index f1144c2c5c..439deb3636 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/app/apps_overview.html
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/app/apps_overview.html
@@ -2,44 +2,44 @@
     <div class="page-height-min">
         <section class="content-header">
             <h1>应用定义</h1>
+            <ol class="breadcrumb">
+                <li class="active"><i class="fa fa-laptop"></i> 定义</li>
+                <li class="active">应用定义</li>
+            </ol>
         </section>
         <section class="content">
-        <div class="row">
-            <div class="box box-info">
-                <div id="app-toolbar">
-                    <div class="form-inline" role="form">
-                        <div class="form-group">
-                            <a href="#" id="add-app" type="button" class="label label-success">增加</a>
-                        </div>
+            <div id="app-toolbar">
+                <div class="form-inline" role="form">
+                    <div class="form-group">
+                        &nbsp;&nbsp;&nbsp;<button type="button" class="btn-xs btn-success" id="add-app">添加</button>
                     </div>
                 </div>
-                <table id="app-table" 
-                    data-show-refresh="true"
-                    data-show-toggle="true"
-                    data-striped="true"
-                    data-toggle="table"
-                    data-url="/api/app/list"
-                    data-flat="true"
-                    data-click-to-select="true"
-                    data-search="true"
-                    data-strict-search="false"
-                    data-query-params="queryParams"
-                    data-query-params-type="notLimit"
-                    data-pagination="true"
-                    data-page-list="[10, 20, 50, 100]"
-                    data-show-columns="true"
-                    data-toolbar="#app-toolbar">
-                    <thead>
-                        <tr>
-                            <th data-field="appName" data-sortable="true">名称</th>
-                            <th data-field="appURL" data-sortable="true">所在路径</th>
-                            <th data-field="bootstrapScript" data-sortable="true">启动脚本</th>
-                            <th data-field="operation" data-formatter="operationApp">操作</th>
-                        </tr>
-                    </thead>
-                </table>
             </div>
-        </div>
+            <table id="app-table" 
+                data-show-refresh="true"
+                data-show-toggle="true"
+                data-striped="true"
+                data-toggle="table"
+                data-url="/api/app/list"
+                data-flat="true"
+                data-click-to-select="true"
+                data-search="true"
+                data-strict-search="false"
+                data-query-params="queryParams"
+                data-query-params-type="notLimit"
+                data-pagination="true"
+                data-page-list="[10, 20, 50, 100]"
+                data-show-columns="true"
+                data-toolbar="#app-toolbar">
+                <thead>
+                    <tr>
+                        <th data-field="appName" data-sortable="true">名称</th>
+                        <th data-field="appURL" data-sortable="true">所在路径</th>
+                        <th data-field="bootstrapScript" data-sortable="true">启动脚本</th>
+                        <th data-field="operation" data-formatter="operationApp">操作</th>
+                    </tr>
+                </thead>
+            </table>
         </section>
     </div>
 </div>
@@ -51,7 +51,7 @@ <h1>应用定义</h1>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                     <h2 class="modal-title">应用详情</h2>
                 </div>
-                <div class="modal-body" id = "detail-app-body">
+                <div class="modal-body" id ="detail-app-body">
                 </div>
             </div>
         </div>
@@ -92,8 +92,8 @@ <h2 class="modal-title">添加应用</h2>
                 <h3 class="size-font">确认要删除该应用吗？</h3>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-danger" id="delete-app-confirm" data-dismiss="modal">确认</button>
-                <button type="button" class="btn btn-success" id="delete-app-remove" data-dismiss="modal">取消</button>
+                <button type="button" class="btn-xs btn-danger" id="delete-app-confirm" data-dismiss="modal">确认</button>
+                <button type="button" class="btn-xs btn-success" id="delete-app-remove" data-dismiss="modal">取消</button>
             </div>
         </div>
     </div>
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/app/modify_app.html b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/app/modify_app.html
index 9b71b60560..1c4d3a6bde 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/app/modify_app.html
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/app/modify_app.html
@@ -69,7 +69,7 @@
             </div>
             <div class="form-group">
                 <div class="center-font">
-                    <button  id="save-button" class="btn btn-primary" type="submit" >确定</button>
+                    <button  id="save-button" class="btn-xs btn-primary" type="submit" >确定</button>
                 </div>
             </div>
         </form>
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/history/job_dashboard.html b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/history/job_dashboard.html
index e265652574..d5c5653254 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/history/job_dashboard.html
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/history/job_dashboard.html
@@ -1,6 +1,10 @@
 <div class="content-wrapper">
     <section class="content-header">
         <h1>Dashboard</h1>
+        <ol class="breadcrumb">
+            <li class="active"><i class="fa fa-history"></i> 作业历史</li>
+            <li class="active">历史dashboard</li>
+        </ol>
     </section>
     <hr class="table-line"> 
     <div class="box-body">
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/history/job_exec_details.html b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/history/job_exec_details.html
index 1a34611f3a..b58224681b 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/history/job_exec_details.html
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/history/job_exec_details.html
@@ -1,76 +1,74 @@
 <div class="content-wrapper">
     <div class="page-height-min">
         <section class="content-header">
-            <h1>作业执行轨迹</h1>
+            <h1>作业运行轨迹</h1>
+            <ol class="breadcrumb">
+                <li class="active"><i class="fa fa-history"></i> 作业历史</li>
+                <li class="active">作业运行轨迹</li>
+            </ol>
         </section>
         <section class="content">
-        <div class="row">
-            <div class="box box-info">
-                <div class="box-body">
-                    <div id="job-exec-detail-toolbar-div">
-                        <div class="form-inline" role="form">
-                            <div class="form-group toolbar">
-                                <label for="job-name">作业名称:</label>
-                                <input type="text" class="form-control" id="job-name" placeholder="">
-                            </div>
-                            <div class="form-group toolbar">
-                                <label for="task-id">任务ID:</label>
-                                <input type="text" class="form-control" size="55" id="task-id" placeholder="">
-                            </div>
-                            <br/>
-                            <div class="form-group toolbar">
-                                <label for="ip">宿主机IP:</label>
-                                <input type="text" class="form-control" data-inputmask="'alias': 'ip'" data-mask="" id="ip">
-                            </div>
-                            <div class="form-group toolbar">
-                                <label>执行时间:</label>
-                                <input type="text" class="form-control pull-right custom-datepicker" id="start-time">
-                            </div>
-                            <div class="form-group toolbar">
-                                <span>至</span>
-                                <input type="text" class="form-control pull-right custom-datepicker" id="end-time">
-                            </div>
-                            <div class="form-group toolbar">
-                                <label for="isSuccess">是否成功:</label>
-                                <input type="radio" name="isSuccess" value="1">是
-                                <input type="radio" name="isSuccess" value="0">否
-                                <input type="radio" name="isSuccess" value="" checked="checked">全部
-                            </div>
-                        </div>
+            <div id="job-exec-detail-toolbar-div">
+                <div class="form-inline" role="form">
+                    <div class="form-group toolbar">
+                        <label for="job-name">作业名称:</label>
+                        <input type="text" class="form-control" id="job-name" placeholder="">
+                    </div>
+                    <div class="form-group toolbar">
+                        <label for="task-id">任务ID:</label>
+                        <input type="text" class="form-control" size="55" id="task-id" placeholder="">
+                    </div>
+                    <br/>
+                    <div class="form-group toolbar">
+                        <label for="ip">宿主机IP:</label>
+                        <input type="text" class="form-control" data-inputmask="'alias': 'ip'" data-mask="" id="ip">
+                    </div>
+                    <div class="form-group toolbar">
+                        <label>执行时间:</label>
+                        <input type="text" class="form-control pull-right custom-datepicker" id="start-time">
+                    </div>
+                    <div class="form-group toolbar">
+                        <span>至</span>
+                        <input type="text" class="form-control pull-right custom-datepicker" id="end-time">
+                    </div>
+                    <div class="form-group toolbar">
+                        <label for="isSuccess">是否成功:</label>
+                        <input type="radio" name="isSuccess" value="1">是
+                        <input type="radio" name="isSuccess" value="0">否
+                        <input type="radio" name="isSuccess" value="" checked="checked">全部
                     </div>
-                    <table id="job-exec-details-table" 
-                        data-show-refresh="true"
-                        data-show-toggle="true"
-                        data-striped="true"
-                        data-toggle="table"
-                        data-url="/api/job/events/executions"
-                        data-flat="true"
-                        data-click-to-select="true"
-                        data-row-style="rowStyle"
-                        data-query-params="queryParams"
-                        data-query-params-type="notLimit"
-                        data-side-pagination="server"
-                        data-pagination="true"
-                        data-page-list="[10, 20, 50, 100]"
-                        data-show-columns="true"
-                        data-toolbar="#job-exec-detail-toolbar-div">
-                        <thead>
-                            <tr>
-                                <th data-field="jobName" data-sortable="true">作业名称</th>
-                                <th data-field="taskId">任务ID</th>
-                                <th data-field="ip" data-sortable="true">宿主机IP</th>
-                                <th data-field="shardingItem">分片</th>
-                                <th data-field="source" data-sortable="true">执行依据</th>
-                                <th data-field="success" data-sortable="true" data-formatter="successFormatter">是否成功</th>
-                                <th data-field="failureCause.plainText" data-formatter="splitFormatter">失败原因</th>
-                                <th data-field="startTime" data-sortable="true" data-formatter="dateTimeFormatter">执行开始时间</th>
-                                <th data-field="completeTime" data-sortable="true" data-formatter="dateTimeFormatter">执行结束时间</th>
-                            </tr>
-                        </thead>
-                    </table>
                 </div>
             </div>
-        </div>
+            <table id="job-exec-details-table" 
+                data-show-refresh="true"
+                data-show-toggle="true"
+                data-striped="true"
+                data-toggle="table"
+                data-url="/api/job/events/executions"
+                data-flat="true"
+                data-click-to-select="true"
+                data-row-style="rowStyle"
+                data-query-params="queryParams"
+                data-query-params-type="notLimit"
+                data-side-pagination="server"
+                data-pagination="true"
+                data-page-list="[10, 20, 50, 100]"
+                data-show-columns="true"
+                data-toolbar="#job-exec-detail-toolbar-div">
+                <thead>
+                    <tr>
+                        <th data-field="jobName" data-sortable="true">作业名称</th>
+                        <th data-field="taskId">任务ID</th>
+                        <th data-field="ip" data-sortable="true">宿主机IP</th>
+                        <th data-field="shardingItem">分片</th>
+                        <th data-field="source" data-sortable="true">执行依据</th>
+                        <th data-field="success" data-sortable="true" data-formatter="successFormatter">是否成功</th>
+                        <th data-field="failureCause.plainText" data-formatter="splitFormatter">失败原因</th>
+                        <th data-field="startTime" data-sortable="true" data-formatter="dateTimeFormatter">执行开始时间</th>
+                        <th data-field="completeTime" data-sortable="true" data-formatter="dateTimeFormatter">执行结束时间</th>
+                    </tr>
+                </thead>
+            </table>
         </section>
     </div>
 </div>
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/history/job_exec_status.html b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/history/job_exec_status.html
index 971bbec9b0..a63fffd1a6 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/history/job_exec_status.html
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/history/job_exec_status.html
@@ -1,83 +1,81 @@
 <div class="content-wrapper">
     <div class="page-height-min">
         <section class="content-header">
-            <h1>作业执行状态轨迹</h1>
+            <h1>作业运行状态</h1>
+            <ol class="breadcrumb">
+                <li class="active"><i class="fa fa-history"></i> 作业历史</li>
+                <li class="active">作业运行状态</li>
+            </ol>
         </section>
         <section class="content">
-        <div class="row">
-            <div class="box box-info">
-                <div class="box-body">
-                    <div id="jobExecStatusToolbar">
-                        <div class="form-inline" role="form">
-                            <div class="form-group toolbar">
-                                <label for="job-name">作业名称:</label>
-                                <input type="text" class="form-control" id="job-name" placeholder="">
-                            </div>
-                            <div class="form-group toolbar">
-                                <label for="task-id">任务ID:</label>
-                                <input type="text" class="form-control" size="54" id="task-id" placeholder="">
-                            </div>
-                            <br/>
-                            <div class="form-group toolbar">
-                                <label for="job-name">宿主机ID:</label>
-                                <input type="text" class="form-control" id="slave-id" placeholder="">
-                            </div>
-                            <div class="form-group toolbar">
-                                <label for="source">执行来源:</label>
-                                <input type="text" class="form-control" id="source" placeholder="">
-                            </div>
-                            <div class="form-group toolbar">
-                                <label for="execution-type">执行类型:</label>
-                                <input type="text" class="form-control" size="13" id="execution-type" placeholder="">
-                            </div>
-                            <br/>
-                            <div class="form-group toolbar">
-                                <label for="state">状态:</label>
-                                <input type="text" class="form-control" id="state" placeholder="">
-                            </div>
-                            <div class="form-group toolbar">
-                                <label>创建时间:</label>
-                                <input type="text" class="form-control pull-right custom-datepicker" id="start-time">
-                            </div>
-                            <div class="form-group toolbar">
-                                <span>至</span>
-                                <input type="text" class="form-control pull-right custom-datepicker" id="end-time">
-                            </div>
-                        </div>
+            <div id="jobExecStatusToolbar">
+                <div class="form-inline" role="form">
+                    <div class="form-group toolbar">
+                        <label for="job-name">作业名称:</label>
+                        <input type="text" class="form-control" id="job-name" placeholder="">
+                    </div>
+                    <div class="form-group toolbar">
+                        <label for="task-id">任务ID:</label>
+                        <input type="text" class="form-control" size="54" id="task-id" placeholder="">
+                    </div>
+                    <br/>
+                    <div class="form-group toolbar">
+                        <label for="job-name">宿主机ID:</label>
+                        <input type="text" class="form-control" id="slave-id" placeholder="">
+                    </div>
+                    <div class="form-group toolbar">
+                        <label for="source">执行来源:</label>
+                        <input type="text" class="form-control" id="source" placeholder="">
+                    </div>
+                    <div class="form-group toolbar">
+                        <label for="execution-type">执行类型:</label>
+                        <input type="text" class="form-control" size="13" id="execution-type" placeholder="">
+                    </div>
+                    <br/>
+                    <div class="form-group toolbar">
+                        <label for="state">状态:</label>
+                        <input type="text" class="form-control" id="state" placeholder="">
+                    </div>
+                    <div class="form-group toolbar">
+                        <label>创建时间:</label>
+                        <input type="text" class="form-control pull-right custom-datepicker" id="start-time">
+                    </div>
+                    <div class="form-group toolbar">
+                        <span>至</span>
+                        <input type="text" class="form-control pull-right custom-datepicker" id="end-time">
                     </div>
-                    <table id="job-exec-status-table" 
-                        data-show-refresh="true"
-                        data-show-toggle="true"
-                        data-striped="true"
-                        data-toggle="table"
-                        data-url="/api/job/events/statusTraces"
-                        data-flat="true"
-                        data-click-to-select="true"
-                        data-row-style="rowStyle"
-                        data-query-params="queryParams"
-                        data-query-params-type="notLimit"
-                        data-side-pagination="server"
-                        data-pagination="true"
-                        data-page-list="[10, 20, 50, 100]"
-                        data-show-columns="true"
-                        data-toolbar="#jobExecStatusToolbar">
-                        <thead>
-                            <tr>
-                                <th data-field="jobName" data-sortable="true">作业名称</th>
-                                <th data-field="taskId">任务ID</th>
-                                <th data-field="slaveId" data-sortable="true">宿主机ID</th>
-                                <th data-field="source" data-sortable="true">执行来源</th>
-                                <th data-field="shardingItems">分片</th>
-                                <th data-field="executionType" data-sortable="true">任务来源</th>
-                                <th data-field="state" data-sortable="true">状态</th>
-                                <th data-field="creationTime" data-sortable="true" data-formatter="dateTimeFormatter">创建时间</th>
-                                <th data-field="message" data-formatter="splitFormatter">备注</th>
-                            </tr>
-                        </thead>
-                    </table>
                 </div>
             </div>
-        </div>
+            <table id="job-exec-status-table" 
+                data-show-refresh="true"
+                data-show-toggle="true"
+                data-striped="true"
+                data-toggle="table"
+                data-url="/api/job/events/statusTraces"
+                data-flat="true"
+                data-click-to-select="true"
+                data-row-style="rowStyle"
+                data-query-params="queryParams"
+                data-query-params-type="notLimit"
+                data-side-pagination="server"
+                data-pagination="true"
+                data-page-list="[10, 20, 50, 100]"
+                data-show-columns="true"
+                data-toolbar="#jobExecStatusToolbar">
+                <thead>
+                    <tr>
+                        <th data-field="jobName" data-sortable="true">作业名称</th>
+                        <th data-field="taskId">任务ID</th>
+                        <th data-field="slaveId" data-sortable="true">宿主机ID</th>
+                        <th data-field="source" data-sortable="true">执行来源</th>
+                        <th data-field="shardingItems">分片</th>
+                        <th data-field="executionType" data-sortable="true">任务来源</th>
+                        <th data-field="state" data-sortable="true">状态</th>
+                        <th data-field="creationTime" data-sortable="true" data-formatter="dateTimeFormatter">创建时间</th>
+                        <th data-field="message" data-formatter="splitFormatter">备注</th>
+                    </tr>
+                </thead>
+            </table>
         </section>
     </div>
 </div>
@@ -89,4 +87,4 @@ <h1>作业执行状态轨迹</h1>
 <script src="lib/input-mask/jquery.inputmask.date.extensions.js"></script>
 <script src="lib/input-mask/jquery.inputmask.extensions.js"></script>
 <script src="js/history/history_common.js"></script>
-<script src="js/history/job_exec_status.js"></script>
\ No newline at end of file
+<script src="js/history/job_exec_status.js"></script>
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/add_job.html b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/add_job.html
index 60571ca58f..6bc1fce52e 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/add_job.html
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/add_job.html
@@ -154,7 +154,7 @@
             </div> 
             <div class="form-group">
                 <div class="center-font">
-                    <button id="save-button" class="btn btn-primary" type="submit">确定</button>
+                    <button id="save-button" class="btn-xs btn-primary" type="submit">确定</button>
                 </div>
             </div>
         </form>
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/job_status.html b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/job_status.html
index 0a2700c1d0..90d1d5bdde 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/job_status.html
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/job_status.html
@@ -1,103 +1,99 @@
 <div class="content-wrapper">
     <div class="page-height-min">
         <section class="content-header">
-            <h1>作业状态信息</h1>
+            <h1>作业状态</h1>
+            <ol class="breadcrumb">
+                <li class="active"><i class="fa fa-edit"></i> 作业</li>
+                <li class="active">作业状态</li>
+            </ol>
         </section>
         <section class="content">
-        <div class="row">
-            <div class="box box-info">
-                <div class="box-header with-border">
-                    <ul class="nav nav-tabs" role="tablist">
-                        <li id="running_tab" role="presentation" class="active"><a href="#running" aria-controls="running" role="tab" data-toggle="tab">运行任务</a></li>
-                        <li id="ready_tab" role="presentation"><a href="#ready" aria-controls="ready" role="tab" data-toggle="tab">待运行作业</a></li>
-                        <li id="failover_tab" role="presentation"><a href="#failover" aria-controls="failover" role="tab" data-toggle="tab">待失效转移任务</a></li>
-                    </ul>
+            <ul class="nav nav-tabs" role="tablist">
+                <li id="running_tab" role="presentation" class="active"><a href="#running" aria-controls="running" role="tab" data-toggle="tab">运行任务</a></li>
+                <li id="ready_tab" role="presentation"><a href="#ready" aria-controls="ready" role="tab" data-toggle="tab">待运行作业</a></li>
+                <li id="failover_tab" role="presentation"><a href="#failover" aria-controls="failover" role="tab" data-toggle="tab">待失效转移任务</a></li>
+            </ul>
+            <div class="tab-content">
+                <div role="tabpanel" class="tab-pane active" id="running">
+                    <table id="running" 
+                        data-show-refresh="true"
+                        data-show-toggle="true"
+                        data-striped="true"
+                        data-toggle="table"
+                        data-url="/api/job/tasks/running"
+                        data-flat="true"
+                        data-click-to-select="true"
+                        data-row-style="rowStyle"
+                        data-search="true"
+                        data-strict-search="false"
+                        data-query-params="queryParams"
+                        data-query-params-type="notLimit"
+                        data-pagination="true"
+                        data-page-list="[10, 20, 50, 100]"
+                        data-show-columns="true">
+                        <thead>
+                            <tr>
+                                <th data-field="id" data-sortable="true">任务ID</th>
+                                <th data-field="metaInfo.jobName" data-sortable="true">任务名称</th>
+                                <th data-field="slaveId" data-sortable="true">宿主机ID</th>
+                                <th data-field="type" data-sortable="true">执行类型</th>
+                                <th data-field="metaInfo.shardingItems">分片项</th>
+                            </tr>
+                        </thead>
+                    </table>
                 </div>
-                <div class="box-body">
-                    <div class="tab-content">
-                        <div role="tabpanel" class="tab-pane active" id="running">
-                            <table id="running" 
-                                data-show-refresh="true"
-                                data-show-toggle="true"
-                                data-striped="true"
-                                data-toggle="table"
-                                data-url="/api/job/tasks/running"
-                                data-flat="true"
-                                data-click-to-select="true"
-                                data-row-style="rowStyle"
-                                data-search="true"
-                                data-strict-search="false"
-                                data-query-params="queryParams"
-                                data-query-params-type="notLimit"
-                                data-pagination="true"
-                                data-page-list="[10, 20, 50, 100]"
-                                data-show-columns="true">
-                                <thead>
-                                    <tr>
-                                        <th data-field="id" data-sortable="true">任务ID</th>
-                                        <th data-field="metaInfo.jobName" data-sortable="true">任务名称</th>
-                                        <th data-field="slaveId" data-sortable="true">宿主机ID</th>
-                                        <th data-field="type" data-sortable="true">执行类型</th>
-                                        <th data-field="metaInfo.shardingItems">分片项</th>
-                                    </tr>
-                                </thead>
-                            </table>
-                        </div>
-                        <div role="tabpanel" class="tab-pane" id="ready">
-                            <table id="ready" 
-                                data-show-refresh="true"
-                                data-show-toggle="true"
-                                data-striped="true"
-                                data-toggle="table"
-                                data-url="/api/job/tasks/ready"
-                                data-flat="true"
-                                data-click-to-select="true"
-                                data-row-style="rowStyle"
-                                data-search="true"
-                                data-strict-search="false"
-                                data-query-params="queryParams"
-                                data-query-params-type="notLimit"
-                                data-pagination="true"
-                                data-page-list="[10, 20, 50, 100]"
-                                data-show-columns="true">
-                                <thead>
-                                    <tr>
-                                        <th data-field="jobName" data-sortable="true">作业名称</th>
-                                        <th data-field="times" data-sortable="true">剩余执行次数</th>
-                                    </tr>
-                                </thead>
-                            </table>
-                        </div>
-                        <div role="tabpanel" class="tab-pane" id="failover">
-                            <table id="failover" 
-                                data-show-refresh="true"
-                                data-show-toggle="true"
-                                data-striped="true"
-                                data-toggle="table"
-                                data-url="/api/job/tasks/failover"
-                                data-flat="true"
-                                data-click-to-select="true"
-                                data-row-style="rowStyle"
-                                data-search="true"
-                                data-strict-search="false"
-                                data-query-params="queryParams"
-                                data-query-params-type="notLimit"
-                                data-pagination="true"
-                                data-page-list="[10, 20, 50, 100]"
-                                data-show-columns="true">
-                                <thead>
-                                    <tr>
-                                        <th data-field="taskInfo.jobName" data-sortable="true">作业名称</th>
-                                        <th data-field="originalTaskId">原任务ID</th>
-                                        <th data-field="taskInfo.shardingItems">分片项</th>
-                                    </tr>
-                                </thead>
-                            </table>
-                        </div>
-                    </div>
+                <div role="tabpanel" class="tab-pane" id="ready">
+                    <table id="ready" 
+                        data-show-refresh="true"
+                        data-show-toggle="true"
+                        data-striped="true"
+                        data-toggle="table"
+                        data-url="/api/job/tasks/ready"
+                        data-flat="true"
+                        data-click-to-select="true"
+                        data-row-style="rowStyle"
+                        data-search="true"
+                        data-strict-search="false"
+                        data-query-params="queryParams"
+                        data-query-params-type="notLimit"
+                        data-pagination="true"
+                        data-page-list="[10, 20, 50, 100]"
+                        data-show-columns="true">
+                        <thead>
+                            <tr>
+                                <th data-field="jobName" data-sortable="true">作业名称</th>
+                                <th data-field="times" data-sortable="true">剩余执行次数</th>
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+                <div role="tabpanel" class="tab-pane" id="failover">
+                    <table id="failover" 
+                        data-show-refresh="true"
+                        data-show-toggle="true"
+                        data-striped="true"
+                        data-toggle="table"
+                        data-url="/api/job/tasks/failover"
+                        data-flat="true"
+                        data-click-to-select="true"
+                        data-row-style="rowStyle"
+                        data-search="true"
+                        data-strict-search="false"
+                        data-query-params="queryParams"
+                        data-query-params-type="notLimit"
+                        data-pagination="true"
+                        data-page-list="[10, 20, 50, 100]"
+                        data-show-columns="true">
+                        <thead>
+                            <tr>
+                                <th data-field="taskInfo.jobName" data-sortable="true">作业名称</th>
+                                <th data-field="originalTaskId">原任务ID</th>
+                                <th data-field="taskInfo.shardingItems">分片项</th>
+                            </tr>
+                        </thead>
+                    </table>
                 </div>
             </div>
-        </div>
         </section>
     </div>
 </div>
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/jobs_overview.html b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/jobs_overview.html
index 4cf17bbe12..0e29469224 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/jobs_overview.html
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/jobs_overview.html
@@ -19,46 +19,46 @@
     <div class="page-height-min">
         <section class="content-header">
             <h1>作业定义</h1>
+            <ol class="breadcrumb">
+                <li class="active"><i class="fa fa-edit"></i> 作业</li>
+                <li class="active">作业定义</li>
+            </ol>
         </section>
         <section class="content">
-        <div class="row">
-            <div class="box box-info">
-                <div id="job-toolbar">
-                    <div class="form-inline" role="form">
-                        <div class="form-group">
-                            <a href="#" id="add-job" type="button" class="label label-success">增加</a>
-                        </div>
+            <div id="job-toolbar">
+                <div class="form-inline" role="form">
+                    <div class="form-group">
+                        &nbsp;&nbsp;&nbsp;<button type="button" class="btn-xs btn-success" id="add-job">添加</button>
                     </div>
                 </div>
-                <table id="job-table" 
-                    data-show-refresh="true"
-                    data-show-toggle="true"
-                    data-striped="true"
-                    data-toggle="table"
-                    data-url="/api/job/jobs"
-                    data-flat="true"
-                    data-click-to-select="true"
-                    data-search="true"
-                    data-strict-search="false"
-                    data-query-params="jobName"
-                    data-query-params-type="notLimit"
-                    data-pagination="true"
-                    data-page-list="[10, 20, 50, 100]"
-                    data-show-columns="true"
-                    data-toolbar="#job-toolbar">
-                    <thead>
-                        <tr>
-                            <th data-field="jobName" data-sortable="true">名称</th>
-                            <th data-field="appName" data-sortable="true">应用名称</th>
-                            <th data-field="jobClass" data-sortable="true">实现类</th>
-                            <th data-field="shardingTotalCount" data-sortable="true">分片总数</th>
-                            <th data-field="cron" data-sortable="true">cron表达式</th>
-                            <th data-field="operate" data-formatter="operationJob">操作</th>
-                        </tr>
-                    </thead>
-                </table>
             </div>
-        </div>
+            <table id="job-table" 
+                data-show-refresh="true"
+                data-show-toggle="true"
+                data-striped="true"
+                data-toggle="table"
+                data-url="/api/job/jobs"
+                data-flat="true"
+                data-click-to-select="true"
+                data-search="true"
+                data-strict-search="false"
+                data-query-params="jobName"
+                data-query-params-type="notLimit"
+                data-pagination="true"
+                data-page-list="[10, 20, 50, 100]"
+                data-show-columns="true"
+                data-toolbar="#job-toolbar">
+                <thead>
+                    <tr>
+                        <th data-field="jobName" data-sortable="true">名称</th>
+                        <th data-field="appName" data-sortable="true">应用名称</th>
+                        <th data-field="jobClass" data-sortable="true">实现类</th>
+                        <th data-field="shardingTotalCount" data-sortable="true">分片总数</th>
+                        <th data-field="cron" data-sortable="true">cron表达式</th>
+                        <th data-field="operate" data-formatter="operationJob">操作</th>
+                    </tr>
+                </thead>
+            </table>
         </section>
     </div>
 </div>
@@ -83,8 +83,8 @@ <h2 class="modal-title">作业详情</h2>
                 <h3 class="size-font">确认要删除该作业吗？</h3>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-danger" id="delete-job-confirm" data-dismiss="modal">确认</button>
-                <button type="button" class="btn btn-success" id="delete-job-remove" data-dismiss="modal">取消</button>
+                <button type="button" class="btn-xs btn-danger" id="delete-job-confirm" data-dismiss="modal">确认</button>
+                <button type="button" class="btn-xs btn-success" id="delete-job-remove" data-dismiss="modal">取消</button>
             </div>
         </div>
     </div>
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/modify_job.html b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/modify_job.html
index 056312a934..0792fb85d6 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/modify_job.html
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/html/job/modify_job.html
@@ -154,7 +154,7 @@
             </div> 
             <div class="form-group">
                 <div class="center-font">
-                    <button id="save-button" class="btn btn-primary" type="submit">确定</button>
+                    <button id="save-button" class="btn-xs btn-primary" type="submit">确定</button>
                 </div>
             </div>
         </form>
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/index.html b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/index.html
index 2abd8c1872..ead6e1a7fc 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/index.html
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/index.html
@@ -19,62 +19,237 @@
     <script src="js/common/common.js"></script>
     <script src="js/index.js"></script>
     </head>
-    <body class="hold-transition skin-purple sidebar-mini">
+    <body class="hold-transition skin-blue-light sidebar-mini">
     <div class="wrapper">
         <header class="main-header">
         <a href="" class="logo">
             <span class="logo-lg"><b>Elastic Job Cloud Console</b></span>
         </a>
         <nav class="navbar navbar-static-top" role="navigation">
+              <div id="navbar" class="navbar-custom-menu">
+                    <ul class="nav navbar-nav">
+                        <li><a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a></li>
+                        <li></li>
+                    </ul>
+                </div>
         </nav>
     </header>
     <aside class="main-sidebar">
         <section class="sidebar">
             <ul class="sidebar-menu">
-                <li class="treeview active">
-                    <a href="#app" class="nav-header collapsed" data-toggle="collapse">
-                        <i class="fa fa-laptop">     应用</i><i class="fa fa-angle-left pull-right"></i>
-                        <span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
+                <li class="treeview" id="app">
+                    <a href="#">
+                        <i class="fa fa-laptop">&nbsp;&nbsp;应用</i><i class="pull-right fa fa-angle-left "></i>
+                        <div class="pull-right">
+                            <span id="app-nav-tag" class="label label-primary"></span>
+                        </div>
                     </a>
-                    <ul id="app" class="nav nav-list collapse secondmenu">
-                        <li><a href="#" id="register-app" class ="right-navigation-bar"> 定义</a></li>
+                    <ul class="treeview-menu">
+                        <li><a href="#" id="register-app" class="sub-menu"><i class="fa fa-circle-o"></i>定义</a></li>
                     </ul>
-                    <a href="#job" class="nav-header collapsed" data-toggle="collapse">
-                        <i class="fa fa-edit">     作业</i>
-                        <span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
+                </li>
+                <li class="treeview" id="job">
+                    <a href="#">
+                        <i class="fa fa-edit">&nbsp;&nbsp;作业</i><i class="pull-right fa fa-angle-left"></i>
+                        <div class="pull-right">
+                            <span id="job-nav-tag" class="label label-primary"></span>
+                        </div>
                     </a>
-                    <ul id="job" class="nav nav-list collapse secondmenu">
-                        <li><a href="#" id="register-job" class ="right-navigation-bar"> 定义</a></li>
-                        <li><a href="#" id="status" class ="right-navigation-bar"> 状态</a></li>
+                    <ul class="treeview-menu">
+                        <li><a href="#" id="register-job" class="sub-menu"><i class="fa fa-circle-o"></i>定义</a></li>
+                        <li><a href="#" id="status" class="sub-menu"><i class="fa fa-circle-o"></i>状态</a></li>
                     </ul>
-                    <a href="#record" class="nav-header collapsed" data-toggle="collapse">
-                        <i class="fa fa-dashboard">     作业历史</i>
-                        <span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
+                </li>
+                <li class="treeview" id="history">
+                    <a href="#">
+                        <i class="fa fa-history">&nbsp;&nbsp;作业历史</i><i class="pull-right fa fa-angle-left "></i>
                     </a>
-                    <ul id="record" class="nav nav-list collapse secondmenu">
-                        <li><a href="#" id="dashboard" class ="right-navigation-bar"> 历史dashboard</a></li>
-                        <li><a href="#" id="exec-details" class ="right-navigation-bar"> 运行轨迹查询</a></li>
-                        <li><a href="#" id="exec-status" class ="right-navigation-bar"> 运行状态查询</a></li>
-                    </ul>
-                </li>   
+                    <ul class="treeview-menu">
+                        <li><a href="#" id="dashboard" class ="sub-menu"><i class="fa fa-circle-o"></i> 历史dashboard</a></li>
+                        <li><a href="#" id="exec-details" class ="sub-menu"><i class="fa fa-circle-o"></i> 作业运行轨迹</a></li>
+                        <li><a href="#" id="exec-status" class ="sub-menu"><i class="fa fa-circle-o"></i> 作业运行状态</a></li>
+                   </ul>
+                </li>
             </ul>
     </section>
     </aside>
-    <div id="content-right">
-    </div>
+    <div id="content-right"></div>
     <footer class="main-footer">
             <strong>Copyright &copy; 2004-2017 <a href="http://www.dangdang.com">当当网</a>.</strong> All rights reserved.
     </footer>
-    <div class="control-sidebar-bg"></div>
-    </div>
-        <div id="success-dialog" class="modal">
+    <aside class="control-sidebar control-sidebar-dark">
+        <div class="tab-content">
+            <div id="control-sidebar-theme-demo-options-tab" class="tab-pane active">
+                <h4 class="control-sidebar-heading">更换主题皮肤</h4>
+                <ul class="list-unstyled clearfix">
+                    <li>
+                        <a href="javascript:void(0);" data-skin="skin-blue" class="clearfix full-opacity-hover">
+                        <div>
+                            <span class="bg-blue top-span"></span>
+                        </div>
+                        <div>
+                            <span class="down-span-left"></span>
+                            <span class="down-span-right"></span>
+                        </div>
+                        </a>
+                        <p class="text-center no-margin">蓝色</p>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);" data-skin="skin-black" class="clearfix full-opacity-hover">
+                        <div>
+                            <span class="top-span"></span>
+                        </div>
+                        <div>
+                            <span class="down-span-left"></span>
+                            <span class="down-span-right"></span>
+                        </div>
+                        </a>
+                        <p class="text-center no-margin">白色</p>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);" data-skin="skin-purple" class="clearfix full-opacity-hover">
+                        <div>
+                            <span class="bg-purple top-span"></span>
+                        </div>
+                        <div>
+                            <span class="down-span-left"></span>
+                            <span class="down-span-right"></span>
+                        </div>
+                        </a>
+                        <p class="text-center no-margin">紫色</p>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);" data-skin="skin-green" class="clearfix full-opacity-hover">
+                        <div>
+                            <span class="bg-green top-span"></span>
+                        </div>
+                        <div>
+                            <span class="down-span-left"></span>
+                            <span class="down-span-right"></span>
+                        </div>
+                        </a>
+                        <p class="text-center no-margin">绿色</p>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);" data-skin="skin-yellow" class="clearfix full-opacity-hover">
+                        <div>
+                            <span class="bg-yellow top-span"></span>
+                        </div>
+                        <div>
+                            <span class="down-span-left"></span>
+                            <span class="down-span-right"></span>
+                        </div>
+                        </a>
+                        <p class="text-center no-margin">黄色</p>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);" data-skin="skin-red" class="clearfix full-opacity-hover">
+                        <div>
+                            <span class="bg-red top-span"></span>
+                        </div>
+                        <div>
+                            <span class="down-span-left"></span>
+                            <span class="down-span-right"></span>
+                        </div>
+                        </a>
+                        <p class="text-center no-margin">红色</p>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);" data-skin="skin-blue-light" class="clearfix full-opacity-hover">
+                        <div>
+                            <span class="bg-light-blue top-span"></span>
+                        </div>
+                        <div>
+                            <span class="down-span-left"></span>
+                            <span class="down-span-right"></span>
+                        </div>
+                        </a>
+                        <p class="text-center no-margin">蓝色高亮</p>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);" data-skin="skin-black-light" class="clearfix full-opacity-hover">
+                        <div>
+                            <span class="top-span"></span>
+                        </div>
+                        <div>
+                            <span class="down-span-left"></span>
+                            <span class="down-span-right"></span>
+                        </div>
+                        </a>
+                        <p class="text-center no-margin">白色高亮</p>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);" data-skin="skin-purple-light" class="clearfix full-opacity-hover">
+                        <div>
+                            <span class="bg-purple top-span"></span>
+                        </div>
+                        <div>
+                            <span class="down-span-left"></span>
+                            <span class="down-span-right"></span>
+                        </div>
+                        </a>
+                        <p class="text-center no-margin">紫色高亮</p>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);" data-skin="skin-green-light" class="clearfix full-opacity-hover">
+                        <div>
+                            <span class="bg-green top-span"></span>
+                        </div>
+                        <div>
+                            <span class="down-span-left"></span>
+                            <span class="down-span-right"></span>
+                        </div>
+                        </a>
+                        <p class="text-center no-margin">绿色高亮</p>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);" data-skin="skin-yellow-light" class="clearfix full-opacity-hover">
+                        <div>
+                            <span class="bg-yellow top-span"></span>
+                        </div>
+                        <div>
+                            <span class="down-span-left"></span>
+                            <span class="down-span-right"></span>
+                        </div>
+                        </a>
+                        <p class="text-center no-margin">黄色高亮</p>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0);" data-skin="skin-red-light" class="clearfix full-opacity-hover">
+                        <div>
+                            <span class="bg-red top-span"></span>
+                        </div>
+                        <div>
+                            <span class="down-span-left"></span>
+                            <span class="down-span-right"></span>
+                        </div>
+                        </a>
+                        <p class="text-center no-margin">红色高亮</p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </aside>
+    <div id="success-dialog" class="modal">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-body">
                     <p class="size-font">操作已成功完成</p>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-success" data-dismiss="modal">关闭</button>
+                    <button type="button" class="btn-xs btn-success" data-dismiss="modal">关闭</button>
+                </div>
+            </div>
+        </div>
+    </div>
+        <div id="fail-dialog" class="modal">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-body">
+                    <p class="size-font">作业对应的应用已失效，操作失败</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn-xs btn-success" data-dismiss="modal">关闭</button>
                 </div>
             </div>
         </div>
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/add_app.js b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/add_app.js
index c0be25a116..03cd792e50 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/add_app.js
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/add_app.js
@@ -1,4 +1,4 @@
 $(function() {
     validate();
-    submitConfirm("post");
+    submitConfirm("post", $("#data-add-app"));
 });
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/app_common.js b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/app_common.js
index 867480646e..2136771e0d 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/app_common.js
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/app_common.js
@@ -83,7 +83,7 @@ function validate() {
     });
 }
 
-function submitConfirm(type) {
+function submitConfirm(type, modal) {
     $("#save-button").on("click", function() {
         var bootstrapValidator = $("#app-form").data("bootstrapValidator");
         bootstrapValidator.validate();
@@ -95,7 +95,11 @@ function submitConfirm(type) {
                 url: "/api/app",
                 contentType: "application/json",
                 success: function(data) {
-                    window.location = "index.html?appName";
+                    modal.modal("hide");
+                    $("#app-table").bootstrapTable("refresh");
+                    $(".modal-backdrop").remove();
+                    $("body").removeClass("modal-open");
+                    refreshAppNavTag();
                 }
             });
         }
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/apps_overview.js b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/apps_overview.js
index 8ce1806515..645e484f47 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/apps_overview.js
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/apps_overview.js
@@ -12,11 +12,11 @@ $(function() {
 });
 
 function operationApp(val, row) {
-    var detailButton = "<button operation='detailApp' class='btn btn-info' appName='" + row.appName + "'>详情</button>";
-    var modifyButton = "<button operation='modifyApp' class='btn btn-warning' appName='" + row.appName + "'>修改</button>";
-    var deleteButton = "<button operation='deleteApp' class='btn btn-danger' appName='" + row.appName + "'>删除</button>";
-    var enableButton = "<button operation='enableApp' class='btn btn-success' appName='" + row.appName + "'>生效</button>";
-    var disableButton = "<button operation='disableApp' class='btn btn-warning' appName='" + row.appName + "'>失效</button>";
+    var detailButton = "<button operation='detailApp' class='btn-xs btn-info' appName='" + row.appName + "'>详情</button>";
+    var modifyButton = "<button operation='modifyApp' class='btn-xs btn-warning' appName='" + row.appName + "'>修改</button>";
+    var deleteButton = "<button operation='deleteApp' class='btn-xs btn-danger' appName='" + row.appName + "'>删除</button>";
+    var enableButton = "<button operation='enableApp' class='btn-xs btn-success' appName='" + row.appName + "'>生效</button>";
+    var disableButton = "<button operation='disableApp' class='btn-xs btn-warning' appName='" + row.appName + "'>失效</button>";
     var operationId = detailButton + "&nbsp;" + modifyButton  +"&nbsp;" + deleteButton;
     if(selectAppStatus(row.appName)) {
         operationId = operationId + "&nbsp;" + enableButton;
@@ -26,21 +26,8 @@ function operationApp(val, row) {
     return operationId;
 }
 
-function selectAppStatus(appName) {
-    var resultValue = null;
-    $.ajax({
-        type: "GET",
-        async: false,
-        url: "/api/app/" + appName + "/disable",
-        contentType: "application/json",
-        success: function(result) {
-            resultValue = result;
-        }
-    });
-    return resultValue;
-}
-
 function bindDetailAppButton() {
+    $(document).off("click", "button[operation='detailApp'][data-toggle!='modal']");
     $(document).on("click", "button[operation='detailApp'][data-toggle!='modal']", function(event) {
         var appName = $(event.currentTarget).attr("appName");
         $.ajax({
@@ -63,6 +50,7 @@ function bindDetailAppButton() {
 }
 
 function bindModifyAppButton() {
+    $(document).off("click", "button[operation='modifyApp'][data-toggle!='modal']");
     $(document).on("click", "button[operation='modifyApp'][data-toggle!='modal']", function(event) {
         var appName = $(event.currentTarget).attr("appName");
         $.ajax({
@@ -81,6 +69,7 @@ function bindModifyAppButton() {
 }
 
 function bindEnableAppButton() {
+    $(document).off("click", "button[operation='enableApp'][data-toggle!='modal']");
     $(document).on("click", "button[operation='enableApp'][data-toggle!='modal']", function(event) {
         var appName = $(event.currentTarget).attr("appName");
         $.ajax({
@@ -88,14 +77,15 @@ function bindEnableAppButton() {
             type: "DELETE",
             contentType: "application/json",
             success: function(result) {
-                $("#app-table").bootstrapTable("refresh");
                 showSuccessDialog();
+                $("#app-table").bootstrapTable("refresh");
             }
         });
     });
 }
 
 function bindDisableAppButton() {
+    $(document).off("click", "button[operation='disableApp'][data-toggle!='modal']");
     $(document).on("click", "button[operation='disableApp'][data-toggle!='modal']", function(event) {
         var appName = $(event.currentTarget).attr("appName");
         $.ajax({
@@ -103,14 +93,15 @@ function bindDisableAppButton() {
             type: "POST",
             contentType: "application/json",
             success: function(result) {
-                $("#app-table").bootstrapTable("refresh");
                 showSuccessDialog();
+                $("#app-table").bootstrapTable("refresh");
             }
         });
     });
 }
 
 function bindDeleteAppButton() {
+    $(document).off("click", "button[operation='deleteApp'][data-toggle!='modal']");
     $(document).on("click", "button[operation='deleteApp'][data-toggle!='modal']", function(event) {
         var appName = $(event.currentTarget).attr("appName");
         $("#delete-data-app").modal({backdrop : "static", keyboard : true});
@@ -127,6 +118,8 @@ function bindDeleteAppButton() {
                     success: function(result) {
                         $("#app-table").bootstrapTable("refresh");
                         $("#delete-data-app").hide();
+                        refreshAppNavTag();
+                        refreshJobNavTag();
                     }
                 });
             }
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/modify_app.js b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/modify_app.js
index cb09922bf0..01f53a4077 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/modify_app.js
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/app/modify_app.js
@@ -1,4 +1,4 @@
 $(function() {
     validate();
-    submitConfirm("put");
+    submitConfirm("put", $("#data-update-app"));
 });
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/common/common.js b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/common/common.js
index 7ef1f53034..3d87e43500 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/common/common.js
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/common/common.js
@@ -1,4 +1,84 @@
+$(function() {
+    renderSkin();
+    controlSubMenuStyle();
+});
+
 function showSuccessDialog() {
     $("#success-dialog").modal("show");
     setTimeout('$("#success-dialog").modal("hide")', 2000);
 }
+
+function showFailDialog() {
+    $("#fail-dialog").modal("show");
+    setTimeout('$("#fail-dialog").modal("hide")', 2000);
+}
+
+function refreshJobNavTag() {
+    $.ajax({
+        url: "/api/job/jobs",
+        cache: false,
+        success: function(data) {
+            $("#job-nav-tag").text(data.length);
+        }
+    });
+}
+
+function refreshAppNavTag() {
+    $.ajax({
+        url: "/api/app/list",
+        cache: false,
+        success: function(data) {
+            $("#app-nav-tag").text(data.length);
+        }
+    });
+}
+
+var my_skins = [
+    "skin-blue",
+    "skin-black",
+    "skin-red",
+    "skin-yellow",
+    "skin-purple",
+    "skin-green",
+    "skin-blue-light",
+    "skin-black-light",
+    "skin-red-light",
+    "skin-yellow-light",
+    "skin-purple-light",
+    "skin-green-light"
+];
+
+function renderSkin() {
+    $("[data-skin]").on("click", function(event) {
+        event.preventDefault();
+        changeSkin($(this).data("skin"));
+    });
+}
+
+function changeSkin(skinClass) {
+    $.each(my_skins, function(index) {
+        $("body").removeClass(my_skins[index]);
+    });
+    $("body").addClass(skinClass);
+}
+
+function controlSubMenuStyle() {
+    $(".sub-menu").click(function() {
+        $(this).parent().parent().children().removeClass("active");
+        $(this).parent().addClass("active");
+    });
+}
+
+function selectAppStatus(appName) {
+    var resultValue = null;
+    $.ajax({
+        type: "GET",
+        async: false,
+        url: "/api/app/" + appName + "/disable",
+        contentType: "application/json",
+        success: function(result) {
+            resultValue = result;
+        }
+    });
+    return resultValue;
+}
\ No newline at end of file
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/history/job_exec_details.js b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/history/job_exec_details.js
index 964665aede..a35afd164b 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/history/job_exec_details.js
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/history/job_exec_details.js
@@ -8,11 +8,12 @@ $(function() {
 });
 
 function queryParams(params) {
+    var sortName = "success" === params.sortName ? "isSuccess" : params.sortName;
     return {
         per_page: params.pageSize, 
         page: params.pageNumber,
         q: params.searchText,
-        sort: params.sortName,
+        sort: sortName,
         order: params.sortOrder,
         jobName: $("#job-name").val(),
         taskId: $("#task-id").val(),
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/index.js b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/index.js
index d7883bc0cc..977a8e3c77 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/index.js
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/index.js
@@ -1,9 +1,7 @@
 $(function() {
-    if(null !== getCurrentUrl("appName")) {
-        $("#content-right").load("/html/app/apps_overview.html");
-    }else{
-        $("#content-right").load("/html/job/jobs_overview.html");
-    }
+    $("#content-right").load("/html/app/apps_overview.html");
+    refreshJobNavTag();
+    refreshAppNavTag();
     $("#register-app").click(function() {
         $("#content-right").load("/html/app/apps_overview.html");
     });
@@ -23,12 +21,3 @@ $(function() {
         $("#content-right").load("/html/history/job_exec_status.html");
     });
 });
-
-function getCurrentUrl(param) {
-    var regular = new RegExp(param);
-    var result = window.location.search.substr(1).match(regular);
-    if (null !== result) {
-        return unescape(result[1]);
-    }
-    return null;
-}
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/add_job.js b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/add_job.js
index aa5558b769..c4be5eeb62 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/add_job.js
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/add_job.js
@@ -1,5 +1,5 @@
 $(function() {
     validate();
     dataControl();
-    submitConfirm("post", "/api/job/register");
+    submitConfirm("post", "/api/job/register", $("#data-add-job"));
 });
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/job_common.js b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/job_common.js
index 1087bdc666..f8b10f1f79 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/job_common.js
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/job_common.js
@@ -13,8 +13,8 @@ function validate() {
                         message: "作业实现类不能为空"
                     },
                     regexp: {
-                        regexp: /^([a-zA-Z_]\w*\.)*[a-zA-Z_]\w*$/,
-                        message: "作业实现类必须以字母开头并且只包含数字、字母、下划线(_)和点号(.)"
+                        regexp: /^[\w\.]+$/,
+                        message: "作业实现类只能使用数字、字母、下划线(_)和点号(.)"
                     }
                 }
             },
@@ -149,7 +149,7 @@ $("#sharding-item-parameters").focus(function() {
     $("#job-form").data('bootstrapValidator').enableFieldValidators("shardingItemParameters", true);
 });
 
-function submitConfirm(type, url) {
+function submitConfirm(type, url, modal) {
     $("#save-button").on("click", function() {
         if($("" == "#sharding-item-parameters").val() || null === $("#sharding-item-parameters").val()) {
             $("#job-form").data("bootstrapValidator").enableFieldValidators("shardingItemParameters", false);
@@ -160,7 +160,7 @@ function submitConfirm(type, url) {
             var beanName = $("#bean-name").val();
             var applicationContext = $("#application-context").val();
             if(0 === beanName.length && 0 === applicationContext.length) {
-                submitJobForm(type,url);
+                submitJobForm(type, url, modal);
             } else if(null !== applicationContext && 0 === beanName.length) {
                 $("#delete-data—bean-name").modal();
                 setTimeout(function() {
@@ -172,13 +172,13 @@ function submitConfirm(type, url) {
                     $("#delete-data-application-context").modal("hide");
                 }, 3000);
             } else {
-                submitJobForm(type, url);
+                submitJobForm(type, url, modal);
             }
         }
     });
 }
 
-function submitJobForm(type, url) {
+function submitJobForm(type, url, modal) {
     $.ajax({
         type: type,
         dataType: "json",
@@ -186,7 +186,11 @@ function submitJobForm(type, url) {
         url: url,
         contentType: "application/json",
         success: function(data) {
-            window.location = "index.html";
+            modal.modal("hide");
+            $(".modal-backdrop").remove();
+            $("body").removeClass("modal-open");
+            $("#content-right").load("/html/job/jobs_overview.html");
+            refreshJobNavTag();
         }
     });
 }
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/jobs_overview.js b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/jobs_overview.js
index 1b567a3c12..3a8f114c9f 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/jobs_overview.js
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/jobs_overview.js
@@ -12,11 +12,11 @@ $(function() {
 });
 
 function operationJob(val, row) {
-    var detailButton = "<button operation='detailJob' class='btn btn-info' jobName='" + row.jobName + "'>详情</button>";
-    var modifyButton = "<button operation='modifyJob' class='btn btn-warning' jobName='" + row.jobName + "'>修改</button>";
-    var deleteButton = "<button operation='deleteJob' class='btn btn-danger' jobName='" + row.jobName + "'>删除</button>";
-    var enableButton = "<button operation='enableJob' class='btn btn-success' jobName='" + row.jobName + "'>生效</button>";
-    var disableButton = "<button operation='disableJob' class='btn btn-warning' jobName='" + row.jobName + "'>失效</button>";
+    var detailButton = "<button operation='detailJob' class='btn-xs btn-info' jobName='" + row.jobName + "'>详情</button>";
+    var modifyButton = "<button operation='modifyJob' class='btn-xs btn-warning' jobName='" + row.jobName + "'>修改</button>";
+    var deleteButton = "<button operation='deleteJob' class='btn-xs btn-danger' jobName='" + row.jobName + "'>删除</button>";
+    var enableButton = "<button operation='enableJob' class='btn-xs btn-success' jobName='" + row.jobName + "' appName='" + row.appName + "'>生效</button>";
+    var disableButton = "<button operation='disableJob' class='btn-xs btn-warning' jobName='" + row.jobName + "'  >失效</button>";
     var operationId = detailButton + "&nbsp;" + modifyButton  +"&nbsp;" + deleteButton;
     if(selectJobStatus(row.jobName)) {
         operationId = operationId + "&nbsp;" + enableButton;
@@ -41,6 +41,7 @@ function selectJobStatus(jobName) {
 }
 
 function bindDetailJobButton() {
+    $(document).off("click", "button[operation='detailJob'][data-toggle!='modal']");
     $(document).on("click", "button[operation='detailJob'][data-toggle!='modal']", function(event) {
         var jobName = $(event.currentTarget).attr("jobName");
         $.ajax({
@@ -66,6 +67,7 @@ function bindDetailJobButton() {
 }
 
 function bindDeleteJobButton() {
+    $(document).off("click", "button[operation='deleteJob'][data-toggle!='modal']");
     $(document).on("click", "button[operation='deleteJob'][data-toggle!='modal']", function(event) {
         var jobName = $(event.currentTarget).attr("jobName");
         $("#delete-data").modal({backdrop : "static", keyboard : true});
@@ -83,6 +85,7 @@ function bindDeleteJobButton() {
                     success: function(result) {
                         $("#job-table").bootstrapTable("refresh");
                         $("#delete-data").hide();
+                        refreshJobNavTag();
                     }
                 });
             }
@@ -91,6 +94,7 @@ function bindDeleteJobButton() {
 }
 
 function bindModifyJobButton() {
+    $(document).off("click", "button[operation='modifyJob'][data-toggle!='modal']");
     $(document).on("click", "button[operation='modifyJob'][data-toggle!='modal']", function(event) {
         var jobName = $(event.currentTarget).attr("jobName");
         $.ajax({
@@ -109,21 +113,28 @@ function bindModifyJobButton() {
 }
 
 function bindEnableJobButton() {
+    $(document).off("click", "button[operation='enableJob'][data-toggle!='modal']");
     $(document).on("click", "button[operation='enableJob'][data-toggle!='modal']", function(event) {
         var jobName = $(event.currentTarget).attr("jobName");
-        $.ajax({
-            url: "/api/job/" + jobName + "/disable",
-            type: "DELETE",
-            contentType: "application/json",
-            success: function(result) {
-                $("#job-table").bootstrapTable("refresh");
-                showSuccessDialog();
-            }
-        });
+        var appName = $(event.currentTarget).attr("appName");
+        if(selectAppStatus(appName)){
+            showFailDialog();
+        } else {
+            $.ajax({
+                url: "/api/job/" + jobName + "/disable",
+                type: "DELETE",
+                contentType: "application/json",
+                success: function(result) {
+                    $("#job-table").bootstrapTable("refresh");
+                    showSuccessDialog();
+                }
+            });
+        }
     });
 }
 
 function bindDisableJobButton() {
+    $(document).off("click", "button[operation='disableJob'][data-toggle!='modal']");
     $(document).on("click", "button[operation='disableJob'][data-toggle!='modal']", function(event) {
         var jobName = $(event.currentTarget).attr("jobName");
         $.ajax({
@@ -175,3 +186,4 @@ function renderJob(job) {
         $("#bootstrap-script-div").show();
     }
 }
+
diff --git a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/modify_job.js b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/modify_job.js
index cfa320df94..9a3f596ce6 100644
--- a/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/modify_job.js
+++ b/elastic-job-cloud/elastic-job-cloud-scheduler/src/main/resources/console/js/job/modify_job.js
@@ -1,5 +1,5 @@
 $(function() {
     validate();
     dataControl();
-    submitConfirm("put", "/api/job/update");
+    submitConfirm("put", "/api/job/update", $("#data-update-job"));
 });