update sql query

finovy · Feb 6, 2024 · a093d73 · a093d73
1 parent acc6f11
commit a093d73
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 57 deletions.
diff --git a/common/static/style.css b/common/static/style.css
@@ -1,6 +1,6 @@
 html {
     font-size: 1rem;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    cursor: default;
 }
 
 body {
@@ -175,7 +175,8 @@ table td:first-child .detail-icon {
 }
 
 table th {
-    color: grey;
+    color: #555;
+    cursor: default;
 }
 
 table .glyphicon {
@@ -374,3 +375,17 @@ table .glyphicon {
     padding: 0 1rem;
     margin-top: 0;
 }
+
+.card-header, .card-header h6{
+    color: #4e73df;
+    font-weight: bold;
+}
+
+.nav-tabs{
+    font-size: 14px;
+    margin-bottom: 15px;
+}
+
+.navbar-text{
+    margin: 0 15px;
+}
diff --git a/common/templates/dashboard.html b/common/templates/dashboard.html
@@ -85,7 +85,7 @@
                 <!-- /.panel -->
                 <div class="card shadow mb-4">
                     <div class="card-header py-3">
-                        <h6 class="m-0 font-weight-bold text-primary">SQL查询统计</h6>
+                        <h6 class="m-0">SQL查询统计</h6>
                     </div>
                     <div class="card-body">
                         {{ chart.line1|safe }}
@@ -94,7 +94,7 @@ <h6 class="m-0 font-weight-bold text-primary">SQL查询统计</h6>
                 <!-- /.panel -->
                 <div class="card shadow mb-4">
                     <div class="card-header py-3">
-                        <h6 class="m-0 font-weight-bold text-primary">SQL上线数量</h6>
+                        <h6 class="m-0">SQL上线数量</h6>
                     </div>
                     <div class="card-body">
                         {{ chart.bar1|safe }}
@@ -103,7 +103,7 @@ <h6 class="m-0 font-weight-bold text-primary">SQL上线数量</h6>
                 <!-- /.panel -->
                 <div class="card shadow mb-4">
                     <div class="card-header py-3">
-                        <h6 class="m-0 font-weight-bold text-primary">SQL上线用户</h6>
+                        <h6 class="m-0">SQL上线用户</h6>
                     </div>
                     <div class="card-body">
                         {{ chart.bar2|safe }}
@@ -112,7 +112,7 @@ <h6 class="m-0 font-weight-bold text-primary">SQL上线用户</h6>
                 <!-- /.panel -->
                 <div class="card shadow mb-4">
                     <div class="card-header py-3">
-                        <h6 class="m-0 font-weight-bold text-primary">24h慢查询db维度统计</h6>
+                        <h6 class="m-0">24h慢查询db维度统计</h6>
                     </div>
                     <div class="card-body">
                         {{ chart.bar3|safe }}
@@ -124,7 +124,7 @@ <h6 class="m-0 font-weight-bold text-primary">24h慢查询db维度统计</h6>
                 <!-- /.panel -->
                 <div class="card shadow mb-4">
                     <div class="card-header py-3">
-                        <h6 class="m-0 font-weight-bold text-primary">SQL上线统计</h6>
+                        <h6 class="m-0">SQL上线统计</h6>
                     </div>
                     <div class="card-body">
                         {{ chart.pie1|safe }}
@@ -133,7 +133,7 @@ <h6 class="m-0 font-weight-bold text-primary">SQL上线统计</h6>
                 <!-- /.panel -->
                 <div class="card shadow mb-4">
                     <div class="card-header py-3">
-                        <h6 class="m-0 font-weight-bold text-primary">DB检索行数</h6>
+                        <h6 class="m-0">DB检索行数</h6>
                     </div>
                     <div class="card-body">
                         {{ chart.pie5|safe }}
@@ -142,7 +142,7 @@ <h6 class="m-0 font-weight-bold text-primary">DB检索行数</h6>
                 <!-- /.panel -->
                 <div class="card shadow mb-4">
                     <div class="card-header py-3">
-                        <h6 class="m-0 font-weight-bold text-primary">SQL查询用户</h6>
+                        <h6 class="m-0">SQL查询用户</h6>
                     </div>
                     <div class="card-body">
                         {{ chart.pie4|safe }}
@@ -151,7 +151,7 @@ <h6 class="m-0 font-weight-bold text-primary">SQL查询用户</h6>
                 <!-- /.panel -->
                 <div class="card shadow mb-4">
                     <div class="card-header py-3">
-                        <h6 class="m-0 font-weight-bold text-primary">24h慢查询db/user维度统计</h6>
+                        <h6 class="m-0">24h慢查询db/user维度统计</h6>
                     </div>
                     <div class="card-body">
                         {{ chart.pie3|safe }}

diff --git a/common/templates/includes/sidebar.html b/common/templates/includes/sidebar.html
@@ -15,7 +15,7 @@
         <ul class="nav" id="side-menu">
             {% if perms.sql.menu_dashboard %}
                 <li>
-                    <a href="/dashboard/"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
+                    <a href="/dashboard/"><i class="fa fa-dashboard fa-fw"></i> 控制面板</a>
                 </li>
             {% endif %}
 

diff --git a/sql/templates/sqlanalyze.html b/sql/templates/sqlanalyze.html
@@ -3,11 +3,11 @@
 {% block content %}
     <div class="row clearfix">
         <div class="col-md-12">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    分析选项
+            <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                    <h6 class="m-0">分析选项</h6>
                 </div>
-                <div class="panel-body form-inline">
+                <div class="card-body">
                     <div class="form-group">
                         <input id="sql-upload" name="sql-upload" accept=".sql,.xml" type="file" class="file-loading">
                     </div>
@@ -30,21 +30,19 @@
                                onclick="analyze()"/>
                     </div>
                 </div>
-            </div>
-        </div>
-        <div class="col-md-12 column">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    SQL列表
+           </div>
+
+            <div class="card shadow mb-4">
+                <div class="card-header py-3">
+                    <h6 class="m-0">SQL列表</h6>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                     <div class="table-responsive">
                         <table id="analyze-sql" data-toggle="table" class="table table-striped table-hover"
                                style="table-layout:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></table>
                     </div>
                 </div>
-            </div>
-        </div>
+           </div>
     </div>
     <!-- 分析报告-->
     <div class="modal fade" id="reports">

diff --git a/sql/templates/sqlquery.html b/sql/templates/sqlquery.html
@@ -45,26 +45,28 @@ <h4 class="modal-title text-danger">收藏语句</h4>
     </div>
     <div class="row clearfix">
         <div class="col-md-12">
-            <div class="panel panel-default">
-                <div class="panel-heading form-inline">
+            <div class="card shadow mb-4">
+                <div class="card-header py3">
                     SQL查询
-                    <select id="favorites" name="favorites"
-                            class="form-control selectpicker"
-                            data-live-search="true" data-live-search-placeholder="搜索"
-                            title="常用查询"
-                            required>
-                        {% for sql in favorites %}
-                            <option value={{ sql.id }}>{{ sql.alias }}</option>
-                        {% endfor %}
-                    </select>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                     <form id="form-sqlquery" action="/sqlquery/" method="post" class="form-horizontal" role="form">
                         {% csrf_token %}
                         <div class="col-md-9 column">
                             <pre id="sql_content_editor" class="ace_editor " style="min-height:350px"></pre>
                         </div>
                         <div class="col-md-3 column">
+                            <div class="form-group">
+                                <select id="favorites" name="favorites"
+                                        class="form-control selectpicker"
+                                        data-live-search="true" data-live-search-placeholder="搜索"
+                                        title="常用查询"
+                                        required>
+                                    {% for sql in favorites %}
+                                        <option value={{ sql.id }}>{{ sql.alias }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
                             <div class="form-group">
                                 <select id="instance_name" name="instance_name"
                                         class="selectpicker show-tick form-control bs-select-hidden"
@@ -115,39 +117,45 @@ <h4 class="modal-title text-danger">收藏语句</h4>
                             <div class="form-group">
                                 <input id="btn-format" type="button" class="btn btn-info" value="美化"/>
                                 <input id="btn-explain" type="button" class="btn btn-warning" value="执行计划"/>
-                                <input id="btn-sqlquery" type="button" class="btn btn-success" value="SQL查询"/>
+                                <button id="btn-sqlquery-spinner" class="btn btn-success hidden" type="button" disabled>
+                                  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+                                  <span role="status">Loading...</span>
+                                </button>
+                                <button id="btn-sqlquery" type="button" class="btn btn-success"><i class="fa fa-flash text-white"></i> SQL查询</button>
+                            </div>
+                            <div class="text-primary">
+                                <ul class="text-xs p-0">
+                                    <li>支持注释行，可选择指定语句执行，默认执行第一条;</li>
+                                    <li>查询结果行数限制见权限管理，会选择查询涉及表的最小limit值。</li>
+                                </ul>
                             </div>
-                        </div>
-                        <div class="text-info">
-                            <li>支持注释行，可选择指定语句执行，默认执行第一条;</li>
-                            <li>查询结果行数限制见权限管理，会选择查询涉及表的最小limit值</li>
                         </div>
                     </form>
                 </div>
             </div>
         </div>
         <div class="col-md-12 column">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <div class="card shadow mb-4">
+                <div class="card-header py3">
                     查询结果 <span style="color: red">
                         <small id="seconds_behind_master"></small>
                     </span>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                     <!-- Nav tabs -->
                     <ul id="nav-tabs" class="nav nav-tabs" role="tablist">
                         <li class="active" id="sqllog_tab">
                             <a href="#sql_log_result" role="tab" data-toggle="tab">查询历史</a>
                         </li>
-                        <button class="btn btn-default btn-sm pull-right" onclick="tab_remove()">
-                            <span class="glyphicon glyphicon-minus"></span>
-                        </button>
-                        <button class="btn btn-default btn-sm pull-right" onclick="tab_add()">
-                            <span class="glyphicon glyphicon-plus"></span>
-                        </button>
+<!--                        <button class="btn btn-default btn-sm pull-right" onclick="tab_remove()">-->
+<!--                            <span class="glyphicon glyphicon-minus"></span>-->
+<!--                        </button>-->
+<!--                        <button class="btn btn-default btn-sm pull-right" onclick="tab_add()">-->
+<!--                            <span class="glyphicon glyphicon-plus"></span>-->
+<!--                        </button>-->
                     </ul>
                     <!-- Tab panes -->
-                    <div id="tab-content" class="form-group tab-content">
+                    <div id="tab-content" class="form-group tab-content mt-3">
                         <div id="redis_help" role="tabpanel"
                              class="form-group tab-pane fade in table-responsive">
                             <div class="col-sm-12">
@@ -943,6 +951,8 @@ <h4 class="modal-title text-danger">收藏语句</h4>
 
         //将数据通过ajax提交给后端进行检查
         function sqlquery(sql) {
+            $('#btn-sqlquery-spinner').removeClass('hidden')
+            $('#btn-sqlquery').addClass('hidden')
             var optgroup = $('#instance_name :selected').parent().attr('label');
             var select_sqlContent = editor.session.getTextRange(editor.getSelectionRange());
             if (select_sqlContent) {
@@ -994,8 +1004,8 @@ <h4 class="modal-title text-danger">收藏语句</h4>
                     limit_num: $("#limit_num").val()
                 },
                 complete: function () {
-                    $('input[type=button]').removeClass('disabled');
-                    $('input[type=button]').prop('disabled', false);
+                    $('#btn-sqlquery').removeClass('hidden')
+                    $('#btn-sqlquery-spinner').addClass('hidden')
                     optgroup_control();
                 },
                 success: function (data) {
@@ -1010,8 +1020,6 @@ <h4 class="modal-title text-danger">收藏语句</h4>
 
         function dosqlquery() {
             if (sqlquery_validate()) {
-                $('input[type=button]').addClass('disabled');
-                $('input[type=button]').prop('disabled', true);
                 sqlquery();
             }
         }

diff --git a/sql/templates/sqlworkflow.html b/sql/templates/sqlworkflow.html
@@ -39,8 +39,7 @@
         <div class="form-group ">
             <button id="btn_add" type="button" class="btn btn-success"
                     onclick="window.location.href='/submitsql/'">
-                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
-                提交SQL
+                <i class="fa fa-plus text-white"></i> 提交SQL
             </button>
         </div>
     </div>