Skip to content

Commit 2011367

Browse files
orangetcyFxKu
orangetcy
and
FxKu
authored
feat: [ui] Relative navigation; add storageClass (#1835)
- Change all ui request from absolute path to relative path. Can access ui web like ex.com/pgo/ with nginx spec config relative issue: #1613 - Add storageClass field relative-nav Co-authored-by: Felix Kunde <felix-kunde@gmx.de>
1 parent e80cccb commit 2011367

File tree

10 files changed

+93
-70
lines changed

10 files changed

+93
-70
lines changed

‎ui/app/src/app.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -214,13 +214,13 @@ const delete_cluster = (namespace, clustername) => {
214214
jQuery.ajax({
215215
type: 'DELETE',
216216
url: (
217-
'/postgresqls/'
217+
'./postgresqls/'
218218
+ encodeURI(namespace)
219219
+ '/' + encodeURI(clustername)
220220
),
221221
dataType: 'text',
222-
success: () => location.assign('/#/list'),
223-
error: (r, status, error) => location.assign('/#/list'), // TODO: show error
222+
success: () => location.assign('./#/list'),
223+
error: (r, status, error) => location.assign('./#/list'), // TODO: show error
224224
})
225225
},
226226
},

‎ui/app/src/app.tag.pug‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,23 @@ app
44
.container
55

66
.navbar-header
7-
a.navbar-brand(href='/')
7+
a.navbar-brand(href='./')
88
| PostgreSQL Operator UI
99

1010
#navbar.navbar-collapse.collapse
1111
ul.nav.navbar-nav
1212

1313
li(class='{ active: ["EDIT", "LIST", "LOGS", "STATUS"].includes(activenav) }')
14-
a(href='/#/list') PostgreSQL clusters
14+
a(href='./#/list') PostgreSQL clusters
1515

1616
li(class='{ active: "BACKUPS" === activenav }')
17-
a(href='/#/backups') Backups
17+
a(href='./#/backups') Backups
1818

1919
li(class='{ active: "OPERATOR" === activenav }')
20-
a(href='/#/operator') Status
20+
a(href='./#/operator') Status
2121

2222
li(class='{ active: "NEW" === activenav }')
23-
a(href='/#/new') New cluster
23+
a(href='./#/new') New cluster
2424

2525
li(if='{ config }')
2626
a(href='{ config.docs_link }' target='_blank') Documentation
@@ -55,7 +55,7 @@ app
5555
|
5656
| or
5757
|
58-
a(href="/") start over
58+
a(href="./") start over
5959
| .
6060

6161
div(if='{ config }')
@@ -152,12 +152,12 @@ app
152152

153153
;(
154154
jQuery
155-
.get('/config')
155+
.get('./config')
156156
.done(config => {
157157
this.config = config
158158
;(
159159
jQuery
160-
.get('/teams')
160+
.get('./teams')
161161
.done(teams => {
162162
this.teams = teams.sort()
163163
this.team = this.teams[0]

‎ui/app/src/edit.tag.pug‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,18 @@ edit
66
ol.breadcrumb
77

88
li.breadcrumb-item
9-
a(href='/#/list')
9+
a(href='./#/list')
1010
| PostgreSQL clusters
1111

1212
li.breadcrumb-item(if='{ cluster_path }')
13-
a(href='/#/status/{ cluster_path }')
13+
a(href='./#/status/{ cluster_path }')
1414
| { qname }
1515

1616
li.breadcrumb-item.active(
1717
aria-current='page'
1818
if='{ cluster_path }'
1919
)
20-
a(href='/#/edit/{ cluster_path }')
20+
a(href='./#/edit/{ cluster_path }')
2121
| Edit
2222

2323
.row(if='{ cluster_path }')
@@ -92,7 +92,7 @@ edit
9292

9393
jQuery.ajax({
9494
type: 'POST',
95-
url: '/postgresqls/' + this.cluster_path,
95+
url: './postgresqls/' + this.cluster_path,
9696
contentType:"application/json",
9797
data: jsonPayload,
9898
processData: false,
@@ -113,7 +113,7 @@ edit
113113

114114
this.pollProgress = () => {
115115
jQuery.get(
116-
'/postgresqls/' + this.cluster_path,
116+
'./postgresqls/' + this.cluster_path,
117117
).then(data => {
118118

119119
// Input data:
@@ -148,6 +148,9 @@ edit
148148
throughput: i.spec.volume.throughput || 125,
149149
iops: i.spec.volume.iops || 3000
150150
}
151+
if ('storageClass' in i.spec.volume) {
152+
o.spec.volume.storageClass=i.spec.volume.storageClass
153+
}
151154

152155
o.spec.postgresql = {}
153156
o.spec.postgresql.version = i.spec.postgresql.version

‎ui/app/src/logs.tag.pug‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ logs
55
ol.breadcrumb
66

77
li.breadcrumb-item
8-
a(href='/#/list')
8+
a(href='./#/list')
99
| PostgreSQL clusters
1010

1111
li.breadcrumb-item
12-
a(href='/#/status/{ cluster_path }')
12+
a(href='./#/status/{ cluster_path }')
1313
| { qname }
1414

1515
li.breadcrumb-item
16-
a(href='/#/logs/{ cluster_path }')
16+
a(href='./#/logs/{ cluster_path }')
1717
| Logs
1818

1919
.sk-spinner-pulse(if='{ logs === undefined }')
@@ -26,7 +26,7 @@ logs
2626
|
2727
| or
2828
|
29-
a(href="/") start over
29+
a(href="./") start over
3030
| .
3131

3232
.container-fluid(if='{ logs }')
@@ -72,7 +72,7 @@ logs
7272
)
7373
;(
7474
jQuery
75-
.get(`/operator/clusters/${cluster_path}/logs`)
75+
.get(`./operator/clusters/${cluster_path}/logs`)
7676
.done(logs => this.logs = logs.reverse())
7777
.fail(() => this.logs = null)
7878
.always(() => this.update())

‎ui/app/src/new.tag.pug‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ new
1818
ol.breadcrumb
1919

2020
li.breadcrumb-item
21-
a(href='/#/new')
21+
a(href='./#/new')
2222
| New PostgreSQL cluster
2323

2424
.row.text-center(if='{ !creating }')
@@ -64,7 +64,7 @@ new
6464

6565
a.btn.btn-small.btn-warning(
6666
if='{ clusterExists }'
67-
href='/#/status/{ namespace.state }/{ name }'
67+
href='./#/status/{ namespace.state }/{ name }'
6868
)
6969
| Cluster exists (show status)
7070

@@ -299,8 +299,21 @@ new
299299
)
300300
.input-group-addon
301301
.input-units Gi
302+
302303
tr
304+
td storageClass
303305
td
306+
.input-group
307+
input.form-control(
308+
ref='volumeStorageClass'
309+
type='text'
310+
value='{ volumeStorageClass }'
311+
onchange='{ storageClassChange }'
312+
onkeyup='{ storageClassChange }'
313+
)
314+
315+
tr
316+
td
304317
td Specify Iops and Throughput only if you need more than the default 3000 Iops and 125Mb/s EBS provides.
305318

306319
tr
@@ -582,7 +595,8 @@ new
582595
enableReplicaPoolerLoadBalancer: true
583596
{{/if}}
584597
volume:
585-
size: "{{ volumeSize }}Gi"{{#if iops}}
598+
size: "{{ volumeSize }}Gi"{{#if volumeStorageClass}}
599+
storageClass: "{{ volumeStorageClass }}"{{/if}}{{#if iops}}
586600
iops: {{ iops }}{{/if}}{{#if throughput}}
587601
throughput: {{ throughput }}{{/if}}
588602
{{#if users}}
@@ -638,6 +652,7 @@ new
638652
enableMasterPoolerLoadBalancer: this.enableMasterPoolerLoadBalancer,
639653
enableReplicaPoolerLoadBalancer: this.enableReplicaPoolerLoadBalancer,
640654
volumeSize: this.volumeSize,
655+
volumeStorageClass: this.volumeStorageClass,
641656
iops: this.iops,
642657
throughput: this.throughput,
643658
users: this.users.valids,
@@ -716,6 +731,10 @@ new
716731
this.volumeSize = +e.target.value
717732
}
718733

734+
this.storageClassChange = e => {
735+
this.volumeStorageClass = e.target.value
736+
}
737+
719738
this.iopsChange = e => {
720739
this.iops = +e.target.value
721740
}
@@ -759,7 +778,7 @@ new
759778
this.checkClusterExists = () => (
760779
jQuery
761780
.get(
762-
'/postgresqls/'
781+
'./postgresqls/'
763782
+ this.namespace.state
764783
+ '/'
765784
+ this.clusterName
@@ -781,7 +800,7 @@ new
781800

782801
jQuery.ajax({
783802
type: 'POST',
784-
url: '/create-cluster',
803+
url: './create-cluster',
785804
contentType:'application/json',
786805
data: jsonPayload,
787806
processData: false,
@@ -1013,6 +1032,7 @@ new
10131032

10141033
this.clusterName = (this.name + '-').toLowerCase()
10151034
this.volumeSize = 10
1035+
this.volumeStorageClass = ''
10161036
this.instanceCount = 1
10171037
this.ranges = {}
10181038
this.odd = ''

‎ui/app/src/postgresql.tag.pug‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ postgresql
66
ol.breadcrumb
77

88
li.breadcrumb-item
9-
a(href='/#/list')
9+
a(href='./#/list')
1010
| PostgreSQL clusters
1111

1212
li.breadcrumb-item(if='{ cluster_path }')
13-
a(href='/#/status/{ cluster_path }')
13+
a(href='./#/status/{ cluster_path }')
1414
| { qname }
1515

1616
.row(if='{ cluster_path }')
@@ -39,20 +39,20 @@ postgresql
3939
)
4040

4141
a.btn.btn-info(
42-
href='/#/logs/{ cluster_path }'
42+
href='./#/logs/{ cluster_path }'
4343
)
4444
| Logs
4545

4646
a.btn(
4747
class='btn-{ opts.read_write ? "primary" : "info" }'
4848
if='{ progress.postgresql }'
49-
href='/#/clone/{ clustername }/{ uid }/{ encodeURI(new Date().toISOString()) }'
49+
href='./#/clone/{ clustername }/{ uid }/{ encodeURI(new Date().toISOString()) }'
5050
)
5151
| Clone
5252

5353
a.btn(
5454
class='btn-{ opts.read_write ? "warning" : "info" }'
55-
href='/#/edit/{ cluster_path }'
55+
href='./#/edit/{ cluster_path }'
5656
)
5757
| Edit
5858

@@ -124,7 +124,7 @@ postgresql
124124

125125
this.pollProgress = () => {
126126
jQuery.get(
127-
'/postgresqls/' + this.cluster_path,
127+
'./postgresqls/' + this.cluster_path,
128128
).done(data => {
129129
this.progress.pooler = false
130130
this.progress.postgresql = true
@@ -137,13 +137,13 @@ postgresql
137137
this.update()
138138

139139
jQuery.get(
140-
'/statefulsets/' + this.cluster_path,
140+
'./statefulsets/' + this.cluster_path,
141141
).done(data => {
142142
this.progress.statefulSet = true
143143
this.update()
144144

145145
jQuery.get(
146-
'/statefulsets/' + this.cluster_path + '/pods',
146+
'./statefulsets/' + this.cluster_path + '/pods',
147147
).done(data => {
148148
if (data.length > 0) {
149149
this.progress.containerFirst = true
@@ -157,7 +157,7 @@ postgresql
157157
this.update()
158158

159159
jQuery.get(
160-
'/services/' + this.cluster_path,
160+
'./services/' + this.cluster_path,
161161
).done(data => {
162162
if (data.metadata && data.metadata.annotations && 'zalando.org/dnsname' in data.metadata.annotations) {
163163
this.progress.dnsName = data.metadata.annotations['zalando.org/dnsname']
@@ -169,12 +169,12 @@ postgresql
169169
}
170170

171171
if (this.progress.poolerEnabled == true) {
172-
jQuery.get('/pooler/' + this.cluster_path).done(data => {
172+
jQuery.get('./pooler/' + this.cluster_path).done(data => {
173173
this.progress.pooler = {"url": ""}
174174
this.update()
175175
})
176176
}
177-
177+
178178
this.update()
179179
})
180180
})

0 commit comments

Comments
 (0)