Skip to content

Commit

Permalink
Refactor pipeline report UI
Browse files Browse the repository at this point in the history
Signed-off-by: Olivier Vernin <olivier.vernin@suse.com>
  • Loading branch information
olblak committed Jul 25, 2023
1 parent 5b86550 commit 7ed6482
Show file tree
Hide file tree
Showing 4 changed files with 295 additions and 92 deletions.
74 changes: 74 additions & 0 deletions src/components/pipeline/_condition.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<template>
<v-toolbar
density="compact"
class="text-white"
>
<v-toolbar-title>
<v-icon icon="mdi-circle" :color="getStatusColor(data.Result)"></v-icon> {{ data.Name }}
</v-toolbar-title>

<v-toolbar-items>
<v-btn>{{ id }}</v-btn>
</v-toolbar-items>
</v-toolbar>

<v-container>
<v-card
variant="flat"
>
<v-card-subtitle v-if="data.Scm.URL">
<v-row>
<v-col
class="text-left"
>
<v-icon icon="mdi-git"></v-icon>
</v-col>
<v-col
class="text-center"
>
{{ data.Scm.URL }}
</v-col>
<v-col
class="text-right"
>
{{ data.Scm.Branch.Source }}
</v-col>
</v-row>
<v-divider></v-divider>
</v-card-subtitle>

<v-card-text>
{{ data.Description }}
</v-card-text>
</v-card>
</v-container>
</template>

<script>
export default {
name: "ConditionComponent",
data: () => ({
}),
props: [
'data',
'id'
],
methods: {
getStatusColor: function(input){
switch (input) {
case "":
return "success"
case "":
return "red"
case "":
return "orange"
default:
return "yellow"
}
}
}
}
</script>
89 changes: 89 additions & 0 deletions src/components/pipeline/_source.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<template>
<v-toolbar
density="compact"
class="text-white"
>
<v-toolbar-title>
<v-icon
icon="mdi-circle"
:color="getStatusColor(data.Result)"
></v-icon> {{ data.Name }}
</v-toolbar-title>

<v-toolbar-items>
<v-btn>{{ id }}</v-btn>
</v-toolbar-items>
</v-toolbar>

<v-container fluid>
<v-card
variant="flat"
>
<v-card-subtitle v-if="data.Scm.URL">
<v-row>
<v-col
class="text-left"
>
<v-icon icon="mdi-git"></v-icon>
</v-col>
<v-col
class="text-center"
>
{{ data.Scm.URL }}
</v-col>
<v-col
class="text-right"
>
{{ data.Scm.Branch.Source }}
</v-col>
</v-row>
<v-divider></v-divider>
</v-card-subtitle>

<v-card-text
>
{{ data.Description }}
</v-card-text>

<v-card-actions>
<v-spacer></v-spacer>
<v-btn
v-if="data.Information"
variant="outlined"
>
<p>{{ data.Information }}</p>
</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-container>
</template>

<script>
export default {
name: "SourceComponent",
data: () => ({
}),
props: [
'data',
'id'
],
methods: {
getStatusColor: function(input){
switch (input) {
case "":
return "success"
case "":
return "red"
case "":
return "orange"
default:
return "yellow"
}
}
}
}
</script>
107 changes: 107 additions & 0 deletions src/components/pipeline/_target.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<template>
<v-toolbar
density="compact"
class="text-white"
>
<v-toolbar-title>
<v-icon icon="mdi-circle" :color="getStatusColor(data.Result)"></v-icon> {{ data.Name }}
</v-toolbar-title>

<v-toolbar-items>
<v-btn
v-if="data.DryRun == true"
>
DryRun
</v-btn>
<v-btn
>
{{ id }}
</v-btn>

</v-toolbar-items>
</v-toolbar>

<v-container fluid>
<v-card variant="flat">

<v-card-subtitle v-if="data.Scm.URL">
<v-row>
<v-col
class="text-left"
>
<v-icon icon="mdi-git"></v-icon>
</v-col>
<v-col
class="text-center"
>
{{ data.Scm.URL }}
</v-col>
<v-col
class="text-right"
>
{{ data.Scm.Branch.Source }}
</v-col>
</v-row>
<v-divider></v-divider>
</v-card-subtitle>

<v-card-text>
{{ data.Description }}
</v-card-text>

<v-card-actions>
<v-spacer></v-spacer>
<v-btn
v-if="data.Information"
variant="outlined"
>
<p>{{ data.Information }}</p>
</v-btn>

<v-btn
icon="mdi-arrow-right"
v-if="data.NewInformation"
>
</v-btn>


<v-btn
variant="outlined"
v-if="data.NewInformation"
>
{{ data.NewInformation }}
</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-container>
</template>

<script>
export default {
name: "TargetComponent",
data: () => ({
}),
props: [
'data',
'id'
],
methods: {
getStatusColor: function(input){
switch (input) {
case "":
return "success"
case "":
return "red"
case "":
return "orange"
default:
return "yellow"
}
}
}
}
</script>
Loading

0 comments on commit 7ed6482

Please sign in to comment.