实现页面创建虚拟机实例

templates/guest_create.html

@@ -79,58 +79,58 @@
                 </span>
             </a>
             <div class="example-box-wrapper">
-                <form class="form-horizontal bordered-row">
+                <form class="form-horizontal bordered-row" action="/guests/create" method="post">
                     <div class="form-group">
                         <label class="col-sm-2 control-label"><span class="glyph-icon icon-elusive-gauge"></span>&nbsp;&nbsp;运算能力</label>
                         <div class="col-sm-10">
                             <div class="btn-ability-line" data-toggle="buttons">
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">1&nbsp;&nbsp;核&nbsp;&nbsp;1&nbsp;&nbsp;GB
+                                    <input title="1 CPU 1GB Memory" name="ability" type="radio" value="1c1g">1&nbsp;&nbsp;核&nbsp;&nbsp;1&nbsp;&nbsp;GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">1&nbsp;&nbsp;核&nbsp;&nbsp;2&nbsp;&nbsp;GB
+                                    <input title="1 CPU 2GB Memory" name="ability" type="radio" value="1c2g">1&nbsp;&nbsp;核&nbsp;&nbsp;2&nbsp;&nbsp;GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">2&nbsp;&nbsp;核&nbsp;&nbsp;2&nbsp;&nbsp;GB
+                                    <input title="2 CPU 2GB Memory" name="ability" type="radio" value="2c2g">2&nbsp;&nbsp;核&nbsp;&nbsp;2&nbsp;&nbsp;GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">2&nbsp;&nbsp;核&nbsp;&nbsp;4&nbsp;&nbsp;GB
+                                    <input title="2 CPU 4GB Memory" name="ability" type="radio" value="2c4g">2&nbsp;&nbsp;核&nbsp;&nbsp;4&nbsp;&nbsp;GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">4&nbsp;&nbsp;核&nbsp;&nbsp;4&nbsp;&nbsp;GB
+                                    <input title="4 CPU 4GB Memory" name="ability" type="radio" value="4c4g">4&nbsp;&nbsp;核&nbsp;&nbsp;4&nbsp;&nbsp;GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">4&nbsp;&nbsp;核&nbsp;&nbsp;8&nbsp;&nbsp;GB
+                                    <input title="4 CPU 8GB Memory" name="ability" type="radio" value="4c8g">4&nbsp;&nbsp;核&nbsp;&nbsp;8&nbsp;&nbsp;GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">8&nbsp;&nbsp;核&nbsp;&nbsp;8&nbsp;&nbsp;GB
+                                    <input title="8 CPU 8GB Memory" name="ability" type="radio" value="8c8g">8&nbsp;&nbsp;核&nbsp;&nbsp;8&nbsp;&nbsp;GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">8&nbsp;&nbsp;核&nbsp;&nbsp;16GB
+                                    <input title="8 CPU 16GB Memory" name="ability" type="radio" value="8c16g">8&nbsp;&nbsp;核&nbsp;&nbsp;16GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">1&nbsp;&nbsp;核&nbsp;&nbsp;16GB
+                                    <input title="1 CPU 16GB Memory" name="ability" type="radio" value="1c16g">1&nbsp;&nbsp;核&nbsp;&nbsp;16GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">4&nbsp;&nbsp;核&nbsp;&nbsp;32GB
+                                    <input title="4 CPU 32GB Memory" name="ability" type="radio" value="4c32g">4&nbsp;&nbsp;核&nbsp;&nbsp;32GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">4&nbsp;&nbsp;核&nbsp;&nbsp;64GB
+                                    <input title="4 CPU 64GB Memory" name="ability" type="radio" value="4c64g">4&nbsp;&nbsp;核&nbsp;&nbsp;64GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">8&nbsp;&nbsp;核&nbsp;&nbsp;64GB
+                                    <input title="8 CPU 64GB Memory" name="ability" type="radio" value="8c64g">8&nbsp;&nbsp;核&nbsp;&nbsp;64GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">16核&nbsp;&nbsp;16GB
+                                    <input title="16 CPU 16GB Memory" name="ability" type="radio" value="16c16g">16核&nbsp;&nbsp;16GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">24核&nbsp;&nbsp;24GB
+                                    <input title="24 CPU 24GB Memory" name="ability" type="radio" value="24c24g">24核&nbsp;&nbsp;24GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">32核&nbsp;&nbsp;32GB
+                                    <input title="32 CPU 32GB Memory" name="ability" type="radio" value="32c32g">32核&nbsp;&nbsp;32GB
                                 </a>
                                 <a href="#" class="btn btn-default btn-ability">
-                                    <input name="radio-toggle-1" type="radio">64核&nbsp;&nbsp;64GB
+                                    <input title="64 CPU 64GB Memory" name="ability" type="radio" value="64c64g">64核&nbsp;&nbsp;64GB
                                 </a>
                             </div>
                         </div>
@@ -138,11 +138,11 @@
                     <div class="form-group">
                         <label class="col-sm-2 control-label"><span class="glyph-icon icon-elusive-inbox-alt"></span>&nbsp;&nbsp;系统模板</label>
                         <div class="col-sm-6">
-                            <select id="os_template" name="os_template" class="chosen-select" data-placeholder="请选择系统模板...">
-                                    <option></option>
-                                    {% for item in os_template_data %}
-                                    <option value="{{ item.id }}">{{ item.label }}</option>
-                                    {% endfor %}
+                            <select id="os_template" name="os_template_id" class="chosen-select" data-placeholder="请选择系统模板...">
+                                <option></option>
+                                {% for item in os_template_data %}
+                                <option value="{{ item.id }}">{{ item.label }}</option>
+                                {% endfor %}
                             </select>
                         </div>
                     </div>
@@ -150,7 +150,7 @@
                     <div class="form-group">
                         <label class="col-sm-2 control-label"><span class="glyph-icon icon-elusive-th-list"></span>&nbsp;&nbsp;数量</label>
                         <div class="col-sm-6">
-                            <input id="quantity" class="form-control" type="text" value="1" name="quantity">
+                            <input id="quantity" title="实例数量" class="form-control" type="text" value="1" name="quantity">
                         </div>
                     </div>
                     <div class="form-group">
@@ -159,20 +159,20 @@
                             <div class="row form-group">
                                 <label class="col-sm-2 control-label">登录密码：</label>
                                 <div class="col-sm-6">
-                                    <input type="password" class="form-control" id="password">
+                                    <input type="password" name="password" title="实例密码" class="form-control" id="password">
                                 </div>
                             </div>
                             <div class="row form-group">
                                 <label class="col-sm-2 control-label">确认密码：</label>
                                 <div class="col-sm-6">
-                                    <input type="password" class="form-control" id="confirm_password">
+                                    <input type="password" title="确认实例密码" class="form-control" id="confirm_password">
                                 </div>
                             </div>
                             <div style="height: 10px;"></div>
                             <div class="row form-group">
                                 <label class="col-sm-2 control-label">实例名称：</label>
                                 <div class="col-sm-6">
-                                    <input type="text" class="form-control" id="name">
+                                    <input id="name" name="name" type="text" title="实例名称" class="form-control">
                                 </div>
                             </div>
                         </div>

templates/success.html

@@ -0,0 +1,46 @@
+{% extends "layout.html" %}
+{% block title %} 成功 {% endblock %}
+{% block head %}
+    {{ super() }}
+<style type="text/css">
+    .alert,
+    .panel {
+        border-radius: 0;
+    }
+</style>
+{% endblock head %}
+{% block body %}
+<script type="text/javascript">
+     $(document).ready(function() {
+         setTimeout(function () {
+             window.location.href="{{ go_back_url }}";
+         }, "{{ timeout }}");
+     });
+</script>
+
+<div id="page-title">
+</div>
+
+<div class="row" style="margin-top: 100px;">
+    <div class="col-md-3"></div>
+    <div class="col-md-6">
+        <div class="panel">
+            <div class="panel-body">
+                <h3 class="title-hero" style="font-size: 24px;">{{ title }}</h3>
+                <div class="example-box-wrapper">
+                    <div class="alert alert-success" style="padding: 30px;">
+                        <div class="bg-green alert-icon">
+                            <i class="glyph-icon icon-check"></i>
+                        </div>
+                        <div class="alert-content">
+                            <h4 class="alert-title" style="font-size: 16px;">{{ message_title }}</h4>
+                            <p>{{ message }} 也可以<a href="{{ go_back_url }}" title="点击这里">点击这里</a>进行直接跳转。</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-3"></div>
+</div>
+{% endblock body %}

views/guest.py

@@ -4,6 +4,7 @@ import json
 from flask import Blueprint, render_template, url_for, request
 import requests
 from math import ceil
+import re
 
 
 __author__ = 'James Iter'
@@ -88,8 +89,50 @@ def show():
 
 def create():
     host_url = request.host_url.rstrip('/')
-    os_template_url = host_url + url_for('api_os_templates.r_get_by_filter')
-    os_template_ret = requests.get(url=os_template_url)
-    os_template_ret = json.loads(os_template_ret.content)
 
-    return render_template('guest_create.html', os_template_data=os_template_ret['data'])
+    if request.method == 'POST':
+        ability = request.form.get('ability')
+        os_template_id = request.form.get('os_template_id')
+        quantity = request.form.get('quantity')
+        password = request.form.get('password')
+        name = request.form.get('name')
+
+        if not isinstance(ability, basestring):
+            pass
+
+        m = re.search('^(\d)c(\d)g$', ability.lower())
+        if m is None:
+            pass
+
+        cpu = m.groups()[0]
+        memory = m.groups()[1]
+
+        payload = {
+            "cpu": int(cpu),
+            "memory": int(memory),
+            "os_template_id": int(os_template_id),
+            "quantity": int(quantity),
+            "name": name,
+            "password": password,
+            "lease_term": 100
+        }
+
+        url = host_url + '/api/guest'
+        headers = {'content-type': 'application/json'}
+        r = requests.post(url, data=json.dumps(payload), headers=headers)
+        j_r = json.loads(r.content)
+        return render_template('success.html', go_back_url='/guests', timeout=10000, title='提交成功',
+                               message_title='创建实例的请求已被接受',
+                               message='您所提交的资源正在创建中。根据所提交资源的大小，需要等待几到十几分钟。页面将在10秒钟后自动跳转到实例列表页面！')
+
+    else:
+        os_template_url = host_url + url_for('api_os_templates.r_get_by_filter')
+        os_template_ret = requests.get(url=os_template_url)
+        os_template_ret = json.loads(os_template_ret.content)
+        return render_template('guest_create.html', os_template_data=os_template_ret['data'])
+
+
+def success():
+    return render_template('success.html', go_back_url='/guests', timeout=10000, title='提交成功',
+                           message_title='创建实例的请求已被接受',
+                           message='您所提交的资源正在创建中。根据所提交资源的大小，需要等待几到十几分钟。页面将在10秒钟后自动跳转到实例列表页面！')

views_route_table.py

@@ -13,5 +13,6 @@ __copyright__ = '(c) 2017 by James Iter.'
 
 
 add_rule_views(guest.blueprints, '', views_func='guest.show', methods=['GET'])
-add_rule_views(guest.blueprints, '/create', views_func='guest.create', methods=['GET'])
+add_rule_views(guest.blueprints, '/create', views_func='guest.create', methods=['GET', 'POST'])
+add_rule_views(guest.blueprints, '/success', views_func='guest.success', methods=['GET'])