From 0ddfff32a990dda5a487229641aa189161f3d25a Mon Sep 17 00:00:00 2001 From: Kumar Rishabh Date: Wed, 15 Mar 2017 01:02:11 +0530 Subject: 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 --- .../VNF_Catalogue/views/add_project.jade | 164 ++++++++++++++++++++ .../vnfcatalogue/VNF_Catalogue/views/index.jade | 3 +- .../vnfcatalogue/VNF_Catalogue/views/layout.jade | 3 +- .../VNF_Catalogue/views/project_profile.jade | 84 +++++++++++ .../vnfcatalogue/VNF_Catalogue/views/search.jade | 5 + .../VNF_Catalogue/views/search_projects.jade | 132 ++++++++-------- .../VNF_Catalogue/views/vnf_tag_association.jade | 167 +++++++++++++++++++++ 7 files changed, 494 insertions(+), 64 deletions(-) create mode 100644 utils/test/vnfcatalogue/VNF_Catalogue/views/add_project.jade create mode 100644 utils/test/vnfcatalogue/VNF_Catalogue/views/project_profile.jade create mode 100644 utils/test/vnfcatalogue/VNF_Catalogue/views/search.jade create mode 100644 utils/test/vnfcatalogue/VNF_Catalogue/views/vnf_tag_association.jade (limited to 'utils/test/vnfcatalogue/VNF_Catalogue/views') 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 + // +
+ This is a link +
+ .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 - // -
- This is a link -
- .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 + // +
+ This is a link +
+ .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; + } + */ -- cgit 1.2.3-korg