Skip to content

Commit a045d26

Browse files
summerisgonesummerisgone
committed
Removed do regions request, re-added run and status
1 parent 7866d71 commit a045d26

File tree

7 files changed

+154
-35
lines changed

7 files changed

+154
-35
lines changed

‎app/server.py‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -100,20 +100,6 @@ async def post_config(request):
100100
return web.json_response({'ok': True})
101101

102102

103-
@routes.post('/do/regions')
104-
async def get_do_regions(request):
105-
data = await request.json()
106-
async with aiohttp.ClientSession() as session:
107-
url = 'https://api.digitalocean.com/v2/regions'
108-
headers = {
109-
'Content-Type': 'application/json',
110-
'Authorization': 'Bearer {0}'.format(data['token']),
111-
}
112-
async with session.get(url, headers=headers) as r:
113-
json_body = await r.json()
114-
return web.json_response(json_body)
115-
116-
117103
app = web.Application()
118104
app.router.add_routes(routes)
119105
web.run_app(app, port=9000)

‎app/static/command-preview.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<div class="row">
3+
<h2 class="col-12">
4+
<button type="button" class="btn btn-secondary back-button" v-on:click="$emit('back')"><</button>
5+
🧐 Review and Start!
6+
</h2>
7+
<section class="my-3">
8+
<pre class="code"><code>
9+
{{cli_preview}}
10+
</code></pre>
11+
<button v-on:click="$emit('submit')" class="btn btn-primary" type="button">Run!</button>
12+
</section>
13+
</div>
14+
</template>
15+
16+
<script>
17+
module.exports = {
18+
props: ['extra_args'],
19+
computed: {
20+
cli_preview: function() {
21+
let args = "";
22+
for (arg in this.extra_args) {
23+
args += `${arg}=${this.extra_args[arg]} `;
24+
}
25+
return `ansible-playbook main.yml --extra-vars ${args}`;
26+
}
27+
}
28+
}
29+
</script>
30+
<style scoped>
31+
.back-button {
32+
position: absolute;
33+
border-radius: 50%;
34+
left: -2em;
35+
}
36+
.code {
37+
white-space: normal;
38+
background: black;
39+
color: lightgrey;
40+
padding: 1em;
41+
}
42+
</style>

‎app/static/index.html‎

Lines changed: 39 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,28 @@ <h1 class="mb-5 text-center">{{ title }}</h1>
2828
<user-config class="col-md-4 order-md-2 mb-4"></user-config>
2929
<vpn-setup class="col-md-8 order-md-1"
3030
v-bind:extra_args="extra_args"
31-
v-on:submit="set_step('provider'); update_extra_args"></vpn-setup>
31+
v-on:submit="step = 'provider'"></vpn-setup>
3232
</div>
3333
</transition>
3434
<transition name="fade">
3535
<provider-setup v-if="step == 'provider'"
3636
v-bind:extra_args="extra_args"
37-
v-on:submit="update_extra_args"
38-
v-on:back="set_step('setup')">
37+
v-on:submit="step = 'command'"
38+
v-on:back="step = 'setup'">
3939
</provider-setup>
4040
</transition>
41+
<transition name="fade">
42+
<command-preview v-if="step == 'command'"
43+
v-bind:extra_args="extra_args"
44+
v-on:submit="start(); step = 'running';"
45+
v-on:back="step = 'provider'">
46+
</command-preview>
47+
</transition>
48+
<transition name="fade">
49+
<status-running v-if="step == 'running'"
50+
v-on:submit="stop(); step = 'setup';">
51+
</status-running>
52+
</transition>
4153
</div>
4254

4355
<script>
@@ -47,7 +59,7 @@ <h1 class="mb-5 text-center">{{ title }}</h1>
4759
playbook: {},
4860
step: 'setup',
4961
extra_args: {
50-
server_name: "algo",
62+
server_name: 'algo2',
5163
ondemand_cellular: false,
5264
ondemand_wifi: false,
5365
dns_adblocking: false,
@@ -65,13 +77,32 @@ <h1 class="mb-5 text-center">{{ title }}</h1>
6577
'user-config': window.httpVueLoader('/static/user-config.vue'),
6678
'vpn-setup': window.httpVueLoader('/static/vpn-setup.vue'),
6779
'provider-setup': window.httpVueLoader('/static/provider-setup.vue'),
80+
'command-preview': window.httpVueLoader('/static/command-preview.vue'),
81+
'status-running': window.httpVueLoader('/static/status-running.vue'),
82+
},
83+
created() {
84+
fetch("/playbook")
85+
.then(r => r.json())
86+
.then(data => {
87+
if (data.status === 'running') {
88+
this.step = 'running';
89+
}
90+
});
6891
},
6992
methods: {
70-
set_step: function(step) {
71-
this.step = step;
93+
start: function() {
94+
fetch("/playbook", {
95+
method: "POST",
96+
body: JSON.stringify(this.extra_args),
97+
headers: {
98+
"Content-Type": "application/json"
99+
}
100+
});
72101
},
73-
update_extra_args: function(extra_args) {
74-
Object.assign(this.extra_args, extra_args);
102+
stop() {
103+
fetch("/playbook", {
104+
method: "DELETE"
105+
});
75106
}
76107
}
77108
})

‎app/static/provider-do.vue‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,11 @@ module.exports = {
5656
methods: {
5757
load_do_regions: function () {
5858
this.do_region_loading = true;
59-
fetch("/do/regions", {
60-
method: "POST",
59+
fetch('https://api.digitalocean.com/v2/regions', {
6160
headers: {
62-
"Content-Type": "application/json"
63-
},
64-
body: JSON.stringify({ token: this.do_token })
61+
'Content-Type': 'application/json',
62+
'Authorization': `Bearer ${this.do_token}`
63+
}
6564
})
6665
.then(r => r.json())
6766
.then(r => {
@@ -79,4 +78,4 @@ module.exports = {
7978
}
8079
}
8180
};
82-
</script>
81+
</script>

‎app/static/provider-setup.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="row" id="prodiver_id">
2+
<div class="row">
33
<h2 class="col-12">
44
<button type="button" class="btn btn-secondary back-button" v-on:click="$emit('back')"><</button>
55
<span v-if="provider">{{ provider.name }} Setup</span>
@@ -12,7 +12,7 @@
1212
v-bind:key="item.alias">
1313
<a
1414
class="nav-link"
15-
href="#prodiver_id"
15+
href="#"
1616
v-bind:class="{ active: item.alias === (provider && provider.alias) }"
1717
v-on:click="set_provider(item)"
1818
>{{item.name}}</a>
@@ -49,12 +49,16 @@ module.exports = {
4949
]
5050
}
5151
},
52+
// Warning: Mutable Object to edit parent props
53+
props: ['extra_args'],
5254
methods: {
5355
set_provider(provider) {
5456
this.provider = provider;
57+
this.extra_args.provider = provider.alias;
5558
},
5659
on_provider_submit(extra_args) {
57-
this.$emit('submit', Object.assign({provider: this.provider.alias}, extra_args));
60+
Object.assign(this.extra_args, extra_args);
61+
this.$emit('submit');
5862
}
5963
},
6064
components: {

‎app/static/status-running.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<div class="row status-container">
3+
<h2 class="col-12"><span class="spin">🙃</span>Please be patient</h2>
4+
<section class="status-text">
5+
<p>VPN set up usually takes 5-15 minutes</p>
6+
<p>You can close tab and open it again</p>
7+
<p>You can try to <button type="button" class="btn btn-link back-button" v-on:click="$emit('submit')">STOP</button> setup and run it again</p>
8+
<p>Don’t close terminal!</p>
9+
</section>
10+
</div>
11+
</template>
12+
13+
<script>
14+
module.exports = {
15+
props: function() {
16+
// Warning: Mutable Object to edit partent props
17+
extra_args: Object
18+
},
19+
computed: {
20+
cli_preview() {
21+
return 'ansible-playbook main.yml --extra-vars "server_name=algo ondemand_cellular=true ondemand_wifi=true dns_adblocking=false ssh_tunneling=false store_pki=false ondemand_wifi_exclude=[] provider=digitalocean do_token=ad6b4405df208053e7b41e1c9e74b97364af1d6b902f6b6bb1d5575c52eca0c3 region=blr1"';
22+
}
23+
}
24+
}
25+
</script>
26+
<style scoped>
27+
.back-button {
28+
color: red;
29+
}
30+
.status-container {
31+
display: flex;
32+
flex-direction: column;
33+
}
34+
.status-text {
35+
flex: 1;
36+
display: flex;
37+
flex-direction: column;
38+
justify-content: center;
39+
}
40+
.spin {
41+
animation-name: spin;
42+
animation-duration: 5000ms;
43+
animation-iteration-count: infinite;
44+
animation-timing-function: linear;
45+
46+
display: block;
47+
animation-delay: 5s;
48+
width: 1em;
49+
height: 100%;
50+
}
51+
@keyframes spin {
52+
from {
53+
transform:rotate(0deg);
54+
}
55+
to {
56+
transform:rotate(360deg);
57+
}
58+
}
59+
</style>

‎app/static/vpn-setup.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -103,9 +103,7 @@
103103

104104
<script>
105105
module.exports = {
106-
props: {
107-
// Warning: Mutable Object to edit partent props
108-
extra_args: Object
109-
}
106+
// Warning: Mutable Object to edit partent props
107+
props: ['extra_args']
110108
}
111109
</script>

0 commit comments

Comments
 (0)