Merge "VNF_Catalogue Codebase"

10 files changed, 982 insertions, 0 deletions

diff --git a/VNF_Catalogue/views/add_project.jade b/VNF_Catalogue/views/add_project.jade
new file mode 100644
index 00000000..c537c666
--- /dev/null
+++ b/VNF_Catalogue/views/add_project.jade
@@ -0,0 +1,164 @@
+
+.search-box-placeholder
+  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/VNF_Catalogue/views/edit_project.jade b/VNF_Catalogue/views/edit_project.jade
new file mode 100644
index 00000000..c5f6fbbb
--- /dev/null
+++ b/VNF_Catalogue/views/edit_project.jade
@@ -0,0 +1,159 @@
+
+.search-box-placeholder
+  script(src='/3rd_party/typeahead.js')
+  script(type='text/javascript', src='/javascripts/mode_edit_project.js')
+  .fixed-action-btn.fixed-action-btn_custom
+    a.btn-floating.btn-large.red
+      i.large.material-icons dashboard
+    ul
+      
+      li
+        a#modal_href.btn-floating.green.tooltipped(href='#modal1', data-position='left', data-delay='50', data-tooltip='Edit project details')
+          i.large.material-icons mode_edit
+  #modal1.modal
+    .modal-content
+      h4.center
+        i.material-icons library_add
+        |         Edit VNF_details
+      .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/VNF_Catalogue/views/error.jade b/VNF_Catalogue/views/error.jade
new file mode 100644
index 00000000..4f7fbcae
--- /dev/null
+++ b/VNF_Catalogue/views/error.jade
@@ -0,0 +1,12 @@
+// 
+  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
+extends layout
+
+block content
+  h1= message
+  h2= error.status
+  pre #{error.stack}
diff --git a/VNF_Catalogue/views/index.jade b/VNF_Catalogue/views/index.jade
new file mode 100644
index 00000000..8cb91615
--- /dev/null
+++ b/VNF_Catalogue/views/index.jade
@@ -0,0 +1,67 @@
+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 content
+  link(rel='stylesheet', href='/stylesheets/3rd_party/bootstrap.css')
+  .search-box
+    h1 VNF Catalogue
+    form.search-form
+      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
+    nav.z-depth-0.transparent
+      .nav-wrapper
+        ul#nav-mobile.center.float-center-magic.hide-on-med-and-down.most-menu
+          li#lines_of_code.items
+            b Most Lines of Code
+          li#no_of_developers.items
+            b Most Developers
+          li#no_of_stars.items
+            b Most Stars 
+  .content
+    .container
+      .row#content
+        each key, index in json
+          .box-container
+            .col-md-3
+              .content-box
+                .content-data
+                  h1.content-title
+                    a(href='/project_profile?vnf_id=#{key.vnf_id}') #{key.vnf_name}
+                  .box
+                    img.img-size.commit-icon(src='/uploads/#{key.photo_url}')
+                    h3.commits
+                      | #{key.lines_of_code}
+                      br
+                      | Lines Of Code
+
+    footer
+      | © 2017 XYZ Company
+      script(src='/javascripts/index_search_max.js')
+  style(type='text/css').
+    input[type="text"]:focus:not([readonly]) {
+      transition: all 0s !important;
+      border-radius: 5px;
+      border: 2px solid #333333;
+      box-shadow: 0 0 15px 1px rgba(0,0,0,0.50);
+      color: #333333;
+    }
+    .gray {
+      background: rgb(249,249,249);
+    }
+    .img-size {
+      max-width:50px;
+      max-height:50px;
+    }
+    ul#nav-mobile li {
+      display: inline;
+    }
+    .float-center-magic {
+      left: -40%;
+    }
diff --git a/VNF_Catalogue/views/index_back.jade b/VNF_Catalogue/views/index_back.jade
new file mode 100644
index 00000000..a01fd54b
--- /dev/null
+++ b/VNF_Catalogue/views/index_back.jade
@@ -0,0 +1,136 @@
+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 content
+  link(rel='stylesheet', href='/stylesheets/3rd_party/bootstrap.css')
+  .search-box
+    h1 VNF Catalogue
+    form.search-form
+      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
+    nav.z-depth-0.transparent
+      .nav-wrapper
+        ul#nav-mobile.float-center-magic.hide-on-med-and-down.most-menu
+          li.items
+            a(href='#') Most Lines of Code
+          li.items
+            a(href='#') Most Active
+          li.items
+            a(href='#') Most Active Contributions
+  .content
+    .container
+      .row
+        each key, index in json
+          .box-container
+            .col-md-3
+              .content-box
+                .content-data
+                  h1.content-title Beacon
+                  .box
+                    img.commit-icon(src='/images/3rd_party/commits.png')
+                    h3.commits
+                      | 4,845
+                      br
+                      | commits
+        //
+          .box-container
+            .col-md-3
+              .content-box
+                .content-data
+                  h1.content-title Beacon
+                  .box
+                    img.commit-icon(src='/images/3rd_party/commits.png')
+                    h3.commits
+                      | 4,845
+                      br
+                      | commits
+          .col-md-3
+            .content-box
+              .content-data
+                h1.content-title Beacon
+                .box
+                  img.commit-icon(src='/images/3rd_party/commits.png')
+                  h3.commits
+                    | 4,845
+                    br
+                    | commits
+          .col-md-3
+            .content-box
+              .content-data
+                h1.content-title Beacon
+                .box
+                  img.commit-icon(src='/images/3rd_party/commits.png')
+                  h3.commits
+                    | 4,845
+                    br
+                    | commits
+          .col-md-3
+            .content-box
+              .content-data
+                h1.content-title Beacon
+                .box
+                  img.commit-icon(src='/images/3rd_party/commits.png')
+                  h3.commits
+                    | 4,845
+                    br
+                    | commits
+          .col-md-3
+            .content-box
+              .content-data
+                h1.content-title Beacon
+                .box
+                  img.commit-icon(src='/images/3rd_party/commits.png')
+                  h3.commits
+                    | 4,845
+                    br
+                    | commits
+          .col-md-3
+            .content-box
+              .content-data
+                h1.content-title Beacon
+                .box
+                  img.commit-icon(src='/images/3rd_party/commits.png')
+                  h3.commits
+                    | 4,845
+                    br
+                    | commits
+          .col-md-3
+            .content-box
+              .content-data
+                h1.content-title Beacon
+                .box
+                  img.commit-icon(src='/images/3rd_party/commits.png')
+                  h3.commits
+                    | 4,845
+                    br
+                    | commits
+          .col-md-3
+            .content-box
+              .content-data
+                h1.content-title Beacon
+                .box
+                  img.commit-icon(src='/images/3rd_party/commits.png')
+                  h3.commits
+                    | 4,845
+                    br
+                    | commits
+    footer
+      | © 2017 XYZ Company
+  style(type='text/css').
+    input[type="text"]:focus:not([readonly]) {
+      transition: all 0s !important;
+      border-radius: 5px;
+      border: 2px solid #333333;
+      box-shadow: 0 0 15px 1px rgba(0,0,0,0.50);
+      color: #333333;
+    }
+    .gray {
+      background: rgb(249,249,249);
+    }
diff --git a/VNF_Catalogue/views/layout.jade b/VNF_Catalogue/views/layout.jade
new file mode 100644
index 00000000..33c09e33
--- /dev/null
+++ b/VNF_Catalogue/views/layout.jade
@@ -0,0 +1,54 @@
+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')
+    body
+        header
+          nav.transparent.z-depth-0
+            .nav-wrapper
+              a.button-collapse(href='#', data-activates='mobile-demo')
+                i.material-icons menu
+              ul#nav-mobile.left.hide-on-med-and-down
+                li
+                  a(href='#')
+                    img.left.brand-logo.brand-logo-extends
+                li
+                  a(href='#') Projects
+                li
+                  a(href='#') People
+                li
+                  a(href='#') About
+              ul#nav-mobile.right.hide-on-med-and-down
+                li.signup
+                  a(href='#') Sign up
+                li.option or
+                li.signin
+                  a(href='#') Sign in
+              ul#mobile-demo.side-nav
+                li
+                  a(href='#') Projects
+                li
+                  a(href='#') People
+                li
+                  a(href='#') About
+                li.signup
+                  a(href='#') Sign up
+                li.signin
+                  a(href='#') Sign in
+        block search
+        block add_project
+        block content
+
diff --git a/VNF_Catalogue/views/project_profile.jade b/VNF_Catalogue/views/project_profile.jade
new file mode 100644
index 00000000..ef42a8e8
--- /dev/null
+++ b/VNF_Catalogue/views/project_profile.jade
@@ -0,0 +1,122 @@
+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
+  .container-dummy
+block add_project
+  .content-dummy
+      include edit_project
+block content
+  .content.container-grey
+    each key, index in json
+      #profile-page.container
+        .row
+          .box-container
+            .col.m12
+              .content-box
+                .col.s1
+                  img.img-size(src='/uploads/#{key.photo_url}')
+                .col.s11
+                  .user-content
+                    .content-title #{key.vnf_name}
+                    .rating-box
+                      input.rating(type='radio', name='example', value='1')
+                      input.rating(type='radio', name='example', value='2')
+                      input.rating(type='radio', name='example', value='3')
+                      input.rating(type='radio', name='example', value='4')
+                      input.rating(type='radio', name='example', value='5')
+                    p.description
+                      | Github_URL:
+                      //
+                        var repo_url =  #{key.repo_url} 
+                      a(href='#{key.repo_url}') 
+                        | #{key.repo_url} 
+                      //
+                        Pellentesque sit amet leo ut tortor ultrices commodo eu id ex. Pellentesque a odio sem. Curabitur placerat a risus sed blandit. Nulla non condimentum risus. Maecenas porta lacus nec tincidunt fringilla. Integer varius augue et sem scelerisque interdum quis mollis metus. Nunc porta dui nec felis egestas, ut posuere massa blandit. Vivamus non nisi vulputate diam pharetra molestie eu ac ex. Praesent sit amet felis lacinia, bibendum ipsum ac, cursus erat.
+                    .tags
+                      each tag, index in key.tags
+                        .chip #{tag.tag_name}
+                      //
+                        .chip Varius
+                        .chip Nullam
+                        .chip Curabitur
+                        .chip Maecena
+                        .chip Varius
+                        .chip Nullam
+                        .chip Curabitur
+                        .chip Maecena
+                        .chip Varius
+                        .chip Nullam
+                        .chip Curabitur
+                        .chip Maecena
+              .col.m6
+                .card.card-shadow-custom
+                  .row
+                    ul.card-highlights
+                      li.space-10
+                      li
+                        i.material-icons code
+                        span.dotted #{key.lines_of_code}
+                        |  Lines Of Code
+                        
+                      li
+                        i.material-icons person
+                        span.dotted #{key.no_of_developers}
+                        |  Number of Developers
+                      li
+                        i.material-icons star
+                        span.dotted #{key.no_of_stars}
+                        |  Number of Stars
+                      li
+                        i.material-icons description
+                        span.dotted #{key.versions}
+                        |  Number of Versions
+              .col.m6
+                .card.card-shadow-custom
+                  .row
+                    ul.card-highlights
+                      li.space-10
+                      li
+                        span.dotted #{key.license}
+                        |  License
+                      li
+                        span.dotted #{key.opnfv_indicator}
+                        |  OPNFV Indicator
+                      li
+                        span.dotted #{key.complexity}
+                        |  Complexity
+                      li
+                        span.dotted #{key.activity}
+                        |  Activity
+              .col.m12
+                .card.card-shadow-custom
+                  .row
+                    h4 Chart goes here
+  footer
+    | © 2017 XYZ Company
+  //
+    link(rel='stylesheet', href='/stylesheets/search_projects.css')
+  style(type='text/css').
+    /*    input[type="text"]:focus:not([readonly]) {
+    transition: all 0s !important;
+    border-radius: 5px;
+    border: 2px solid #333333;
+    box-shadow: 0 0 15px 1px rgba(0,0,0,0.50);
+    color: #333333;
+    }*/
+    .gray {
+      background: rgb(249,249,249);
+    }
+  link(rel='stylesheet', href='/3rd_party/rating/rating.css', type='text/css', media='screen', title='Rating CSS')  
+  script(type='text/javascript', src='/3rd_party/rating/rating.js')
+  link(rel='stylesheet', href='/stylesheets/style_project.css', type='text/css', media='screen', title='Rating CSS')  
+  
+  script(type='text/javascript').
+    $('.rating-box').rating(function(vote, event){
+    });
+
diff --git a/VNF_Catalogue/views/search.jade b/VNF_Catalogue/views/search.jade
new file mode 100644
index 00000000..77b24881
--- /dev/null
+++ b/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/VNF_Catalogue/views/search_projects.jade b/VNF_Catalogue/views/search_projects.jade
new file mode 100644
index 00000000..0a8655e9
--- /dev/null
+++ b/VNF_Catalogue/views/search_projects.jade
@@ -0,0 +1,96 @@
+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 add_project
+  include add_project
+block content
+  .col.s12.pagination
+    #pagination-long
+  .content#content
+    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 
+                a.custom-href(href='/project_profile?vnf_id=#{key.vnf_id}') 
+                  | #{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.img-size.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='/project_profile?vnf_id=#{key.vnf_id}') 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')
+    script(type='text/javascript', src='/3rd_party/materialize-pagination.js')
+    script(type='text/javascript', src='/javascripts/search_results.js')
+    style(type='text/css').
+      div.pagination{
+        margin-top: 1em;
+      }
+      div.pagination li {
+        width: 40px;
+      }
diff --git a/VNF_Catalogue/views/vnf_tag_association.jade b/VNF_Catalogue/views/vnf_tag_association.jade
new file mode 100644
index 00000000..c2e11601
--- /dev/null
+++ b/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;
+  }
+  */