实现编辑实例备注信息

README.md

@@ -44,6 +44,7 @@
 ## 未来计划
 
 >* 增加计费功能
+>* 增加计算资源变配功能
 >* 增加过期资源自动回收机制
 >* 增加模板上传功能
 >* 日志处理机制

api/guest.py

@@ -54,7 +54,7 @@ def r_create():
         Rules.MEMORY.value,
         Rules.OS_TEMPLATE_ID.value,
         Rules.QUANTITY.value,
-        Rules.NAME.value,
+        Rules.REMARK.value,
         Rules.PASSWORD.value,
         Rules.LEASE_TERM.value
     ]

templates/guest_create.html

@@ -172,7 +172,7 @@
                             <div class="row form-group">
                                 <label class="col-sm-2 control-label">实例名称：</label>
                                 <div class="col-sm-6">
-                                    <input id="name" name="name" type="text" title="实例名称" class="form-control">
+                                    <input id="remark" name="remark" type="text" title="实例名称" class="form-control">
                                 </div>
                             </div>
                         </div>

templates/guest_show.html

@@ -36,6 +36,11 @@
             border-width: 1px 0 0 0;
         }
 
+        .btn,
+        .form-control,
+        .modal-content {
+            border-radius: 0;
+        }
     </style>
 
 {% endblock head %}
@@ -104,6 +109,10 @@
             $('.add-transition').addClass(transAttr);
         });
 
+        $('#edit_remark_modal').on('show.bs.modal', function (me) {
+            $('#instance_uuid').val($(me.relatedTarget).parent().parent().prev().prev().text());
+            $('#edit_remark').val($(me.relatedTarget).prev().text());
+        })
     });
 
     function refresh() {
@@ -116,15 +125,34 @@
         }
         window.location.href=cur_url;
     }
-    /* Datatable row highlight */
 
-    /*
-    $(document).ready(function() {
-        $('#datatable-row-highlight tbody').on( 'click', 'tr', function () {
-            $(this).toggleClass('tr-selected');
-        } );
-    });
-    */
+    function row_onmouseover(me) {
+        $(me).find(".edit_remark_trigger").css('display','inline-flex');
+    }
+
+    function row_onmouseout(me) {
+        $(me).find(".edit_remark_trigger").css('display','none');
+    }
+
+    function remark_update(me) {
+        var uuid = $('#instance_uuid').val();
+        var remark = $('#edit_remark').val();
+        $('#edit_remark_modal').modal('hide');
+        $.ajax({
+            url : '/api/guest/' + uuid,
+            type : 'PATCH',
+            contentType: "application/json; charset=utf-8",
+            data : JSON.stringify({
+                remark: remark
+            }),
+            error : function() {
+                insert_warning_window($('#header'), '<strong>更新用户信失败, 请联系管理员! </strong>');
+            },
+            success : function() {
+                $('#guest_list tbody').find('td:contains(' + uuid + ')').next().next().find('label').text(remark)
+            }
+        });
+    }
 </script>
 <div class="panel">
     <div class="panel-body">
@@ -136,7 +164,7 @@
                 <div class="row" style="padding: 10px 10px 10px 0; width: 100%;">
                     <div class="col-sm-12" style="padding-right: 0;">
                         <div id="datatable-row-highlight_filter" class="dataTables_filter" style="display: inline-block;">
-                            <input id="content_search" type="search" class="form-control" placeholder="模糊搜索..." value="{%- if keyword -%} {{ keyword }} {%- endif -%}" style="margin-left: 0;">
+                            <input id="content_search" type="search" class="form-control" placeholder="模糊搜索..." value="{%- if keyword -%} {{ keyword }} {%- endif -%}" style="margin-left: 0; border-radius: 0;">
                         </div>
                         <div class="pull-right">
                             <button class="btn btn-default" onclick="refresh()" style="border-radius: 0;"><span class="glyph-icon icon-elusive-arrows-cw"></span></button>
@@ -148,8 +176,9 @@
                        style="width: 100%; margin-bottom: 0; border-bottom-width: 0;">
                 <thead>
                 <tr role="row">
+                    <th style="display: none;">UUID</th>
                     <th><input class="all_selector" title="选取所有" type="checkbox"></th>
-                    <th>名称</th>
+                    <th width="180px;">名称</th>
                     <th></th>
                     <th>状态</th>
                     <th>计算节点</th>
@@ -162,12 +191,19 @@
                 </thead>
                 <tbody>
                 {% for item in guests_ret.data %}
-                <tr role="row" class="odd">
+                <tr role="row" class="odd" onmouseover="row_onmouseover(this);" onmouseout="row_onmouseout(this);">
+                    <td style="display: none;">{{ item.uuid }}</td>
                     <td><input title="选中" type="checkbox"></td>
                     <td>
-                        <a href="javascript:;">{{ item.name }}</a>
-                        <br />
-                        {{ item.remark }}
+                        <div>
+                            <a href="javascript:;">{{ item.name }}</a>
+                        </div>
+                        <div>
+                            <label style="display: inline-block;">{{ item.remark }}</label>
+                            <a href="javascript:;" class="edit_remark_trigger" data-toggle="modal" data-target="#edit_remark_modal" style="display: none; float: right;">
+                                <span class="glyph-icon icon-elusive-pencil" style="width: 20px; height: 20px; margin-left: 10px; border-radius: 0; border: 1px solid rgb(220, 233, 255); background-color: #ffffff;"></span>
+                            </a>
+                        </div>
                     </td>
                     <td><span class="{{ os_template_mapping_by_id[item.os_template_id].icon }}"></span></td>
                     <td>{{ format_guest_status(item.status)|safe }}</td>
@@ -257,4 +293,22 @@
         </div>
     </div>
 </div>
+
+<div class="modal" id="edit_remark_modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-sm">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">编辑实例名称：</h4>
+            </div>
+            <div class="modal-body">
+                <input id="instance_uuid" title="实例 UUID" class="form-control" name="uuid" hidden>
+                <input id="edit_remark" title="实例名称" class="form-control" name="remark">
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-sm btn-primary" onclick="remark_update();">确定</button>
+                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">取消</button>
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock content %}

templates/layout.html

@@ -366,6 +366,7 @@
         <script type="text/javascript" src="{{ url_for('static', filename='widgets/theme-switcher/themeswitcher.js') }}"></script>
         <!-- Chosen -->
         <script type="text/javascript" src="{{ url_for('static', filename='widgets/chosen/chosen.js') }}"></script>
+        <script type="text/javascript" src="{{ url_for('static', filename='widgets/chosen/chosen-demo.js') }}"></script>
         <!-- Touchspin -->
         <script type="text/javascript" src="{{ url_for('static', filename='widgets/touchspin/touchspin.js') }}"></script>
     </div>

views/guest.py

@@ -1,5 +1,7 @@
 #!/usr/bin/env python
 # -*- coding: utf-8 -*-
+
+
 import json
 from flask import Blueprint, render_template, url_for, request
 import requests
@@ -95,7 +97,7 @@ def create():
         os_template_id = request.form.get('os_template_id')
         quantity = request.form.get('quantity')
         password = request.form.get('password')
-        name = request.form.get('name')
+        remark = request.form.get('remark')
 
         if not isinstance(ability, basestring):
             pass
@@ -112,7 +114,7 @@ def create():
             "memory": int(memory),
             "os_template_id": int(os_template_id),
             "quantity": int(quantity),
-            "name": name,
+            "remark": remark,
             "password": password,
             "lease_term": 100
         }