fix bug 923; fix bug 940
Change-Id: I2b0175af9a8ff80ff4d20316739646b69e8dcba1
Signed-off-by: lombardofr <lombardo@everyup.it>
diff --git a/vimhandler/template/modal/vim_create.html b/vimhandler/template/modal/vim_create.html
new file mode 100644
index 0000000..bc76721
--- /dev/null
+++ b/vimhandler/template/modal/vim_create.html
@@ -0,0 +1,108 @@
+<!--
+Copyright 2019 EveryUP Srl
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<div class="modal" id="modal_new_vim" xmlns="http://www.w3.org/1999/html">
+ <div class="modal-dialog modal-lg">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span></button>
+ <h4 class="modal-title">New VIM</h4>
+ </div>
+ <form id="formCreateVIM" action='{% url "vims:create" %}'
+ class="form-horizontal"
+ method="post" enctype="multipart/form-data">
+ {% csrf_token %}
+ <div class="modal-body" id="modal_new_vim_body">
+ <div class="form-group">
+ <label for="vim_name" class="col-sm-2">Name *</label>
+ <div class="col-sm-3">
+ <input class="form-control" id="vim_name" name="name" placeholder="Name" required>
+ </div>
+
+ <label for="vim_type" class="col-sm-2">Type *</label>
+ <div class="col-sm-3">
+ <select id="vim_type" name="vim_type" class="form-control">
+ <option value="openvim">OpenVIM</option>
+ <option value="openstack">Openstack</option>
+ <option value="vmware">VMware vCD</option>
+ <option value="aws">AWS</option>
+ <option value="opennebula">OpenNebula</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label for="vim_url" class="col-sm-2">URL*</label>
+ <div class="col-sm-3">
+ <input type="url" class="form-control" id="vim_url" name="vim_url"
+ placeholder="VIM URL" required>
+ </div>
+ <label for="vim_tenant_name" class="col-sm-2">Tenant name*</label>
+ <div class="col-sm-3">
+ <input class="form-control" id="vim_tenant_name" name="vim_tenant_name"
+ placeholder="Tenant name" required>
+ </div>
+
+ </div>
+
+ <div class="form-group">
+ <label for="vim_user" class="col-sm-2">Username*</label>
+ <div class="col-sm-3">
+ <input class="form-control" id="vim_user" name="vim_user"
+ placeholder="VIM Username" required>
+ </div>
+ <label for="vim_password" class="col-sm-2">Password*</label>
+ <div class="col-sm-3">
+ <input type="password" class="form-control" id="vim_password"
+ name="vim_password" placeholder="VIM Password" required>
+ </div>
+ </div>
+ <div class="form-group">
+
+ <label for="vim_description" class="col-sm-2">Description</label>
+ <div class="col-sm-3">
+ <input class="form-control" id="vim_description" name="description"
+ placeholder="Description" >
+ </div>
+ </div>
+ <div class="form-group">
+ <label for="config" class="col-sm-3 control-label">Config </label>
+ <div class="col-sm-6">
+ <textarea class="form-control" id="config" name="config" placeholder="Yaml config"
+ rows="3"></textarea>
+ <p class="help-block">Or load from file</p>
+ <input type="file" id="config_file" name="config_file">
+ </div>
+ </div>
+
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button>
+ <button class="btn btn-primary"
+ data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Creating..."
+ id="create_new_vim">Create
+ </button>
+
+ </div>
+ </form>
+ </div>
+ <!-- /.modal-content -->
+ </div>
+ <!-- /.modal-dialog -->
+</div>
+
+
+
diff --git a/vimhandler/template/vim_create.html b/vimhandler/template/vim_create.html
deleted file mode 100644
index caf32b7..0000000
--- a/vimhandler/template/vim_create.html
+++ /dev/null
@@ -1,231 +0,0 @@
-<!--
-Copyright 2019 ETSI
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-{% extends "base.html" %}
-{% load get %}
-{% load staticfiles %}
-
-
-{% block head_block %}
- {{ block.super }}
-
-{% endblock %}
-{% block title_header_big %}
- {{ block.super }}
-{% endblock %}
-{% block left_sidebar %}
-
- {% include 'osm/osm_project_left_sidebar.html' %}
-
-{% endblock %}
-
-
-{% block breadcrumb_body %}
- {{ block.super }}
- <li><a href="{% url 'vims:list' %}">VIMS</a></li>
-{% endblock %}
-
-{% block content_body %}
- {{ block.super }}
-
- <div class="row">
- <div class="col-md-12">
- <form action='{% url "vims:create" %}' method="post">
- {% csrf_token %}
- <div class="box">
- <div class="box-header with-border">
- <h3 class="box-title">NEW VIM ACCOUNT</h3>
- <div class="box-tools">
-
- </div>
- </div>
- <div class="box-body">
-
- <div class="row">
- <div class="col-lg-6">
- <div class="row">
- <div class="form-group">
- <label for="name" class="col-sm-3 control-label">Name*</label>
- <div class="col-sm-6 input-group input-group-sm">
- <input class="form-control" id="name" name="name" placeholder="VIM name"
- required>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="form-group">
- <label for="vim_type" class="col-sm-3 control-label">Type*</label>
- <div class="col-sm-6 input-group input-group-sm">
- <select id="vim_type" name="vim_type" class="form-control"
- onchange="toggleConfig(this)">
- <option value="openvim">OpenVIM</option>
- <option value="openstack">Openstack</option>
- <option value="vmware">VMware vCD</option>
- <option value="aws">AWS</option>
- <option value="opennebula">OpenNebula</option>
- </select>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="form-group">
- <label for="vim_url" class="col-sm-3 control-label">VIM URL*</label>
- <div class="col-sm-6 input-group input-group-sm">
- <input type="url" class="form-control" id="vim_url" name="vim_url"
- placeholder="VIM URL" required>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="form-group">
- <label for="vim_user" class="col-sm-3 control-label">VIM Username*</label>
- <div class="col-sm-6 input-group input-group-sm">
- <input class="form-control" id="vim_user" name="vim_user"
- placeholder="VIM Username" required>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="form-group">
- <label for="vim_password" class="col-sm-3 control-label">VIM Password*</label>
- <div class="col-sm-6 input-group input-group-sm">
- <input type="password" class="form-control" id="vim_password"
- name="vim_password" placeholder="VIM Password" required>
- </div>
- </div>
- </div>
-
-
-
-
- </div>
- <div class="col-lg-6">
- <div class="row">
- <div class="form-group">
- <label for="vim_tenant_name" class="col-sm-3 control-label">Tenant name*</label>
- <div class="col-sm-6 input-group input-group-sm">
- <input class="form-control" id="vim_tenant_name" name="vim_tenant_name"
- placeholder="Tenant name" required>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="form-group">
- <label for="description" class="col-sm-3 control-label">Description</label>
- <div class="col-sm-6 input-group input-group-sm">
- <input class="form-control" id="description" name="description"
- placeholder="Description">
- </div>
- </div>
- </div>
- <div class="row">
- <div class="form-group">
- <label for="schema_type" class="col-sm-3 control-label">Schema Type</label>
- <div class="col-sm-6 input-group input-group-sm">
- <input class="form-control" id="schema_type" name="schema_type"
- placeholder="Schema Type">
- </div>
- </div>
- </div>
- <div class="row">
- <div class="form-group">
- <label for="schema_version" class="col-sm-3 control-label">Schema
- Version</label>
- <div class="col-sm-6 input-group input-group-sm">
- <input class="form-control" id="schema_version" name="schema_version"
- placeholder="Schema Version">
- </div>
- </div>
- </div>
- </div>
-
-
- </div>
-
- <div id="config" class="panel box">
-
- <a data-toggle="collapse" data-parent="#accordion" href="#config_collapse"
- aria-expanded="false" class="collapsed" style="color:black">
- <h5 class="box-title" style="background-color:#f7f7f7; text-align: center;">
- CONFIG PARAMETERS
- </h5>
- </a>
-
-
- <div id="config_collapse" class="panel-collapse collapse ">
- {% include 'config/openvim.html' %}
- {% include 'config/openstack.html' %}
- {% include 'config/vmware.html' %}
- {% include 'config/aws.html' %}
- {% include 'config/opennebula.html' %}
-
- <div class="row">
- <div class="col-lg-6">
- <div class="row ">
- <div class="form-group">
- <label for="additional_conf" class="col-sm-4 control-label">Additional configuration</label>
- <div class="col-sm-6 input-group input-group-sm">
- <input class="form-control" id="additional_conf"
- name="additional_conf"
- placeholder='{ "key1": [...], "key2": {}, "key3": "" }'>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
-
- </div>
- <div class="box-footer">
- <button onclick="location.href='{% url 'vims:list' %}'" class="btn btn-default pull-left">Back to
- VIM Accounts
- </button>
- <button class="btn btn-primary pull-right">Create</button>
- </div>
- </div>
- </form>
- </div>
-
- </div>
-{% endblock %}
-
-{% block resource_block %}
- {{ block.super }}
- <!-- Utility JS -->
-
- <script>
- $(document).ready(function () {
- toggleConfig(document.getElementById("vim_type"));
- });
- function toggleConfig(element){
- $('.config-vim').hide();
- $('.config-input').prop('disabled', true);
- var type_selected = element.options[element.selectedIndex].value;
- console.log("type selected: " + type_selected);
- var div_config_index = type_selected + '_config_collapse';
- $('#'+div_config_index).show();
- $('#'+div_config_index+' .config-input').prop('disabled', false);
- }
- </script>
-
-{% endblock %}
-
-{% block footer %}
- {% include "footer.html" %}
-{% endblock %}
\ No newline at end of file
diff --git a/vimhandler/template/vim_list.html b/vimhandler/template/vim_list.html
index b7bc224..79e0e1d 100644
--- a/vimhandler/template/vim_list.html
+++ b/vimhandler/template/vim_list.html
@@ -40,6 +40,7 @@
{% block content_body %}
{{ block.super }}
+ {% include 'modal/vim_create.html' %}
{% include 'modal/vim_details.html' %}
{% csrf_token %}
<div class="row">
@@ -49,8 +50,11 @@
<div class="box-header with-border">
<h3 class="box-title">Registered VIM</h3>
<div class="box-tools">
- <a href='{% url "vims:create" %}' class="btn btn-block btn-primary btn-sm"><i
- class="fa fa-plus"></i><span> New VIM</span></a>
+ <button type="button" class="btn btn-default" data-container="body"
+ data-toggle="tooltip" data-placement="top" title="New VIM"
+ onclick="javascript:openModalCreateVIM()">
+ <i class="fa fa-plus"></i> <span> New VIM</span>
+ </button>
</div>
</div>
<div class="box-body">
@@ -80,113 +84,11 @@
{{ block.super }}
<script src="/static/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
+ <script src="/static/src/vimhandler/vim_list.js"></script>
<script>
- $(document).ready( function () {
- var table = $('#vims_table').DataTable({
- responsive: true,
- "ajax": {
- "url": "/vims/list/",
- "dataSrc": function (json) {
- return json['datacenters'];
- },
- statusCode: {
- 401: function () {
- console.log("no auth");
- moveToLogin(window.location.pathname);
- }
- },
- "error": function (hxr, error, thrown) {
- console.log(hxr)
- console.log(thrown)
- console.log(error);
- }
+ var table;
- },
- "columns": [
- {
- "render": function (data, type, row) {
- return row["name"];
- },
- "targets": 0
- },
- {
- "render": function (data, type, row) {
- return row['_id'];
- },
- "targets": 1
- },
- {
- "render": function (data, type, row) {
- return row["vim_type"];
- },
- "targets": 2
- },
- {
- "render": function (data, type, row) {
- return row["_admin"]['operationalState'];
- },
- "targets": 3
- },
- {
- "render": function (data, type, row) {
- return row["_admin"]['description'] || '';
- },
- "targets": 4
- },
- {
- "render": function (data, type, row) {
- return '<div class="btn-group"><button type="button" class="btn btn-default" ' +
- 'onclick="location.href=\'/vims/'+row['_id']+'\'" data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
- '<i class="fa fa-info"></i>' +
- '</button> ' +
- '<button type="button" class="btn btn-default"' +
- 'onclick="javascript:deleteVim(\''+row['_id']+'\', \''+ row["name"] +'\')" data-toggle="tooltip" data-placement="top" data-container="body" title="Delete">' +
- '<i class="far fa-trash-alt" ></i></button></div>';
- },
- "targets": 5,
- "orderable": false
- }
- ]
- });
-
- setInterval(function () {
- table.ajax.reload();
- }, 10000);
- });
- </script>
- <script>
-
- function deleteVim(vim_id, vim_name) {
- var url = "/vims/"+vim_id+"/delete";
- bootbox.confirm("Are you sure want to delete " + vim_name + "?", function (result) {
- if (result) {
- var dialog = bootbox.dialog({
- message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
- closeButton: true
- });
- $.ajax({
- url: url,
- type: 'GET',
- dataType: "json",
- contentType: "application/json;charset=utf-8",
- success: function (result) {
- if (result['error'] == true) {
- dialog.modal('hide');
- bootbox.alert("An error occurred.");
- }
- else {
- dialog.modal('hide');
- location.reload();
- }
- },
- error: function (error) {
- dialog.modal('hide');
- bootbox.alert("An error occurred.");
- }
- });
- }
- })
- }
+
</script>
{% endblock %}