Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

improv: fix & improve pod logs #112

Merged
merged 3 commits into from
Nov 22, 2021
Merged

improv: fix & improve pod logs #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
613a001
fix: if there is no current context, set it as the first context
itnpeople Nov 18, 2021
f57d287
fix: search status condition on pod list page
itnpeople Nov 18, 2021
e6ee83d
improve: fix & improve pod logs
itnpeople Nov 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/app/frontend/assets/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@ body.sidebar-mini .main-sidebar .aside-menus::-webkit-scrollbar{ display:none;}
/* layout - body > splitpanes */
body.sidebar-mini .main-body .splitpanes__pane.body-pane { overflow-y: auto; background-color: var(--bg-color); }
body.sidebar-mini .main-body:not(.terminal-closed) .splitpanes__splitter { background-color:transparent; height:.3rem; border-top: .1rem solid #343a40; background-color: var(--bg-color)}
body.sidebar-mini .main-body.terminal-closed .splitpanes__splitter { display: none; }
body.sidebar-mini .main-body .splitpanes__pane.terminal-pane > i { float:right; line-height:1.6rem; padding: .2rem .5rem .2rem .5rem; border-left: 1px dashed #ccc; background-color:#fff; }
body.sidebar-mini .main-body.terminal-closed .splitpanes__splitter { display: none; }
/* layout - body > list-page > header */
body.sidebar-mini .main-body .content-header { padding: .5rem .5rem .2rem .5rem;}
body.sidebar-mini .main-body .content-wrapper { margin-left: 0!important; min-height: 100% !important;}
Expand Down
31 changes: 17 additions & 14 deletions src/app/frontend/components/terminal/terminal-logs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
</div>
</div>
</template>
<style>
<style scroped>
div.terminal-content .body-wrapper p.logs {margin-bottom:0; font-size: .825rem;}
mark{background-color: #3593f8;}
</style>
Expand Down Expand Up @@ -119,20 +119,23 @@ export default {
}
if(this.matchVal !== ""){
let list = [];
this.logs.forEach( item => { list.push(item.replace(/<(\/mark|mark)([^>]*)>/gi,"")) })
list.forEach((item, index) => {
const startIndex = item.toUpperCase().indexOf(this.matchVal.toUpperCase());
if (startIndex !== -1) {
let re1 = new RegExp(this.matchVal, "gi");
const word = item.slice(startIndex, startIndex+this.matchVal.length)
list[index] = item.replace(re1, `<mark>${word}</mark>`);
if(this.offsetFlag){
this.$el.querySelectorAll("p.logs")[index].scrollIntoView();
this.offsetFlag = false;
this.logs.forEach( item => {
list.push(item.replace(/<(\/mark|mark)([^>]*)>/gi,"")) })
list.forEach((item, index) => {
const startIndex = item.toUpperCase().indexOf(this.matchVal.toUpperCase());
if (startIndex !== -1) {
let re1 = new RegExp(this.matchVal, "gi");
const word = item.slice(startIndex, startIndex+this.matchVal.length)
list[index] = item.replace(re1, `<mark>${word}</mark>`);
if(this.offsetFlag){
this.$el.querySelectorAll("p.logs")[index].scrollIntoView();
this.offsetFlag = false;
}
}
}
})
this.logs = list;
})
this.logs = list;
} else {
this.logs = this.logs.map( d=> { return d.replace(/<(\/mark|mark)([^>]*)>/gi,"") });
}
},
onChangeContainer(value) {
Expand Down
4 changes: 2 additions & 2 deletions src/app/frontend/layouts/components/context.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,8 @@ export default {
},
// context select
onContextSelected(ctx) {
if (!ctx) return

if(this.contexts().length == 0) return;
if(!ctx || !this.contexts().find(d=>d==ctx)) ctx = this.contexts()[0];
this.showOverlay = ctx;
this.showErrorOverlay = "";
this.$axios.get(`/api/contexts/${ctx}`)
Expand Down
174 changes: 0 additions & 174 deletions src/app/frontend/layouts/components/log.vue
View file
Open in desktop

This file was deleted.

34 changes: 26 additions & 8 deletions src/app/frontend/layouts/components/terminal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
<template>
<div class="h-100">
<b-tabs ref="tabs" v-model="current_tab" @changed="current_tab = (Object.keys(tabs).length -1)" @activate-tab="onActivateTab" class="h-100" content-class="terminal-content-class" nav-class="terminal-nav-class" nav-wrapper-class="terminal-nav-wrapper-class" active-tab-class="terminal-active-tab-class" active-nav-item-class="terminal-active-nav-item-class text-bold">
<div class="terminal-buttons">
<i @click="onMinMaxClick" v-bind:class="{'fa-angle-up':isMinimize, 'fa-angle-down':!isMinimize }" class="fas cursor text-secondary"></i>
<i @click="onCloseClick" class="fas cursor text-secondary fa-window-close"></i>
</div>
<b-tabs ref="terminalTabs" v-model="current_tab" @changed="current_tab = (Object.keys(tabs).length -1)" @activate-tab="onActivateTab" class="h-100" content-class="terminal-content-class" nav-class="terminal-nav-class" nav-wrapper-class="terminal-nav-wrapper-class" active-tab-class="terminal-active-tab-class" active-nav-item-class="terminal-active-nav-item-class text-bold">
<b-tab v-for="(d, k) in tabs" :key="k" title-item-class="terminal-title-item-class" title-link-class="terminal-title-link-class text-sm">
<template #title>
<i class="fas fa-file-alt mr-1"></i>{{ d.title }}<i class="fas cursor fa-times ml-1 text-secondary" @click="onTerminalCloseClick(k)"></i>
<i class="fas fa-file-alt mr-1"></i>{{ d.title }}<i class="fas cursor fa-times ml-1 text-secondary" @click="onTabCloseClick(k)"></i>
</template>
<c-terminal-logs v-if="d.type=='logs'" v-model="tabs[k]" class="terminal-content"/>
<div v-else-if="d.type=='shell'"></div>
Expand All @@ -12,7 +16,9 @@
</b-tabs>
</div>
</template>
<style>
<style scroped>
.terminal-buttons { float:right; background-color:transparent; padding-right: .8rem }
.terminal-buttons > i { line-height:1.6rem; padding: .2rem .3rem; }
/* terminal) b-tabs classes */
div.terminal-nav-wrapper-class { padding-right: 2.5rem; border-bottom: 1px solid #ccc; background-color:var(--bg-color)}
ul.terminal-nav-class { height:2rem; border-bottom: 0; flex-wrap: nowrap; white-space: nowrap; overflow: auto; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
Expand Down Expand Up @@ -47,6 +53,7 @@ export default {
return {
tabs : {},
current_tab: 0,
isMinimize: false,
}
},
created() {
Expand All @@ -61,9 +68,9 @@ export default {
if (type == "cluster") this.$set(this.tabs, key, { title: title, type: "cluster", cluster: param } );
this.$emit("opened", key, Object.keys(this.tabs).length);
} else{
if (type === "logs") this.$set(this.tabs, key, { title: title, type: "logs", metadata: param.metadata, container: param.container, containers: param.containers } );
this.current_tab = Object.keys(this.tabs).findIndex((v) => v === key);
}
if (type == "logs") this.$set(this.tabs, key, { title: title, type: "logs", metadata: param.metadata, container: param.container, containers: param.containers } );
this.current_tab = Object.keys(this.tabs).findIndex((v) => v === key);
}
});
},
methods: {
Expand All @@ -81,10 +88,21 @@ export default {
ul.scrollLeft += x2 - x3 + 100; // hidden right (move to left)
}
},
onTerminalCloseClick(k) {
onMinMaxClick() {
this.isMinimize = !this.isMinimize;
if(this.isMinimize) this.$emit("minimize");
else this.$emit("maximize");
},
onTabCloseClick(k) {
this.$delete(this.tabs, k);
this.$emit("closed", k, Object.keys(this.tabs).length);
if(Object.keys(this.tabs).length==0) this.$emit("closed");
},
onCloseClick() {
for(const key of Object.keys(this.tabs)) {
this.$delete(this.tabs, key);
}
this.$emit("closed");
}
},
beforeDestroy(){
this.$nuxt.$off("open-terminal");
Expand Down
22 changes: 9 additions & 13 deletions src/app/frontend/layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@
<nuxt/>
</c-pane>
<c-pane v-show="isTerminal" class="terminal-pane" :size="paneSize">
<i @click="isMinimize = !isMinimize" v-bind:class="{'fa-angle-up':isMinimize, 'fa-angle-down':!isMinimize }" class="fas cursor text-secondary"></i>
<c-terminal @opened="onTerminalOpened" @closed="onTerminalClosed" />
<!--<i class="fas cursor text-secondary fa-window-close"></i>
<i @click="isMinimize = !isMinimize" v-bind:class="{'fa-angle-up':isMinimize, 'fa-angle-down':!isMinimize }" class="fas cursor text-secondary"></i>-->
<c-terminal @opened="onTerminalOpened" @closed="onTerminalClosed" @maximize="isMinimize=false" @minimize="isMinimize=true" />
</c-pane>
</c-splitpanes>
<c-footer class="main-footer"/>
Expand Down Expand Up @@ -68,19 +69,14 @@ export default {
this.isMinimize = false;
}
},
onTerminalClosed(key, len) {
if(len == 0) {
this.paneSize = 0;
this.isTerminal = false;
if(this.isMinimize) {
this.beforePaneSize = 0;
this.isMinimize = false;
}

onTerminalClosed() {
this.paneSize = 0;
this.isTerminal = false;
if(this.isMinimize) {
this.beforePaneSize = 0;
this.isMinimize = false;
}
}
},
beforeDestroy(){
}
}
</script>
Loading