From 20113675252239fe51006a2b8e0e292f87de91de Mon Sep 17 00:00:00 2001 From: chengyou tang Date: Thu, 29 Dec 2022 22:22:22 +0800 Subject: [PATCH] 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: zalando#1613 - Add storageClass field relative-nav Co-authored-by: Felix Kunde --- ui/app/src/app.js | 6 +++--- ui/app/src/app.tag.pug | 16 +++++++-------- ui/app/src/edit.tag.pug | 13 ++++++++----- ui/app/src/logs.tag.pug | 10 +++++----- ui/app/src/new.tag.pug | 30 ++++++++++++++++++++++++----- ui/app/src/postgresql.tag.pug | 22 ++++++++++----------- ui/app/src/postgresqls.tag.pug | 26 ++++++++++++------------- ui/app/src/restore.tag.pug | 14 +++++++------- ui/app/src/status.tag.pug | 16 +++++++-------- ui/operator_ui/templates/index.html | 10 +++++----- 10 files changed, 93 insertions(+), 70 deletions(-) diff --git a/ui/app/src/app.js b/ui/app/src/app.js index 9eb7569e6..20c92e63e 100644 --- a/ui/app/src/app.js +++ b/ui/app/src/app.js @@ -214,13 +214,13 @@ const delete_cluster = (namespace, clustername) => { jQuery.ajax({ type: 'DELETE', url: ( - '/postgresqls/' + './postgresqls/' + encodeURI(namespace) + '/' + encodeURI(clustername) ), dataType: 'text', - success: () => location.assign('/#/list'), - error: (r, status, error) => location.assign('/#/list'), // TODO: show error + success: () => location.assign('./#/list'), + error: (r, status, error) => location.assign('./#/list'), // TODO: show error }) }, }, diff --git a/ui/app/src/app.tag.pug b/ui/app/src/app.tag.pug index 365371e63..f53d425da 100644 --- a/ui/app/src/app.tag.pug +++ b/ui/app/src/app.tag.pug @@ -4,23 +4,23 @@ app .container .navbar-header - a.navbar-brand(href='/') + a.navbar-brand(href='./') | PostgreSQL Operator UI #navbar.navbar-collapse.collapse ul.nav.navbar-nav li(class='{ active: ["EDIT", "LIST", "LOGS", "STATUS"].includes(activenav) }') - a(href='/#/list') PostgreSQL clusters + a(href='./#/list') PostgreSQL clusters li(class='{ active: "BACKUPS" === activenav }') - a(href='/#/backups') Backups + a(href='./#/backups') Backups li(class='{ active: "OPERATOR" === activenav }') - a(href='/#/operator') Status + a(href='./#/operator') Status li(class='{ active: "NEW" === activenav }') - a(href='/#/new') New cluster + a(href='./#/new') New cluster li(if='{ config }') a(href='{ config.docs_link }' target='_blank') Documentation @@ -55,7 +55,7 @@ app | | or | - a(href="/") start over + a(href="./") start over | . div(if='{ config }') @@ -152,12 +152,12 @@ app ;( jQuery - .get('/config') + .get('./config') .done(config => { this.config = config ;( jQuery - .get('/teams') + .get('./teams') .done(teams => { this.teams = teams.sort() this.team = this.teams[0] diff --git a/ui/app/src/edit.tag.pug b/ui/app/src/edit.tag.pug index ddcaa4653..5b03c06da 100644 --- a/ui/app/src/edit.tag.pug +++ b/ui/app/src/edit.tag.pug @@ -6,18 +6,18 @@ edit ol.breadcrumb li.breadcrumb-item - a(href='/#/list') + a(href='./#/list') | PostgreSQL clusters li.breadcrumb-item(if='{ cluster_path }') - a(href='/#/status/{ cluster_path }') + a(href='./#/status/{ cluster_path }') | { qname } li.breadcrumb-item.active( aria-current='page' if='{ cluster_path }' ) - a(href='/#/edit/{ cluster_path }') + a(href='./#/edit/{ cluster_path }') | Edit .row(if='{ cluster_path }') @@ -92,7 +92,7 @@ edit jQuery.ajax({ type: 'POST', - url: '/postgresqls/' + this.cluster_path, + url: './postgresqls/' + this.cluster_path, contentType:"application/json", data: jsonPayload, processData: false, @@ -113,7 +113,7 @@ edit this.pollProgress = () => { jQuery.get( - '/postgresqls/' + this.cluster_path, + './postgresqls/' + this.cluster_path, ).then(data => { // Input data: @@ -148,6 +148,9 @@ edit throughput: i.spec.volume.throughput || 125, iops: i.spec.volume.iops || 3000 } + if ('storageClass' in i.spec.volume) { + o.spec.volume.storageClass=i.spec.volume.storageClass + } o.spec.postgresql = {} o.spec.postgresql.version = i.spec.postgresql.version diff --git a/ui/app/src/logs.tag.pug b/ui/app/src/logs.tag.pug index e25cc979e..be79168af 100644 --- a/ui/app/src/logs.tag.pug +++ b/ui/app/src/logs.tag.pug @@ -5,15 +5,15 @@ logs ol.breadcrumb li.breadcrumb-item - a(href='/#/list') + a(href='./#/list') | PostgreSQL clusters li.breadcrumb-item - a(href='/#/status/{ cluster_path }') + a(href='./#/status/{ cluster_path }') | { qname } li.breadcrumb-item - a(href='/#/logs/{ cluster_path }') + a(href='./#/logs/{ cluster_path }') | Logs .sk-spinner-pulse(if='{ logs === undefined }') @@ -26,7 +26,7 @@ logs | | or | - a(href="/") start over + a(href="./") start over | . .container-fluid(if='{ logs }') @@ -72,7 +72,7 @@ logs ) ;( jQuery - .get(`/operator/clusters/${cluster_path}/logs`) + .get(`./operator/clusters/${cluster_path}/logs`) .done(logs => this.logs = logs.reverse()) .fail(() => this.logs = null) .always(() => this.update()) diff --git a/ui/app/src/new.tag.pug b/ui/app/src/new.tag.pug index c066ad4f4..5c21f93c7 100644 --- a/ui/app/src/new.tag.pug +++ b/ui/app/src/new.tag.pug @@ -18,7 +18,7 @@ new ol.breadcrumb li.breadcrumb-item - a(href='/#/new') + a(href='./#/new') | New PostgreSQL cluster .row.text-center(if='{ !creating }') @@ -64,7 +64,7 @@ new a.btn.btn-small.btn-warning( if='{ clusterExists }' - href='/#/status/{ namespace.state }/{ name }' + href='./#/status/{ namespace.state }/{ name }' ) | Cluster exists (show status) @@ -299,8 +299,21 @@ new ) .input-group-addon .input-units Gi + tr + td storageClass td + .input-group + input.form-control( + ref='volumeStorageClass' + type='text' + value='{ volumeStorageClass }' + onchange='{ storageClassChange }' + onkeyup='{ storageClassChange }' + ) + + tr + td td Specify Iops and Throughput only if you need more than the default 3000 Iops and 125Mb/s EBS provides. tr @@ -582,7 +595,8 @@ new enableReplicaPoolerLoadBalancer: true {{/if}} volume: - size: "{{ volumeSize }}Gi"{{#if iops}} + size: "{{ volumeSize }}Gi"{{#if volumeStorageClass}} + storageClass: "{{ volumeStorageClass }}"{{/if}}{{#if iops}} iops: {{ iops }}{{/if}}{{#if throughput}} throughput: {{ throughput }}{{/if}} {{#if users}} @@ -638,6 +652,7 @@ new enableMasterPoolerLoadBalancer: this.enableMasterPoolerLoadBalancer, enableReplicaPoolerLoadBalancer: this.enableReplicaPoolerLoadBalancer, volumeSize: this.volumeSize, + volumeStorageClass: this.volumeStorageClass, iops: this.iops, throughput: this.throughput, users: this.users.valids, @@ -716,6 +731,10 @@ new this.volumeSize = +e.target.value } + this.storageClassChange = e => { + this.volumeStorageClass = e.target.value + } + this.iopsChange = e => { this.iops = +e.target.value } @@ -759,7 +778,7 @@ new this.checkClusterExists = () => ( jQuery .get( - '/postgresqls/' + './postgresqls/' + this.namespace.state + '/' + this.clusterName @@ -781,7 +800,7 @@ new jQuery.ajax({ type: 'POST', - url: '/create-cluster', + url: './create-cluster', contentType:'application/json', data: jsonPayload, processData: false, @@ -1013,6 +1032,7 @@ new this.clusterName = (this.name + '-').toLowerCase() this.volumeSize = 10 + this.volumeStorageClass = '' this.instanceCount = 1 this.ranges = {} this.odd = '' diff --git a/ui/app/src/postgresql.tag.pug b/ui/app/src/postgresql.tag.pug index f1b15ca81..e40315bb5 100644 --- a/ui/app/src/postgresql.tag.pug +++ b/ui/app/src/postgresql.tag.pug @@ -6,11 +6,11 @@ postgresql ol.breadcrumb li.breadcrumb-item - a(href='/#/list') + a(href='./#/list') | PostgreSQL clusters li.breadcrumb-item(if='{ cluster_path }') - a(href='/#/status/{ cluster_path }') + a(href='./#/status/{ cluster_path }') | { qname } .row(if='{ cluster_path }') @@ -39,20 +39,20 @@ postgresql ) a.btn.btn-info( - href='/#/logs/{ cluster_path }' + href='./#/logs/{ cluster_path }' ) | Logs a.btn( class='btn-{ opts.read_write ? "primary" : "info" }' if='{ progress.postgresql }' - href='/#/clone/{ clustername }/{ uid }/{ encodeURI(new Date().toISOString()) }' + href='./#/clone/{ clustername }/{ uid }/{ encodeURI(new Date().toISOString()) }' ) | Clone a.btn( class='btn-{ opts.read_write ? "warning" : "info" }' - href='/#/edit/{ cluster_path }' + href='./#/edit/{ cluster_path }' ) | Edit @@ -124,7 +124,7 @@ postgresql this.pollProgress = () => { jQuery.get( - '/postgresqls/' + this.cluster_path, + './postgresqls/' + this.cluster_path, ).done(data => { this.progress.pooler = false this.progress.postgresql = true @@ -137,13 +137,13 @@ postgresql this.update() jQuery.get( - '/statefulsets/' + this.cluster_path, + './statefulsets/' + this.cluster_path, ).done(data => { this.progress.statefulSet = true this.update() jQuery.get( - '/statefulsets/' + this.cluster_path + '/pods', + './statefulsets/' + this.cluster_path + '/pods', ).done(data => { if (data.length > 0) { this.progress.containerFirst = true @@ -157,7 +157,7 @@ postgresql this.update() jQuery.get( - '/services/' + this.cluster_path, + './services/' + this.cluster_path, ).done(data => { if (data.metadata && data.metadata.annotations && 'zalando.org/dnsname' in data.metadata.annotations) { this.progress.dnsName = data.metadata.annotations['zalando.org/dnsname'] @@ -169,12 +169,12 @@ postgresql } if (this.progress.poolerEnabled == true) { - jQuery.get('/pooler/' + this.cluster_path).done(data => { + jQuery.get('./pooler/' + this.cluster_path).done(data => { this.progress.pooler = {"url": ""} this.update() }) } - + this.update() }) }) diff --git a/ui/app/src/postgresqls.tag.pug b/ui/app/src/postgresqls.tag.pug index 6b60b9f8a..aed0d21b0 100644 --- a/ui/app/src/postgresqls.tag.pug +++ b/ui/app/src/postgresqls.tag.pug @@ -6,7 +6,7 @@ postgresqls ol.breadcrumb li.breadcrumb-item - a(href='/#/list') + a(href='./#/list') | PostgreSQL clusters .sk-spinner-pulse( @@ -20,7 +20,7 @@ postgresqls | | or | - a(href='/') start over + a(href='./') start over | . div( @@ -81,7 +81,7 @@ postgresqls td(style='white-space: pre') | { namespace } td - a(href='/#/status/{ cluster_path(this) }') { name } + a(href='./#/status/{ cluster_path(this) }') { name } btn.btn-danger(if='{status.PostgresClusterStatus == "CreateFailed"}') Create Failed td { nodes } td { cpu } / { cpu_limit } @@ -101,7 +101,7 @@ postgresqls ) a.btn.btn-info( - href='/#/status/{ cluster_path(this) }' + href='./#/status/{ cluster_path(this) }' ) i.fa.fa-check-circle.regular | Status @@ -114,21 +114,21 @@ postgresqls | Pgview a.btn.btn-info( - href='/#/logs/{ cluster_path(this) }' + href='./#/logs/{ cluster_path(this) }' ) i.fa.fa-align-justify | Logs a.btn( class='btn-{ opts.read_write ? "primary" : "info" }' - href='/#/clone/{ encodeURI(name) }/{ encodeURI(uid) }/{ encodeURI(new Date().toISOString()) }' + href='./#/clone/{ encodeURI(name) }/{ encodeURI(uid) }/{ encodeURI(new Date().toISOString()) }' ) i.fa.fa-clone.regular | Clone a.btn( class='btn-{ opts.read_write ? "warning" : "info" }' - href='/#/edit/{ cluster_path(this) }' + href='./#/edit/{ cluster_path(this) }' ) | Edit @@ -183,7 +183,7 @@ postgresqls | { namespace } td a( - href='/#/status/{ cluster_path(this) }' + href='./#/status/{ cluster_path(this) }' ) | { name } td { nodes } @@ -203,7 +203,7 @@ postgresqls ) a.btn.btn-info( - href='/#/status/{ cluster_path(this) }' + href='./#/status/{ cluster_path(this) }' ) i.fa.fa-check-circle.regular | Status @@ -217,21 +217,21 @@ postgresqls | Pgview a.btn.btn-info( - href='/#/logs/{ cluster_path(this) }' + href='./#/logs/{ cluster_path(this) }' ) i.fa.fa-align-justify | Logs a.btn( class='btn-{ opts.read_write ? "primary" : "info" }' - href='/#/clone/{ encodeURI(name) }/{ encodeURI(uid) }/{ encodeURI(new Date().toISOString()) }' + href='./#/clone/{ encodeURI(name) }/{ encodeURI(uid) }/{ encodeURI(new Date().toISOString()) }' ) i.fa.fa-clone.regular | Clone a.btn( class='btn-{ opts.read_write ? "warning" : "info" }' - href='/#/edit/{ cluster_path(this) }' + href='./#/edit/{ cluster_path(this) }' ) | Edit @@ -343,7 +343,7 @@ postgresqls this.on('mount', () => jQuery - .get('/postgresqls') + .get('./postgresqls') .done(clusters => { this.my_clusters = [] this.other_clusters = [] diff --git a/ui/app/src/restore.tag.pug b/ui/app/src/restore.tag.pug index 3a322df3f..523dbfbed 100644 --- a/ui/app/src/restore.tag.pug +++ b/ui/app/src/restore.tag.pug @@ -10,7 +10,7 @@ restore | | or | - a(href="/") start over + a(href="./") start over | . p(if='{ stored_clusters && stored_clusters.length === 0 }') @@ -23,7 +23,7 @@ restore ol.breadcrumb li.breadcrumb-item - a(href='/#/backups') + a(href='./#/backups') | PostgreSQL cluster backups ({ stored_clusters.length }) p @@ -63,7 +63,7 @@ restore p(if='{ versions === null }') | Error loading backups. Please try again or | - a(href="/") start over + a(href="./") start over | . p(if='{ versions && versions.length === 0 }') @@ -96,7 +96,7 @@ restore p(if='{ basebackups === null }') | Error loading snapshots. Please try again or | - a(href="/") start over + a(href="./") start over | . p(if='{ basebackups && basebackups.length === 0 }') @@ -312,7 +312,7 @@ restore get_subresources_once({ parent_resource: this, key: 'stored_clusters', - url: '/stored_clusters', + url: './stored_clusters', build_subresource: stored_cluster_name => ({ id: 'stored-cluster-' + stored_cluster_name, name: stored_cluster_name, @@ -324,7 +324,7 @@ restore body: stored_cluster => get_subresources_once({ parent_resource: stored_cluster, key: 'versions', - url: '/stored_clusters/' + stored_cluster.name, + url: './stored_clusters/' + stored_cluster.name, build_subresource: version_name => ({ id: stored_cluster.id + '-version-' + version_name, name: version_name, @@ -340,7 +340,7 @@ restore parent_resource: version, key: 'basebackups', url: ( - '/stored_clusters/' + stored_cluster.name + './stored_clusters/' + stored_cluster.name + '/' + version.name ), build_subresource: basebackup => Object.assign(basebackup, { diff --git a/ui/app/src/status.tag.pug b/ui/app/src/status.tag.pug index eae63fbdb..8a35703d9 100644 --- a/ui/app/src/status.tag.pug +++ b/ui/app/src/status.tag.pug @@ -6,19 +6,19 @@ status ol.breadcrumb li.breadcrumb-item - a(href='/#/operator') + a(href='./#/operator') | Workers virtual(if='{ operatorShowLogs && logs }') li.breadcrumb-item { worker_id } li.breadcrumb-item - a(href='/#/operator/worker/{ worker_id }/logs') + a(href='./#/operator/worker/{ worker_id }/logs') | Logs virtual(if='{ operatorShowQueue && queue }') li.breadcrumb-item { worker_id } li.breadcrumb-item - a(href='/#/operator/worker/{ worker_id }/queue') + a(href='./#/operator/worker/{ worker_id }/queue') | Queue div(if='{ status }') @@ -44,12 +44,12 @@ status ) a.btn.btn-info( - href='/#/operator/worker/{ worker_id }/logs' + href='./#/operator/worker/{ worker_id }/logs' ) | Logs a.btn.btn-info( - href='/#/operator/worker/{ worker_id }/queue' + href='./#/operator/worker/{ worker_id }/queue' ) | Queue @@ -96,7 +96,7 @@ status this.pollStatus = () => { jQuery.get( - '/operator/status', + './operator/status', ).done(data => { this.update({status: data}) }) @@ -111,7 +111,7 @@ status this.pollLogs = id => { jQuery.get( - '/operator/workers/' + id + '/logs', + './operator/workers/' + id + '/logs', ).done(data => { data.reverse() this.update({logs: data}) @@ -120,7 +120,7 @@ status this.pollQueue = id => { jQuery.get( - '/operator/workers/' + id + '/queue', + './operator/workers/' + id + '/queue', ).done(data => this.update({queue: data.List}) ) diff --git a/ui/operator_ui/templates/index.html b/ui/operator_ui/templates/index.html index 6b4689079..7307c8a3a 100644 --- a/ui/operator_ui/templates/index.html +++ b/ui/operator_ui/templates/index.html @@ -62,9 +62,9 @@ - - - + + + @@ -168,8 +168,8 @@ - - + + {% if google_analytics %}