Skip to content

Commit

Permalink
refactor(ui): add sub route for template page
Browse files Browse the repository at this point in the history
  • Loading branch information
@fiftin
fiftin committed Dec 8, 2024
1 parent 9323b6a commit f85c75e
Show file tree
Hide file tree
Showing 5 changed files with 259 additions and 107 deletions.
9 changes: 3 additions & 6 deletions web/.eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,9 @@ module.exports = {
node: {
extensions: ['.js', '.vue'],
},
'import/internal-regex': '^@',
'import/resolver': {
alias: {
map: ['@', './src'],
extensions: ['.vue', '.js'],
},
alias: {
map: ['@', './src'],
extensions: ['.vue', '.js'],
},
},
},
Expand Down
22 changes: 14 additions & 8 deletions web/src/router/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import Vue from 'vue';
import VueRouter from 'vue-router';
import RestoreProject from '@/views/project/RestoreProject.vue';
import Tasks from '@/views/Tasks.vue';
import TaskList from '@/components/TaskList.vue';
import TemplateDetails from '@/views/project/template/TemplateDetails.vue';
import TemplateTerraformState from '@/views/project/template/TemplateTerraformState.vue';
import Schedule from '../views/project/Schedule.vue';
import History from '../views/project/History.vue';
import Activity from '../views/project/Activity.vue';
Expand Down Expand Up @@ -66,16 +69,19 @@ const routes = [
},
{
path: '/project/:projectId/templates/:templateId',
redirect: '/project/:projectId/templates/:templateId/tasks',
component: TemplateView,
children: [{
path: 'tasks',
component: TaskList,
}, {
path: 'details',
component: TemplateDetails,
}, {
path: 'state',
component: TemplateTerraformState,
}],
},
{
path: '/project/:projectId/views/:viewId/templates/:templateId',
component: TemplateView,
},
// {
// path: '/project/:projectId/views/:viewId/templates/:templateId/edit',
// component: TemplateEdit,
// },
{
path: '/project/:projectId/environment',
component: Environment,
Expand Down
109 changes: 16 additions & 93 deletions web/src/views/project/TemplateView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,108 +83,32 @@
<v-alert text type="info" class="mb-0 ml-4 mr-4 mb-2" v-if="item.description">
{{ item.description }}
</v-alert>

<v-row>
<v-col>
<v-list subheader>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-book-play</v-icon>
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title>{{ $t('playbook') }}</v-list-item-title>
<v-list-item-subtitle>{{ item.playbook }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
<v-col>
<v-list subheader>
<v-list-item>
<v-list-item-icon>
<v-icon>{{ TEMPLATE_TYPE_ICONS[item.type] }}</v-icon>
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title>{{ $t('type') }}</v-list-item-title>
<v-list-item-subtitle
>{{ $t(TEMPLATE_TYPE_TITLES[item.type]) }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
<v-col>
<v-list subheader>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-monitor</v-icon>
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title>{{ $t('inventory') }}</v-list-item-title>
<v-list-item-subtitle>
{{
(
inventory.find((x) => x.id === item.inventory_id) || {
name: '—',
}
).name
}}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
<v-col>
<v-list subheader>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-code-braces</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t('environment') }}</v-list-item-title>
<v-list-item-subtitle>
{{ environment.find((x) => x.id === item.environment_id).name }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
<v-col>
<v-list subheader>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-git</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t('repository2') }}</v-list-item-title>
<v-list-item-subtitle>
{{ repositories.find((x) => x.id === item.repository_id).name }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
</v-row>
</v-container>

<v-tabs show-arrows class="pl-4">
<v-tab key="tasks">{{ $t('tasks') }} </v-tab>

<v-tab v-if="app === 'terraform' || app === 'tofu'" key="state">{{ $t('state') }}</v-tab>
<v-tabs class="mb-4 ml-4">
<v-tab :to="`/project/${item.project_id}/templates/${item.id}/tasks`">Tasks</v-tab>
<v-tab :to="`/project/${item.project_id}/templates/${item.id}/details`">Details</v-tab>
<v-tab
v-if="['terraform', 'tofu'].includes(item.app)"
:to="`/project/${item.project_id}/templates/${item.id}/state`"
>
State
<v-icon class="ml-1" large color="hsl(348deg, 86%, 61%)">mdi-professional-hexagon</v-icon>
</v-tab>
</v-tabs>

<TaskList :template="item" />
<router-view
:template="item"
:inventory="inventory"
:environment="environment"
:repositories="repositories"
></router-view>
</div>
</template>
<script>
import axios from 'axios';
import EventBus from '@/event-bus';
import { getErrorMessage } from '@/lib/error';
import YesNoDialog from '@/components/YesNoDialog.vue';
import TaskList from '@/components/TaskList.vue';
import {
TEMPLATE_TYPE_ACTION_TITLES,
TEMPLATE_TYPE_ICONS,
Expand All @@ -199,7 +123,6 @@ import PermissionsCheck from '@/components/PermissionsCheck';
export default {
components: {
YesNoDialog,
TaskList,
ObjectRefsDialog,
NewTaskDialog,
EditTemplateDialogue,
Expand Down
113 changes: 113 additions & 0 deletions web/src/views/project/template/TemplateDetails.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<template>
<v-container fluid class="pb-0">
<v-alert
text
type="info"
class="mb-0 ml-4 mr-4 mb-2"
v-if="template.description"
>{{ template.description }}
</v-alert>

<v-row>
<v-col>
<v-list subheader>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-book-play</v-icon>
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title>{{ $t('playbook') }}</v-list-item-title>
<v-list-item-subtitle>{{ template.playbook }}</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
<v-col>
<v-list subheader>
<v-list-item>
<v-list-item-icon>
<v-icon>{{ TEMPLATE_TYPE_ICONS[template.type] }}</v-icon>
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title>{{ $t('type') }}</v-list-item-title>
<v-list-item-subtitle>{{ $t(TEMPLATE_TYPE_TITLES[template.type]) }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
<v-col>
<v-list subheader>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-monitor</v-icon>
</v-list-item-icon>

<v-list-item-content>
<v-list-item-title>{{ $t('inventory') }}</v-list-item-title>
<v-list-item-subtitle>
{{ (inventory.find((x) => x.id === template.inventory_id) || {name: '—'}).name }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
<v-col>
<v-list subheader>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-code-braces</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t('environment') }}</v-list-item-title>
<v-list-item-subtitle>
{{ environment.find((x) => x.id === template.environment_id).name }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
<v-col>
<v-list subheader>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-git</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t('repository2') }}</v-list-item-title>
<v-list-item-subtitle>
{{ repositories.find((x) => x.id === template.repository_id).name }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-col>
</v-row>
</v-container>

</template>
<script>
import {
TEMPLATE_TYPE_ACTION_TITLES,
TEMPLATE_TYPE_ICONS,
TEMPLATE_TYPE_TITLES,
} from '@/lib/constants';
export default {
props: {
template: Object,
repositories: Array,
inventory: Array,
environment: Array,
},
data() {
return {
TEMPLATE_TYPE_ICONS,
TEMPLATE_TYPE_TITLES,
TEMPLATE_TYPE_ACTION_TITLES,
};
},
};
</script>
Loading

0 comments on commit f85c75e

Please sign in to comment.