2021-01-14 18:11:36 +01:00
|
|
|
<template>
|
2021-07-20 16:59:59 +02:00
|
|
|
<div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
|
2021-01-14 18:11:36 +01:00
|
|
|
<div class="workspace-query-runner column col-12">
|
|
|
|
<div class="workspace-query-runner-footer">
|
|
|
|
<div class="workspace-query-buttons">
|
|
|
|
<button
|
|
|
|
class="btn btn-primary btn-sm"
|
|
|
|
:disabled="!isChanged"
|
|
|
|
:class="{'loading':isSaving}"
|
2021-04-20 17:39:15 +02:00
|
|
|
title="CTRL+S"
|
2021-01-14 18:11:36 +01:00
|
|
|
@click="saveChanges"
|
|
|
|
>
|
2021-07-09 15:51:02 +02:00
|
|
|
<i class="mdi mdi-24px mdi-content-save mr-1" />
|
2022-06-21 17:54:47 +02:00
|
|
|
<span>{{ t('word.save') }}</span>
|
2021-01-14 18:11:36 +01:00
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
:disabled="!isChanged"
|
|
|
|
class="btn btn-link btn-sm mr-0"
|
2022-06-21 17:54:47 +02:00
|
|
|
:title="t('message.clearChanges')"
|
2021-01-14 18:11:36 +01:00
|
|
|
@click="clearChanges"
|
|
|
|
>
|
2021-07-09 15:51:02 +02:00
|
|
|
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
|
2022-06-21 17:54:47 +02:00
|
|
|
<span>{{ t('word.clear') }}</span>
|
2021-01-14 18:11:36 +01:00
|
|
|
</button>
|
|
|
|
|
|
|
|
<div class="divider-vert py-3" />
|
2021-01-15 19:18:16 +01:00
|
|
|
<button class="btn btn-dark btn-sm" @click="showTimingModal">
|
2021-07-09 15:51:02 +02:00
|
|
|
<i class="mdi mdi-24px mdi-timer mr-1" />
|
2022-06-21 17:54:47 +02:00
|
|
|
<span>{{ t('word.timing') }}</span>
|
2021-01-14 18:11:36 +01:00
|
|
|
</button>
|
|
|
|
</div>
|
2021-07-20 16:59:59 +02:00
|
|
|
<div class="workspace-query-info">
|
2022-06-21 17:54:47 +02:00
|
|
|
<div class="d-flex" :title="t('word.schema')">
|
2021-07-20 16:59:59 +02:00
|
|
|
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-01-14 18:11:36 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="container">
|
2021-08-10 18:12:13 +02:00
|
|
|
<div class="columns">
|
2021-01-25 18:28:22 +01:00
|
|
|
<div class="column col-auto">
|
2021-01-14 18:11:36 +01:00
|
|
|
<div class="form-group">
|
2022-06-21 17:54:47 +02:00
|
|
|
<label class="form-label">{{ t('word.name') }}</label>
|
2021-01-14 18:11:36 +01:00
|
|
|
<input
|
|
|
|
v-model="localScheduler.name"
|
|
|
|
class="form-input"
|
|
|
|
type="text"
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-01-25 18:28:22 +01:00
|
|
|
<div class="column col-auto">
|
2021-01-14 18:11:36 +01:00
|
|
|
<div class="form-group">
|
2022-06-21 17:54:47 +02:00
|
|
|
<label class="form-label">{{ t('word.definer') }}</label>
|
2022-05-11 23:30:31 +02:00
|
|
|
<BaseSelect
|
2021-01-14 18:11:36 +01:00
|
|
|
v-model="localScheduler.definer"
|
2022-05-11 23:30:31 +02:00
|
|
|
:options="users"
|
2022-06-21 17:54:47 +02:00
|
|
|
:option-label="(user: any) => user.value === '' ? t('message.currentUser') : `${user.name}@${user.host}`"
|
|
|
|
:option-track-by="(user: any) => user.value === '' ? '' : `\`${user.name}\`@\`${user.host}\``"
|
2021-01-14 18:11:36 +01:00
|
|
|
class="form-select"
|
2022-05-11 23:30:31 +02:00
|
|
|
/>
|
2021-01-14 18:11:36 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-08-11 16:16:58 +02:00
|
|
|
<div class="column">
|
2021-01-14 18:11:36 +01:00
|
|
|
<div class="form-group">
|
2022-06-21 17:54:47 +02:00
|
|
|
<label class="form-label">{{ t('word.comment') }}</label>
|
2021-01-14 18:11:36 +01:00
|
|
|
<input
|
|
|
|
v-model="localScheduler.comment"
|
|
|
|
class="form-input"
|
|
|
|
type="text"
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="column">
|
|
|
|
<div class="form-group">
|
2022-06-21 17:54:47 +02:00
|
|
|
<label class="form-label mr-2">{{ t('word.state') }}</label>
|
2021-01-14 18:11:36 +01:00
|
|
|
<label class="form-radio form-inline">
|
|
|
|
<input
|
|
|
|
v-model="localScheduler.state"
|
|
|
|
type="radio"
|
|
|
|
name="state"
|
|
|
|
value="ENABLE"
|
|
|
|
><i class="form-icon" /> ENABLE
|
|
|
|
</label>
|
|
|
|
<label class="form-radio form-inline">
|
|
|
|
<input
|
|
|
|
v-model="localScheduler.state"
|
|
|
|
type="radio"
|
|
|
|
name="state"
|
|
|
|
value="DISABLE"
|
|
|
|
><i class="form-icon" /> DISABLE
|
|
|
|
</label>
|
|
|
|
<label class="form-radio form-inline">
|
|
|
|
<input
|
|
|
|
v-model="localScheduler.state"
|
|
|
|
type="radio"
|
|
|
|
name="state"
|
|
|
|
value="DISABLE ON SLAVE"
|
|
|
|
><i class="form-icon" /> DISABLE ON SLAVE
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-01-22 18:27:45 +01:00
|
|
|
<div class="workspace-query-results column col-12 mt-2 p-relative">
|
|
|
|
<BaseLoader v-if="isLoading" />
|
2022-06-21 17:54:47 +02:00
|
|
|
<label class="form-label ml-2">{{ t('message.schedulerBody') }}</label>
|
2021-01-14 18:11:36 +01:00
|
|
|
<QueryEditor
|
2021-03-10 15:55:34 +01:00
|
|
|
v-show="isSelected"
|
2021-01-14 18:11:36 +01:00
|
|
|
ref="queryEditor"
|
2022-04-21 14:39:24 +02:00
|
|
|
v-model="localScheduler.sql"
|
2021-01-14 18:11:36 +01:00
|
|
|
:workspace="workspace"
|
|
|
|
:schema="schema"
|
|
|
|
:height="editorHeight"
|
|
|
|
/>
|
|
|
|
</div>
|
2021-08-12 09:54:13 +02:00
|
|
|
<WorkspaceTabPropsSchedulerTimingModal
|
2021-01-15 19:18:16 +01:00
|
|
|
v-if="isTimingModal"
|
|
|
|
:local-options="localScheduler"
|
|
|
|
:workspace="workspace"
|
|
|
|
@hide="hideTimingModal"
|
|
|
|
@options-update="timingUpdate"
|
|
|
|
/>
|
2021-01-14 18:11:36 +01:00
|
|
|
</div>
|
|
|
|
</template>
|
2022-06-21 17:54:47 +02:00
|
|
|
<script setup lang="ts">
|
|
|
|
import { AlterEventParams, EventInfos } from 'common/interfaces/antares';
|
|
|
|
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
|
|
|
|
import { Ace } from 'ace-builds';
|
|
|
|
import { useI18n } from 'vue-i18n';
|
2022-04-30 00:47:37 +02:00
|
|
|
import { useNotificationsStore } from '@/stores/notifications';
|
|
|
|
import { useWorkspacesStore } from '@/stores/workspaces';
|
2022-06-21 17:54:47 +02:00
|
|
|
import BaseLoader from '@/components/BaseLoader.vue';
|
|
|
|
import QueryEditor from '@/components/QueryEditor.vue';
|
|
|
|
import WorkspaceTabPropsSchedulerTimingModal from '@/components/WorkspaceTabPropsSchedulerTimingModal.vue';
|
2022-05-11 23:30:31 +02:00
|
|
|
import BaseSelect from '@/components/BaseSelect.vue';
|
2022-06-21 17:54:47 +02:00
|
|
|
import Schedulers from '@/ipc-api/Schedulers';
|
2021-01-14 18:11:36 +01:00
|
|
|
|
2022-06-21 17:54:47 +02:00
|
|
|
const { t } = useI18n();
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
tabUid: String,
|
|
|
|
connection: Object,
|
|
|
|
scheduler: String,
|
|
|
|
isSelected: Boolean,
|
|
|
|
schema: String
|
|
|
|
});
|
|
|
|
|
|
|
|
const { addNotification } = useNotificationsStore();
|
|
|
|
const workspacesStore = useWorkspacesStore();
|
|
|
|
|
|
|
|
const {
|
|
|
|
getWorkspace,
|
|
|
|
refreshStructure,
|
|
|
|
renameTabs,
|
|
|
|
changeBreadcrumbs,
|
|
|
|
setUnsavedChanges
|
|
|
|
} = workspacesStore;
|
|
|
|
|
|
|
|
const queryEditor: Ref<Component & {editor: Ace.Editor; $el: HTMLElement}> = ref(null);
|
|
|
|
const isLoading = ref(false);
|
|
|
|
const isSaving = ref(false);
|
|
|
|
const isTimingModal = ref(false);
|
|
|
|
const originalScheduler: Ref<EventInfos> = ref(null);
|
|
|
|
const localScheduler: Ref<EventInfos> = ref({} as EventInfos);
|
|
|
|
const lastScheduler = ref(null);
|
|
|
|
const sqlProxy = ref('');
|
|
|
|
const editorHeight = ref(300);
|
|
|
|
|
|
|
|
const workspace = computed(() => {
|
|
|
|
return getWorkspace(props.connection.uid);
|
|
|
|
});
|
|
|
|
|
|
|
|
const isChanged = computed(() => {
|
|
|
|
return JSON.stringify(originalScheduler.value) !== JSON.stringify(localScheduler.value);
|
|
|
|
});
|
|
|
|
|
|
|
|
const isDefinerInUsers = computed(() => {
|
|
|
|
return originalScheduler.value ? workspace.value.users.some(user => originalScheduler.value.definer === `\`${user.name}\`@\`${user.host}\``) : true;
|
|
|
|
});
|
|
|
|
|
|
|
|
const users = computed(() => {
|
|
|
|
const users = [{ value: '' }, ...workspace.value.users];
|
|
|
|
if (!isDefinerInUsers.value) {
|
|
|
|
const [name, host] = originalScheduler.value.definer.replaceAll('`', '').split('@');
|
|
|
|
users.unshift({ name, host });
|
|
|
|
}
|
|
|
|
|
|
|
|
return users;
|
|
|
|
});
|
|
|
|
|
|
|
|
const getSchedulerData = async () => {
|
|
|
|
if (!props.scheduler) return;
|
|
|
|
|
|
|
|
isLoading.value = true;
|
|
|
|
lastScheduler.value = props.scheduler;
|
2022-05-11 23:30:31 +02:00
|
|
|
|
2022-06-21 17:54:47 +02:00
|
|
|
const params = {
|
|
|
|
uid: props.connection.uid,
|
|
|
|
schema: props.schema,
|
|
|
|
scheduler: props.scheduler
|
|
|
|
};
|
|
|
|
|
|
|
|
try {
|
|
|
|
const { status, response } = await Schedulers.getSchedulerInformations(params);
|
|
|
|
if (status === 'success') {
|
|
|
|
originalScheduler.value = response;
|
|
|
|
localScheduler.value = JSON.parse(JSON.stringify(originalScheduler.value));
|
|
|
|
sqlProxy.value = localScheduler.value.sql;
|
2021-01-14 18:11:36 +01:00
|
|
|
}
|
2022-06-21 17:54:47 +02:00
|
|
|
else
|
|
|
|
addNotification({ status: 'error', message: response });
|
|
|
|
}
|
|
|
|
catch (err) {
|
|
|
|
addNotification({ status: 'error', message: err.stack });
|
|
|
|
}
|
|
|
|
|
|
|
|
resizeQueryEditor();
|
|
|
|
isLoading.value = false;
|
|
|
|
};
|
|
|
|
|
|
|
|
const saveChanges = async () => {
|
|
|
|
if (isSaving.value) return;
|
|
|
|
isSaving.value = true;
|
|
|
|
const params = {
|
|
|
|
uid: props.connection.uid,
|
|
|
|
scheduler: {
|
|
|
|
...localScheduler.value,
|
|
|
|
schema: props.schema,
|
|
|
|
oldName: originalScheduler.value.name
|
|
|
|
} as AlterEventParams
|
|
|
|
};
|
2021-07-20 16:59:59 +02:00
|
|
|
|
2022-06-21 17:54:47 +02:00
|
|
|
try {
|
|
|
|
const { status, response } = await Schedulers.alterScheduler(params);
|
2021-07-23 10:56:41 +02:00
|
|
|
|
2022-06-21 17:54:47 +02:00
|
|
|
if (status === 'success') {
|
|
|
|
const oldName = originalScheduler.value.name;
|
|
|
|
|
|
|
|
await refreshStructure(props.connection.uid);
|
|
|
|
|
|
|
|
if (oldName !== localScheduler.value.name) {
|
|
|
|
renameTabs({
|
|
|
|
uid: props.connection.uid,
|
|
|
|
schema: props.schema,
|
|
|
|
elementName: oldName,
|
|
|
|
elementNewName: localScheduler.value.name,
|
|
|
|
elementType: 'scheduler'
|
|
|
|
});
|
|
|
|
|
|
|
|
changeBreadcrumbs({ schema: props.schema, scheduler: localScheduler.value.name });
|
2021-07-20 16:59:59 +02:00
|
|
|
}
|
2022-06-21 17:54:47 +02:00
|
|
|
else
|
|
|
|
getSchedulerData();
|
2021-01-14 18:11:36 +01:00
|
|
|
}
|
2022-06-21 17:54:47 +02:00
|
|
|
else
|
|
|
|
addNotification({ status: 'error', message: response });
|
|
|
|
}
|
|
|
|
catch (err) {
|
|
|
|
addNotification({ status: 'error', message: err.stack });
|
|
|
|
}
|
2021-01-14 18:11:36 +01:00
|
|
|
|
2022-06-21 17:54:47 +02:00
|
|
|
isSaving.value = false;
|
|
|
|
};
|
2021-01-14 18:11:36 +01:00
|
|
|
|
2022-06-21 17:54:47 +02:00
|
|
|
const clearChanges = () => {
|
|
|
|
localScheduler.value = JSON.parse(JSON.stringify(originalScheduler.value));
|
|
|
|
queryEditor.value.editor.session.setValue(localScheduler.value.sql);
|
|
|
|
};
|
|
|
|
|
|
|
|
const resizeQueryEditor = () => {
|
|
|
|
if (queryEditor.value) {
|
|
|
|
const footer = document.getElementById('footer');
|
|
|
|
const size = window.innerHeight - queryEditor.value.$el.getBoundingClientRect().top - footer.offsetHeight;
|
|
|
|
editorHeight.value = size;
|
|
|
|
queryEditor.value.editor.resize();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const showTimingModal = () => {
|
|
|
|
isTimingModal.value = true;
|
|
|
|
};
|
|
|
|
|
|
|
|
const hideTimingModal = () => {
|
|
|
|
isTimingModal.value = false;
|
|
|
|
};
|
|
|
|
|
|
|
|
const timingUpdate = (options: EventInfos) => {
|
|
|
|
localScheduler.value = options;
|
|
|
|
};
|
|
|
|
|
|
|
|
const onKey = (e: KeyboardEvent) => {
|
|
|
|
if (props.isSelected) {
|
|
|
|
e.stopPropagation();
|
|
|
|
if (e.ctrlKey && e.key === 's') { // CTRL + S
|
|
|
|
if (isChanged.value)
|
|
|
|
saveChanges();
|
2021-01-14 18:11:36 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
2022-06-21 17:54:47 +02:00
|
|
|
|
|
|
|
watch(() => props.schema, async () => {
|
|
|
|
if (props.isSelected) {
|
|
|
|
await getSchedulerData();
|
|
|
|
queryEditor.value.editor.session.setValue(localScheduler.value.sql);
|
|
|
|
lastScheduler.value = props.scheduler;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
watch(() => props.scheduler, async () => {
|
|
|
|
if (props.isSelected) {
|
|
|
|
await getSchedulerData();
|
|
|
|
queryEditor.value.editor.session.setValue(localScheduler.value.sql);
|
|
|
|
lastScheduler.value = props.scheduler;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
watch(() => props.isSelected, async (val) => {
|
|
|
|
if (val) {
|
|
|
|
changeBreadcrumbs({ schema: props.schema, scheduler: props.scheduler });
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
resizeQueryEditor();
|
|
|
|
}, 200);
|
|
|
|
|
|
|
|
if (lastScheduler.value !== props.scheduler)
|
|
|
|
getSchedulerData();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
watch(isChanged, (val) => {
|
|
|
|
setUnsavedChanges({ uid: props.connection.uid, tUid: props.tabUid, isChanged: val });
|
|
|
|
});
|
|
|
|
|
|
|
|
(async () => {
|
|
|
|
await getSchedulerData();
|
|
|
|
queryEditor.value.editor.session.setValue(localScheduler.value.sql);
|
|
|
|
window.addEventListener('keydown', onKey);
|
|
|
|
})();
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
window.addEventListener('resize', resizeQueryEditor);
|
|
|
|
});
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
window.removeEventListener('resize', resizeQueryEditor);
|
|
|
|
});
|
|
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
window.removeEventListener('keydown', onKey);
|
|
|
|
});
|
|
|
|
|
2021-01-14 18:11:36 +01:00
|
|
|
</script>
|