Skip to content

Commit

Permalink
Merge pull request #110 from grycap/master
Browse files Browse the repository at this point in the history 
Added configuration panel for Juno
  • Loading branch information
@catttam
catttam authored Jul 25, 2024
2 parents b1e452c + b5678f2 commit 98de936
Show file tree
Hide file tree
Showing 8 changed files with 313 additions and 76 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@
"vue-material": "^1.0.0-beta-14",
"vue-perfect-scrollbar": "^0.1.0",
"vue-router": "^3.0.1",
"vuetify": "^1.5.24"
"vuetify": "^1.5.24",
"yaml": "^2.4.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^5.0.8",
Expand Down
47 changes: 30 additions & 17 deletions src/components/AppDrawer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,12 @@

</template>
</v-flex>
<v-flex row xs12 >
<v-btn id="btn_juno" depressed round flat block small @click.native="collapse('btn_juno')" >
<v-icon left style="padding-right:12px">description</v-icon>
<span v-show="this.mini==false">Juno</span>
</v-btn>
</v-flex>
<v-flex row xs12 >
<v-btn id="btn_info" depressed round flat block small @click.native="collapse('btn_info')" >
<v-icon left style="padding-right:12px">info</v-icon>
Expand Down Expand Up @@ -154,36 +160,42 @@ export default {
}else if(_this.$route.name == 'Info'){
$("#btn_info").css("color","#0056b3")
}else if(_this.$route.name == 'Juno'){
$("#btn_juno").css("color","#0056b3")
}
})
},
methods: {
getEndpointCallback(response){
this.getBucketListCall(this.getBucketListCallBack)
},
getEndpointCallback(response){
this.getBucketListCall(this.getBucketListCallBack)
},
collapse(id){
$("#btn_dash").css("color","#000!important")
$("#btn_funct").css("color","#000!important")
$("#btn_sett").css("color","#000!important")
$("#btn_logout").css("color","#000!important")
$("#btn_storage").css("color","#000!important")
$("#btn_info").css("color","#000!important")
$("#btn_dash").css("color","#000")
$("#btn_funct").css("color","#000")
$("#btn_sett").css("color","#000")
$("#btn_logout").css("color","#000")
$("#btn_storage").css("color","#000")
$("#btn_juno").css("color","#000")
$("#btn_info").css("color","#000")
if(id == "btn_dash"){
// $("#btn_dash").css("color","#0056b3")
$("#btn_dash").css("color","#0056b3")
this.$router.push({name: "Dashboard"}).catch(err => {})
}else if (id == "btn_funct"){
// $("#btn_funct").css("color","#0056b3")
$("#btn_funct").css("color","#0056b3")
this.$router.push({name: "Functions"}).catch(err => {})
}else if (id == "btn_sett"){
// $("#btn_sett").css("color","#0056b3")
$("#btn_sett").css("color","#0056b3")
this.$router.push({name: "Settings"}).catch(err => {})
}else if (id == "btn_logout"){
// $("#btn_logout").css("color","#0056b3")
$("#btn_logout").css("color","#0056b3")
this.$router.push({name: "Login"})
}else if (id == "btn_juno"){
$("#btn_juno").css("color","#0056b3")
this.$router.push({name: "Juno"}).catch(err => {})
}else if (id == "btn_storage"){
$("#name_buckets").slideToggle("slow");
this.drawer2 = (!this.drawer2)
Expand All @@ -199,9 +211,10 @@ export default {
this.expand_sto = "expand_more"
}
}else if(id == "btn_info"){
$("#btn_info").css("color","#0056b3")
this.$router.push({name: "Info"}).catch(err => {})
}
},
},
cleanfield(){
this.menucreate = false;
Expand Down Expand Up @@ -302,7 +315,7 @@ export default {
}
#btn_storage,#btn_dash,#btn_funct,#btn_sett,#btn_logout, #btn_info {
#btn_storage,#btn_dash,#btn_funct,#btn_sett,#btn_logout, #btn_info, #btn_juno {
text-transform:capitalize;
font-size:13px;
padding-left:30px;
Expand All @@ -311,11 +324,11 @@ export default {
font-weight:400;
}
#btn_storage:hover,#btn_dash:hover,#btn_funct:hover,#btn_sett:hover,#btn_logout:hover , #btn_info:hover{
#btn_storage:hover,#btn_dash:hover,#btn_funct:hover,#btn_sett:hover,#btn_logout:hover , #btn_info:hover, #btn_juno:hover{
color: #0056b3;
}
#btn_dash .v-btn__content, #btn_funct .v-btn__content, #btn_sett .v-btn__content,#btn_logout .v-btn__content, #btn_info .v-btn__content{
#btn_dash .v-btn__content, #btn_funct .v-btn__content, #btn_sett .v-btn__content,#btn_logout .v-btn__content, #btn_info .v-btn__content, #btn_juno .v-btn__content{
justify-content: left!important;
}
Expand Down
43 changes: 9 additions & 34 deletions src/components/AppToolbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<div class="identifieruser">
<strong >{{showinfo}}</strong>
</div>
<strong > <button ref="myinput" @click="copy">{{api}}</button> </strong>
<v-btn class="fullscreen" icon @click="handleFullScreen()">
<v-icon>fullscreen</v-icon>
</v-btn>
Expand All @@ -27,41 +28,11 @@ export default {
NotificationList
},
data: () => ({
showinfo: (localStorage.getItem("user")?localStorage.getItem("user"): JSON.parse(localStorage.getItem("session")).user.info.name )+" - " + localStorage.getItem("api") ,
showinfo: (localStorage.getItem("user")?localStorage.getItem("user"): JSON.parse(localStorage.getItem("session")).user.info.name )+" - " ,
api: localStorage.getItem("api"),
mini: false,
items: [
{
icon: 'account_circle',
href: '#',
title: 'Profile',
click: (e) => {
console.log(e)
}
},
{
icon: 'settings',
href: '#',
title: 'Settings',
click: (e) => {
console.log(e)
}
},
{
icon: 'fullscreen_exit',
href: '#',
title: 'Logout',
click: (e) => {
window.getApp.$emit('APP_LOGOUT')
}
}
],
notificationCounter: 3
}),
computed: {
notificationShow () {
return (this.notificationCounter > 0)
}
},
methods: {
handleDrawerToggle () {
window.getApp.$emit('APP_DRAWER_TOGGLED')
Expand All @@ -72,6 +43,9 @@ export default {
},
handleFullScreen () {
Util.toggleFullScreen()
},
copy() {
navigator.clipboard.writeText(this.api);
}
}
}
Expand All @@ -92,7 +66,8 @@ export default {
font-family: Roboto;
display: inline;
font-size: 15px;
vertical-align: middle;
}
.identifieruser button{
size: 500;
}
</style>
9 changes: 7 additions & 2 deletions src/env.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,17 @@ module.exports = {
"url_user_info": "$EGI_CHECKIN_ISSUER/protocol/openid-connect/userinfo",
"token_endpoint": "$EGI_CHECKIN_ISSUER/protocol/openid-connect/token",
"api" : "",
"deploy_container" : "false",
"deploy_container" : "true",
"minio_local_endpoint" :"localhost",
"minio_local_port": "30300",
"minio_local_ssl": false ,
"response_default_minio": "minio.minio",
"external_ui": "https://ui.oscar.grycap.net/?endpoint=",
"ai4eosc_servers": ["https://inference.cloud.ai4eosc.eu"],
"imagine_servers": ["https://inference.cloud.imagine-ai.eu"],
"imagine_servers": ["https://inference.cloud.imagine-ai.eu","https://inference-walton.cloud.imagine-ai.eu"],
"juno":{
repo: "https://raw.githubusercontent.com/grycap/oscar-juno/main/",
service: "juno.yaml",
script:"script.sh",
}
}
12 changes: 12 additions & 0 deletions src/router/paths.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,18 @@ export default [
`@/views/Invoke.vue`
)
},
{
path: '/juno',
meta: {
public: false
},
name: 'Juno',
component: () => import(
/* webpackChunkName: "routes" */
/* webpackMode: "lazy" */
`@/views/Juno.vue`
)
},
{
path: '/settings',
meta: {
Expand Down
25 changes: 5 additions & 20 deletions src/views/Info.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,9 @@
</v-card-text>
</v-card>
</v-flex>
<v-flex xs6 sm6>
<v-flex xs12 sm12 xl12>
<v-layout row>
<v-card-title>
<v-flex xs12 sm12 >
<v-card-title class="panel_info">
<span class="headline">OSCAR services</span>
</v-card-title>
Expand All @@ -99,25 +99,10 @@
<InfoService class="infoservice" :data="service" ></InfoService>
</div>
</v-card-text>
</v-card-title>
</v-flex>
</v-layout>
</v-flex>
<v-flex xs6>
<v-layout row>
<v-card-title>
<v-card-title class="panel_info">
<span class="headline">Buckets</span>
</v-card-title>
<v-card-text>
<ul >
<li v-for="bucket in buckets">
{{ bucket.title }}
</li>
</ul>
</v-card-text>
</v-card-title>
</v-layout >
</v-flex >

</v-layout>
</v-form>
</v-card>
Expand Down Expand Up @@ -252,7 +237,7 @@ export default {
display: flex;
}
.panel_info{
margin-top: 5%;
margin-top: 0%;
}
.infoservice{
border: 1px;
Expand Down
46 changes: 44 additions & 2 deletions src/views/InfoService.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
Service {{service.name}} Info
</h4>
<v-card flat>
<v-card-text class="custom-padding xs6"> <strong>Name: </strong> {{service.name}}</v-card-text>
<v-card-text class="custom-padding "> <strong>Name: </strong> {{service.name}}</v-card-text>
<v-card-text class="custom-padding"><strong>Image: </strong> {{service.image}}</v-card-text>
<v-card-text style="display:flex;margin-right: 5px;" class="custom-padding">
<strong style="padding-top: 12px;margin-right: 5px;">Token: </strong>
Expand Down Expand Up @@ -43,7 +43,7 @@
<ul v-if="isServiceExpose(service?.expose?.api_port)">
<li v-if="service?.expose?.nodePort == 0"><strong>url: </strong> <a target="_blank" :href="api+'/system/services/'+service.name+'/exposed/'">
{{api}}/system/services/{{service.name}}/exposed/ </a> </li>
<li><strong>min_scale: </strong> {{service?.expose?.min_scale}}</li>
<li><strong> min_scale: </strong> {{service?.expose?.min_scale}}</li>
<li><strong> max_scale: </strong> {{service?.expose?.max_scale}}</li>
<li><strong> api_port: </strong> {{service?.expose?.api_port}}</li>
<li><strong> cpu_threshold: </strong> {{service?.expose?.cpu_threshold}}</li>
Expand All @@ -70,6 +70,9 @@
</ul>
</div>
</v-card-text>
<v-card-text v-show="service.allowed_users.length===0" class="custom-padding"><strong>Allowed users: </strong>
<p style="display:inline">Public</p>
</v-card-text>
<v-card-actions>
<span class="custom-padding" style="padding:10px;"><strong>Inputs:</strong></span>
</v-card-actions>
Expand Down Expand Up @@ -107,6 +110,45 @@
</div>
</div>
<v-card-actions>
<span class="custom-padding" style="padding:10px;"><strong>Mount:</strong></span>
</v-card-actions>
<div class="row" style="margin:15px 30px 0px 30px;">
<div class="col-3 col-md-3 text-left d-md-inline" style="background-color:#eee;">
<b>Path</b>
</div>
<div class="col-3 col-md-3 text-left d-md-inline" style="background-color:#eee;">
<b>Storage Provider</b>
</div>
<div class="col-3 col-md-3 text-left d-md-inline" style="background-color:#eee;">
<b>Prefix</b>
</div>
<div class="col-3 col-md-3 text-left d-md-inline" style="background-color:#eee;">
<b>Suffix</b>
</div>
</div>
<div v-if='service.mount.path != "" ' :key="'G'" class="row" style="margin:10px 30px 20px 30px;border-bottom:1px solid #eee;padding-bottom:10px;">
<div class="col-3 col-md-3 text-left">
<span class="d-inline d-md-none">{{service.mount.path}}</span>
</div>
<div class="col-3 col-md-3 text-left">
<span class="d-inline d-md-none">{{service.mount.storage_provider}}</span>
</div>
<div class="col-3 col-md-3 text-left">
<div v-for="(val,i) in service.mount.prefix" :key="'H'+ i">
<span class="d-inline d-md-none">{{service.mount}}</span>
</div>
</div>
<div class="col-3 col-md-3 text-left">
<div v-for="(val,i) in service.mount.suffix" :key="'I'+ i">
<span class="d-inline d-md-none">{{service.mount}}</span>
</div>
</div>
</div>
<v-card-actions>
<span class="custom-padding" style="padding:10px;"><strong>Outputs:</strong></span>
</v-card-actions>
Expand Down
Loading

0 comments on commit 98de936

Please sign in to comment.