opdavies/rebuilding-acquia
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Extract task list, make it expandable

Browse source
This commit is contained in:
Oliver Davies 2018-12-26 01:17:10 +00:00
parent 7d60b4d150
commit b613feba11
5 changed files with 259 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
src/components/TaskLog.vue
View file

@ -5,23 +5,8 @@
</div>
<div>
<ul class="list-reset bg-white">
<li v-for="item in items" :key="item.text" class="px-3 py-4 border-b border-grey-light flex">
<div class="flex-none mr-3">
<svg v-if="item.loading" class="h-5 w-5 text-grey fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
<svg v-if="!item.loading && item.success" class="h-5 w-5 text-green fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__success-circle"></use></svg>
<svg v-if="!item.loading && !item.success" class="h-5 w-5 text-red-dark fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__warning"></use></svg>
</div>
<div class="flex-1">
<div class="text-sm font-bold mb-2">{{ item.text }}</div>
<div class="text-grey-darker text-2xs">{{ item.date }}</div>
</div>
<div>
<button type="button">
<svg class="h-5 w-5 text-grey-darker fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
</button>
</div>
<li v-for="task in reversedTasks" :key="task.text">
<task-log-item :task="task"></task-log-item>
</li>
</ul>
</div>
@ -29,65 +14,23 @@
</template>
<script>
import _ from 'lodash'
import TaskLogItem from '@/components/TaskLogItem'
export default {
data() {
return {
items: [
{
text: 'Commit: 8056d51 Add production URLs as settings refs/heads/master',
date: 'Dec 21, 2018 1:34:13 PM UTC +0000',
loading: true,
success: false,
},
{
text: 'Commit: 96ac151 Fix syntax refs/heads/master',
date: 'Dec 21, 2018 1:23:43 PM UTC +0000',
loading: false,
success: true,
},
{
text: 'Commit: 716e178 Configure stage_file_proxy refs/heads/master',
date: 'Dec 21, 2018 1:18:25 PM UTC +0000',
loading: false,
success: true,
},
{
text: 'Commit: 398945c Ensure stage_file_proxy is enabled refs/heads/master',
date: 'Dec 21, 2018 1:09:19 PM UTC +0000',
loading: false,
success: true,
},
{
text: 'Commit: e75c4a3 Merge branch \'voucher-code-bug-34\' refs/heads/master',
date: 'Dec 21, 2018 12:55:49 PM UTC +0000',
success: false,
},
{
text: 'Deploy the code reference tags/2018-12-19 to test',
date: 'Dec 20, 2018 10:25:07 PM UTC +0000',
success: true,
},
{
text: 'Deploy the code reference master to dev',
date: 'Dec 20, 2018 10:13:48 PM UTC +0000',
success: true,
},
{
text: 'Deploy code from test to prod',
date: 'Dec 19, 2018 3:55:29 PM UTC +0000',
success: true,
},
{
text: 'Commit: 9688c41 Update IP address refs/heads/master',
date: 'Dec 19, 2018 3:50:31 PM UTC +0000',
success: true,
},
{
text: 'Commit: fdac923 Merge branch \'update-password-policy\' refs/heads/master',
date: 'Dec 19, 2018 3:48:29 PM UTC +0000',
success: true,
},
],
components: {
TaskLogItem,
},
props: {
tasks: Array,
},
computed: {
reversedTasks: function () {
let tasks = this.tasks
return _.reverse(tasks)
}
}
}

76
src/components/TaskLogItem.vue Normal file
View file

@ -0,0 +1,76 @@
<template>
<div>
<div class="px-3 py-4 border-b border-grey-light flex" :class="{'bg-yellow-lightest': open}">
<div class="flex-none mr-3">
<svg v-if="task.loading" class="h-5 w-5 text-grey fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
<svg v-if="!task.loading && task.success" class="h-5 w-5 text-green fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__success-circle"></use></svg>
<svg v-if="!task.loading && !task.success" class="h-5 w-5 text-red-dark fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__warning"></use></svg>
</div>
<div class="flex-1">
<div class="text-sm font-bold mb-2">{{ task.text }}</div>
<div class="text-grey-darker text-2xs">{{ task.times.display }}</div>
</div>
<div>
<button type="button" @click="open = !open">
<svg v-if="!open" class="h-5 w-5 text-grey-darker fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
<svg v-else class="h-5 w-5 text-grey-darker fill-current" style="transform: rotate(180deg)" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
</button>
</div>
</div>
<div class="p-4 bg-grey-darker text-white antialiased" v-show="open">
<div class="flex flex-wrap -mx-4">
<div class="px-4">
<div class="text-xs uppercase mb-1">Task ID</div>
<div class="text-sm font-bold">12345678</div>
</div>
<div class="px-4 w-1/6 flex-none">
<div class="text-xs uppercase mb-1">User</div>
<div class="text-sm font-bold truncate">{{ task.user }}</div>
</div>
<div class="px-4 w-1/4 flex-none">
<div class="text-xs uppercase mb-1">Started</div>
<div class="text-sm font-bold truncate">{{ task.times.started }}</div>
</div>
<div class="px-4 w-1/4 flex-none">
<div class="text-xs uppercase mb-1">Completed</div>
<div class="text-sm font-bold truncate">{{ task.times.completed }}</div>
</div>
<div class="px-4">
<div class="text-xs uppercase mb-1">Status</div>
<div class="text-sm font-bold">{{ status }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
task: Object,
},
data() {
return {
open: false,
}
},
computed: {
status: function () {
if (this.task.loading) {
return 'In progress'
}
return this.task.success ? 'Completed' : 'Failed'
}
}
}
</script>

164
src/data.json
View file

@ -21,7 +21,110 @@
"url": "rebuilding-acquia.com",
"label": "tags/2018-12-21"
}
}
},
"tasks": [
{
"text": "Commit: fdac923 Merge branch 'update-password-policy' refs/heads/master",
"user": "system",
"times": {
"display": "Dec 19, 2018 3:48:29 PM UTC +0000",
"started": "Dec 19, 2018 3:48:29 PM UTC +0000",
"completed": "Dec 19, 2018 3:48:29 PM UTC +0000"
},
"loading": false,
"success": true
},
{
"text": "Commit: 9688c41 Update IP address refs/heads/master",
"user": "system",
"times": {
"display": "Dec 19, 2018 3:50:31 PM UTC +0000",
"started": "Dec 19, 2018 3:50:31 PM UTC +0000",
"completed": "Dec 19, 2018 3:50:31 PM UTC +0000"
},
"loading": false,
"success": true
},
{
"text": "Deploy code from test to prod",
"user": "system",
"times": {
"display": "Dec 19, 2018 3:55:29 PM UTC +0000",
"started": "Dec 19, 2018 3:55:29 PM UTC +0000",
"completed": "Dec 19, 2018 3:55:29 PM UTC +0000"
},
"loading": false,
"success": true
},
{
"text": "Deploy the code reference master to dev",
"user": "system",
"times": {
"display": "Dec 20, 2018 10:13:48 PM UTC +0000",
"started": "Dec 20, 2018 10:13:48 PM UTC +0000",
"completed": "Dec 20, 2018 10:13:48 PM UTC +0000"
},
"loading": false,
"success": true
},
{
"text": "Deploy the code reference tags/2018-12-19 to test",
"user": "system",
"times": {
"display": "Dec 20, 2018 10:25:07 PM UTC +0000",
"started": "Dec 20, 2018 10:25:07 PM UTC +0000",
"completed": "Dec 20, 2018 10:25:07 PM UTC +0000"
},
"loading": false,
"success": true
},
{
"text": "Commit: e75c4a3 Merge branch 'voucher-code-bug-34' refs/heads/master",
"user": "system",
"times": {
"display": "Dec 21, 2018 12:55:49 PM UTC +0000",
"started": "Dec 21, 2018 12:55:49 PM UTC +0000",
"completed": "Dec 21, 2018 12:55:49 PM UTC +0000"
},
"status": "Failed",
"loading": false,
"success": false
},
{
"text": "Commit: 398945c Ensure stage_file_proxy is enabled refs/heads/master",
"user": "system",
"times": {
"display": "Dec 21, 2018 1:09:19 PM UTC +0000",
"started": "Dec 21, 2018 1:09:19 PM UTC +0000",
"completed": "Dec 21, 2018 1:09:19 PM UTC +0000"
},
"loading": false,
"success": true
},
{
"text": "Commit: 96ac151 Fix syntax refs/heads/master",
"user": "system",
"times": {
"display": "Dec 21, 2018 1:23:43 PM UTC +0000",
"started": "Dec 21, 2018 1:23:43 PM UTC +0000",
"completed": "Dec 21, 2018 1:23:43 PM UTC +0000"
},
"loading": false,
"success": true
},
{
"text": "Commit: 8056d51 Add production URLs as settings refs/heads/master",
"user": "system",
"times": {
"display": "Dec 21, 2018 1:34:13 PM UTC +0000",
"started": "Dec 21, 2018 1:34:13 PM UTC +0000",
"completed": "Dec 21, 2018 1:34:13 PM UTC +0000"
},
"status": "In progress",
"loading": true,
"success": true
}
]
},
"2": {
"id": 2,
@ -44,7 +147,64 @@
"url": "www.oliverdavies.uk",
"label": "tags/2018-12-23"
}
}
},
"tasks": [
{
"text": "Create database opdaviestest in Dev.",
"user": "system",
"times": {
"display": "Dec 23, 2018 11:26:48 PM UTC +0000",
"started": "Dec 23, 2018 11:26:50 PM UTC +0000",
"completed": "Dec 23, 2018 11:26:52 PM UTC +0000"
},
"loading": false,
"success": true
},
{
"text": "Create database opdaviestest in Stage.",
"user": "system",
"times": {
"display": "Dec 23, 2018 11:26:48 PM UTC +0000",
"started": "Dec 23, 2018 11:26:50 PM UTC +0000",
"completed": "Dec 23, 2018 11:26:52 PM UTC +0000"
},
"loading": false,
"success": true
},
{
"text": "Install Drupal 8 to Dev.",
"user": "oliver@oliverdavies.uk (oliver@oliverdavies.uk)",
"times": {
"display": "Dec 23, 2018 11:33:52 PM UTC +0000",
"started": "Dec 23, 2018 11:33:53 PM UTC +0000",
"completed": "Dec 23, 2018 11:37:21 PM UTC +0000"
},
"loading": false,
"success": true
},
{
"text": "Commit: 9736ef5 Importing site archive refs/heads/master",
"user": "vcs.commit",
"times": {
"display": "Dec 23, 2018 11:36:29 PM UTC +0000",
"started": "Dec 23, 2018 11:36:30 PM UTC +0000",
"completed": "Dec 23, 2018 11:37:16 PM UTC +0000"
},
"loading": false,
"success": true
},
{
"text": "Commit: 0ab620f Initial commit to Acquia Git starter repo. refs/tags/pre-import-2018-12-23",
"user": "vcs.commit",
"times": {
"display": "Dec 23, 2018 11:36:30 PM UTC +0000",
"started": "Dec 23, 2018 11:36:32 PM UTC +0000",
"completed": "Dec 23, 2018 11:36:33 PM UTC +0000"
},
"loading": false,
"success": true
}
]
}
}
}

2
src/views/Environments.vue
View file

@ -59,7 +59,7 @@
<quick-help :hidden="help.hidden"></quick-help>
<environment-cards :environments="application.environments"></environment-cards>
<task-log></task-log>
<task-log :tasks="application.tasks"></task-log>
</div>
<sidebar :links="[

2
tailwind.js
View file

@ -71,6 +71,8 @@ let colors = {
'orange-light': '#FFB401',
'orange': '#FA9903',
'yellow-lightest': '#FAF8DF'
/*
'red-darkest': '#3b0d0c',
'red-darker': '#621b18',