Skip to content

Commit d1d276e

Browse files
lgarciaoglgarciaog
committed
feat(ui): support sgstreams in the web console
1 parent 2d10efb commit d1d276e

13 files changed

Lines changed: 3081 additions & 29 deletions

File tree

‎stackgres-k8s/src/admin-ui/src/api/sgApi.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const resources = {
1010
namespaces: '/namespaces',
1111
sgclusters: '/sgclusters',
1212
sgshardedclusters: '/sgshardedclusters',
13+
sgstreams: '/sgstreams',
1314
sginstanceprofiles: '/sginstanceprofiles',
1415
sgbackups: '/sgbackups',
1516
sgpgconfigs: '/sgpgconfigs',

‎stackgres-k8s/src/admin-ui/src/components/GlobalDashboard.vue‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,17 @@
4545
<router-link :to="'/' + namespace + '/sgshardedclusters'" title="Sharded Clusters Overview" target="_blank"></router-link>
4646
</td>
4747
</tr>
48+
<tr>
49+
<td class="kind">
50+
<router-link :to="'/' + namespace + '/sgstreams'" title="Streams Overview">
51+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g><path d="M16.3 18.8h-4.5c-1 0-1.9-.4-2.6-1.1l-7.6-7.6c-.5-.5-.5-1.3 0-1.8s1.3-.5 1.8 0l7.6 7.6c.2.2.5.3.8.3h2.7l-12-12c-.5-.5-.7-1.3-.4-1.9S3 1.2 3.7 1.2h4.5c1 0 1.9.4 2.6 1.1l7.6 7.6c.5.5.5 1.3 0 1.8s-1.3.5-1.8 0L9 4.1c-.2-.2-.5-.3-.8-.3H5.5l12 12c.5.5.7 1.2.4 1.9s-.9 1.1-1.6 1.1M4.5 18.8c-.3 0-.6-.1-.9-.4l-2-2c-.5-.5-.5-1.3 0-1.8s1.3-.5 1.8 0l2 2c.5.5.5 1.3 0 1.8s-.6.4-.9.4M17 4.8c-1 0-1.8-.8-1.8-1.8S16 1.2 17 1.2s1.8.8 1.8 1.8S18 4.8 17 4.8" class="cls-1"/></g></svg>
52+
<span>SGStreams <i class="length">{{ (sgstreams === null) ? '-' : sgstreams.filter(c => c.data.metadata.namespace == namespace).length }}</i></span>
53+
</router-link>
54+
</td>
55+
<td class="icon invisible">
56+
<router-link :to="'/' + namespace + '/sgstreams'" title="Streams Overview" target="_blank"></router-link>
57+
</td>
58+
</tr>
4859
<tr v-if="iCan('list', 'sginstanceprofiles', namespace)">
4960
<td class="kind">
5061
<router-link :to="'/' + namespace + '/sginstanceprofiles'" title="Instance Profiles">
@@ -183,6 +194,10 @@ export default {
183194
return store.state.sgshardedclusters
184195
},
185196
197+
sgstreams () {
198+
return store.state.sgstreams
199+
},
200+
186201
profiles () {
187202
return store.state.sginstanceprofiles
188203
},
@@ -216,7 +231,7 @@ export default {
216231
},
217232
218233
usedNamespaces() {
219-
const kinds = ['sgclusters', 'sgshardedclusters', 'sginstanceprofiles', 'sgpgconfigs', 'sgpoolconfigs', 'sgobjectstorages', 'sgdistributedlogs', 'sgbackups', 'sgdbops', 'sgobjectstorages', 'sgscripts'];
234+
const kinds = ['sgclusters', 'sgshardedclusters', 'sgstreams', 'sginstanceprofiles', 'sgpgconfigs', 'sgpoolconfigs', 'sgobjectstorages', 'sgdistributedlogs', 'sgbackups', 'sgdbops', 'sgobjectstorages', 'sgscripts'];
220235
const usedNamespaces = store.state.allNamespaces.filter( ns => (
221236
typeof kinds.find( k => (
222237
(store.state[k] !== null) &&

‎stackgres-k8s/src/admin-ui/src/components/NamespaceOverview.vue‎

Lines changed: 92 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,62 @@
114114
</table>
115115
</div>
116116

117+
<div class="card" v-if="iCan('any','sgstreams',$route.params.namespace)">
118+
<table class="fullWidth">
119+
<thead>
120+
<th class="crdName">
121+
<template v-if="iCan('list', 'sgstreams', $route.params.namespace)">
122+
<router-link :to="'/' + $route.params.namespace + '/sgstreams/'" title="Stream Overview">
123+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g><path d="M16.3 18.8h-4.5c-1 0-1.9-.4-2.6-1.1l-7.6-7.6c-.5-.5-.5-1.3 0-1.8s1.3-.5 1.8 0l7.6 7.6c.2.2.5.3.8.3h2.7l-12-12c-.5-.5-.7-1.3-.4-1.9S3 1.2 3.7 1.2h4.5c1 0 1.9.4 2.6 1.1l7.6 7.6c.5.5.5 1.3 0 1.8s-1.3.5-1.8 0L9 4.1c-.2-.2-.5-.3-.8-.3H5.5l12 12c.5.5.7 1.2.4 1.9s-.9 1.1-1.6 1.1M4.5 18.8c-.3 0-.6-.1-.9-.4l-2-2c-.5-.5-.5-1.3 0-1.8s1.3-.5 1.8 0l2 2c.5.5.5 1.3 0 1.8s-.6.4-.9.4M17 4.8c-1 0-1.8-.8-1.8-1.8S16 1.2 17 1.2s1.8.8 1.8 1.8S18 4.8 17 4.8" class="cls-1"/></g></svg>
124+
<span>SGStream <i class="length">{{ sgstreams.length }}</i></span>
125+
</router-link>
126+
</template>
127+
<template v-else>
128+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g><path d="M16.3 18.8h-4.5c-1 0-1.9-.4-2.6-1.1l-7.6-7.6c-.5-.5-.5-1.3 0-1.8s1.3-.5 1.8 0l7.6 7.6c.2.2.5.3.8.3h2.7l-12-12c-.5-.5-.7-1.3-.4-1.9S3 1.2 3.7 1.2h4.5c1 0 1.9.4 2.6 1.1l7.6 7.6c.5.5.5 1.3 0 1.8s-1.3.5-1.8 0L9 4.1c-.2-.2-.5-.3-.8-.3H5.5l12 12c.5.5.7 1.2.4 1.9s-.9 1.1-1.6 1.1M4.5 18.8c-.3 0-.6-.1-.9-.4l-2-2c-.5-.5-.5-1.3 0-1.8s1.3-.5 1.8 0l2 2c.5.5.5 1.3 0 1.8s-.6.4-.9.4M17 4.8c-1 0-1.8-.8-1.8-1.8S16 1.2 17 1.2s1.8.8 1.8 1.8S18 4.8 17 4.8" class="cls-1"/></g></svg>
129+
<span>SGStream <i class="length">{{ sgstreams.length }}</i></span>
130+
</template>
131+
</th>
132+
<th class="icon invisible">
133+
<router-link
134+
:to="'/' + $route.params.namespace + '/sgstreams/new'"
135+
title="Create Stream"
136+
v-if="iCan('create', 'sgstreams', $route.params.namespace)"
137+
>
138+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" width="16px"><g fill="#36A8FF"><path d="M7.5 15C3.4 15 0 11.6 0 7.5S3.4 0 7.5 0 15 3.4 15 7.5 11.6 15 7.5 15zm0-13.4c-3.3 0-5.9 2.7-5.9 5.9s2.7 5.9 5.9 5.9 5.9-2.7 5.9-5.9-2.6-5.9-5.9-5.9z"/><path class="prefix__st0" d="M10.7 6.9H8.2V4.5H6.8v2.4H4.3v1.4h2.5v2.5h1.4V8.3h2.5z"/></g></svg>
139+
</router-link>
140+
</th>
141+
</thead>
142+
<tbody>
143+
<template v-if="!sgstreams.length">
144+
<tr class="no-results">
145+
<td colspan="999" v-if="iCan('create', 'sgstreams', $route.params.namespace)">
146+
No streams have been found, would you like to <router-link :to="'/' + $route.params.namespace + '/sgstreams/new'" title="Create Stream">create a new one?</router-link>
147+
</td>
148+
<td v-else colspan="2">
149+
No streams have been found. You don't have enough permissions to create a new one.
150+
</td>
151+
</tr>
152+
</template>
153+
<template v-else>
154+
<template v-for="stream in sgstreams">
155+
<tr>
156+
<td class="hasTooltip">
157+
<span>
158+
<router-link :to="'/' + $route.params.namespace + '/sgstream/' + stream.name" title="Stream Status">
159+
{{ stream.name }}
160+
</router-link>
161+
</span>
162+
</td>
163+
<td class="icon invisible">
164+
<router-link :to="'/' + $route.params.namespace + '/sgstream/' + stream.name" title="Stream Status" target="_blank"></router-link>
165+
</td>
166+
</tr>
167+
</template>
168+
</template>
169+
</tbody>
170+
</table>
171+
</div>
172+
117173
<div class="card" v-if="iCan('any', 'sginstanceprofiles', $route.params.namespace)">
118174
<table class="fullWidth">
119175
<thead>
@@ -598,43 +654,69 @@ export default {
598654
599655
computed: {
600656
clusters () {
601-
return store.state.sgclusters.filter(cluster => (cluster.data.metadata.namespace == this.$route.params.namespace))
657+
return (store.state.sgclusters !== null)
658+
? store.state.sgclusters.filter(cluster => (cluster.data.metadata.namespace == this.$route.params.namespace))
659+
: []
602660
},
603661
604662
sgshardedclusters () {
605-
return store.state.sgshardedclusters.filter(cluster => (cluster.data.metadata.namespace == this.$route.params.namespace))
663+
return (store.state.sgshardedclusters !== null)
664+
? store.state.sgshardedclusters.filter(cluster => (cluster.data.metadata.namespace == this.$route.params.namespace))
665+
: []
666+
},
667+
668+
sgstreams () {
669+
return (store.state.sgstreams !== null)
670+
? store.state.sgstreams.filter(stream => (stream.data.metadata.namespace == this.$route.params.namespace))
671+
: []
606672
},
607673
608674
profiles () {
609-
return store.state.sginstanceprofiles.filter(profile => (profile.data.metadata.namespace == this.$route.params.namespace))
675+
return (store.state.sginstanceprofiles !== null)
676+
? store.state.sginstanceprofiles.filter(profile => (profile.data.metadata.namespace == this.$route.params.namespace))
677+
: []
610678
},
611679
612680
pgconfigs () {
613-
return store.state.sgpgconfigs.filter(pgconfig => (pgconfig.data.metadata.namespace == this.$route.params.namespace))
681+
return (store.state.sgpgconfigs !== null)
682+
? store.state.sgpgconfigs.filter(pgconfig => (pgconfig.data.metadata.namespace == this.$route.params.namespace))
683+
: []
614684
},
615685
616686
poolconfigs () {
617-
return store.state.sgpoolconfigs.filter(poolconfig => (poolconfig.data.metadata.namespace == this.$route.params.namespace))
687+
return (store.state.sgpoolconfigs !== null)
688+
? store.state.sgpoolconfigs.filter(poolconfig => (poolconfig.data.metadata.namespace == this.$route.params.namespace))
689+
: []
618690
},
619691
620692
objectstorages () {
621-
return store.state.sgobjectstorages.filter(config => (config.data.metadata.namespace == this.$route.params.namespace))
693+
return (store.state.sgobjectstorages !== null)
694+
? store.state.sgobjectstorages.filter(config => (config.data.metadata.namespace == this.$route.params.namespace))
695+
: []
622696
},
623697
624698
sgscripts () {
625-
return store.state.sgscripts.filter(config => (config.data.metadata.namespace == this.$route.params.namespace))
699+
return (store.state.sgscripts !== null)
700+
? store.state.sgscripts.filter(config => (config.data.metadata.namespace == this.$route.params.namespace))
701+
: []
626702
},
627703
628704
logsservers () {
629-
return store.state.sgdistributedlogs.filter(logserver => (logserver.data.metadata.namespace == this.$route.params.namespace))
705+
return (store.state.sgdistributedlogs !== null)
706+
? store.state.sgdistributedlogs.filter(logserver => (logserver.data.metadata.namespace == this.$route.params.namespace))
707+
: []
630708
},
631709
632710
backups () {
633-
return store.state.sgbackups.filter(backup => (backup.data.metadata.namespace == this.$route.params.namespace))
711+
return (store.state.sgbackups !== null)
712+
? store.state.sgbackups.filter(backup => (backup.data.metadata.namespace == this.$route.params.namespace))
713+
: []
634714
},
635715
636716
dbops () {
637-
return store.state.sgdbops.filter(op => (op.data.metadata.namespace == this.$route.params.namespace))
717+
return (store.state.sgdbops !== null)
718+
? store.state.sgdbops.filter(op => (op.data.metadata.namespace == this.$route.params.namespace))
719+
: []
638720
},
639721
640722
tooltips () {

‎stackgres-k8s/src/admin-ui/src/components/SideBar.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,43 @@
113113
</ul>
114114
</div>
115115

116+
<div
117+
class="set"
118+
v-if="iCan('any','sgstreams', currentPath.namespace)"
119+
:class="isBrowsing('sgstream') ? 'active' : ''"
120+
>
121+
<ul>
122+
<li class="crdName">
123+
<template v-if="iCan('list', 'sgstreams', currentPath.namespace)">
124+
<router-link :to="'/' + currentPath.namespace + '/sgstreams'" title="SGStreams Overview" class="view nav-item">
125+
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g><path d="M16.3 18.8h-4.5c-1 0-1.9-.4-2.6-1.1l-7.6-7.6c-.5-.5-.5-1.3 0-1.8s1.3-.5 1.8 0l7.6 7.6c.2.2.5.3.8.3h2.7l-12-12c-.5-.5-.7-1.3-.4-1.9S3 1.2 3.7 1.2h4.5c1 0 1.9.4 2.6 1.1l7.6 7.6c.5.5.5 1.3 0 1.8s-1.3.5-1.8 0L9 4.1c-.2-.2-.5-.3-.8-.3H5.5l12 12c.5.5.7 1.2.4 1.9s-.9 1.1-1.6 1.1M4.5 18.8c-.3 0-.6-.1-.9-.4l-2-2c-.5-.5-.5-1.3 0-1.8s1.3-.5 1.8 0l2 2c.5.5.5 1.3 0 1.8s-.6.4-.9.4M17 4.8c-1 0-1.8-.8-1.8-1.8S16 1.2 17 1.2s1.8.8 1.8 1.8S18 4.8 17 4.8" class="cls-1"/></g></svg></span>
126+
<h3 :class="isCollapsed ? 'submenuTitle' : ''">StackGres Streams</h3>
127+
</router-link>
128+
</template>
129+
<template v-else>
130+
<span class="nav-item noHoverPointer">
131+
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g><path d="M16.3 18.8h-4.5c-1 0-1.9-.4-2.6-1.1l-7.6-7.6c-.5-.5-.5-1.3 0-1.8s1.3-.5 1.8 0l7.6 7.6c.2.2.5.3.8.3h2.7l-12-12c-.5-.5-.7-1.3-.4-1.9S3 1.2 3.7 1.2h4.5c1 0 1.9.4 2.6 1.1l7.6 7.6c.5.5.5 1.3 0 1.8s-1.3.5-1.8 0L9 4.1c-.2-.2-.5-.3-.8-.3H5.5l12 12c.5.5.7 1.2.4 1.9s-.9 1.1-1.6 1.1M4.5 18.8c-.3 0-.6-.1-.9-.4l-2-2c-.5-.5-.5-1.3 0-1.8s1.3-.5 1.8 0l2 2c.5.5.5 1.3 0 1.8s-.6.4-.9.4M17 4.8c-1 0-1.8-.8-1.8-1.8S16 1.2 17 1.2s1.8.8 1.8 1.8S18 4.8 17 4.8" class="cls-1"/></g></svg></span>
132+
<h3 :class="isCollapsed ? 'submenuTitle' : ''">StackGres Streams</h3>
133+
</span>
134+
</template>
135+
136+
<router-link :to="'/' + currentPath.namespace + '/sgstreams/new'" class="addnew" v-if="iCan('create', 'sgstreams', currentPath.namespace)">
137+
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"><g transform="translate(-573 -706)"><g transform="translate(573 706)" fill="none" stroke="#00adb5" stroke-width="2"><circle cx="9.5" cy="9.5" r="9.5" stroke="none"/><circle cx="9.5" cy="9.5" r="8.5" fill="none"/></g><g transform="translate(-30.5 28.8)"><g transform="translate(609 686)" fill="#00adb5" stroke="#00adb5" stroke-width="1"><rect width="8" height="1.4" rx="0.7" stroke="none"/><rect x="0.5" y="0.5" width="7" height="0.4" rx="0.2" fill="none"/></g><g transform="translate(613.7 682.7) rotate(90)" fill="#00adb5" stroke="#00adb5" stroke-width="1"><rect width="8" height="1.4" rx="0.7" stroke="none"/><rect x="0.5" y="0.5" width="7" height="0.4" rx="0.2" fill="none"/></g></g></g></svg>
138+
</router-link>
139+
</li>
140+
141+
<li><ul class="crdSubmenu">
142+
<template v-for="stream in sgStreams">
143+
<li v-if="stream.data.metadata.namespace == currentPath.namespace" :class="'sgstream-'+stream.data.metadata.namespace+'-'+stream.name">
144+
<router-link :to="'/' + stream.data.metadata.namespace + '/sgstream/' + stream.name" class="item stream" :title="stream.name" :class="(currentPath.component.includes('SGStream') && (currentPath.name == stream.name)) ? 'router-link-exact-active' : ''">
145+
{{ stream.name }}
146+
</router-link>
147+
</li>
148+
</template>
149+
</ul></li>
150+
</ul>
151+
</div>
152+
116153
<div v-if="iCan('any','sginstanceprofiles', currentPath.namespace)" class="prof set" :class="isBrowsing('sginstanceprofile') ? 'active' : ''">
117154
<ul>
118155
<li class="crdName">
@@ -506,6 +543,10 @@
506543
return store.state.sgshardedclusters
507544
},
508545
546+
sgStreams () {
547+
return store.state.sgstreams
548+
},
549+
509550
logsClusters () {
510551
return store.state.sgdistributedlogs
511552
},

0 commit comments

Comments
 (0)