Skip to content

Commit 9e839f8

Browse files
vincent99vincent99
committed
Merge pull request #97 from vincent99/machine
Update add-host style Fixes rancher/rancher#185
2 parents 2e3d059 + 1f4d9bb commit 9e839f8

File tree

27 files changed

+1199
-151
lines changed

27 files changed

+1199
-151
lines changed

‎app/pods/components/add-host-widget/template.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<i class="ss-plus fa-lg"></i>
22
<br/>
3-
Register a new Host
3+
Add Host

‎app/pods/components/host-widget/template.hbs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
{{#link-to "host" model.id}}{{model.displayName}}{{/link-to}}
1111
{{/if}}
1212
</div>
13+
{{#if model.showTransitioningMessage}}
14+
<div {{bind-attr class=":host-message model.isError:text-danger:text-muted"}}>
15+
{{model.transitioningMessage}}
16+
</div>
17+
{{/if}}
1318
{{#if model.isTransitioning}}
1419
<div class="progress progress-striped active">
1520
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" {{bind-attr aria-valuenow=model.displayProgress style=model.progressStyle}}>

‎app/pods/containers/new/template.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<section class="horizontal-form">
2-
<h2 class="text-center" style="margin-bottom: 20px;">Create Container</h2>
2+
<h2>Add Container</h2>
33

44
{{#if error}}
55
<div class="alert alert-danger">

‎app/pods/host/template.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
{{resource-actions-menu model=this choices=availableActions classNames="pull-right"}}
2222
</div>
2323

24-
<ul class="list-unstyled info">
24+
<ul class="list-circles">
2525
<li>
2626
<i {{bind-attr class=":fa-fw stateIcon"}}></i>
2727
{{displayState}}

‎app/pods/hosts/new/controller.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import Ember from 'ember';
22
import C from 'ui/utils/constants';
33

44
var DRIVERS = [
5-
{route: 'hosts.new.digitalocean', label: 'DigitalOcean', available: true },
6-
{route: 'hosts.new.openstack', label: 'OpenStack', available: false },
7-
{route: 'hosts.new.custom', label: 'Custom/Bare Metal', available: true },
5+
{route: 'hosts.new.digitalocean', label: 'DigitalOcean', css: 'digitalocean', available: true },
6+
{route: 'hosts.new.openstack', label: 'OpenStack', css: 'openstack', available: false },
7+
{route: 'hosts.new.custom', label: 'Custom', css: 'custom', available: true },
88
];
99

1010
export default Ember.ObjectController.extend({

‎app/pods/hosts/new/custom/template.hbs‎

Lines changed: 33 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,36 @@
1-
<ol>
2-
<li>Start up a Linux machine somewhere and install the latest version of <a href="http://www.docker.com/" target="_blank">Docker</a> on it.</li>
3-
<li>Make sure any security groups or firewalls allow traffic:
4-
<ul>
5-
<li>From the internet to <code>TCP</code> ports <code>9345</code> and <code>9346</code> <span class="text-muted">(for UI hosts stats/graphs)</span></li>
6-
<li>From and To all other hosts on <code>UDP</code> ports <code>500</code> and <code>4500</code> <span class="text-muted">(for IPsec networking)</span></li>
7-
</ul>
8-
</li>
9-
<li>Copy, paste, and run the command below to register the host with Rancher:
10-
{{#if registrationCommand}}
11-
<div class="copy-pre"><pre>{{registrationCommand}}</pre>{{zero-clipboard text=registrationCommand block=true label=false}}</div>
12-
{{else}}
13-
<div><i class="fa fa-gear fa-spin"></i> Generating registration URL...</div>
14-
{{/if}}
15-
</li>
16-
<li>Close this window. The new host should pop up on the {{#link-to "hosts"}}Hosts{{/link-to}} screen within a minute.</li>
17-
</ol>
1+
<div class="container-fluid">
2+
<div class="row form-group">
3+
<div class="col-sm-12 col-md-8 col-md-offset-2">
4+
<ul class="list-circles list-circles-clear">
5+
<li>
6+
<i>1</i>
7+
Start up a Linux machine somewhere and install the latest version of <a href="http://www.docker.com/" target="_blank">Docker</a> on it.
8+
</li>
9+
<li>
10+
<i>2</i>
11+
Make sure any security groups or firewalls allow traffic:
12+
<ul>
13+
<li>From the internet to <code>TCP</code> ports <code>9345</code> and <code>9346</code> <span class="text-muted">(for UI hosts stats/graphs)</span></li>
14+
<li>From and To all other hosts on <code>UDP</code> ports <code>500</code> and <code>4500</code> <span class="text-muted">(for IPsec networking)</span></li>
15+
</ul>
16+
</li>
17+
<li>
18+
<i>3</i>
19+
Copy, paste, and run the command below to register the host with Rancher:
20+
{{#if registrationCommand}}
21+
<div class="copy-pre"><pre>{{registrationCommand}}</pre>{{zero-clipboard text=registrationCommand block=true label=false}}</div>
22+
{{else}}
23+
<div><i class="fa fa-gear fa-spin"></i> Generating registration URL...</div>
24+
{{/if}}
25+
</li>
26+
<li>
27+
<i>4</i>
28+
Click close below. The new host should pop up on the {{#link-to "hosts"}}Hosts{{/link-to}} screen within a minute.
29+
</li>
30+
</ul>
31+
</div>
32+
</div>
33+
</div>
1834

1935
<div class="footer-actions">
2036
<button {{action "cancel"}} class="btn btn-primary">Close</button>

‎app/pods/hosts/new/digitalocean/controller.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ var regionChoices = Regions.regions.filter(function(region) {
1313

1414
export default Ember.ObjectController.extend(Cattle.NewOrEditMixin, {
1515
needs: ['hosts/new'],
16+
error: null,
1617
regionChoices: regionChoices,
1718

1819
sizeChoices: function() {
@@ -58,13 +59,13 @@ export default Ember.ObjectController.extend(Cattle.NewOrEditMixin, {
5859
var accessToken = this.get('digitaloceanConfig.accessToken')||'';
5960
if ( accessToken.length === 0 )
6061
{
61-
this.controllerFor('hosts/new').set('error', "Access Token is required");
62+
this.set('error', "Access Token is required");
6263
return false;
6364
}
6465

6566
if ( accessToken.length !== 64 )
6667
{
67-
this.controllerFor('hosts/new').set('error', "That doesn't look like a valid access token");
68+
this.set('error', "That doesn't look like a valid access token");
6869
return false;
6970
}
7071

‎app/pods/hosts/new/digitalocean/template.hbs‎

Lines changed: 78 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,93 @@
1-
<div class="row">
1+
{{#if error}}
2+
<div class="alert alert-danger">
3+
<i style="float: left;" class="ss-alert"></i>
4+
<p style="margin-left: 50px">{{error}}</p>
5+
</div>
6+
{{/if}}
27

3-
<div class="col-md-6">
4-
<div class="form-group">
5-
<label for="name">Name</label>
6-
{{input id="name" type="text" value=name classNames="form-control" placeholder="e.g. host01"}}
7-
</div>
8-
<div class="form-group">
9-
<label for="description">Description</label>
10-
{{textarea id="description" value=description classNames="form-control no-resize" rows="3" placeholder="e.g. My DigitalOcean host"}}
8+
<section class="horizontal-form">
9+
<div class="container-fluid">
10+
<div class="row form-group">
11+
<div class="col-sm-12 col-md-2 form-label">
12+
<label for="name" class="form-control-static">Name</label>
13+
</div>
14+
<div class="col-sm-12 col-md-8">
15+
{{input id="name" type="text" value=name classNames="form-control" placeholder="e.g. app01"}}
16+
</div>
1117
</div>
12-
</div>
1318

14-
<div class="col-md-6">
15-
<div class="form-group">
16-
<label for="accessToken">Access Token</label>
17-
{{input id="accessToken" type="text" value=digitaloceanConfig.accessToken classNames="form-control" placeholder="Your DigitalOcean API access token"}}
18-
<p class="help-block">A <b>Personal Access Token</b> from the <a href="https://cloud.digitalocean.com/settings/applications" target="_blank">Apps & API</a> screen</p>
19+
<div class="row form-group">
20+
<div class="col-sm-12 col-md-2 form-label">
21+
<label for="description" class="form-control-static">Description</label>
22+
</div>
23+
<div class="col-sm-12 col-md-8">
24+
{{textarea id="description" value=description classNames="form-control no-resize" rows="3" placeholder="e.g. My DigitalOcean host"}}
25+
</div>
1926
</div>
2027

2128
<div class="row">
29+
<div class="col-xs-10 col-xs-offset-1">
30+
<hr/>
31+
</div>
32+
</div>
2233

23-
<div class="col-sm-4">
24-
<div class="form-group">
25-
<label for="region">Region</label>
26-
{{view "select"
27-
class="form-control"
28-
id="region"
29-
content=regionChoices
30-
optionValuePath="content.id"
31-
optionLabelPath="content.name"
32-
value=digitaloceanConfig.region
33-
}}
34-
</div>
34+
<div class="row form-group">
35+
<div class="col-sm-12 col-md-2 form-label">
36+
<label for="accessToken" class="form-control-static">Access Token</label>
3537
</div>
38+
<div class="col-sm-12 col-md-8">
39+
{{input id="accessToken" type="text" value=digitaloceanConfig.accessToken classNames="form-control" placeholder="Your DigitalOcean API access token"}}
40+
<p class="help-block">A Personal Access Token from the DigitalOcean <a href="https://cloud.digitalocean.com/settings/applications" target="_blank">Apps & API</a> screen</p>
41+
</div>
42+
</div>
3643

37-
<div class="col-sm-4">
38-
<div class="form-group">
39-
<label for="size">Size</label>
40-
{{view "select"
41-
class="form-control"
42-
id="size"
43-
content=sizeChoices
44-
value=digitaloceanConfig.size
45-
}}
46-
</div>
44+
<div class="row">
45+
<div class="col-xs-10 col-xs-offset-1">
46+
<hr/>
4747
</div>
48+
</div>
4849

49-
<div class="col-sm-4">
50-
<div class="form-group">
51-
<label for="image">Image</label>
52-
{{view "select"
53-
class="form-control"
54-
id="image"
55-
content=imageChoices
56-
value=digitaloceanConfig.image
57-
}}
58-
</div>
50+
<div class="row form-group">
51+
<div class="col-sm-12 col-md-2 form-label">
52+
<label for="image" class="form-control-static">Image</label>
53+
</div>
54+
<div class="col-sm-12 col-md-8">
55+
{{view "select"
56+
class="form-control"
57+
id="image"
58+
content=imageChoices
59+
value=digitaloceanConfig.image
60+
}}
5961
</div>
62+
</div>
6063

64+
<div class="row form-group">
65+
<div class="col-sm-12 col-md-2 form-label">
66+
<label for="size" class="form-control-static">Size</label>
67+
</div>
68+
<div class="col-sm-12 col-md-4">
69+
{{view "select"
70+
class="form-control"
71+
id="size"
72+
content=sizeChoices
73+
value=digitaloceanConfig.size
74+
}}
75+
</div>
76+
<div class="col-sm-12 col-md-1 form-label" style="text-align: left">
77+
<label for="region" class="form-control-static">Region</label>
78+
</div>
79+
<div class="col-sm-12 col-md-3">
80+
{{view "select"
81+
class="form-control"
82+
id="region"
83+
content=regionChoices
84+
optionValuePath="content.id"
85+
optionLabelPath="content.name"
86+
value=digitaloceanConfig.region
87+
}}
88+
</div>
6189
</div>
6290
</div>
63-
</div>
64-
{{partial "save-cancel"}}
91+
92+
{{partial "save-cancel"}}
93+
</section>

‎app/pods/hosts/new/route.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import OverlayRoute from 'ui/pods/overlay/route';
21
import C from 'ui/utils/constants';
32
import Ember from 'ember';
43

5-
export default OverlayRoute.extend({
4+
export default Ember.Route.extend({
65
model: function() {
6+
var store = this.get('store');
77
var userType = this.get('session').get(C.USER_TYPE_SESSION_KEY);
88
var isAdmin = userType === undefined || userType === C.USER_TYPE_ADMIN;
9-
if ( isAdmin )
9+
if ( isAdmin && store.hasRecordFor('schema','setting') )
1010
{
11-
return this.get('store').find('setting', C.SETTING_API_HOST).then((setting) => {
11+
return store.find('setting', C.SETTING_API_HOST).then((setting) => {
1212
if ( setting.get('value') )
1313
{
1414
return Ember.RSVP.resolve();
@@ -29,7 +29,7 @@ export default OverlayRoute.extend({
2929
}
3030
},
3131

32-
renderTemplate: function() {
33-
this.render('hosts/new', {into: 'application', outlet: 'overlay'});
32+
activate: function() {
33+
this.send('setPageLayout', {label: 'All Hosts', backRoute: 'hosts'});
3434
},
3535
});

‎app/pods/hosts/new/template.hbs‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
1-
<h2>Register A New Host</h2>
1+
<section class="horizontal-form" style="background-color: white;">
2+
<h2>Add Host</h2>
23

3-
{{#if error}}
4-
<div class="alert alert-danger">
5-
<i style="float: left;" class="ss-alert"></i>
6-
<p style="margin-left: 50px">{{error}}</p>
4+
<div class="container-fluid">
5+
<div class="row">
6+
<div class="col-sm-12 col-md-2 form-label">
7+
<label class="form-control-static">Provider</label>
8+
</div>
9+
<div class="col-sm-12 col-md-8">
10+
<ul class="nav nav-boxes" id="providers">
11+
{{#each driver in drivers}}
12+
{{#if driver.available}}
13+
{{#link-to driver.route tagName="li" href=false}}
14+
<a {{bind-attr alt=driver.label class=":machine-driver driver.css"}}></a>
15+
{{/link-to}}
16+
{{/if}}
17+
{{/each}}
18+
</ul>
19+
</div>
20+
</div>
721
</div>
8-
{{/if}}
9-
10-
<ul class="nav nav-tabs">
11-
{{#each driver in drivers}}
12-
{{#if driver.available}}
13-
{{#link-to driver.route tagName="li" href=false}}
14-
<a>{{driver.label}}</a>
15-
{{/link-to}}
16-
{{/if}}
17-
{{/each}}
18-
19-
{{#if isAdmin}}
20-
{{#link-to "hosts.setup" tagName="li" href=false class="pull-right"}}
21-
<a>Setup</a>
22-
{{/link-to}}
23-
{{/if}}
24-
</ul>
22+
<div style="width: 10px; height: 10px; margin: 0 auto; border: 10px solid white; border-bottom-color: #f4f5f8; border-top: 0;"></div>
23+
</section>
2524

2625
<section>
2726
{{outlet}}
2827
</section>
29-
{{partial "overlay-close"}}

0 commit comments

Comments
 (0)