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

Feature/show build logs #383

Merged
merged 7 commits into from
Jul 20, 2024
Merged

Feature/show build logs #383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
93d5e1d
add buildtime, success and status
mms-gianni Jul 13, 2024
bc86dbc
improve logs view to match laptops
mms-gianni Jul 16, 2024
b6300f9
show buildlogs for every build
mms-gianni Jul 17, 2024
0807b01
separate build and run logs
mms-gianni Jul 18, 2024
da2e118
Update the build and log components to only display specific tabs ba…
mms-gianni Jul 19, 2024
e282d4a
add reloads and timer for active builds
mms-gianni Jul 19, 2024
017df8b
Clear interval timers in the `unmounted` lifecycle hook to prevent m…
mms-gianni Jul 19, 2024
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
132 changes: 126 additions & 6 deletions client/src/components/apps/builds.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,40 @@
elevation="2"
outlined
color="cardBackground"
:loading="b.jobstatus?.status == 'Active'"
>

<template v-slot:loader="{ isActive }">
<v-progress-linear
:active="isActive"
color="primary"
height="2"
indeterminate
></v-progress-linear>
</template>
<div>
<v-card-title>
<v-row>
<v-col cols="1">
<v-icon class="mb-2 buildpacks" v-if="b.spec.buildstrategy == 'buildpacks'"></v-icon>
<v-icon class="mb-2 nixpacks" v-if="b.spec.buildstrategy == 'nixpacks'"></v-icon>
<v-icon class="mb-2 dockerfile" v-if="b.spec.buildstrategy == 'dockerfile'"></v-icon>
<v-badge v-if="b.jobstatus?.status != 'Active'" :color="getStatusColor(b.jobstatus?.status)" :icon="getStatusIcon(b.jobstatus?.status)" location="top end">
<v-icon class="mb-2 buildpacks" v-if="b.spec.buildstrategy == 'buildpacks'"></v-icon>
<v-icon class="mb-2 nixpacks" v-if="b.spec.buildstrategy == 'nixpacks'"></v-icon>
<v-icon class="mb-2 dockerfile" v-if="b.spec.buildstrategy == 'dockerfile'"></v-icon>
</v-badge>
<span v-else>
<v-icon class="mb-2 buildpacks" v-if="b.spec.buildstrategy == 'buildpacks'"></v-icon>
<v-icon class="mb-2 nixpacks" v-if="b.spec.buildstrategy == 'nixpacks'"></v-icon>
<v-icon class="mb-2 dockerfile" v-if="b.spec.buildstrategy == 'dockerfile'"></v-icon>
</span>

</v-col>
<v-col cols="11">
<h4>{{ b.metadata.name }}</h4>
</v-col>
</v-row>
</v-card-title>
<v-card-subtitle>
created: {{ b.metadata.creationTimestamp }} | duration : {{ b.metadata.creationTimestamp }}
created: {{ b.metadata.creationTimestamp }} | duration : {{ calcDuration(b.jobstatus?.duration, b.jobstatus?.status) }}
</v-card-subtitle>
<v-card-text>
<v-row>
Expand Down Expand Up @@ -67,6 +85,19 @@
mdi-delete
</v-icon>
</v-btn>
<v-btn
elevation="2"
fab
small
class="ma-2"
color="secondary"
v-if="b.jobstatus?.status != 'Active'"
@click="showLogs(b.metadata.name)"
>
<v-icon color="primary">
mdi-format-align-justify
</v-icon>
</v-btn>
<!--
<v-btn
elevation="2"
Expand All @@ -84,6 +115,11 @@
</v-row>
</v-col>
</v-row>
<v-expand-transition>
<v-row v-if="b.metadata.name == activeLogs">
<Logs :pipeline=pipeline :phase=phase :app=app :deploymentstrategy=appData?.spec.deploymentstrategy logType="buildlogs" :buildID="b.metadata.name"/>
</v-row>
</v-expand-transition>
</v-card-text>
</div>
</v-card>
Expand Down Expand Up @@ -184,7 +220,9 @@
import axios from "axios";
import { defineComponent } from 'vue'
import Buildsform from './buildsform.vue'
import Logs from './logs.vue'
import { useKuberoStore } from '../../stores/kubero'
import { update } from "lodash";

const socket = useKuberoStore().kubero.socket as any;

Expand Down Expand Up @@ -239,6 +277,12 @@ type Deployment = {
reason?: string
}>
}
jobstatus?: {
duration: string
startTime: string
completionTime: string
status: "Unknown" | "Active" | "Succeeded" | "Failed" | undefined
}
}

export default defineComponent({
Expand Down Expand Up @@ -267,6 +311,9 @@ export default defineComponent({
data() {
return {
deployments: [] as Deployment[],
activeLogs: "",
reloadTimer: null as any,
clockTimer: null as any,
}
},
mounted() {
Expand All @@ -278,6 +325,25 @@ export default defineComponent({
this.loadDeployments();
}, 2000);
});


this.reloadTimer = setInterval(() => {
this.updateStatus();
}, 10000);


this.clockTimer = setInterval(() => {
this.deployments.forEach((d) => {
if (d.jobstatus?.status == "Active") {
d.jobstatus.duration = (new Date().getTime() - new Date(d.jobstatus.startTime).getTime()).toString();
}
});
}, 1000);

},
unmounted() {
clearInterval(this.reloadTimer);
clearInterval(this.clockTimer);
},
methods: {
deleteBuild(deploymentName: string) {
Expand All @@ -299,10 +365,64 @@ export default defineComponent({
.catch(error => {
console.log(error);
});
}
},
updateStatus() {
axios.get(`/api/deployments/${this.pipeline}/${this.phase}/${this.app}`)
.then(response => {
const deployments = response.data.items as Deployment[];
deployments.forEach((d: Deployment) => {
const deployment = this.deployments.find((dep) => dep.metadata.name == d.metadata.name);
if (deployment && deployment.jobstatus) {
deployment.jobstatus.status = d.jobstatus?.status;
}
});
})
.catch(error => {
console.log(error);
});
},

msToTime(duration: number) {
const seconds = Math.floor((duration / 1000) % 60);
const minutes = Math.floor((duration / (1000 * 60)) % 60);
return `${minutes}m ${seconds}s`;
},
calcDuration(durationMS: string | undefined, status: string | undefined) {
if (durationMS == undefined) {
return "-";
}
return this.msToTime(parseInt(durationMS));
},
getStatusColor(status: string | undefined) {
if (status == "Active") {
return "warning";
} else if (status == "Succeeded") {
return "success";
} else if (status == "Failed") {
return "error";
} else {
return "grey";
}
},
getStatusIcon(status: string | undefined) {
if (status == "Active") {
return "mdi-clock-outline";
} else if (status == "Succeeded") {
return "mdi-check-bold";
} else if (status == "Failed") {
return "mdi-exclamation-thick";
} else {
return "mdi-help";
}
},
showLogs(deploymentName: string) {
//window.open(`/popup/logs/${this.pipeline}/${this.phase}/${this.app}/${deploymentName}`, '_blank', 'popup=yes,location=no,height=1000,width=1000,scrollbars=yes,status=no');
this.activeLogs = deploymentName;
}
},
components: {
Buildsform
Buildsform,
Logs,
}

})
Expand Down
47 changes: 37 additions & 10 deletions client/src/components/apps/logs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
<template>
<div style="height: 95%;">
<v-tabs class="console-bar">
<v-tab @click="getLogHistory('web')">run</v-tab>
<v-tab v-if="deploymentstrategy == 'git'" @click="getLogHistory('builder')">build</v-tab>
<v-tab v-if="deploymentstrategy == 'git'" @click="getLogHistory('fetcher')">fetch</v-tab>
<div style="height: 600px; width: 100%;">
<v-tabs class="console-bar" style="position: relative; z-index: 3000;">
<v-tab v-if="logType == 'runlogs'" @click="getLogHistory('web')">run</v-tab>
<v-tab v-if="logType == 'runlogs' && deploymentstrategy == 'git' && buildstrategy=='plain'" @click="getLogHistory('builder')">build</v-tab>
<v-tab v-if="logType == 'runlogs' && deploymentstrategy == 'git' && buildstrategy=='plain'" @click="getLogHistory('fetcher')">fetch</v-tab>
<v-tab v-if="logType == 'buildlogs' && buildstrategy!='plain'" @click="getBuildLogHistory('deployer')">deployer</v-tab>
<v-tab v-if="logType == 'buildlogs' && buildstrategy!='plain'" @click="getBuildLogHistory('push')">push</v-tab>
<v-tab v-if="logType == 'buildlogs' && buildstrategy=='nixpacks'" @click="getBuildLogHistory('build')">build</v-tab>
<v-tab v-if="logType == 'buildlogs' && buildstrategy!='plain'" @click="getBuildLogHistory('fetch')">fetch</v-tab>
</v-tabs>
<div class="console" id="console">
<div class="console" id="console" style="height:100%; margin-top: -45px; z-index: 2000;">
<div v-for="line in loglines" :key="line.id">
{{ new Date(line.time).toLocaleDateString() }} {{ new Date(line.time).toLocaleTimeString()}} <span :style="'color:' +line.color">[{{ line.podID }}/{{ line.container.replace('kuberoapp-', '') }}]</span>
{{ line.log }}
Expand Down Expand Up @@ -50,9 +54,15 @@ export default defineComponent({
}
},
mounted() {
this.getLogHistory('web')
this.socketJoin()
this.startLogs()
if (this.logType == 'buildlogs') {
this.getBuildLogHistory('deployer')
//this.socketJoin()
//this.startLogs()
} else {
this.getLogHistory('web')
this.socketJoin()
this.startLogs()
}
},
unmounted() {
this.socketLeave()
Expand All @@ -75,6 +85,18 @@ export default defineComponent({
type: String,
default: "docker"
},
buildstrategy: {
type: String,
default: "dockerfile"
},
logType: {
type: String,
default: "runlogs"
},
buildID: {
type: String,
default: "MISSING"
},
},
data: () => ({
loglines: [
Expand Down Expand Up @@ -116,6 +138,12 @@ export default defineComponent({
this.loglines = response.data;
});
},
getBuildLogHistory(container: string) {
//http://localhost:2000/api/deployments/devcon/production/aaa/20240717-0651/log
axios.get(`/api/deployments/${this.pipeline}/${this.phase}/${this.app}/${this.buildID}/${container}/history`).then((response) => {
this.loglines = response.data;
});
},
},
});
</script>
Expand All @@ -136,7 +164,6 @@ a:link { text-decoration: none;}
}

.console {
height: 100%;
overflow-x: scroll;
background-color: #333;
color: #c0c0c0;
Expand Down
4 changes: 2 additions & 2 deletions client/src/components/apps/logstab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@
<p></p>
</v-col>
</v-row>
<v-row style="height: 1100px">
<v-row>
<v-col cols="12" sm="12" md="12">
<Logs :pipeline=pipeline :phase=phase :app=app :deploymentstrategy=deploymentstrategy />
<Logs :pipeline=pipeline :phase=phase :app=app :deploymentstrategy=deploymentstrategy logType="runlogs"/>
</v-col>
</v-row>

Expand Down
1 change: 1 addition & 0 deletions server/src/configure.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ export const configure = async (app: Express, server: Server) => {
kubectl: kubero.kubectl,
notifications: notifications,
io: sockets,
kubero: kubero,
});
app.locals.deployments = deployments;

Expand Down
9 changes: 6 additions & 3 deletions server/src/kubero.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1013,8 +1013,11 @@ export class Kubero {
if (pod.metadata?.name?.startsWith(appName)) {
if (container == 'web') {
for (const container of pod.spec?.containers || []) {
const ll = await this.fetchLogs(namespace, pod.metadata.name, container.name, pipelineName, phaseName, appName)
loglines = loglines.concat(ll);
// only fetch logs for the web container, exclude trivy and build jobs
if (!pod.metadata?.labels?.["job-name"]) {
const ll = await this.fetchLogs(namespace, pod.metadata.name, container.name, pipelineName, phaseName, appName)
loglines = loglines.concat(ll);
}
}
} else if (container == 'builder' || container == 'fetcher') {
const ll = await this.fetchLogs(namespace, pod.metadata.name, "kuberoapp-"+container, pipelineName, phaseName, appName)
Expand All @@ -1029,7 +1032,7 @@ export class Kubero {
return loglines;
}

private async fetchLogs(namespace: string, podName: string, containerName: string, pipelineName: string, phaseName: string, appName: string): Promise<ILoglines[]> {
public async fetchLogs(namespace: string, podName: string, containerName: string, pipelineName: string, phaseName: string, appName: string): Promise<ILoglines[]> {
let loglines: ILoglines[] = [];

const logStream = new Stream.PassThrough();
Expand Down
Loading
Loading