Skip to content

Commit

Permalink
[ui] Schedule GitHub and GitLab tasks
Browse files Browse the repository at this point in the history 
Adds the option to schedule tasks to fetch GitHub and GitLab
issues and pull requests.
  • Loading branch information
@evamillan
evamillan committed Dec 5, 2024
1 parent 34f4c36 commit 1fb80ee
Show file tree
Hide file tree
Showing 2 changed files with 202 additions and 75 deletions.
271 changes: 198 additions & 73 deletions ui/src/components/TaskList/FormDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,110 +10,235 @@
v-bind="activatorProps"
></v-btn>
</template>

<v-card title="Schedule task">
<v-card-text class="mt-4">
<v-row dense>
<v-col cols="6">
<v-select
v-model="formData.task_args.datasource_type"
:items="['git']"
color="primary"
label="Backend"
hide-details
required
/>
</v-col>
<v-col cols="6">
<v-form ref="form" class="pa-6 pt-4">
<fieldset>
<legend class="text-subtitle-2 mb-3">Fetch data from a repository</legend>
<div class="input-grid">
<v-select
v-model="formData.task_args.datasource_category"
:items="['commit']"
color="primary"
label="Category"
hide-details
required
/>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-text-field
v-model="formData.task_args.backend_args.uri"
v-model="formData.datasourceType"
:items="backends"
item-title="backend"
color="primary"
label="URI"
hide-details
required
/>
</v-col>
</v-row>
<v-row>
<v-col cols="6">
<v-radio-group
v-model="formData.scheduler.job_interval"
density="comfortable"
size="small"
density="compact"
>
<template #label>
<span class="text-subtitle-2">Interval</span>
<template #selection="{ item }">
<v-icon size="small" start>
{{ 'mdi-' + item.title.toLowerCase() }}
</v-icon>
{{ item.title }}
</template>
<template #item="{ props, item }">
<v-list-item
v-bind="props"
:prepend-icon="`mdi-${item.title.toLowerCase()}`"
density="comfortable"
nav
/>
</template>
<v-radio :value="86400" label="Every day"></v-radio>
<v-radio :value="604800" label="Every week"></v-radio>
<v-radio value="custom" label="Custom"></v-radio>
</v-radio-group>
</v-select>
<v-text-field
v-model="customInterval"
class="ml-8"
label="Every"
type="number"
suffix="seconds"
hide-details
required
>
</v-text-field>
</v-col>
</v-row>
</v-card-text>

<v-card-actions class="pt-0 pb-4 pr-4">
v-model="formData.uri"
label="Repository URL"
color="primary"
density="compact"
:rules="rules.required"
/>
</div>
</fieldset>
<fieldset class="mt-2">
<legend class="text-subtitle-2 mb-2">Select the data that you want to analyze</legend>
<v-checkbox
v-for="(category, index) in categories"
v-model="formData.categories"
:key="formData.datasourceType + category.value"
:label="category.text"
:value="category.value"
color="primary"
density="comfortable"
:hide-details="index !== categories.length - 1"
:rules="rules.category"
/>
</fieldset>
<fieldset class="mt-2">
<legend class="text-subtitle-2 mb-2">Schedule interval</legend>
<v-radio-group
v-model="formData.interval"
color="primary"
density="comfortable"
hide-details
>
<v-radio :value="86400" label="Every day"></v-radio>
<v-radio :value="604800" label="Every week"></v-radio>
<v-radio value="custom" label="Custom"></v-radio>
</v-radio-group>
<v-row>
<v-col cols="6">
<v-text-field
v-model="customInterval"
class="mt-2 ml-8"
color="primary"
density="compact"
hide-details="auto"
label="Every"
type="number"
:rules="rules.customInterval"
>
<template #append>
<span class="text-medium-emphasis">seconds</span>
</template>
</v-text-field>
</v-col>
</v-row>
</fieldset>
</v-form>
<v-card-actions class="pt-0 pb-4 pr-6">
<v-spacer></v-spacer>
<v-btn text="Cancel" variant="plain" @click="isOpen = false"></v-btn>
<v-btn text="Cancel" variant="plain" @click="closeModal"></v-btn>
<v-btn color="primary" text="Save" variant="flat" @click="onSave"></v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
const defaultData = {
datasourceType: 'Git',
categories: ['commit'],
uri: '',
interval: 604800
}
export default {
name: 'FormDialog',
emits: ['create'],
data() {
return {
isOpen: false,
formData: {
formData: { ...defaultData },
customInterval: '',
backends: [
{
backend: 'Git',
categories: [{ text: 'Commits', value: 'commit' }]
},
{
backend: 'GitHub',
categories: [
{ text: 'Issues', value: 'issue' },
{ text: 'Pull Requests', value: 'prs' }
]
},
{
backend: 'GitLab',
categories: [
{ text: 'Issues', value: 'issue' },
{ text: 'Merge Requests', value: 'merge' }
]
}
],
rules: {
required: [
(value) => {
if (value) return true
return 'This field is required.'
}
],
category: [
(value) => {
if (value.length > 0) return true
return 'Select at least one category.'
}
],
customInterval: [
(value) => {
if (this.formData.interval == 'custom' && !value) return 'Enter an interval.'
return true
}
]
}
}
},
computed: {
categories() {
return this.backends.find((item) => item.backend === this.formData.datasourceType).categories
},
emitData() {
return this.formData.categories.map((category) => ({
type: 'eventizer',
task_args: {
datasource_type: 'git',
datasource_category: 'commit',
datasource_type: this.formData.datasourceType.toLowerCase(),
datasource_category: category,
backend_args: {
uri: ''
}
uri: this.formData.uri
},
},
scheduler: {
job_interval: 604800,
job_max_retries: 1
job_interval: this.formData.interval
}
},
customInterval: ''
}))
}
},
methods: {
onSave() {
if (this.formData.scheduler.job_interval === 'custom') {
this.formData.scheduler.job_interval = this.customInterval
async onSave() {
const { valid } = await this.$refs.form.validate()
if (!valid) return
if (this.formData.interval === 'custom') {
this.formData.interval = this.customInterval
}
this.$emit('create', this.formData)
this.$emit('create', this.emitData)
this.closeModal()
},
closeModal() {
this.isOpen = false
this.resetForm()
},
resetForm() {
this.formData = { ...defaultData }
}
},
watch: {
'formData.backend'() {
Object.assign(this.formData, { categories: [] })
}
}
}
</script>
<style lang="scss" scoped>
.input-grid {
display: grid;
grid-template-columns: 0.7fr 2fr;
:deep(.v-select) .v-field {
border-radius: 4px 0 0 4px;
}
:deep(.v-input:not(.v-select)) .v-field {
border-radius: 0 4px 4px 0;
&:not(.v-field--focused) .v-field__outline__start {
border-inline-start-width: 0;
}
}
}
.v-list-item--rounded {
border-radius: 0;
:deep(.v-list-item__spacer) {
width: 12px;
}
}
fieldset {
border: 0;
}
.v-input--density-comfortable {
--v-input-control-height: 36px;
}
</style>
6 changes: 4 additions & 2 deletions ui/src/views/Task/ListView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,14 @@ export default {
methods: {
async createTask(formData) {
try {
const response = await API.scheduler.create(formData)
const responses = await Promise.all(formData.map((task) => API.scheduler.create(task)))
Object.assign(this.snackbar, {
open: true,
color: 'success',
text: response.data.message
text: responses.map((response) => response.data.message).join(', ')
})
this.fetchTasks(this.currentPage)
} catch (error) {
Object.assign(this.snackbar, {
Expand Down

0 comments on commit 1fb80ee

Please sign in to comment.