mirror of https://github.com/nocodb/nocodb
511 lines
17 KiB
511 lines
17 KiB
<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"> |
|
<v-breadcrumbs :items="[{ |
|
text: this.nodes.env, |
|
disabled: true, |
|
href: '#' |
|
},{ |
|
text: this.nodes.dbAlias, |
|
disabled: true, |
|
href: '#' |
|
}]" divider=">" small> |
|
<template v-slot:divider> |
|
<v-icon small color="grey lighten-2">forward</v-icon> |
|
</template> |
|
</v-breadcrumbs> |
|
|
|
<p class=" pt-3 body-2" v-if="tableMigrationFiles.data.length"> |
|
: Pending Migrations |
|
<span><b>( {{ tableMigrationFiles.status }} )</b></span> |
|
</p> |
|
|
|
<v-spacer></v-spacer> |
|
|
|
<!-- <x-btn tooltip="Open Migrations Folder" |
|
icon="mdi-folder-open" |
|
outlined |
|
small |
|
@click="openFolder"> |
|
Open Folder |
|
</x-btn>--> |
|
|
|
<x-btn tooltip="Reload Migrations" |
|
small |
|
outlined |
|
@dblclick="showUpAndDownBtns = !showUpAndDownBtns" |
|
@click="loadEnv"> |
|
<v-icon left small>refresh</v-icon> |
|
Reload |
|
</x-btn> |
|
|
|
<div |
|
class="ml-1" v-if=" showUpAndDownBtns &&tableMigrationFiles.data.length"> |
|
|
|
|
|
<v-menu v-for="(menu,menuIndex) in migrationMenu" open-on-hover bottom offset-y |
|
:key="menuIndex" class="ml-1" |
|
> |
|
<template v-slot:activator="{ on }"> |
|
<v-btn |
|
:tooltip="menu.tooltip" |
|
:color="menu.color" |
|
outlined |
|
small |
|
v-on="on" |
|
:disabled="isMigrationButtonEnabled(menu.label)" |
|
> |
|
{{ menu.label }} |
|
<v-icon>mdi-menu-down</v-icon> |
|
</v-btn> |
|
</template> |
|
|
|
<v-list dense> |
|
<div v-for="(item, itemIndex) in menu.menuItems" |
|
:key="itemIndex" |
|
> |
|
<v-list-item |
|
@click="item.action" |
|
> |
|
<v-list-item-title> |
|
<v-icon small |
|
:color="menu.color">{{ item.icon }} |
|
</v-icon> |
|
{{ item.label }} |
|
</v-list-item-title> |
|
</v-list-item> |
|
|
|
<v-divider v-if="itemIndex < menu.menuItems.length - 1"></v-divider> |
|
</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">--> |
|
|
|
<splitpanes v-if="tableMigrationFiles.data.length" |
|
style="height:calc(100% - 42px);border-top: 1px solid grey" class="xc-theme"> |
|
<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 |
|
class="pl-3 " |
|
dense |
|
v-model="tableMigrationFiles.showPendingMigrations" |
|
slot-scope="{ hover }" |
|
color="primary lighten-1" |
|
> |
|
<template v-slot:label=""><span |
|
class="body-2" |
|
:class="{'white--text ':hover}">Show Only Pending Migrations ({{ tableMigrationFiles.status }})</span> |
|
</template> |
|
</v-checkbox |
|
> |
|
</v-hover> |
|
<v-data-table |
|
dense |
|
style=" border-top: 1px solid #7F828B33;" |
|
:headers="tableMigrationFiles.headers" |
|
:items="tableMigrationFiles.data" |
|
v-model="tableMigrationFiles.selected" |
|
footer-props.items-per-page-options="15" |
|
> |
|
|
|
|
|
<template v-slot:item="props"> |
|
<tr |
|
v-if="tableMigrationFiles.showPendingMigrations |
|
? props.item.status === true |
|
: true" |
|
@click="getMigrationFiles(props.item)" |
|
:active="!!selectedMigration.migration && |
|
selectedMigration.migration.title == props.item.title"> |
|
<td :class="findMigrationTextColor(props.item)" class="caption"> |
|
{{ props.index + 1 }} |
|
</td> |
|
<td class="text-center py-2 caption" style="cursor: pointer" |
|
:class="findMigrationTextColor(props.item)"> |
|
<span>{{ props.item.title }}</span> <span>{{ props.item.titleDown }}</span> |
|
</td> |
|
<!-- <td></td>--> |
|
<td class="text-center caption"> |
|
<div class="pa-0 ma-0 caption" v-if="props.item.status"> |
|
<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}`" |
|
cssStyle="height:300px" |
|
:readOnly="true" |
|
/> |
|
<MonacoEditor |
|
v-if="selectedMigration.down" |
|
:code.sync="selectedMigration.down" |
|
cssStyle="height:300px" |
|
:heading="`${selectedMigration.migration.titleDown}`" |
|
:readOnly="true" |
|
/> |
|
<!-- </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"> |
|
<p class="display-2"> |
|
Schema migrations will be created automatically |
|
</p> |
|
<p class="display-2"> |
|
Create a table and refresh this page. |
|
<br> |
|
Show GIF |
|
</p> |
|
</v-card> |
|
</v-row> |
|
</template> |
|
<template v-else> |
|
<v-row> |
|
<v-col class="pa-4"> |
|
<v-alert type="info" class="mx-3" outlined>Migration is not available in Simple DB Connection project |
|
</v-alert> |
|
</v-col> |
|
</v-row> |
|
</template> |
|
</v-container> |
|
</template> |
|
|
|
<script> |
|
import {mapGetters, mapActions} from "vuex"; |
|
|
|
import dlgLabelSubmitCancel from "../../utils/dlgLabelSubmitCancel"; |
|
import MonacoEditor from "../../monaco/Monaco"; |
|
import {Splitpanes, Pane} from 'splitpanes' |
|
|
|
// const {shell, path} = require("electron").remote.require( |
|
// "./libs" |
|
// ); |
|
|
|
export default { |
|
components: { |
|
// dlgLabelSubmitCancel, |
|
MonacoEditor, |
|
Splitpanes, Pane |
|
}, |
|
name:'db', |
|
data() { |
|
return { |
|
showUpAndDownBtns: false, |
|
tableMigrationFiles: { |
|
heading: "", |
|
selected: [], |
|
headers: [ |
|
{text: "#", sortable: false, width: "1%", class: ' text-center'}, |
|
{text: "Migration Files", value: 'migration', sortable: false, class: ' pa-4 text-center'}, |
|
// { text: "Down File", sortable: false, width: "1%" ,class:''}, |
|
{text: "Migrations applied", sortable: false, width: "1%", class: ' pa-4 text-center'} |
|
], |
|
data: [], |
|
status: "", |
|
showPendingMigrations: false |
|
}, |
|
tableMigrationRows: { |
|
heading: "", |
|
headers: [], |
|
data: [] |
|
}, |
|
selectedMigration: {migration: null, up: null, down: null}, |
|
view: {}, |
|
oldViewDefination: "", |
|
newView: this.nodes.newView ? true : false, |
|
dialogShow: false, |
|
migrationMenu: [ |
|
{ |
|
label: 'Migration Up', |
|
tooltip: 'Apply Database Migrations', |
|
color: 'primary', |
|
menuItems: [ |
|
{ |
|
label: 'Migration Up One', |
|
icon: 'mdi-redo', |
|
action: () => this.migrationUp(1) |
|
}, |
|
{ |
|
label: 'MIGRATION UP ALL', |
|
icon: 'mdi-fast-forward', |
|
action: () => this.migrationUp() |
|
} |
|
] |
|
}, { |
|
label: 'Migration Down', |
|
color: 'warning', |
|
tooltip: 'Revert Database Migrations', |
|
menuItems: [ |
|
{ |
|
label: 'Migration Down One', |
|
icon: 'mdi-undo', |
|
action: () => this.migrationDown(1) |
|
}, |
|
{ |
|
label: 'Migration Down All', |
|
icon: 'mdi-rewind', |
|
action: () => this.migrationDown() |
|
} |
|
] |
|
} |
|
] |
|
}; |
|
}, |
|
computed: { |
|
...mapGetters({ |
|
sqlMgr: "sqlMgr/sqlMgr", |
|
currentProjectFolder: "project/currentProjectFolder", |
|
|
|
isSimpleProject: "project/GtrProjectIsDbConnection", |
|
}) |
|
}, |
|
methods: { |
|
|
|
// openFolder() { |
|
// shell.openItem(path.join(this.currentProjectFolder, 'server', 'tool', this.nodes.dbAlias, 'migrations')); |
|
// }, |
|
|
|
isMigrationButtonEnabled(name) { |
|
console.log('menu -- - ', name); |
|
return this.nodes.dbConnection.client === 'sqlite3' && name === 'Migration Down' |
|
}, |
|
|
|
async getMigrationFiles(migration) { |
|
this.selectedMigration.migration = ""; |
|
this.selectedMigration.up = ""; |
|
this.selectedMigration.down = ""; |
|
console.log(migration); |
|
this.selectedMigration.migration = migration; |
|
// 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 |
|
// }); |
|
let 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 |
|
}]); |
|
console.log(result); |
|
this.selectedMigration.up = result.data.object.up; |
|
this.selectedMigration.down = result.data.object.down; |
|
}, |
|
|
|
async loadEnv() { |
|
|
|
try { |
|
this.$store.commit('notification/MutToggleProgressBar', true); |
|
const migrationArgs = { |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias, |
|
folder: this.currentProjectFolder, |
|
sqlContentMigrate: 0, |
|
migrationSteps: 9999, |
|
onlyList: true |
|
}; |
|
|
|
console.log("this.currentProjectFolder", this.currentProjectFolder); |
|
// let result = await this.sqlMgr.migrator().migrationsList(migrationArgs); |
|
// let result = await this.sqlMgr.sqlOp(null, 'migrationsList', migrationArgs); |
|
let result = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'migrationsList', migrationArgs]); |
|
let nextMigration = 0; |
|
|
|
for (let i = 0; i < result.data.object.list.length; i++) { |
|
const el = result.data.object.list[i]; |
|
el.nextMigration = 0; |
|
if (el.status === true && nextMigration === 0) { |
|
nextMigration = 1; |
|
el.nextMigration = nextMigration; |
|
} else if (el.status === true && nextMigration === 1) { |
|
el.nextMigration = 2; |
|
} |
|
} |
|
|
|
console.log("loadEnv: ", result); |
|
this.tableMigrationFiles.data = result.data.object.list; |
|
this.tableMigrationFiles.status = result.data.object.pending; |
|
if (this.tableMigrationFiles.data[0]) { |
|
await this.getMigrationFiles(this.tableMigrationFiles.data[0]); |
|
} |
|
} catch (e) { |
|
console.log(e); |
|
} finally { |
|
this.$store.commit('notification/MutToggleProgressBar', false); |
|
} |
|
|
|
|
|
}, |
|
async applyChanges() { |
|
}, |
|
async deleteView(action = "") { |
|
}, |
|
async migrationUp(steps = 99999999999) { |
|
try { |
|
// await this.sqlMgr.migrator().migrationsUp({ |
|
// env: this.nodes.env, |
|
// dbAlias: this.nodes.dbAlias, |
|
// migrationSteps: steps, |
|
// folder: this.currentProjectFolder, |
|
// sqlContentMigrate: 1 |
|
// }); |
|
// await this.sqlMgr.sqlOp(null, 'migrationsUp', { |
|
// env: this.nodes.env, |
|
// dbAlias: this.nodes.dbAlias, |
|
// migrationSteps: steps, |
|
// folder: this.currentProjectFolder, |
|
// sqlContentMigrate: 1 |
|
// }); |
|
|
|
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) |
|
} catch (e) { |
|
this.$toast.error("Migration up was failed.").goAway(5000) |
|
} |
|
await this.loadEnv(); |
|
}, |
|
async migrationDown(steps = 99999999999) { |
|
try { |
|
// await this.sqlMgr.migrator().migrationsDown({ |
|
// env: this.nodes.env, |
|
// dbAlias: this.nodes.dbAlias, |
|
// migrationSteps: steps, |
|
// folder: this.currentProjectFolder, |
|
// sqlContentMigrate: 1 |
|
// }); |
|
// await this.sqlMgr.sqlOp(null, 'migrationsDown', { |
|
// env: this.nodes.env, |
|
// dbAlias: this.nodes.dbAlias, |
|
// migrationSteps: steps, |
|
// folder: this.currentProjectFolder, |
|
// sqlContentMigrate: 1 |
|
// }); |
|
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) |
|
} catch (e) { |
|
this.$toast.error("Migration down was failed.").goAway(5000) |
|
} |
|
await this.loadEnv(); |
|
}, |
|
findNextMigrationColor(item) { |
|
if (item.nextMigration === 1) { |
|
return "orange"; |
|
} else if (item.nextMigration === 2) { |
|
return "orange"; |
|
} else if (item.nextMigration === 0) { |
|
return "grey"; |
|
} |
|
return ""; |
|
}, |
|
findMigrationTextColor(item) { |
|
// if (item.nextMigration === 1) { |
|
// return "white--text"; |
|
// } else if (item.nextMigration === 2) { |
|
// return "white--text"; |
|
// } else if (item.nextMigration === 0) { |
|
// return "grey--text"; |
|
// } |
|
return ""; |
|
} |
|
}, |
|
|
|
beforeCreated() { |
|
}, |
|
created() { |
|
this.loadEnv(); |
|
}, |
|
mounted() { |
|
}, |
|
beforeDestroy() { |
|
}, |
|
destroy() { |
|
}, |
|
validate({params}) { |
|
return true; |
|
}, |
|
head() { |
|
return {}; |
|
}, |
|
props: ["nodes"], |
|
watch: {}, |
|
directives: {} |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
</style> |
|
<!-- |
|
/** |
|
* @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/>. |
|
* |
|
*/ |
|
-->
|
|
|