Skip to content

Commit

Permalink
Split changes and jobs into separate tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
ggodlewski committed Jan 15, 2024
1 parent 1912dc5 commit ef79a87
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 98 deletions.
91 changes: 0 additions & 91 deletions apps/ui/src/components/ChangesViewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -34,70 +34,7 @@
</tbody>
</table>
</div>
<div class="card-footer" v-if="active_jobs.length === 0">
<div class="btn-group">
<a class="btn btn-outline-primary me-2" v-if="selectedFile.id && selectedFile.id !== 'TO_FILL'" @click.prevent="$emit('sync', { $event, file: selectedFile })">Sync Single</a>
<a class="btn btn-outline-danger me-2" v-if="drive.name" @click.prevent="syncAll">Sync All</a>
<a class="btn btn-outline-secondary me-2" v-if="!isGDocsPreview && drive.name && selectedFile.id" @click.prevent="$emit('transform', $event, selectedFile)">Transform Single Markdown</a>
<a class="btn btn-outline-secondary me-2" v-if="!isGDocsPreview && drive.name" @click.prevent="transformAll">Transform All Markdown</a>
<a class="btn btn-outline-secondary me-2" v-if="!isGDocsPreview && drive.name" @click.prevent="renderPreview">Render Preview</a>
</div>
</div>
</div>

<div class="card mt-3">
<div class="card-header">
Jobs
</div>
<div class="card-body">
<div class="row py-1 align-items-center" v-if="last_job.dateStr">
<div class="col-8">
<span v-if="last_job.kind === 'full'" class="fw-bold">Last full sync </span>
<span v-else class="fw-bold">Last synced </span>
<span class="small text-muted">{{ last_job.dateStr }} </span>
<span v-if="last_job.durationStr" class="small text-muted">&nbsp;{{ last_job.durationStr }}</span>
</div>
<div v-if="last_transform.durationStr" class="col-8">
<span class="fw-bold">Last transform took</span>
<span class="small text-muted">&nbsp;{{ last_transform.durationStr }}</span>
</div>
</div>

<table class="table table-bordered jobs-list mt-3">
<thead>
<tr>
<th>Job</th>
<th>Started</th>
<th>Finished</th>
</tr>
</thead>

<tbody v-if="active_jobs_reverse.length > 0">
<tr v-for="(job, idx) of active_jobs_reverse" :key="idx" class="jobs-list__item" :class="{ active: 'running' === job.state }">
<td>{{ job.title }}</td>
<td>{{ job.startedStr || job.state }}</td>
<td>
<span v-if="job.progress && job.progress.total > job.progress.completed">&nbsp;{{ job.progress.completed }} / {{ job.progress.total }}</span>
<a v-if="job.id && job.started" class="btn float-end" :href="'#drive_logs:job-' + job.id" @click.prevent="showLogs(job)">Logs</a>
</td>
</tr>
</tbody>

<tbody>
<tr v-for="(job, idx) of archive" :key="idx" class="jobs-list__item" :class="{ active: 'running' === job.state, 'text-danger': 'failed' === job.state, 'text-warning': job.progress && job.progress.warnings > 0 }">
<td>{{ job.title }}</td>
<td>{{ job.startedStr }}</td>
<td>
{{ job.finishedStr }}
({{ job.durationStr }})
<a class="btn float-end" :href="'#drive_logs:job-' + job.id" @click.prevent="showLogs(job)">Logs</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>
</div>
</template>
Expand All @@ -117,33 +54,8 @@ export default {
},
components: {StatusToolBar},
computed: {
active_jobs_reverse() {
return [].concat(this.active_jobs)
.map(a => {
return {
...a,
finishedStr: a.finished ? new Date(a.finished).toISOString() : undefined,
startedStr: a.started ? new Date(a.started).toISOString() : undefined,
durationStr: a.started && a.finished ? Math.round((+new Date(a.finished) - +new Date(a.started)) / 100)/10 + 's' : undefined
};
})
.reverse();
},
fileChanges() {
return this.changes.filter(change => change.mimeType !== 'application/vnd.google-apps.folder');
},
archive() {
const arr = [].concat(this.$root.archive);
arr.sort((a, b) => b.finished - a.finished);
return arr.map(a => {
return {
...a,
finishedStr: new Date(a.finished).toISOString(),
startedStr: new Date(a.started).toISOString(),
durationStr: Math.round((+new Date(a.finished) - +new Date(a.started)) / 100)/10 + 's'
};
});
}
},
methods: {
Expand Down Expand Up @@ -171,9 +83,6 @@ export default {
this.$router.push(`/drive/${this.driveId}${path}`);
}
}
},
showLogs(job) {
this.$router.push(`/drive/${this.driveId}#drive_logs:job-${job.id}`);
}
}
};
Expand Down
120 changes: 120 additions & 0 deletions apps/ui/src/components/JobsViewer.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<template>
<div class="container mainbar__content-height">
<StatusToolBar :active-tab="activeTab" />

<div>
<div class="card-footer" v-if="active_jobs.length === 0">
<div class="btn-group">
<a class="btn btn-outline-primary me-2" v-if="selectedFile.id && selectedFile.id !== 'TO_FILL'" @click.prevent="$emit('sync', { $event, file: selectedFile })">Sync Single</a>
<a class="btn btn-outline-danger me-2" v-if="drive.name" @click.prevent="syncAll">Sync All</a>
<a class="btn btn-outline-secondary me-2" v-if="!isGDocsPreview && drive.name && selectedFile.id" @click.prevent="$emit('transform', $event, selectedFile)">Transform Single Markdown</a>
<a class="btn btn-outline-secondary me-2" v-if="!isGDocsPreview && drive.name" @click.prevent="transformAll">Transform All Markdown</a>
<a class="btn btn-outline-secondary me-2" v-if="!isGDocsPreview && drive.name" @click.prevent="renderPreview">Render Preview</a>
</div>
</div>

<div class="card mt-3">
<div class="card-header">
Jobs
</div>
<div class="card-body">
<div class="row py-1 align-items-center" v-if="last_job.dateStr">
<div class="col-8">
<span v-if="last_job.kind === 'full'" class="fw-bold">Last full sync </span>
<span v-else class="fw-bold">Last synced </span>
<span class="small text-muted">{{ last_job.dateStr }} </span>
<span v-if="last_job.durationStr" class="small text-muted">&nbsp;{{ last_job.durationStr }}</span>
</div>
<div v-if="last_transform.durationStr" class="col-8">
<span class="fw-bold">Last transform took</span>
<span class="small text-muted">&nbsp;{{ last_transform.durationStr }}</span>
</div>
</div>

<table class="table table-bordered jobs-list mt-3">
<thead>
<tr>
<th>Job</th>
<th>Started</th>
<th>Finished</th>
</tr>
</thead>

<tbody v-if="active_jobs_reverse.length > 0">
<tr v-for="(job, idx) of active_jobs_reverse" :key="idx" class="jobs-list__item" :class="{ active: 'running' === job.state }">
<td>{{ job.title }}</td>
<td>{{ job.startedStr || job.state }}</td>
<td>
<span v-if="job.progress && job.progress.total > job.progress.completed">&nbsp;{{ job.progress.completed }} / {{ job.progress.total }}</span>
<a v-if="job.id && job.started" class="btn float-end" :href="'#drive_logs:job-' + job.id" @click.prevent="showLogs(job)">Logs</a>
</td>
</tr>
</tbody>

<tbody>
<tr v-for="(job, idx) of archive" :key="idx" class="jobs-list__item" :class="{ active: 'running' === job.state, 'text-danger': 'failed' === job.state, 'text-warning': job.progress && job.progress.warnings > 0 }">
<td>{{ job.title }}</td>
<td>{{ job.startedStr }}</td>
<td>
{{ job.finishedStr }}
({{ job.durationStr }})
<a class="btn float-end" :href="'#drive_logs:job-' + job.id" @click.prevent="showLogs(job)">Logs</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>
</div>
</template>
<script>
import {UtilsMixin} from './UtilsMixin.ts';
import {UiMixin} from './UiMixin.ts';
import StatusToolBar from './StatusToolBar.vue';
export default {
name: 'JobsViewer',
mixins: [UtilsMixin, UiMixin],
props: {
selectedFile: Object,
activeTab: {
type: String
}
},
components: {StatusToolBar},
computed: {
active_jobs_reverse() {
return [].concat(this.active_jobs)
.map(a => {
return {
...a,
finishedStr: a.finished ? new Date(a.finished).toISOString() : undefined,
startedStr: a.started ? new Date(a.started).toISOString() : undefined,
durationStr: a.started && a.finished ? Math.round((+new Date(a.finished) - +new Date(a.started)) / 100)/10 + 's' : undefined
};
})
.reverse();
},
archive() {
const arr = [].concat(this.$root.archive);
arr.sort((a, b) => b.finished - a.finished);
return arr.map(a => {
return {
...a,
finishedStr: new Date(a.finished).toISOString(),
startedStr: new Date(a.started).toISOString(),
durationStr: Math.round((+new Date(a.finished) - +new Date(a.started)) / 100)/10 + 's'
};
});
}
},
methods: {
showLogs(job) {
this.$router.push(`/drive/${this.driveId}#drive_logs:job-${job.id}`);
}
}
};
</script>
17 changes: 12 additions & 5 deletions apps/ui/src/components/StatusToolBar.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
<template>
<ul class="nav nav-tabs mt-2">
<ToolButton
v-if="!isGDocsPreview"
:active="activeTab === 'sync'"
:to="{ name: 'drive', params: { driveId }, hash: '#sync' }"
icon="fa-solid fa-computer me-1"
title="Sync"
v-if="!isGDocsPreview"
:active="activeTab === 'sync'"
:to="{ name: 'drive', params: { driveId }, hash: '#sync' }"
icon="fa-solid fa-computer me-1"
title="Sync"
/>
<ToolButton
v-if="!isGDocsPreview"
:active="activeTab === 'changes'"
:to="{ name: 'drive', params: { driveId }, hash: '#changes' }"
icon="fa-solid fa-code-compare me-1"
:title="'Changes: ' + changes.length"
/>
<ToolButton
v-if="!isGDocsPreview"
Expand Down
7 changes: 5 additions & 2 deletions apps/ui/src/pages/FolderView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@
</div>
</div>

<ChangesViewer v-if="activeTab === 'sync'" :selected-file="selectedFile" :activeTab="activeTab" @sync="syncSingle($event.$event, $event.file)" @transform="transformSingle" @showLogs="showLogs" />
<JobsViewer v-if="activeTab === 'sync'" :selected-file="selectedFile" :activeTab="activeTab" @sync="syncSingle($event.$event, $event.file)" @transform="transformSingle" @showLogs="showLogs" />
<ChangesViewer v-if="activeTab === 'changes'" :selected-file="selectedFile" :activeTab="activeTab" @sync="syncSingle($event.$event, $event.file)" @transform="transformSingle" @showLogs="showLogs" />
<GitLog v-if="activeTab === 'git_log'" :folderPath="folderPath" :selectedFile="selectedFile" :active-tab="activeTab" />
<GitSettings v-if="activeTab === 'git_settings'" :active-tab="activeTab" :tree-empty="treeEmpty" />

Expand Down Expand Up @@ -114,6 +115,7 @@ import LogsViewer from '../components/LogsViewer.vue';
import JobLogsViewer from '../components/JobLogsViewer.vue';
import ZipkinViewer from '../components/ZipkinViewer.vue';
import ChangesViewer from '../components/ChangesViewer.vue';
import JobsViewer from '../components/JobsViewer.vue';
import UserSettings from '../components/UserSettings.vue';
import DangerSettings from '../components/DangerSettings.vue';
import GitLog from '../components/GitLog.vue';
Expand Down Expand Up @@ -143,6 +145,7 @@ export default {
JobLogsViewer,
ZipkinViewer,
ChangesViewer,
JobsViewer,
UserSettings,
DangerSettings,
WorkflowsEditor,
Expand Down Expand Up @@ -179,7 +182,7 @@ export default {
if (this.notRegistered) {
return false;
}
return this.activeTab !== 'drive_logs' && this.activeTab !== 'performance' && this.activeTab !== 'drive_config' && this.activeTab !== 'drive_danger' && this.activeTab !== 'git_settings' && this.activeTab !== 'sync' && this.activeTab !== 'workflows';
return this.activeTab !== 'drive_logs' && this.activeTab !== 'performance' && this.activeTab !== 'drive_config' && this.activeTab !== 'drive_danger' && this.activeTab !== 'git_settings' && this.activeTab !== 'sync' && this.activeTab !== 'changes' && this.activeTab !== 'workflows';
},
jobs() {
return this.$root.jobs || [];
Expand Down

0 comments on commit ef79a87

Please sign in to comment.