shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-20 10:50:08 +03:00
Code Releases Wiki Activity

feature #3748: Add provision-tab templates

Browse Source
This commit is contained in:
Daniel Molina 2015-06-17 16:38:51 +02:00
parent 2e9b44682c
commit c025cd02e4
17 changed files with 991 additions and 968 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

982
src/sunstone/public/app/tabs/provision-tab.js
View File

File diff suppressed because it is too large Load Diff

20
src/sunstone/public/app/tabs/provision-tab/content.hbs Normal file
View File

@ -0,0 +1,20 @@
<div id="provision_dashboard" class="section_content"></div>
{{!provision_user_info}}
{{> tabs/provision-tab/vms/create}}
<div class="provision_vms_list_section hidden section_content"></div>
{{#isTabPanelEnabled "provision-tab" "templates"}}
<div class="provision_templates_list_section hidden section_content"></div>
{{/isTabPanelEnabled}}
{{#isTabPanelEnabled "provision-tab" "users"}}
{{> tabs/provision-tab/group/info}}
{{> tabs/provision-tab/users/create}}
<div class="provision_users_list_section hidden section_content"></div>
{{/isTabPanelEnabled}}
{{#isTabPanelEnabled "provision-tab" "flows"}}
{{> tabs/provision-tab/flows/create}}
<div class="provision_flows_list_section hidden section_content"></div>
{{/isTabPanelEnabled}}

70
src/sunstone/public/app/tabs/provision-tab/flows/create.hbs Normal file
View File

@ -0,0 +1,70 @@
<form id="provision_create_flow" class="hidden section_content">
<div class="row">
<div class="large-10 large-centered columns">
<h2 class="subheader">{{tr "Create Service"}}</h2>
<br></div>
</div>
<div class="row">
<div class="large-8 large-centered columns">
<input type="text" id="flow_name" class="provision-input" placeholder="{{tr "Service Name"}}" style="height: 40px !important; font-size: 16px; padding: 0.5rem !important;"/>
</div>
</div>
<div class="row">
<div class="large-10 large-centered columns">
<dl class="accordion provision_accordion_flow_template" data-accordion="provision_accordion_flow_template">
<dd style="border-bottom: 1px solid #efefef;" class="active accordion-navigation">
<a href="#provision_dd_flow_template" style="background: #fff; font-size: 30px">
<span class="select_template" style="color:#555">{{tr "Select a Template"}}</span>
<span class="selected_template" style="display:none; color:#555">
<span class="provision-logo selected_template_logo" style="color:#555"></span>
<span class="selected_template_name" style="color:#555"></span>
<span class="has-tip right" style="cursor: pointer; margin-right:10px;"> <i class="fa fa-pencil"/></span>
</span>
</a>
<div id="provision_dd_flow_template" class="provision_select_flow_template active content">
<div class="row">
<div class="large-12 large-centered columns">
<h3 class="subheader text-right">
<input type="search" class="provision-search-input right" placeholder="Search" id="provision_create_flow_template_search"/>
</h3>
<br></div>
</div>
<div class="row">
<div class="large-12 large-centered columns">
<table id="provision_flow_templates_table">
<thead class="hidden">
<tr>
<th>{{tr "ID"}}</th>
<th>{{tr "Name"}}</th>
</tr>
</thead>
<tbody class="hidden"></tbody>
</table>
</div>
</div>
</div>
</dd>
</dl>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="provision_network_selector large-9 large-centered columns"></div>
</div>
<br>
<div class="row">
<div class="provision_custom_attributes_selector large-9 large-centered columns"></div>
</div>
<div id="provision_customize_flow_template" style="display: none"></div>
<br>
<br>
<div class="row">
<div class="large-7 columns large-centered">
<div data-alert class="alert-box alert-box-error radius text-center hidden"></div>
<button href="#" class="button large success radius large-12 small-12" type="submit" style="height: 59px">{{tr "Create"}}</button>
</div>
</div>
<br>
<br></form>

47
src/sunstone/public/app/tabs/provision-tab/flows/info.hbs Normal file
View File

@ -0,0 +1,47 @@
<div class="text-center provision_info_flow_loading">
<span class="fa-stack fa-5x" style="color: #dfdfdf"> <i class="fa fa-cloud fa-stack-2x"></i> <i class="fa fa-spinner fa-spin fa-stack-1x fa-inverse"></i>
</span>
<br>
<br>
<span style="font-size: 18px; color: #999"></span>
</div>
<div class="provision_info_flow">
<div class="row">
<div class="large-12 large-centered columns">
<ul class="inline-list provision_action_icons">
<li>
<a href"#" data-tooltip title="{{tr "Recover a failed service, cleaning the failed VMs"}}" class="left button medium radius success provision_recover_button">
<i class="fa fa-fw fa-lg fa-wrench"/></a>
</li>
<li class="right">
<a href"#" data-tooltip title="{{tr "Delete"}}" class="button medium radius alert provision_delete_confirm_button tip-top right">
<i class="fa fa-fw fa-lg fa-trash-o"/></a>
<a href"#" data-tooltip title="{{tr "Shutdown"}}" class="button medium radius secondary provision_shutdown_confirm_button tip-top right">
<i class="fa fa-fw fa-lg fa-power-off"/>
</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="provision_confirm_action large-10 large-centered columns"></div>
</div>
<br>
<div class="row">
<div class="large-4 columns">
<ul class="provision-pricing-table_flow_info provision-pricing-table" style="border: 0px !important; background: #fff;"></ul>
</div>
<div class="large-8 columns">
<div class="row">
<div class="large-12 columns">
<ul class="provision_roles_ul large-block-grid-2 medium-block-grid-2 small-block-grid-1 text-center"></ul>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="provision_role_vms_container large-12 large-centered columns"></div>
</div>
</div>

52
src/sunstone/public/app/tabs/provision-tab/flows/list.hbs Normal file
View File

@ -0,0 +1,52 @@
<dl class="accordion accordion_list provision_list_flows" data-accordion>
<dd class="{{#if opts.active}}active{{/if}} accordion-navigation">
<a class="provision_list_flow_accordion right only-not-active provision_back" href="#provision_list_flow_accordion{{accordionId}}">
<span class="button medium radius"> <i class="fa fa-fw fa-lg fa-th"/><i class="fa fa-fw fa-lg fa-chevron-left"/>
</span>
</a>
<h2 class="subheader">
{{opts.title}}
<span class="provision_info_flow_name only-not-active" style="margin-left: 20px; color: #777; font-size: 20px"></span>
<span href"#" class="only-active right button radius medium secondary provision_flows_list_refresh_button"
{{#if opts.refresh}}style="display:none"{{/if}} data-tooltip title=" {{tr "Refresh"}}">
<i class="fa fa-fw fa-lg fa-refresh"/></span>
<span href"#" class="only-not-active right button medium radius secondary provision_refresh_info"
{{#if opts.refresh}}style="display:none"{{/if}} data-tooltip title=" {{tr "Refresh"}}">
<i class="fa fa-fw fa-lg fa-refresh"/>
</span>
<span href"#" class="only-active right button radius medium secondary provision_flows_list_filter_button"
{{#if opts.filter}}style="display:none"{{/if}} data-tooltip title=" {{tr "Filter by User"}}">
<i class="fa fa-fw fa-lg fa-filter"/>
</span>
<span class="only-active right provision_list_flows_filter" style="display: none"></span>
<span>
<input type="search" class="only-active provision_list_flows_search provision-search-input right" placeholder="Search"/>
<span href"#" class="only-active right button radius medium success provision_create_flow_button"
{{#if opts.create}}style="display:none"{{/if}}>
<i class="fa fa-fw fa-lg fa-plus-square"/>
</span>
</h2>
<div id="provision_list_flow_accordion{{accordionId}}" class="content {{#if opts.active}}active{{/if}}">
<div class="">
<div class="row">
<div class="large-12 large-centered columns">
<table class="provision_flows_table">
<thead class="hidden">
<tr>
<th>{{tr "ID"}}</th>
<th>{{tr "Name"}}</th>
<th>{{tr "User ID"}}</th>
</tr>
</thead>
<tbody class="hidden"></tbody>
</table>
<br></div>
</div>
</div>
</div>
</dd>
<dd class="accordion-navigation">
<a class="provision_show_flow_accordion" href="#provision_show_flow_accordion{{accordionId}}"></a>
<div id="provision_show_flow_accordion{{accordionId}}" class="content">{{> tabs/provision-tab/flows/info}}</div>
</dd>
</dl>

39
src/sunstone/public/app/tabs/provision-tab/group/info.hbs Normal file
View File

@ -0,0 +1,39 @@
<div id="provision_manage_vdc" class="hidden section_content">
<div class="row">
<div class="large-11 large-centered columns">
<h3 class="subheader text-right">
<span class="left">{{tr "Group Accounting"}}</span>
</h3>
</div>
</div>
<br>
<div class="row">
<div id="provision_info_vdc_group_acct" class="large-10 large-centered columns"></div>
</div>
<br>
{{#isFeatureEnabled "showback"}}
<div class="row">
<div class="large-11 large-centered columns">
<h3 class="subheader text-right">
<span class="left">{{tr "Group Showback"}}</span>
</h3>
</div>
</div>
<br>
<div class="row">
<div id="provision_info_vdc_group_showback" class="large-10 large-centered columns"></div>
</div>
<br>
{{/isFeatureEnabled}}
<div class="row">
<div class="large-11 large-centered columns">
<h3 class="subheader text-right">
<span class="left">{{tr "Group Quotas"}}</span>
</h3>
</div>
</div>
<br>
<div class="row">
<div class="large-11 columns large-centered quotas" id="provision_vdc_quotas_div"></div>
</div>
</div>

60
src/sunstone/public/app/tabs/provision-tab/header.hbs Normal file
View File

@ -0,0 +1,60 @@
<div style=" padding: 15px 0px 10px 0px; margin-bottom: 10px">
<div class="row">
<div class="large-10 large-centered columns">
<a href="#" class="provision_image_header" >
<img src="{{logo}}" style="height:40px; vertical-align:top"></a>
<br>
<br>
<ul class="inline-list text-center" style="font-size:13px; padding-bottom: 10px; border-bottom: 1px solid #efefef;">
{{#isTabPanelEnabled "provision-tab" "users"}}
<li>
<a href"#" class="medium off-color" id="provision_vdc_info_button"> <i class="fa fa-fw fa-2x fa-bar-chart-o"/>{{tr "Group Info"}}
</a>
</li>
<li>
<a href"#" class="medium off-color provision_users_list_button" id=""> <i class="fa fa-fw fa-2x fa-users"/>{{tr "Users"}}
</a>
</li>
{{/isTabPanelEnabled}}
<li>
<a href"#" class="medium off-color provision_vms_list_button" id="">
<i class="fa fa-fw fa-2x fa-th"/>
{{tr "VMs"}}
</a>
</li>
{{#isTabPanelEnabled "provision-tab" "templates"}}
<li>
<a href"#" class="medium off-color provision_templates_list_button">
<i class="fa fa-fw fa-2x fa-save"/>
{{tr "Templates"}}
</a>
</li>
{{/isTabPanelEnabled}}
{{#isTabPanelEnabled "provision-tab" "flows"}}
<li>
<a href"#" class="medium off-color provision_flows_list_button" id="">
<i class="fa fa-2x fa-fw fa-cubes"/>
{{tr "Services"}}
</a>
</li>
{{/isTabPanelEnabled}}
{{!
<li style="border-left: 1px solid #efefef; height: 40px"></li>
<li>
<a href"#" class="medium off-color" id="provision_user_info_button">
<i class="fa fa-fw fa-2x fa-user"/>
config[display_name]+
</a>
</li>
<li>
<a href="#" data-dropdown="provision_zone_selector" class="button small radius secondary dropdown off-color" id="zonelector" style="padding:0px; font-size: 12px;">
<i class="fa fa-home fa-2x header-icon" style="margin-bottom: 2px"/>
+ config[zone_name] +
</a>
<ul id="provision_zone_selector" data-dropdown-content class="zone-ul f-dropdown"></ul>
</li>
}}
</ul>
</div>
</div>
</div>

44
src/sunstone/public/app/tabs/provision-tab/templates/list.hbs Normal file
View File

@ -0,0 +1,44 @@
<dl class="accordion accordion_list provision_list_templates" data-accordion="dfsaf">
<dd class="{{#if opts.active}}active{{/if}} accordion-navigation">
<a class="right only-not-active" href="#provision_list_template_accordion{{accordionId}}">
<span class="button medium radius"> <i class="fa fa-fw fa-lg fa-th"/><i class="fa fa-fw fa-lg fa-chevron-left"/>
</span>
</a>
<h2 class="subheader">
{{opts.title}}
<span href"#" class="right only-active button medium radius secondary provision_templates_list_refresh_button"
{{#if opts.refresh}}style="display:none"{{/if}} data-tooltip title=" {{tr "Refresh"}}">
<i class="fa fa-fw fa-lg fa-refresh"/></span>
<span href"#" class="right only-active button medium radius secondary provision_templates_list_filter_button"
{{#if opts.filter}}style="display:none"{{/if}} data-tooltip title=" {{tr "Filter by User"}}">
<i class="fa fa-fw fa-lg fa-filter"/>
</span>
<span class="right only-active provision_list_templates_filter" style="display: none"></span>
<input type="search" class="provision_list_templates_search right only-active provision-search-input right" placeholder="Search"/>
</h2>
<div id="provision_list_template_accordion{{accordionId}}" class="content {{#if opts.active}}active{{/if}}">
<div class="row">
<div class="provision_confirm_delete_template_div large-10 large-centered columns"></div>
</div>
<div class="row">
<div class="large-12 large-centered columns">
<table class="provision_templates_table">
<thead class="hidden">
<tr>
<th>{{tr "ID"}}</th>
<th>{{tr "Name"}}</th>
<th>{{tr "Saved"}}</th>
<th>{{tr "User ID"}}</th>
</tr>
</thead>
<tbody class="hidden"></tbody>
</table>
<br></div>
</div>
</div>
</dd>
<dd class="accordion-navigation">
<a class="provision_show_template_accordion" href="#provision_show_template_accordion{{accordionId}}"></a>
<div id="provision_show_template_accordion{{accordionId}}" class="content"></div>
</dd>
</dl>

67
src/sunstone/public/app/tabs/provision-tab/users/create.hbs Normal file
View File

@ -0,0 +1,67 @@
<form id="provision_create_user" class="hidden section_content">
<div class="row">
<div class="large-10 large-centered columns">
<h2 class="subheader">{{tr "Create User"}}</h2>
<br></div>
</div>
<div class="row">
<div class="large-8 large-centered columns">
<input type="text" id="username" class="provision-input" placeholder="{{tr "Username"}}" style="height: 40px !important; font-size: 16px; padding: 0.5rem !important;"/>
<br></div>
</div>
<div class="row">
<div class="large-8 large-centered columns">
<input type="password" id="password" class="provision-input" placeholder="{{tr "Password"}}" style="height: 40px !important; font-size: 16px; padding: 0.5rem !important;"/>
<br></div>
</div>
<div class="row">
<div class="large-8 large-centered columns">
<input type="password" id="repeat_password" class="provision-input" placeholder="{{tr "Repeat Password"}}" style="height: 40px !important; font-size: 16px; padding: 0.5rem !important;"/>
<br></div>
</div>
<div class="row">
<div class="large-10 large-centered columns">
<h3 class="subheader text-right">
<span class="left">{{tr "Define Quotas"}}</span>
</h3>
<br></div>
</div>
<br>
<div class="row">
<div class="large-8 large-centered columns">
<dl class="tabs text-center" data-tab style="width: 100%">
<dd class="active" style="width: 50%;">
<a href="#provision_create_user_default_quota">{{tr "Default"}}</a>
</dd>
<dd style="width: 50%;">
<a href="#provision_create_user_manual_quota">{{tr "Manual"}}</a>
</dd>
</dl>
<div class="tabs-content">
<div class="content active" id="provision_create_user_default_quota">
<div class="row">
<div class="large-12 large-centered columns">
<span style="font-size: 18px; color: #999">
{{tr "Use the default system quotas set by the cloud adminstrator"}}
</span>
</div>
</div>
</div>
<div class="content" id="provision_create_user_manual_quota">{{> ./quota-widget}}</div>
</div>
</div>
</div>
<br>
<br>
<div class="row">
<div class="large-5 large-centered columns">
<hr>
<br></div>
</div>
<div class="row">
<div class="large-7 columns large-centered">
<div data-alert class="alert-box alert-box-error radius text-center hidden"></div>
<button href="#" class="button large radius large-12 small-12" type="submit">{{tr "Add User"}}</button>
</div>
</div>
<br></form>

4
src/sunstone/public/app/tabs/provision-tab/users/empty-graphs.hbs Normal file
View File

@ -0,0 +1,4 @@
<span class="fa-stack fa-2x" style="color: #dfdfdf"> <i class="fa fa-cloud fa-stack-2x"></i>
</span>
<br>
<span style="color: #cfcfcf">{{tr "There is no information available"}}</span>

72
src/sunstone/public/app/tabs/provision-tab/users/info.hbs Normal file
View File

@ -0,0 +1,72 @@
<div class="text-center provision_info_vdc_user_loading">
<span class="fa-stack fa-5x" style="color: #dfdfdf"> <i class="fa fa-cloud fa-stack-2x"></i> <i class="fa fa-spinner fa-spin fa-stack-1x fa-inverse"></i>
</span>
<br>
<br>
<span style="font-size: 18px; color: #999"></span>
</div>
<div class="provision_info_vdc_user">
<div class="row">
<div class="large-12 large-centered columns">
<ul class="inline-list provision_action_icons">
<li class="">
<a href"#" data-tooltip title="{{tr "Update the User Quotas"}}" class="left button medium secondary radius provision_vdc_user_quota_confirm_button tip-top">
<i class="fa fa-fw fa-lg fa-align-left"/></a>
<a href"#" data-tooltip title="{{tr "Change the password of the User"}}" class="left button medium secondary radius provision_vdc_user_password_confirm_button tip-top">
<i class="fa fa-fw fa-lg fa-lock"/></a>
</li>
<li class="right">
<a href"#" data-tooltip title="{{tr "Delete the User"}}" class="right button medium radius alert provision_vdc_user_delete_confirm_button tip-top">
<i class="fa fa-fw fa-lg fa-trash-o"/>
</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="provision_vdc_user_confirm_action large-10 large-centered columns"></div>
</div>
<br>
<div class="row">
<div class="large-4 columns">
<ul class="provision-pricing-table_user_info provision-pricing-table" style="border: 0px !important; background: #fff;"></ul>
</div>
<div class="large-8 columns">
<div class="row dashboard_vm_accounting">
<div id="acct_content">
<div class="large-6 columns">
<input style="display:none;" value="vm" id="acct_group_by"/>
<div class="row">
<div class="large-12 columns graph_legend text-center">
<span style="color: #777; font-size: 14px">{{tr "CPU hours"}}</span>
</div>
<br>
<div class="large-12 columns">
<div class="large-12 columns centered graph" id="acct_cpu_graph" style="height: 180px;"></div>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-12 columns graph_legend text-center">
<span style="color: #777; font-size: 14px">{{tr "Memory GB hours"}}</span>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph" id="acct_mem_graph" style="height: 180px;"></div>
</div>
</div>
</div>
</div>
<div id="acct_no_data">
<div class="row">
<div class="large-12 columns text-center">{{> ./empty-graphs}}</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="provision_vdc_info_container large-12 large-centered columns"></div>
</div>
<br></div>

41
src/sunstone/public/app/tabs/provision-tab/users/list.hbs Normal file
View File

@ -0,0 +1,41 @@
<dl class="accordion accordion_list provision_list_users" data-accordion>
<dd class="active accordion-navigation">
<a href="#provision_list_user_accordion{{accordionId}}" class="provision_back right only-not-active">
<span class="button medium radius"> <i class="fa fa-fw fa-lg fa-th"/><i class="fa fa-fw fa-lg fa-chevron-left"/>
</span>
</a>
<h2 class="subheader">
{{tr "Users"}}
<span class="provision_info_vdc_user_name only-not-active" style="margin-left: 20px; color: #777; font-size: 20px"></span>
<span href"#" class="right only-active provision_users_list_refresh_button button medium radius secondary" data-tooltip title="{{tr "Refresh"}}">
<i class="fa fa-fw fa-lg fa-refresh"/></span>
<span href"#" class="right only-not-active provision_refresh_info button medium radius secondary" data-tooltip title="{{tr "Refresh"}}">
<i class="fa fa-fw fa-lg fa-refresh"/>
</span>
<input type="search" class="provision_list_users_search provision-search-input right only-active" placeholder="Search"/>
<span href"#" class="right only-active provision_create_user_button button medium radius success">
<i class="fa fa-fw fa-lg fa-plus-square"/>
</span>
</h2>
<div id="provision_list_user_accordion{{accordionId}}" class="content active">
<div class="row">
<div class="large-12 large-centered columns">
<table class="provision_users_table">
<thead class="hidden">
<tr>
<th>{{tr "ID"}}</th>
<th>{{tr "Name"}}</th>
</tr>
</thead>
<tbody class="hidden"></tbody>
</table>
<br></div>
</div>
</div>
</dd>
<dd class="accordion-navigation">
<a class="provision_show_user_accordion" href="#provision_show_user_accordion{{accordionId}}"></a>
<div id="provision_show_user_accordion{{accordionId}}" class="content">{{> tabs/provision-tab/users/info}}</div>
</dd>
</dl>
;

114
src/sunstone/public/app/tabs/provision-tab/users/quota-widget.hbs Normal file
View File

@ -0,0 +1,114 @@
<div class="row">
<div class="large-12 large-centered columns">
<h5 class="subheader text-right">
<span class="left" style="margin-bottom: 0.5em">{{tr "Running VMs"}}</span>
</h5>
</div>
</div>
<div class="row provision_rvms_quota">
<div class="medium-3 small-12 columns">
<select class="provision_quota_select">
<option value="edit">{{tr "Manual"}}</option>
<option value="unlimited">{{tr "Unlimited"}}</option>
<option value="default">{{tr "Default"}}</option>
</select>
</div>
<div class="medium-9 small-12 columns provision_quota_edit">
<div class="row collapse">
<div class="small-9 columns">
<div class="range-slider radius provision_rvms_quota_slider" data-slider data-options="start: 0; end: 50;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden"></div>
</div>
<div class="large-2 small-2 columns">
<input type="text" class="provision-input provision_rvms_quota_input" style="margin-top: -7px; height: 40px !important; font-size: 16px; padding: 0.5rem !important;"/>
</div>
</div>
</div>
<div class="medium-9 small-12 columns provision_quota_unlimited" style="display:none">
<span style="font-size: 18px; color: #999">{{tr "Unlimited. Group quotas will still apply"}}</span>
</div>
<div class="medium-9 small-12 columns provision_quota_default" style="display:none">
<span style="font-size: 18px; color: #999">
{{tr "Use the default system quotas set by the cloud adminstrator"}}
</span>
</div>
</div>
<div class="row">
<div class="large-12 large-centered columns">
<h5 class="subheader text-right">
<span class="left" style="margin-bottom: 0.5em">{{tr "CPU"}}</span>
</h5>
</div>
</div>
<div class="row provision_cpu_quota">
<div class="medium-3 small-12 columns">
<select class="provision_quota_select">
<option value="edit">{{tr "Manual"}}</option>
<option value="unlimited">{{tr "Unlimited"}}</option>
<option value="default">{{tr "Default"}}</option>
</select>
</div>
<div class="medium-9 small-12 columns provision_quota_edit">
<div class="row collapse">
<div class="small-9 columns">
<div class="range-slider radius provision_cpu_quota_slider" data-slider data-options="start: 0; end: 50;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden"></div>
</div>
<div class="large-2 small-2 columns">
<input type="text" class="provision-input provision_cpu_quota_input" style="margin-top: -7px; height: 40px !important; font-size: 16px; padding: 0.5rem !important;"/>
</div>
</div>
</div>
<div class="medium-9 small-12 columns provision_quota_unlimited" style="display:none">
<span style="font-size: 18px; color: #999">{{tr "Unlimited. Group quotas will still apply"}}</span>
</div>
<div class="medium-9 small-12 columns provision_quota_default" style="display:none">
<span style="font-size: 18px; color: #999">
{{tr "Use the default system quotas set by the cloud adminstrator"}}
</span>
</div>
</div>
<div class="row">
<div class="large-12 large-centered columns">
<h5 class="subheader text-right">
<span class="left" style="margin-bottom: 0.5em">{{tr "Memory (GBs)"}}</span>
</h5>
</div>
</div>
<div class="vm_param">
<input type="hidden" class="provision_memory_quota_input"/>
</div>
<div class="row provision_memory_quota">
<div class="medium-3 small-12 columns">
<select class="provision_quota_select">
<option value="edit">{{tr "Manual"}}</option>
<option value="unlimited">{{tr "Unlimited"}}</option>
<option value="default">{{tr "Default"}}</option>
</select>
</div>
<div class="medium-9 small-12 columns provision_quota_edit">
<div class="row collapse">
<div class="small-9 columns">
<div class="range-slider radius provision_memory_quota_slider" data-slider data-options="start: 0; end: 50;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden"></div>
</div>
<div class="large-2 small-2 columns">
<input type="text" class="provision-input provision_memory_quota_tmp_input" style="margin-top: -7px; height: 40px !important; font-size: 16px; padding: 0.5rem !important;"/>
</div>
</div>
</div>
<div class="medium-9 small-12 columns provision_quota_unlimited" style="display:none">
<span style="font-size: 18px; color: #999">{{tr "Unlimited. Group quotas will still apply"}}</span>
</div>
<div class="medium-9 small-12 columns provision_quota_default" style="display:none">
<span style="font-size: 18px; color: #999">
{{tr "Use the default system quotas set by the cloud adminstrator"}}
</span>
</div>
</div>

115
src/sunstone/public/app/tabs/provision-tab/vms/create.hbs Normal file
View File

@ -0,0 +1,115 @@
<form id="provision_create_vm" class="hidden section_content">
<div class="row">
<div class="large-10 large-centered columns">
<h2 class="subheader">{{tr "Create Virtual Machine"}}</h2>
<br></div>
</div>
<div class="row">
<div class="large-8 large-centered columns">
<input type="text" id="vm_name" class="provision-input" placeholder="{{tr "Virtual Machine Name"}}" style="height: 40px !important; font-size: 16px; padding: 0.5rem !important;"/>
<br></div>
</div>
<div class="row">
<div class="large-10 large-centered columns">
<dl class="accordion provision_accordion_template" data-accordion="provision_accordion_template">
<dd style="border-bottom: 1px solid #efefef;" class="active accordion-navigation">
<a href="#provision_dd_template" style="background: #fff; font-size: 30px">
<span class="select_template" style="color:#555">{{tr "Select a Template"}}</span>
<span class="selected_template" style="display:none; color:#555">
<span class="provision-logo selected_template_logo" style="line-height: 80px"></span>
<span class="selected_template_name"></span>
<span class="has-tip right" style="cursor: pointer; margin-right:10px; line-height: 80px"> <i class="fa fa-pencil"/></span>
</span>
</a>
<div id="provision_dd_template" class="active content">
<div class="row provision_select_template">
<div class="large-12 large-centered columns">
<dl class="tabs text-center" data-tab style="width: 100%">
<dd class="active" style="width: 33%;">
<a href="#provision_system_templates_selector">{{tr "System"}}</a>
</dd>
<dd style="width: 33%;">
<a href="#provision_vdc_templates_selector">{{tr "Group"}}</a>
</dd>
<dd style="width: 34%;">
<a href="#provision_saved_templates_selector">{{tr "Saved"}}</a>
</dd>
</dl>
<div class="row">
<div class="large-12 large-centered columns">
<h3 class="subheader text-right">
<input type="search" class="provision-search-input right" placeholder="Search" id="provision_create_template_search"/>
</h3>
<br></div>
</div>
<div class="tabs-content">
<div class="content active" id="provision_system_templates_selector">
<table id="provision_system_templates_table">
<thead class="hidden">
<tr>
<th>{{tr "ID"}}</th>
<th>{{tr "Name"}}</th>
<th>{{tr "Saved"}}</th>
</tr>
</thead>
<tbody class="hidden"></tbody>
</table>
</div>
<div class="content" id="provision_vdc_templates_selector">
<table id="provision_vdc_templates_table">
<thead class="hidden">
<tr>
<th>{{tr "ID"}}</th>
<th>{{tr "Name"}}</th>
<th>{{tr "Saved"}}</th>
<th>{{tr "Shared"}}</th>
</tr>
</thead>
<tbody class="hidden"></tbody>
</table>
</div>
<div class="content" id="provision_saved_templates_selector">
<table id="provision_saved_templates_table">
<thead class="hidden">
<tr>
<th>{{tr "ID"}}</th>
<th>{{tr "Name"}}</th>
<th>{{tr "Saved"}}</th>
<th>{{tr "Shared"}}</th>
</tr>
</thead>
<tbody class="hidden"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</dd>
</dl>
</div>
</div>
<br>
<br>
<div class="row">
<div class="large-10 large-centered columns">
<div class="provision_capacity_selector"></div>
<br>
<br>
<div class="provision_network_selector"></div>
<br>
<br>
<div class="provision_custom_attributes_selector"></div>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="large-7 columns large-centered">
<div data-alert class="alert-box alert-box-error radius text-center hidden"></div>
<button href="#" class="button large success radius large-12 small-12" type="submit" style="height: 59px">{{tr "Create"}}</button>
</div>
</div>
<br>
<br></form>

166
src/sunstone/public/app/tabs/provision-tab/vms/info.hbs Normal file
View File

@ -0,0 +1,166 @@
<div class="text-center provision_info_vm_loading">
<span class="fa-stack fa-5x" style="color: #dfdfdf"> <i class="fa fa-cloud fa-stack-2x"></i> <i class="fa fa-spinner fa-spin fa-stack-1x fa-inverse"></i>
</span>
<br>
<br>
<span style="font-size: 18px; color: #999"></span>
</div>
<div class="provision_info_vm">
<div class="row">
<div class="large-12 large-centered columns">
<ul class="inline-list provision_action_icons">
<li>
<a href"#" data-tooltip title="{{tr "Open a remote console in a new window"}}" class="left button medium radius provision_vnc_button tip-top">
<i class="fa fa-fw fa-lg fa-desktop"/></a>
<a data-tooltip title="{{tr "You have to boot the Virtual Machine first"}}" class="left button medium radius white provision_vnc_button_disabled tip-top" style="color: #999">
<i class="fa fa-fw fa-lg fa-desktop"/></a>
{{#isTabPanelEnabled "provision-tab" "templates"}}
<a href"#" data-tooltip title="{{tr "The main disk of the Virtual Machine will be saved in a new Image"}}" class="left button medium radius success provision_snapshot_button tip-top">
<i class="fa fa-fw fa-lg fa-save"/>
</a>
<a data-tooltip title="{{tr "You have to power-off the virtual machine first"}}" class="left button medium radius white provision_snapshot_button_disabled tip-top" style="color: #999">
<i class="fa fa-fw fa-lg fa-save"/>
</a>
{{/isTabPanelEnabled}}
</li>
<li class="right">
<a href"#" data-tooltip title="{{tr "Delete"}}" class="button medium radius alert provision_delete_confirm_button tip-top right">
<i class="fa fa-fw fa-lg fa-trash-o"/>
</a>
<a href"#" data-tooltip title="{{tr "Delete"}}" class="button medium radius alert provision_shutdownhard_confirm_button tip-top right">
<i class="fa fa-fw fa-lg fa-trash-o"/>
</a>
<a href"#" data-tooltip title="{{tr "Power off"}}" class="button medium radius secondary provision_poweroff_confirm_button tip-top right">
<i class="fa fa-fw fa-lg fa-power-off"/>
</a>
<a href"#" data-tooltip title="{{tr "Power on"}}" class="button medium radius secondary provision_poweron_button tip-top right">
<i class="fa fa-fw fa-lg fa-play"/>
</a>
<a href"#" data-tooltip title="{{tr "Reboot"}}" class="button medium radius secondary provision_reboot_confirm_button tip-top right">
<i class="fa fa-fw fa-lg fa-repeat"/>
</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="provision_confirm_action large-10 large-centered columns"></div>
</div>
<br>
<div class="row">
<div class="large-4 columns">
<ul class="provision-pricing-table_vm_info provision-pricing-table" style="border: 0px !important; background: #fff;"></ul>
</div>
<div class="large-8 columns">
<div class="row">
<div class="large-6 medium-6 columns">
<div class="row text-center">
<div class="large-12 columns">
<h3 class="subheader">
<small>{{tr "CPU"}}</small>
</h3>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="large-12 columns centered graph vm_cpu_graph" style="height: 100px;"></div>
</div>
</div>
<div class="row graph_legend">
<div class="large-12 columns centered vm_cpu_legend"></div>
</div>
</div>
<div class="large-6 medium-6 columns">
<div class="row text-center">
<div class="large-12 columns">
<h3 class="subheader">
<small>{{tr "MEMORY"}}</small>
</h3>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="large-12 columns centered graph vm_memory_graph" style="height: 100px;"></div>
</div>
</div>
<div class="row graph_legend">
<div class="large-12 columns centered vm_memory_legend"></div>
</div>
</div>
</div>
<div class="row">
<div class="large-6 medium-6 columns">
<div class="row text-center">
<div class="large-12 columns">
<h3 class="subheader">
<small>{{tr "NET RX"}}</small>
</h3>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="large-12 columns centered graph vm_net_rx_graph" style="height: 100px;"></div>
</div>
</div>
<div class="row graph_legend">
<div class="large-12 columns centered vm_net_rx_legend"></div>
</div>
</div>
<div class="large-6 medium-6 columns">
<div class="row text-center">
<div class="large-12 columns">
<h3 class="subheader">
<small>{{tr "NET TX"}}</small>
</h3>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="large-12 columns centered graph vm_net_tx_graph" style="height: 100px;"></div>
</div>
</div>
<div class="row graph_legend">
<div class="large-12 columns centered vm_net_tx_legend"></div>
</div>
</div>
</div>
<div class="row">
<div class="large-6 medium-6 columns">
<div class="row text-center">
<div class="large-12 columns">
<h3 class="subheader">
<small>{{tr "NET DOWNLOAD SPEED"}}</small>
</h3>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="large-12 columns centered graph vm_net_rx_speed_graph" style="height: 100px;"></div>
</div>
</div>
<div class="row graph_legend">
<div class="large-12 columns centered vm_net_rx_speed_legend"></div>
</div>
</div>
<div class="large-6 medium-6 columns">
<div class="row text-center">
<div class="large-12 columns">
<h3 class="subheader">
<small>{{tr "NET UPLOAD SPEED"}}</small>
</h3>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="large-12 columns centered graph vm_net_tx_speed_graph" style="height: 100px;"></div>
</div>
</div>
<div class="row graph_legend">
<div class="large-12 columns centered vm_net_tx_speed_legend"></div>
</div>
</div>
</div>
</div>
</div>
<br>
<br></div>

50
src/sunstone/public/app/tabs/provision-tab/vms/list.hbs Normal file
View File

@ -0,0 +1,50 @@
<dl class="accordion accordion_list provision_list_vms" data-accordion>
<dd class="{{#if opts.active}}active{{/if}} accordion-navigation">
<a href="#provision_list_vm_accordion{{accordionId}}" class="provision_back right only-not-active">
<span class="button medium radius"> <i class="fa fa-fw fa-lg fa-th"/><i class="fa fa-fw fa-lg fa-chevron-left"/>
</span>
</a>
<h2 class="subheader">
{{opts.title}}
<span class="provision_info_vm_name only-not-active" style="margin-left: 20px; color: #777; font-size: 20px"></span>
<span href"#" class="right only-active button medium radius secondary provision_vms_list_refresh_button"
{{#if opts.refresh}}style="display:none"{{/if}} data-tooltip title=" {{tr "Refresh"}}">
<i class="fa fa-fw fa-lg fa-refresh"/></span>
<span href"#" class="right only-not-active button medium radius secondary provision_refresh_info"
{{#if opts.refresh}}style="display:none"{{/if}} data-tooltip title=" {{tr "Refresh"}}">
<i class="fa fa-fw fa-lg fa-refresh"/>
</span>
<span href"#" class="right only-active button medium radius secondary provision_vms_list_filter_button"
{{#if opts.filter}}style="display:none"{{/if}} data-tooltip title=" {{tr "Filter by User"}}">
<i class="fa fa-fw fa-lg fa-filter"/>
</span>
<span class="right only-active provision_list_vms_filter" style="display: none"></span>
<span>
<input type="search" class="right only-active provision_list_vms_search provision-search-input right" placeholder="Search"/>
<span href"#" class="right only-active button medium radius success provision_create_vm_button"
{{#if opts.create}}style="display:none"{{/if}}>
<i class="fa fa-fw fa-lg fa-plus-square"/>
</span>
</h2>
<div id="provision_list_vm_accordion{{accordionId}}" class="content {{#if opts.active}}active{{/if}}">
<div class="row">
<div class="large-12 large-centered columns">
<table class="provision_vms_table">
<thead class="hidden">
<tr>
<th>{{tr "ID"}}</th>
<th>{{tr "Name"}}</th>
<th>{{tr "User ID"}}</th>
</tr>
</thead>
<tbody class="hidden"></tbody>
</table>
<br></div>
</div>
</div>
</dd>
<dd class="accordion-navigation">
<a class="provision_show_vm_accordion" href="#provision_show_vm_accordion{{accordionId}}"></a>
<div id="provision_show_vm_accordion{{accordionId}}" class="content">{{> tabs/provision-tab/vms/info}}</div>
</dd>
</dl>

16
src/sunstone/public/app/templates/helpers/isTabPanelEnabled.js Normal file
View File

@ -0,0 +1,16 @@
define(function(require) {
var Handlebars = require('hbs/handlebars');
var Config = require('sunstone-config');
var isTabPanelEnabled = function(tabName, panel, options) {
if (Config.isTabPanelEnabled(tabName, panel)) {
return options.fn(this);
} else {
return options.inverse(this);
}
};
Handlebars.registerHelper('isTabPanelEnabled', isTabPanelEnabled);
return isTabPanelEnabled;
})