Add vnf, tag create & Associate Plugins

Adds support for accessing database, plugin to create tags and
vnfs and make association between them. Also adds autocomplete feature
to vnf-tag association.

Change-Id: Id55f998df68ae5e6e6fd298c6393b3500777468a
Signed-off-by: Kumar Rishabh <shailrishabh@gmail.com>

7 files changed, 494 insertions, 64 deletions

diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/add_project.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/add_project.jade
new file mode 100644
index 000000000..dde8cfe75
--- /dev/null
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/add_project.jade
@@ -0,0 +1,164 @@
+
+.search-box
+  script(src='/3rd_party/typeahead.js')
+  script(type='text/javascript', src='/javascripts/mode_edit.js')
+  .fixed-action-btn.fixed-action-btn_custom
+    a.btn-floating.btn-large.red
+      i.large.material-icons mode_edit
+    ul
+      li
+        a.btn-floating.red.tooltipped(href='#modal2', data-position='left', data-delay='50', data-tooltip='Add a TAG')
+          i.large.material-icons attach_file
+      li
+        a.btn-floating.green.tooltipped(href='#modal1', data-position='left', data-delay='50', data-tooltip='Add a VNF')
+          i.large.material-icons add
+      li
+        a.btn-floating.blue.tooltipped(href='#modal3', data-position='left', data-delay='50', data-tooltip='Add a TAG to a VNF')
+          i.large.material-icons share
+  #modal1.modal
+    .modal-content
+      h4.center
+        i.material-icons library_add
+        |         Add a VNF
+      .row
+        form#add_project_form.col.s12(action='/add_project', enctype='multipart/form-data', method='post')
+          .row.modal-form-row
+            .input-field.col.s12
+              input#vnf_name.validate(type='text', name='vnf_name')
+              label.left-align(for='vnf_name') Name
+          .row
+            .input-field.col.s12
+              input#repo_url.validate(type='text', name='repo_url')
+              label.left-align(for='repo_url') Github URL
+          .row
+            .input-field.col.s12
+              select#license
+                option(value='', name='license', disabled='', selected='') Choose the License
+                option(value='MIT') MIT
+                option(value='GPL') GPL
+                option(value='GPL_V2') GPL_V2
+                option(value='BSD') BSD
+                option(value='APACHE') APACHE
+              label License
+          .row
+            .input-field.col.s12
+              select#opnfv_indicator
+                option(value='', name='opnfv_indicator', disabled='', selected='') Choose the OPNFV Indicator
+                option(value='silver') silver
+                option(value='gold') gold
+                option(value='platinum') platinum
+              label OPNFV Indicator
+
+          .row
+            .file-field.input-field
+              .btn
+                span Photo (Optional)
+                input#file_upload(type='file', name='file_upload')
+              .file-path-wrapper
+                input.file-path.validate(type='text', name='file_url')
+
+          .row
+            .input-field.col.s12
+              input#submitter_id.validate(type='hidden', name='submitter_id', value=1)
+
+          .row
+            button#add_project_button.modal-action.modal-close.waves-effect.waves-light.btn.right
+              | Submit VNF
+              i.material-icons.right send
+  #modal2.modal
+    .modal-content
+      h4.center
+        i.material-icons library_add
+        |         Add a TAG
+      .row
+        form#add_tag_form.col.s12(action='/add_tag', method='post')
+          .row.modal-form-row
+            .input-field.col.s12
+              input#tag_name.validate(type='text', name='tag_name')
+              label.left-align(for='tag_name') Name
+          button#add_tag_button.modal-action.modal-close.waves-effect.waves-light.btn.right
+            | Submit TAG
+            i.material-icons.right send
+  #modal3.modal
+      h4.center
+        i.material-icons library_add
+        |         Add a TAG to a VNF
+      .row
+        form#add_vnf_tag_association_form.col.s12(action='/vnf_tag_association', method='post')
+
+          .row.modal-form-row.modal-form-row-custom
+            .input-field.col.s2 VNF Name
+            #scrollable-dropdown-menu.input-field.col.s4
+              input#vnf_name.typeahead(type='text', name='vnf_name')
+              //
+                label.left-align(for='tag_name') VNF Name
+            .input-field.col.s2 TAG Name
+            #scrollable-dropdown-menu.input-field.col.s4
+              input#tag_name.validate.typeahead(type='text', name='tag_name')
+              //
+                label.left-align(for='tag_name') TAG Name
+
+          button#add_vnf_tag_association_button.modal-action.modal-close.waves-effect.waves-light.btn.right
+            | Submit
+            i.material-icons.right send
+  style.
+    .select-dropdown{
+        overflow-y: auto !important;
+    }
+    .dropdown-content {
+        max-height: 200px !important;
+    }
+    .backdrop{
+       background-color: rgb(253,225,109);
+    }
+    .bg {
+    }
+    .modal-form-row-custom {
+      min-height: 200px !important;
+    }
+    #scrollable-dropdown-menu .tt-menu {
+      max-height: 150px;
+      overflow-y: auto;
+    }
+
+    .typeahead, .tt-query, .tt-hint {
+        border: 2px solid #CCCCCC;
+        border-radius: 8px 8px 8px 8px;
+        font-size: 24px;
+        height: 30px;
+        line-height: 30px;
+        outline: medium none;
+        padding: 8px 12px;
+        width: 396px;
+    }
+
+    .tt-query {
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+    }
+    .tt-hint {
+        color: #999999;
+    }
+    .tt-dropdown-menu {
+        background-color: #FFFFFF;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-radius: 8px 8px 8px 8px;
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+        margin-top: 12px;
+        padding: 8px 0;
+        width: 200px;
+    }
+    .tt-suggestion {
+        font-size: 18px;
+        line-height: 24px;
+        padding: 3px 20px;
+    }
+    .tt-suggestion.tt-cursor {
+        background-color: #0097CF;
+        color: #FFFFFF;
+    }
+    .tt-suggestion p {
+        margin: 0;
+    }
+    .tt-dropdown-menu, .gist {
+        text-align: left;
+    }
diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/index.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/index.jade
index e60c3ba26..bf0cd149e 100644
--- a/utils/test/vnfcatalogue/VNF_Catalogue/views/index.jade
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/index.jade
@@ -7,10 +7,11 @@ extends layout
   which accompanies this distribution, and is available at
   http://www.apache.org/licenses/LICENSE-2.0
 block content
+  link(rel='stylesheet', href='/stylesheets/3rd_party/bootstrap.css')
   .search-box
     h1 VNF Catalogue
     form.search-form
-      input.search-input(type='text', placeholder='Search...', id='Tags')
+      input.search-input(type='search', placeholder='Search...', id='Tags')
       .space-10
       button.search-button(type='submit', value='Search', id='Search') Search
   .content.content-height-overwrite
diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/layout.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/layout.jade
index 89142f813..33c09e338 100644
--- a/utils/test/vnfcatalogue/VNF_Catalogue/views/layout.jade
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/layout.jade
@@ -9,7 +9,6 @@ html(lang='en')
 html
     head
         title= title
-        link(rel='stylesheet', href='/stylesheets/3rd_party/bootstrap.css')
         link(rel='stylesheet', href='/3rd_party/materialize/css/materialize.css')
         script(type='text/javascript', src='https://code.jquery.com/jquery-3.1.1.min.js')
         script(src='/javascripts/global.js')
@@ -49,5 +48,7 @@ html
                   a(href='#') Sign up
                 li.signin
                   a(href='#') Sign in
+        block search
+        block add_project
         block content
 
diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/project_profile.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/project_profile.jade
new file mode 100644
index 000000000..7b37bd423
--- /dev/null
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/project_profile.jade
@@ -0,0 +1,84 @@
+extends layout
+
+//
+  Copyright (c) 2017 Kumar Rishabh and others.
+  All rights reserved. This program and the accompanying materials
+  are made available under the terms of the Apache License, Version 2.0
+  which accompanies this distribution, and is available at
+  http://www.apache.org/licenses/LICENSE-2.0
+block search
+  include search
+block content
+  .content
+    .container.container-custom
+          .carousel
+            a.carousel-item(href='#one!')
+              img(src='http://lorempixel.com/250/250/nature/1')
+            a.carousel-item(href='#two!')
+              img(src='http://lorempixel.com/250/250/nature/2')
+            a.carousel-item(href='#three!')
+              img(src='http://lorempixel.com/250/250/nature/3')
+            a.carousel-item(href='#four!')
+              img(src='http://lorempixel.com/250/250/nature/4')
+            a.carousel-item(href='#five!')
+              img(src='http://lorempixel.com/250/250/nature/5')
+            .card.card-shadow-custom.horizontal
+            .row.row-custom
+          .col.s5.card-title-div-custom
+            span.card-title.card-title-span-custom Card Title
+          .col.s5.card-title-div-custom
+            i.material-icons grade
+            span.card-title PenguinScore: 42
+          .col.s2.card-title-div-custom-right
+            form(action='#')
+              input#search_result_1(type='checkbox')
+              label(for='search_result_1') Compare
+          //
+            <div class="card-action">
+            <a href="#">This is a link</a>
+            </div>
+          .col.s4.card-image.card-image-custom
+            img.card-image-picture-custom(src='/images/logo.png')
+          .col.s8.card-stacked
+            .card-content
+              p
+                .collection.collection-custom
+                  a.collection-item(href='#!')
+                    span
+                      i.material-icons code
+                      |                             Lines Of Code: 1.03M
+                  a.collection-item(href='#!')
+                    span
+                      i.material-icons code
+                      |                             Lines Of Code: 1.03M
+                  a.collection-item(href='#!')
+                    span
+                      i.material-icons code
+                      |                             Lines Of Code: 1.03M
+                  a.collection-item(href='#!')
+                    span
+                      i.material-icons code
+                      |                             Lines Of Code: 1.03M
+            .card-action
+              | Tags:
+              .chip
+                a.a-custom(href='#!') Tag1
+              .chip
+                a.a-custom(href='#!') Tag2
+              .chip
+                a.a-custom(href='#!') Tag3
+              .chip
+                a.a-custom(href='#!') Tag4
+              .chip
+                a.a-custom(href='#!') Tag5
+              a.a-custom-more(href='#!') more
+          .divider
+          .card-action-custom.col.s12.card-action
+            | License:
+            a(href='#') MIT
+            |                     Complexity:
+            a(href='#') Atomic
+  footer
+    | © 2017 XYZ Company
+    link(rel='stylesheet', href='/stylesheets/search_projects.css')
+
diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/search.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/search.jade
new file mode 100644
index 000000000..77b24881e
--- /dev/null
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/search.jade
@@ -0,0 +1,5 @@
+.search-box
+    link(rel='stylesheet', href='/stylesheets/search_form.css')
+    .form-group-custom.form-group.has-feedback
+      input.search-input-rest.form-control(type='search', placeholder='Search...', id='Tags')
+      i.material-icons search
\ No newline at end of file
diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/search_projects.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/search_projects.jade
index 6670d212c..ac91aa68d 100644
--- a/utils/test/vnfcatalogue/VNF_Catalogue/views/search_projects.jade
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/search_projects.jade
@@ -6,70 +6,78 @@ extends layout
   are made available under the terms of the Apache License, Version 2.0
   which accompanies this distribution, and is available at
   http://www.apache.org/licenses/LICENSE-2.0
+block search
+  include search
+block add_project
+  include add_project
 block content
-  .search-box
-    .form-group-custom.form-group.has-feedback
-      input.search-input-rest.form-control(type='text', placeholder='Search...', id='Tags')
-      i.material-icons search
   .content
-    .container
-      .card.card-shadow-custom.horizontal
-        .row.row-custom
-          .col.s5.card-title-div-custom
-            span.card-title.card-title-span-custom Card Title
-          .col.s5.card-title-div-custom
-            i.material-icons grade
-            span.card-title PenguinScore: 42
-          .col.s2.card-title-div-custom-right
-            form(action='#')
-              input#search_result_1(type='checkbox')
-              label(for='search_result_1') Compare
-          //
-            <div class="card-action">
-            <a href="#">This is a link</a>
-            </div>
-          .col.s4.card-image
-            img.card-image-picture-custom(src='/images/logo.png')
-          .col.s8.card-stacked
-            .card-content
-              p
-                .collection.collection-custom
-                  a.collection-item(href='#!')
-                    span
-                      i.material-icons code
-                      |                             Lines Of Code: 1.03M
-                  a.collection-item(href='#!')
-                    span
-                      i.material-icons code
-                      |                             Lines Of Code: 1.03M
-                  a.collection-item(href='#!')
-                    span
-                      i.material-icons code
-                      |                             Lines Of Code: 1.03M
-                  a.collection-item(href='#!')
-                    span
-                      i.material-icons code
-                      |                             Lines Of Code: 1.03M
-            .card-action
-              | Tags: 
-              .chip
-                a.a-custom(href='#!') Tag1
-              .chip
-                a.a-custom(href='#!') Tag2
-              .chip
-                a.a-custom(href='#!') Tag3
-              .chip
-                a.a-custom(href='#!') Tag4
-              .chip
-                a.a-custom(href='#!') Tag5
-              a.a-custom-more(href='#!') more
-          .divider
-          .card-action-custom.col.s12.card-action
-            | License: 
-            a(href='#') MIT
-            |                     Complexity: 
-            a(href='#') Atomic
+    each key, index in json
+      .container.container-custom
+        .card.card-shadow-custom.horizontal
+          .row.row-custom
+            .col.s5.card-title-div-custom
+              span.card-title.card-title-span-custom #{key.vnf_name}
+            .col.s5.card-title-div-custom
+              i.material-icons grade
+              span.card-title PenguinScore: 42
+            .col.s2.card-title-div-custom-right
+              form(action='#')
+                input#search_result_1(type='checkbox', name='#{key.vnf_name}')
+                label(for='search_result_1') Compare
+            //
+              <div class="card-action">
+              <a href="#">This is a link</a>
+              </div>
+            .col.s4.card-image.card-image-custom
+              img.card-image-picture-custom(src='/uploads/#{key.photo_url}')
+            .col.s8.card-stacked
+              .card-content
+                p
+                  .collection.collection-custom
+                    a.collection-item(href='#!')
+                      span
+                        i.material-icons code
+                        |                             Lines Of Code: #{key.lines_of_code}
+                    a.collection-item(href='#!')
+                      span
+                        i.material-icons person
+                        |                             Number of Developers: #{key.no_of_developers}
+                    a.collection-item(href='#!')
+                      span
+                        i.material-icons star
+                        |                             Number of Stars: #{key.no_of_stars}
+                    a.collection-item(href='#!')
+                      span
+                        i.material-icons description
+                        |                             Number of Versions: #{key.versions}
+              .card-action
+                | Tags:
+                each tag, index in key.tags
+                  .chip
+                    a.a-custom(href='/search_projects?tags=#{tag.tag_name}') #{tag.tag_name}
+                //
+                  .chip
+                    a.a-custom(href='#!') tag1
+                  .chip
+                    a.a-custom(href='#!') Tag2
+                  .chip
+                    a.a-custom(href='#!') Tag3
+                  .chip
+                    a.a-custom(href='#!') Tag4
+                  .chip
+                    a.a-custom(href='#!') Tag5
+                a.a-custom-more(href='#!') more
+            .divider
+            .card-action-custom.col.s12.card-action
+              | License:
+              a(href='#') #{key.license}
+              | Complexity:
+              a(href='#') Atomic
+              | Activity:
+              a(href='#') Medium
+              | OPNFV Indicator:
+              a(href='#') #{key.opnfv_indicator}
   footer
     | © 2017 XYZ Company
     link(rel='stylesheet', href='/stylesheets/search_projects.css')
-
diff --git a/utils/test/vnfcatalogue/VNF_Catalogue/views/vnf_tag_association.jade b/utils/test/vnfcatalogue/VNF_Catalogue/views/vnf_tag_association.jade
new file mode 100644
index 000000000..c2e11601d
--- /dev/null
+++ b/utils/test/vnfcatalogue/VNF_Catalogue/views/vnf_tag_association.jade
@@ -0,0 +1,167 @@
+doctype html
+//
+  Copyright (c) 2017 Kumar Rishabh and others.
+  All rights reserved. This program and the accompanying materials
+  are made available under the terms of the Apache License, Version 2.0
+  which accompanies this distribution, and is available at
+  http://www.apache.org/licenses/LICENSE-2.0
+html(lang='en')
+html
+  head
+    title= title
+    //
+      link(rel='stylesheet', href='/3rd_party/materialize/css/materialize.css')
+    script(type='text/javascript', src='https://code.jquery.com/jquery-3.1.1.min.js')
+    //
+      script(src='/javascripts/global.js')
+    //
+      script(src='/3rd_party/materialize/js/materialize.js')
+    link(href='https://fonts.googleapis.com/icon?family=Material+Icons', rel='stylesheet')
+    link(rel='stylesheet', href='/stylesheets/style.css')
+    script(src='/3rd_party/typeahead.js')
+    script(src='/javascripts/mode_edit.js')
+  body
+    h4.center
+    i.material-icons library_add
+    |         Add a TAG to a VNF
+    .row
+    form#add_tag_form.col.s12(action='/add_tag', method='post')
+      .row.modal-form-row
+          .input-field.col.s6 VNF Name
+          .input-field.col.s6 TAG Name
+      .row.modal-form-row
+        #scrollable-dropdown-menu.input-field.col.s6
+          input#tag_name.typeahead(type='text', name='tag_name')
+          //
+            label.left-align(for='tag_name') VNF Name
+
+        .input-field.col.s6
+          input#tag_name.validate(type='text', name='vnf_name')
+          //
+            label.left-align(for='tag_name') TAG Name
+      .row.modal-form-row
+          .input-field.col.s6
+          .input-field.col.s6
+      .row.modal-form-row
+      button#add_tag_button.modal-action.modal-close.waves-effect.waves-light.btn.right
+        | Submit
+        i.material-icons.right send
+style.
+  #scrollable-dropdown-menu .tt-menu {
+    max-height: 150px;
+    overflow-y: auto;
+  }
+
+  .typeahead, .tt-query, .tt-hint {
+      border: 2px solid #CCCCCC;
+      border-radius: 8px 8px 8px 8px;
+      font-size: 24px;
+      height: 30px;
+      line-height: 30px;
+      outline: medium none;
+      padding: 8px 12px;
+      width: 396px;
+  }
+  .typeahead {
+      background-color: #FFFFFF;
+  }
+  .typeahead:focus {
+      border: 2px solid #0097CF;
+  }
+  .tt-query {
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+  }
+  .tt-hint {
+      color: #999999;
+  }
+  .tt-dropdown-menu {
+      background-color: #FFFFFF;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: 8px 8px 8px 8px;
+      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+      margin-top: 12px;
+      padding: 8px 0;
+      width: 422px;
+  }
+  .tt-suggestion {
+      font-size: 18px;
+      line-height: 24px;
+      padding: 3px 20px;
+  }
+  .tt-suggestion.tt-cursor {
+      background-color: #0097CF;
+      color: #FFFFFF;
+  }
+  .tt-suggestion p {
+      margin: 0;
+  }
+  .tt-dropdown-menu, .gist {
+      text-align: left;
+  }
+  /*
+  html {
+      overflow-y: scroll;
+  }
+  .container {
+      margin: 0 auto;
+      max-width: 750px;
+      text-align: center;
+  }
+
+  html {
+      color: #333333;
+      font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
+      font-size: 18px;
+      line-height: 1.2;
+  }
+  .title, .example-name {
+      font-family: Prociono;
+  }
+  p {
+      margin: 0 0 10px;
+  }
+  .title {
+      font-size: 64px;
+      margin: 20px 0 0;
+  }
+  .example {
+      padding: 30px 0;
+  }
+  .example-name {
+      font-size: 32px;
+      margin: 20px 0;
+  }
+  .demo {
+      margin: 50px 0;
+      position: relative;
+  }
+  */
+  /*
+  .gist {
+      font-size: 14px;
+  }
+  .example-twitter-oss .tt-suggestion {
+      padding: 8px 20px;
+  }
+  .example-twitter-oss .tt-suggestion + .tt-suggestion {
+      border-top: 1px solid #CCCCCC;
+  }
+  .example-twitter-oss .repo-language {
+      float: right;
+      font-style: italic;
+  }
+  .example-twitter-oss .repo-name {
+      font-weight: bold;
+  }
+  .example-twitter-oss .repo-description {
+      font-size: 14px;
+  }
+  .example-sports .league-name {
+      border-bottom: 1px solid #CCCCCC;
+      margin: 0 20px 5px;
+      padding: 3px 0;
+  }
+  .example-arabic .tt-dropdown-menu {
+      text-align: right;
+  }
+  */