mirror of https://github.com/nocodb/nocodb
491 lines
16 KiB
491 lines
16 KiB
4 years ago
|
<template>
|
||
|
<v-container class="ma-0 pa-0" fluid style="height: 100%">
|
||
|
<template v-if="!isSimpleProject">
|
||
|
<v-toolbar height="42" class="toolbar-border-bottom elevation-0">
|
||
3 years ago
|
<v-breadcrumbs
|
||
3 years ago
|
:items="[
|
||
|
{
|
||
|
text: nodes.env,
|
||
|
disabled: true,
|
||
|
href: '#',
|
||
|
},
|
||
|
{
|
||
|
text: nodes.dbAlias,
|
||
|
disabled: true,
|
||
|
href: '#',
|
||
|
},
|
||
|
]"
|
||
3 years ago
|
divider=">"
|
||
|
small
|
||
|
>
|
||
|
<template #divider>
|
||
3 years ago
|
<v-icon small color="grey lighten-2"> forward </v-icon>
|
||
4 years ago
|
</template>
|
||
|
</v-breadcrumbs>
|
||
|
|
||
3 years ago
|
<p v-if="tableMigrationFiles.data.length" class="pt-3 body-2">
|
||
4 years ago
|
: Pending Migrations
|
||
3 years ago
|
<span
|
||
|
><b>( {{ tableMigrationFiles.status }} )</b></span
|
||
|
>
|
||
4 years ago
|
</p>
|
||
|
|
||
3 years ago
|
<v-spacer />
|
||
4 years ago
|
|
||
|
<!-- <x-btn tooltip="Open Migrations Folder"
|
||
|
icon="mdi-folder-open"
|
||
|
outlined
|
||
|
small
|
||
|
@click="openFolder">
|
||
|
Open Folder
|
||
|
</x-btn>-->
|
||
|
|
||
3 years ago
|
<x-btn
|
||
|
tooltip="Reload Migrations"
|
||
|
small
|
||
|
outlined
|
||
|
@dblclick="showUpAndDownBtns = !showUpAndDownBtns"
|
||
|
@click="loadEnv"
|
||
|
>
|
||
3 years ago
|
<v-icon left small> refresh </v-icon>
|
||
3 years ago
|
<!-- Reload -->
|
||
|
{{ $t('general.reload') }}
|
||
4 years ago
|
</x-btn>
|
||
|
|
||
3 years ago
|
<div v-if="showUpAndDownBtns && tableMigrationFiles.data.length" class="ml-1">
|
||
3 years ago
|
<v-menu
|
||
3 years ago
|
v-for="(menu, menuIndex) in migrationMenu"
|
||
3 years ago
|
:key="menuIndex"
|
||
|
open-on-hover
|
||
|
bottom
|
||
|
offset-y
|
||
|
class="ml-1"
|
||
4 years ago
|
>
|
||
3 years ago
|
<template #activator="{ on }">
|
||
4 years ago
|
<v-btn
|
||
|
:tooltip="menu.tooltip"
|
||
|
:color="menu.color"
|
||
|
outlined
|
||
|
small
|
||
|
:disabled="isMigrationButtonEnabled(menu.label)"
|
||
3 years ago
|
v-on="on"
|
||
4 years ago
|
>
|
||
|
{{ menu.label }}
|
||
|
<v-icon>mdi-menu-down</v-icon>
|
||
|
</v-btn>
|
||
|
</template>
|
||
|
|
||
|
<v-list dense>
|
||
3 years ago
|
<div v-for="(item, itemIndex) in menu.menuItems" :key="itemIndex">
|
||
|
<v-list-item @click="item.action">
|
||
4 years ago
|
<v-list-item-title>
|
||
3 years ago
|
<v-icon small :color="menu.color">
|
||
3 years ago
|
{{ item.icon }}
|
||
3 years ago
|
</v-icon>
|
||
|
|
||
4 years ago
|
{{ item.label }}
|
||
|
</v-list-item-title>
|
||
|
</v-list-item>
|
||
|
|
||
3 years ago
|
<v-divider v-if="itemIndex < menu.menuItems.length - 1" />
|
||
4 years ago
|
</div>
|
||
|
</v-list>
|
||
|
</v-menu>
|
||
|
</div>
|
||
|
</v-toolbar>
|
||
|
<!-- <v-row class="height" v-if="tableMigrationFiles.data.length">-->
|
||
|
|
||
|
<!-- <v-col class="column py-0 my-0" cols="6">-->
|
||
|
|
||
3 years ago
|
<splitpanes
|
||
|
v-if="tableMigrationFiles.data.length"
|
||
3 years ago
|
style="height: calc(100% - 42px); border-top: 1px solid grey"
|
||
3 years ago
|
class="xc-theme"
|
||
|
>
|
||
4 years ago
|
<pane min-size="20" size="40" style="overflow: auto">
|
||
|
<v-card class="px-0 py-0 my-0">
|
||
|
<!-- v-if="tableMigrationFiles.status"-->
|
||
|
<v-hover>
|
||
|
<v-checkbox
|
||
|
v-model="tableMigrationFiles.showPendingMigrations"
|
||
|
slot-scope="{ hover }"
|
||
3 years ago
|
class="pl-3"
|
||
3 years ago
|
dense
|
||
4 years ago
|
color="primary lighten-1"
|
||
|
>
|
||
3 years ago
|
<template #label="">
|
||
3 years ago
|
<span class="body-2" :class="{ 'white--text ': hover }"
|
||
|
>Show Only Pending Migrations ({{ tableMigrationFiles.status }})</span
|
||
|
>
|
||
4 years ago
|
</template>
|
||
3 years ago
|
</v-checkbox>
|
||
4 years ago
|
</v-hover>
|
||
|
<v-data-table
|
||
3 years ago
|
v-model="tableMigrationFiles.selected"
|
||
4 years ago
|
dense
|
||
3 years ago
|
style="border-top: 1px solid #7f828b33"
|
||
4 years ago
|
:headers="tableMigrationFiles.headers"
|
||
|
:items="tableMigrationFiles.data"
|
||
|
footer-props.items-per-page-options="15"
|
||
|
>
|
||
3 years ago
|
<template #item="props">
|
||
4 years ago
|
<tr
|
||
3 years ago
|
v-if="tableMigrationFiles.showPendingMigrations ? props.item.status === true : true"
|
||
|
:active="!!selectedMigration.migration && selectedMigration.migration.title == props.item.title"
|
||
3 years ago
|
@click="getMigrationFiles(props.item)"
|
||
|
>
|
||
4 years ago
|
<td :class="findMigrationTextColor(props.item)" class="caption">
|
||
|
{{ props.index + 1 }}
|
||
|
</td>
|
||
3 years ago
|
<td
|
||
|
class="text-center py-2 caption"
|
||
|
style="cursor: pointer"
|
||
|
:class="findMigrationTextColor(props.item)"
|
||
|
>
|
||
4 years ago
|
<span>{{ props.item.title }}</span> <span>{{ props.item.titleDown }}</span>
|
||
|
</td>
|
||
|
<!-- <td></td>-->
|
||
|
<td class="text-center caption">
|
||
3 years ago
|
<div v-if="props.item.status" class="pa-0 ma-0 caption">
|
||
4 years ago
|
<x-btn text tooltip="Migration yet to be applied" btn.class="warning--text caption">
|
||
|
No
|
||
|
<!-- <v-icon :color="findNextMigrationColor(props.item)">mdi-seal-->
|
||
|
<!-- </v-icon>-->
|
||
|
</x-btn>
|
||
|
</div>
|
||
|
<div v-else class="pa-0 ma-0">
|
||
|
<x-btn text tooltip="Applied migration" btn.class="primary--text caption">
|
||
|
Yes
|
||
|
<!-- <v-icon :color="findNextMigrationColor(props.item)">mdi-seal</v-icon>-->
|
||
|
</x-btn>
|
||
|
</div>
|
||
|
</td>
|
||
|
</tr>
|
||
|
</template>
|
||
|
</v-data-table>
|
||
|
</v-card>
|
||
|
<!-- </v-col>-->
|
||
|
<!-- <v-col class="column " cols="6">-->
|
||
|
</pane>
|
||
|
<pane min-size="33" size="60" style="overflow: auto">
|
||
|
<MonacoEditor
|
||
|
v-if="selectedMigration.up"
|
||
|
:code.sync="selectedMigration.up"
|
||
|
:heading="`${selectedMigration.migration.title}`"
|
||
3 years ago
|
css-style="height:300px"
|
||
|
:read-only="true"
|
||
4 years ago
|
/>
|
||
|
<MonacoEditor
|
||
|
v-if="selectedMigration.down"
|
||
|
:code.sync="selectedMigration.down"
|
||
3 years ago
|
css-style="height:300px"
|
||
4 years ago
|
:heading="`${selectedMigration.migration.titleDown}`"
|
||
3 years ago
|
:read-only="true"
|
||
4 years ago
|
/>
|
||
|
<!-- </v-col-->
|
||
|
<!-- >-->
|
||
|
<!-- </v-row>-->
|
||
|
</pane>
|
||
|
</splitpanes>
|
||
|
<v-row v-cloak v-else class="pa-4 ma-4" justify="center" align="center">
|
||
|
<v-card class="pa-4 ma-4 text-center">
|
||
3 years ago
|
<p class="display-2">Schema migrations will be created automatically</p>
|
||
4 years ago
|
<p class="display-2">
|
||
|
Create a table and refresh this page.
|
||
3 years ago
|
<br />
|
||
4 years ago
|
Show GIF
|
||
|
</p>
|
||
|
</v-card>
|
||
|
</v-row>
|
||
|
</template>
|
||
|
<template v-else>
|
||
|
<v-row>
|
||
|
<v-col class="pa-4">
|
||
3 years ago
|
<v-alert type="info" class="mx-3" outlined>
|
||
|
Migration is not available in Simple DB Connection project
|
||
4 years ago
|
</v-alert>
|
||
|
</v-col>
|
||
|
</v-row>
|
||
|
</template>
|
||
|
</v-container>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
3 years ago
|
import { mapGetters } from 'vuex';
|
||
4 years ago
|
|
||
3 years ago
|
import { Splitpanes, Pane } from 'splitpanes';
|
||
|
import MonacoEditor from '../../monaco/Monaco';
|
||
4 years ago
|
|
||
|
// const {shell, path} = require("electron").remote.require(
|
||
|
// "./libs"
|
||
|
// );
|
||
|
|
||
|
export default {
|
||
3 years ago
|
name: 'Db',
|
||
4 years ago
|
components: {
|
||
|
// dlgLabelSubmitCancel,
|
||
|
MonacoEditor,
|
||
3 years ago
|
Splitpanes,
|
||
3 years ago
|
Pane,
|
||
4 years ago
|
},
|
||
3 years ago
|
data() {
|
||
4 years ago
|
return {
|
||
|
showUpAndDownBtns: false,
|
||
|
tableMigrationFiles: {
|
||
3 years ago
|
heading: '',
|
||
4 years ago
|
selected: [],
|
||
|
headers: [
|
||
3 years ago
|
{ text: '#', sortable: false, width: '1%', class: ' text-center' },
|
||
|
{ text: 'Migration Files', value: 'migration', sortable: false, class: ' pa-4 text-center' },
|
||
4 years ago
|
// { text: "Down File", sortable: false, width: "1%" ,class:''},
|
||
3 years ago
|
{ text: 'Migrations applied', sortable: false, width: '1%', class: ' pa-4 text-center' },
|
||
4 years ago
|
],
|
||
|
data: [],
|
||
3 years ago
|
status: '',
|
||
3 years ago
|
showPendingMigrations: false,
|
||
4 years ago
|
},
|
||
|
tableMigrationRows: {
|
||
3 years ago
|
heading: '',
|
||
4 years ago
|
headers: [],
|
||
3 years ago
|
data: [],
|
||
4 years ago
|
},
|
||
3 years ago
|
selectedMigration: { migration: null, up: null, down: null },
|
||
4 years ago
|
view: {},
|
||
3 years ago
|
oldViewDefination: '',
|
||
|
newView: !!this.nodes.newView,
|
||
4 years ago
|
dialogShow: false,
|
||
|
migrationMenu: [
|
||
|
{
|
||
|
label: 'Migration Up',
|
||
|
tooltip: 'Apply Database Migrations',
|
||
|
color: 'primary',
|
||
|
menuItems: [
|
||
|
{
|
||
|
label: 'Migration Up One',
|
||
|
icon: 'mdi-redo',
|
||
3 years ago
|
action: () => this.migrationUp(1),
|
||
4 years ago
|
},
|
||
|
{
|
||
|
label: 'MIGRATION UP ALL',
|
||
|
icon: 'mdi-fast-forward',
|
||
3 years ago
|
action: () => this.migrationUp(),
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
4 years ago
|
label: 'Migration Down',
|
||
|
color: 'warning',
|
||
|
tooltip: 'Revert Database Migrations',
|
||
|
menuItems: [
|
||
|
{
|
||
|
label: 'Migration Down One',
|
||
|
icon: 'mdi-undo',
|
||
3 years ago
|
action: () => this.migrationDown(1),
|
||
4 years ago
|
},
|
||
|
{
|
||
|
label: 'Migration Down All',
|
||
|
icon: 'mdi-rewind',
|
||
3 years ago
|
action: () => this.migrationDown(),
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
],
|
||
|
};
|
||
4 years ago
|
},
|
||
|
computed: {
|
||
|
...mapGetters({
|
||
3 years ago
|
sqlMgr: 'sqlMgr/sqlMgr',
|
||
|
currentProjectFolder: 'project/currentProjectFolder',
|
||
4 years ago
|
|
||
3 years ago
|
isSimpleProject: 'project/GtrProjectIsDbConnection',
|
||
|
}),
|
||
4 years ago
|
},
|
||
3 years ago
|
watch: {},
|
||
3 years ago
|
created() {
|
||
3 years ago
|
this.loadEnv();
|
||
3 years ago
|
},
|
||
3 years ago
|
mounted() {},
|
||
|
beforeDestroy() {},
|
||
4 years ago
|
methods: {
|
||
|
// openFolder() {
|
||
|
// shell.openItem(path.join(this.currentProjectFolder, 'server', 'tool', this.nodes.dbAlias, 'migrations'));
|
||
|
// },
|
||
|
|
||
3 years ago
|
isMigrationButtonEnabled(name) {
|
||
3 years ago
|
return this.nodes.dbConnection.client === 'sqlite3' && name === 'Migration Down';
|
||
4 years ago
|
},
|
||
|
|
||
3 years ago
|
async getMigrationFiles(migration) {
|
||
3 years ago
|
this.selectedMigration.migration = '';
|
||
|
this.selectedMigration.up = '';
|
||
|
this.selectedMigration.down = '';
|
||
|
this.selectedMigration.migration = migration;
|
||
4 years ago
|
// let result = await this.sqlMgr.migrator().migrationsToSql({
|
||
|
// env: this.nodes.env,
|
||
|
// dbAlias: this.nodes.dbAlias,
|
||
|
// folder: this.currentProjectFolder,
|
||
|
// title: migration.title,
|
||
|
// titleDown: migration.titleDown
|
||
|
// });
|
||
|
// let result = await this.sqlMgr.sqlOp(null, 'migrationsToSql', {
|
||
|
// env: this.nodes.env,
|
||
|
// dbAlias: this.nodes.dbAlias,
|
||
|
// folder: this.currentProjectFolder,
|
||
|
// title: migration.title,
|
||
|
// titleDown: migration.titleDown
|
||
|
// });
|
||
3 years ago
|
const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [
|
||
|
null,
|
||
|
'migrationsToSql',
|
||
|
{
|
||
|
env: this.nodes.env,
|
||
|
dbAlias: this.nodes.dbAlias,
|
||
|
folder: this.currentProjectFolder,
|
||
|
title: migration.title,
|
||
|
titleDown: migration.titleDown,
|
||
|
},
|
||
|
]);
|
||
|
this.selectedMigration.up = result.data.object.up;
|
||
|
this.selectedMigration.down = result.data.object.down;
|
||
4 years ago
|
},
|
||
|
|
||
3 years ago
|
async loadEnv() {
|
||
4 years ago
|
try {
|
||
3 years ago
|
this.$store.commit('notification/MutToggleProgressBar', true);
|
||
4 years ago
|
const migrationArgs = {
|
||
|
env: this.nodes.env,
|
||
|
dbAlias: this.nodes.dbAlias,
|
||
|
folder: this.currentProjectFolder,
|
||
|
sqlContentMigrate: 0,
|
||
|
migrationSteps: 9999,
|
||
3 years ago
|
onlyList: true,
|
||
|
};
|
||
4 years ago
|
|
||
|
// let result = await this.sqlMgr.migrator().migrationsList(migrationArgs);
|
||
|
// let result = await this.sqlMgr.sqlOp(null, 'migrationsList', migrationArgs);
|
||
3 years ago
|
const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'migrationsList', migrationArgs]);
|
||
|
let nextMigration = 0;
|
||
4 years ago
|
|
||
|
for (let i = 0; i < result.data.object.list.length; i++) {
|
||
3 years ago
|
const el = result.data.object.list[i];
|
||
|
el.nextMigration = 0;
|
||
4 years ago
|
if (el.status === true && nextMigration === 0) {
|
||
3 years ago
|
nextMigration = 1;
|
||
|
el.nextMigration = nextMigration;
|
||
4 years ago
|
} else if (el.status === true && nextMigration === 1) {
|
||
3 years ago
|
el.nextMigration = 2;
|
||
4 years ago
|
}
|
||
|
}
|
||
|
|
||
3 years ago
|
this.tableMigrationFiles.data = result.data.object.list;
|
||
|
this.tableMigrationFiles.status = result.data.object.pending;
|
||
4 years ago
|
if (this.tableMigrationFiles.data[0]) {
|
||
3 years ago
|
await this.getMigrationFiles(this.tableMigrationFiles.data[0]);
|
||
4 years ago
|
}
|
||
|
} catch (e) {
|
||
3 years ago
|
console.log(e);
|
||
4 years ago
|
} finally {
|
||
3 years ago
|
this.$store.commit('notification/MutToggleProgressBar', false);
|
||
4 years ago
|
}
|
||
|
},
|
||
3 years ago
|
async applyChanges() {},
|
||
|
async deleteView(action = '') {},
|
||
3 years ago
|
async migrationUp(steps = 99999999999) {
|
||
4 years ago
|
try {
|
||
3 years ago
|
await this.$store.dispatch('sqlMgr/ActSqlOp', [
|
||
|
null,
|
||
|
'migrationsUp',
|
||
|
{
|
||
|
env: this.nodes.env,
|
||
|
dbAlias: this.nodes.dbAlias,
|
||
|
migrationSteps: steps,
|
||
|
folder: this.currentProjectFolder,
|
||
|
sqlContentMigrate: 1,
|
||
|
},
|
||
|
]);
|
||
|
this.$toast.success('Migration up was successfully completed.').goAway(5000);
|
||
4 years ago
|
} catch (e) {
|
||
3 years ago
|
this.$toast.error('Migration up was failed.').goAway(5000);
|
||
4 years ago
|
}
|
||
3 years ago
|
await this.loadEnv();
|
||
4 years ago
|
},
|
||
3 years ago
|
async migrationDown(steps = 99999999999) {
|
||
4 years ago
|
try {
|
||
3 years ago
|
await this.$store.dispatch('sqlMgr/ActSqlOp', [
|
||
|
null,
|
||
|
'migrationsDown',
|
||
|
{
|
||
|
env: this.nodes.env,
|
||
|
dbAlias: this.nodes.dbAlias,
|
||
|
migrationSteps: steps,
|
||
|
folder: this.currentProjectFolder,
|
||
|
sqlContentMigrate: 1,
|
||
|
},
|
||
|
]);
|
||
|
this.$toast.success('Migration down was successfully completed.').goAway(5000);
|
||
4 years ago
|
} catch (e) {
|
||
3 years ago
|
this.$toast.error('Migration down was failed.').goAway(5000);
|
||
4 years ago
|
}
|
||
3 years ago
|
await this.loadEnv();
|
||
4 years ago
|
},
|
||
3 years ago
|
findNextMigrationColor(item) {
|
||
4 years ago
|
if (item.nextMigration === 1) {
|
||
3 years ago
|
return 'orange';
|
||
4 years ago
|
} else if (item.nextMigration === 2) {
|
||
3 years ago
|
return 'orange';
|
||
4 years ago
|
} else if (item.nextMigration === 0) {
|
||
3 years ago
|
return 'grey';
|
||
4 years ago
|
}
|
||
3 years ago
|
return '';
|
||
4 years ago
|
},
|
||
3 years ago
|
findMigrationTextColor(item) {
|
||
4 years ago
|
// if (item.nextMigration === 1) {
|
||
|
// return "white--text";
|
||
|
// } else if (item.nextMigration === 2) {
|
||
|
// return "white--text";
|
||
|
// } else if (item.nextMigration === 0) {
|
||
|
// return "grey--text";
|
||
|
// }
|
||
3 years ago
|
return '';
|
||
|
},
|
||
4 years ago
|
},
|
||
|
|
||
3 years ago
|
beforeCreated() {},
|
||
|
destroy() {},
|
||
3 years ago
|
directives: {},
|
||
3 years ago
|
validate({ params }) {
|
||
3 years ago
|
return true;
|
||
4 years ago
|
},
|
||
3 years ago
|
head() {
|
||
3 years ago
|
return {};
|
||
4 years ago
|
},
|
||
3 years ago
|
props: ['nodes'],
|
||
|
};
|
||
4 years ago
|
</script>
|
||
|
|
||
3 years ago
|
<style scoped></style>
|
||
4 years ago
|
<!--
|
||
|
/**
|
||
|
* @copyright Copyright (c) 2021, Xgene Cloud Ltd
|
||
|
*
|
||
|
* @author Naveen MR <oof1lab@gmail.com>
|
||
|
* @author Pranav C Balan <pranavxc@gmail.com>
|
||
|
*
|
||
|
* @license GNU AGPL version 3 or any later version
|
||
|
*
|
||
|
* This program is free software: you can redistribute it and/or modify
|
||
|
* it under the terms of the GNU Affero General Public License as
|
||
|
* published by the Free Software Foundation, either version 3 of the
|
||
|
* License, or (at your option) any later version.
|
||
|
*
|
||
|
* This program is distributed in the hope that it will be useful,
|
||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||
|
* GNU Affero General Public License for more details.
|
||
|
*
|
||
|
* You should have received a copy of the GNU Affero General Public License
|
||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||
|
*
|
||
|
*/
|
||
|
-->
|