Amy0104
3 years ago
committed by
GitHub
17 changed files with 1328 additions and 40 deletions
@ -0,0 +1,332 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { defineComponent, PropType, toRefs, watch } from 'vue' |
||||
import { |
||||
NButton, |
||||
NSpin, |
||||
NForm, |
||||
NFormItem, |
||||
NSelect, |
||||
NInput, |
||||
NInputNumber, |
||||
NRadioGroup, |
||||
NRadio, |
||||
NSpace |
||||
} from 'naive-ui' |
||||
import Modal from '@/components/modal' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { useForm, datasourceTypeList } from './use-form' |
||||
import { useDetail } from './use-detail' |
||||
|
||||
const props = { |
||||
show: { |
||||
type: Boolean as PropType<boolean>, |
||||
default: false |
||||
}, |
||||
id: { |
||||
type: Number as PropType<number> |
||||
} |
||||
} |
||||
|
||||
const DetailModal = defineComponent({ |
||||
name: 'DetailModal', |
||||
props, |
||||
emits: ['cancel', 'update'], |
||||
setup(props, ctx) { |
||||
const { t } = useI18n() |
||||
|
||||
const { |
||||
state, |
||||
changeType, |
||||
changePort, |
||||
resetFieldsValue, |
||||
setFieldsValue, |
||||
getFieldsValue |
||||
} = useForm(props.id) |
||||
|
||||
const { status, queryById, testConnect, createOrUpdate } = |
||||
useDetail(getFieldsValue) |
||||
|
||||
const onCancel = () => { |
||||
resetFieldsValue() |
||||
ctx.emit('cancel') |
||||
} |
||||
|
||||
const onSubmit = async () => { |
||||
await state.detailFormRef.validate() |
||||
const res = await createOrUpdate(props.id) |
||||
if (res) { |
||||
onCancel() |
||||
ctx.emit('update') |
||||
} |
||||
} |
||||
|
||||
const onTest = async () => { |
||||
await state.detailFormRef.validate() |
||||
testConnect() |
||||
} |
||||
|
||||
const onChangeType = changeType |
||||
const onChangePort = changePort |
||||
|
||||
watch( |
||||
() => props.show, |
||||
async () => { |
||||
props.show && props.id && setFieldsValue(await queryById(props.id)) |
||||
} |
||||
) |
||||
|
||||
return { |
||||
t, |
||||
...toRefs(state), |
||||
...toRefs(status), |
||||
onChangeType, |
||||
onChangePort, |
||||
onSubmit, |
||||
onTest, |
||||
onCancel |
||||
} |
||||
}, |
||||
render() { |
||||
const { |
||||
show, |
||||
id, |
||||
t, |
||||
detailForm, |
||||
rules, |
||||
requiredDataBase, |
||||
showConnectType, |
||||
showPrincipal, |
||||
loading, |
||||
saving, |
||||
testing, |
||||
onChangeType, |
||||
onChangePort, |
||||
onCancel, |
||||
onTest, |
||||
onSubmit |
||||
} = this |
||||
return ( |
||||
<Modal |
||||
show={show} |
||||
title={`${t(id ? 'datasource.edit' : 'datasource.create')}${t( |
||||
'datasource.datasource' |
||||
)}`}
|
||||
onConfirm={onSubmit} |
||||
confirmLoading={saving || loading} |
||||
onCancel={onCancel} |
||||
> |
||||
{{ |
||||
default: () => ( |
||||
<NSpin show={loading}> |
||||
<NForm |
||||
rules={rules} |
||||
ref='detailFormRef' |
||||
require-mark-placement='left' |
||||
label-placement='left' |
||||
label-width={180} |
||||
label-align='right' |
||||
> |
||||
<NFormItem |
||||
label={t('datasource.datasource')} |
||||
path='type' |
||||
show-require-mark |
||||
> |
||||
<NSelect |
||||
v-model={[detailForm.type, 'value']} |
||||
options={datasourceTypeList} |
||||
disabled={!!id} |
||||
on-update:value={onChangeType} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
label={t('datasource.datasource_name')} |
||||
path='name' |
||||
show-require-mark |
||||
> |
||||
<NInput |
||||
v-model={[detailForm.name, 'value']} |
||||
maxlength={60} |
||||
placeholder={t('datasource.datasource_name_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem label={t('datasource.description')} path='note'> |
||||
<NInput |
||||
v-model={[detailForm.note, 'value']} |
||||
type='textarea' |
||||
placeholder={t('datasource.description_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
label={t('datasource.ip')} |
||||
path='host' |
||||
show-require-mark |
||||
> |
||||
<NInput |
||||
v-model={[detailForm.host, 'value']} |
||||
type='text' |
||||
maxlength={255} |
||||
placeholder={t('datasource.ip_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
label={t('datasource.port')} |
||||
path='port' |
||||
show-require-mark |
||||
> |
||||
<NInputNumber |
||||
v-model={[detailForm.port, 'value']} |
||||
show-button={false} |
||||
placeholder={t('datasource.port_tips')} |
||||
on-blur={onChangePort} |
||||
style={{ width: '100%' }} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
v-show={showPrincipal} |
||||
label='Principal' |
||||
path='principal' |
||||
show-require-mark |
||||
> |
||||
<NInput |
||||
v-model={[detailForm.principal, 'value']} |
||||
type='text' |
||||
placeholder={t('datasource.principal_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
v-show={showPrincipal} |
||||
label='krb5.conf' |
||||
path='javaSecurityKrb5Conf' |
||||
> |
||||
<NInput |
||||
v-model={[detailForm.javaSecurityKrb5Conf, 'value']} |
||||
type='text' |
||||
placeholder={t('datasource.krb5_conf_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
v-show={showPrincipal} |
||||
label='keytab.username' |
||||
path='loginUserKeytabUsername' |
||||
> |
||||
<NInput |
||||
v-model={[detailForm.loginUserKeytabUsername, 'value']} |
||||
type='text' |
||||
placeholder={t('datasource.keytab_username_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
v-show={showPrincipal} |
||||
label='keytab.path' |
||||
path='loginUserKeytabPath' |
||||
> |
||||
<NInput |
||||
v-model={[detailForm.loginUserKeytabPath, 'value']} |
||||
type='text' |
||||
placeholder={t('datasource.keytab_path_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
label={t('datasource.user_name')} |
||||
path='userName' |
||||
show-require-mark |
||||
> |
||||
<NInput |
||||
v-model={[detailForm.userName, 'value']} |
||||
type='text' |
||||
maxlength={60} |
||||
placeholder={t('datasource.user_name_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
label={t('datasource.user_password')} |
||||
path='password' |
||||
> |
||||
<NInput |
||||
v-model={[detailForm.password, 'value']} |
||||
type='password' |
||||
placeholder={t('datasource.user_password_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
label={t('datasource.database_name')} |
||||
path='database' |
||||
show-require-mark={requiredDataBase} |
||||
> |
||||
<NInput |
||||
v-model={[detailForm.database, 'value']} |
||||
type='text' |
||||
maxlength={60} |
||||
placeholder={t('datasource.database_name_tips')} |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem |
||||
v-show={showConnectType} |
||||
label={t('datasource.oracle_connect_type')} |
||||
path='connectType' |
||||
show-require-mark |
||||
> |
||||
<NRadioGroup v-model={[detailForm.connectType, 'value']}> |
||||
<NSpace> |
||||
<NRadio value='ORACLE_SERVICE_NAME'> |
||||
{t('datasource.oracle_service_name')} |
||||
</NRadio> |
||||
<NRadio value='ORACLE_SID'> |
||||
{t('datasource.oracle_sid')} |
||||
</NRadio> |
||||
</NSpace> |
||||
</NRadioGroup> |
||||
</NFormItem> |
||||
<NFormItem |
||||
label={t('datasource.jdbc_connect_parameters')} |
||||
path='other' |
||||
> |
||||
<NInput |
||||
v-model={[detailForm.other, 'value']} |
||||
type='textarea' |
||||
autosize={{ |
||||
minRows: 2 |
||||
}} |
||||
placeholder={`${t( |
||||
'datasource.format_tips' |
||||
)} {"key1":"value1","key2":"value2"...} ${t( |
||||
'datasource.connection_parameter' |
||||
)}`}
|
||||
/> |
||||
</NFormItem> |
||||
</NForm> |
||||
</NSpin> |
||||
), |
||||
'btn-middle': () => ( |
||||
<NButton |
||||
type='primary' |
||||
size='small' |
||||
onClick={onTest} |
||||
loading={testing || loading} |
||||
> |
||||
{t('datasource.test_connect')} |
||||
</NButton> |
||||
) |
||||
}} |
||||
</Modal> |
||||
) |
||||
} |
||||
}) |
||||
|
||||
export default DetailModal |
||||
@ -0,0 +1,32 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
.conditions { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.conditions-search-input { |
||||
width: 250px; |
||||
} |
||||
.pagination { |
||||
margin-top: 20px; |
||||
justify-content: center; |
||||
} |
||||
.mt-8 { |
||||
margin-top: 8px; |
||||
} |
||||
@ -0,0 +1,150 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { defineComponent, onMounted, ref, toRefs } from 'vue' |
||||
import { |
||||
NButton, |
||||
NInput, |
||||
NIcon, |
||||
NDataTable, |
||||
NPagination, |
||||
NSpace |
||||
} from 'naive-ui' |
||||
import Card from '@/components/card' |
||||
import DetailModal from './detail' |
||||
import { SearchOutlined } from '@vicons/antd' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { useColumns } from './use-columns' |
||||
import { useTable } from './use-table' |
||||
import styles from './index.module.scss' |
||||
|
||||
const list = defineComponent({ |
||||
name: 'list', |
||||
setup() { |
||||
const { t } = useI18n() |
||||
let showDetailModal = ref(false) |
||||
let selectId = ref() |
||||
|
||||
const { columnsRef } = useColumns((id: number, type: 'edit' | 'delete') => { |
||||
if (type === 'edit') { |
||||
showDetailModal.value = true |
||||
selectId.value = id |
||||
} else { |
||||
deleteRecord(id) |
||||
} |
||||
}) |
||||
|
||||
const { data, changePage, changePageSize, deleteRecord, updateList } = |
||||
useTable() |
||||
|
||||
const onCreate = () => { |
||||
selectId.value = null |
||||
showDetailModal.value = true |
||||
} |
||||
|
||||
onMounted(() => { |
||||
changePage(1) |
||||
}) |
||||
|
||||
return { |
||||
t, |
||||
showDetailModal, |
||||
id: selectId, |
||||
columnsRef, |
||||
...toRefs(data), |
||||
changePage, |
||||
changePageSize, |
||||
onCreate, |
||||
onUpdatedList: updateList |
||||
} |
||||
}, |
||||
render() { |
||||
const { |
||||
t, |
||||
id, |
||||
showDetailModal, |
||||
columnsRef, |
||||
list, |
||||
page, |
||||
pageSize, |
||||
itemCount, |
||||
loading, |
||||
changePage, |
||||
changePageSize, |
||||
onCreate, |
||||
onUpdatedList |
||||
} = this |
||||
|
||||
return ( |
||||
<> |
||||
<Card title=''> |
||||
{{ |
||||
default: () => ( |
||||
<div class={styles['conditions']}> |
||||
<NButton onClick={onCreate} type='primary'>{`${t( |
||||
'datasource.create_datasource' |
||||
)}`}</NButton>
|
||||
|
||||
<NSpace |
||||
class={styles['conditions-search']} |
||||
justify='end' |
||||
wrap={false} |
||||
> |
||||
<div class={styles['conditions-search-input']}> |
||||
<NInput |
||||
v-model={[this.searchVal, 'value']} |
||||
placeholder={`${t('datasource.search_input_tips')}`} |
||||
/> |
||||
</div> |
||||
<NButton type='primary' onClick={onUpdatedList}> |
||||
<NIcon> |
||||
<SearchOutlined /> |
||||
</NIcon> |
||||
</NButton> |
||||
</NSpace> |
||||
</div> |
||||
) |
||||
}} |
||||
</Card> |
||||
<Card title='' class={styles['mt-8']}> |
||||
<NDataTable |
||||
columns={columnsRef} |
||||
data={list} |
||||
loading={loading} |
||||
striped |
||||
/> |
||||
<NPagination |
||||
page={page} |
||||
page-size={pageSize} |
||||
item-count={itemCount} |
||||
show-quick-jumper |
||||
class={styles['pagination']} |
||||
on-update:page={changePage} |
||||
on-update:page-size={changePageSize} |
||||
/> |
||||
</Card> |
||||
<DetailModal |
||||
show={showDetailModal} |
||||
id={id} |
||||
onCancel={() => void (this.showDetailModal = false)} |
||||
onUpdate={onUpdatedList} |
||||
/> |
||||
</> |
||||
) |
||||
} |
||||
}) |
||||
export default list |
||||
@ -0,0 +1,26 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
.json-highlight { |
||||
display: block; |
||||
line-height: 1.5; |
||||
font-size: 12px; |
||||
padding: 5px; |
||||
} |
||||
.line { |
||||
padding-left: 8px; |
||||
} |
||||
@ -0,0 +1,67 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { defineComponent, PropType, h } from 'vue' |
||||
import { NText } from 'naive-ui' |
||||
import { isBoolean, isNumber, isPlainObject } from 'lodash' |
||||
import styles from './json-highlight.module.scss' |
||||
|
||||
const props = { |
||||
json: { |
||||
type: String as PropType<string>, |
||||
default: '' |
||||
} |
||||
} |
||||
|
||||
const JsonHighlight = defineComponent({ |
||||
name: 'JsonHighlight', |
||||
props, |
||||
render() { |
||||
return ( |
||||
<pre class={styles['json-highlight']}>{syntaxHighlight(this.json)}</pre> |
||||
) |
||||
} |
||||
}) |
||||
|
||||
const syntaxHighlight = (json: string) => { |
||||
if (!isPlainObject(JSON.parse(json))) return '' |
||||
const lines = [<NText v-html='{'></NText>] |
||||
const entries = Object.entries(JSON.parse(json)) |
||||
for (let i = 0, len = entries.length; i < len; i++) { |
||||
const [key, value] = entries[i] |
||||
let type: string = '' |
||||
if (isBoolean(value) || value === null) { |
||||
type = 'info' |
||||
} else if (isNumber(value)) { |
||||
type = 'warning' |
||||
} else { |
||||
type = 'success' |
||||
} |
||||
lines.push( |
||||
<NText tag='div' class={styles['line']}> |
||||
<NText type='error'>"{key}": </NText> |
||||
<NText type={type}> |
||||
"{value}"{i !== len - 1 ? ',' : ''} |
||||
</NText> |
||||
</NText> |
||||
) |
||||
} |
||||
lines.push(<NText v-html='}'></NText>) |
||||
return lines |
||||
} |
||||
|
||||
export default JsonHighlight |
||||
@ -0,0 +1,47 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import type { |
||||
IDataSource, |
||||
IDataBase |
||||
} from '@/service/modules/data-source/types' |
||||
import type { TableColumns } from 'naive-ui/es/data-table/src/interface' |
||||
import type { SelectBaseOption } from 'naive-ui/es/select/src/interface' |
||||
|
||||
interface IDataSourceDetail extends Omit<IDataSource, 'other'> { |
||||
other?: string |
||||
} |
||||
|
||||
interface IDataBaseOption extends SelectBaseOption { |
||||
label: string |
||||
value: string |
||||
defaultPort: number |
||||
previousPort?: number |
||||
} |
||||
|
||||
type IDataBaseOptionKeys = { |
||||
[key in IDataBase]: IDataBaseOption |
||||
} |
||||
|
||||
export { |
||||
IDataSource, |
||||
IDataSourceDetail, |
||||
IDataBase, |
||||
IDataBaseOption, |
||||
IDataBaseOptionKeys, |
||||
TableColumns |
||||
} |
||||
@ -0,0 +1,136 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { h } from 'vue' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { NPopover, NButton, NIcon, NPopconfirm, NSpace } from 'naive-ui' |
||||
import { EditOutlined, DeleteOutlined } from '@vicons/antd' |
||||
import JsonHighlight from './json-highlight' |
||||
import styles from './index.module.scss' |
||||
import { TableColumns } from './types' |
||||
|
||||
export function useColumns(onCallback: Function) { |
||||
const { t } = useI18n() |
||||
|
||||
const columnsRef: TableColumns = [ |
||||
{ |
||||
title: t('datasource.serial_number'), |
||||
key: 'index', |
||||
render: (rowData, rowIndex) => rowIndex + 1 |
||||
}, |
||||
{ |
||||
title: t('datasource.datasource_name'), |
||||
key: 'name' |
||||
}, |
||||
{ |
||||
title: t('datasource.datasource_user_name'), |
||||
key: 'userName' |
||||
}, |
||||
{ |
||||
title: t('datasource.datasource_type'), |
||||
key: 'type' |
||||
}, |
||||
{ |
||||
title: t('datasource.datasource_parameter'), |
||||
key: 'parameter', |
||||
render: (rowData) => { |
||||
return h( |
||||
NPopover, |
||||
{ trigger: 'click' }, |
||||
{ |
||||
trigger: () => |
||||
h( |
||||
NButton, |
||||
{ |
||||
quaternary: true, |
||||
type: 'primary' |
||||
}, |
||||
{ |
||||
default: () => t('datasource.click_to_view') |
||||
} |
||||
), |
||||
default: () => |
||||
h(JsonHighlight, { json: rowData.connectionParams }, null) |
||||
} |
||||
) |
||||
} |
||||
}, |
||||
{ |
||||
title: t('datasource.description'), |
||||
key: 'note' |
||||
}, |
||||
{ |
||||
title: t('datasource.create_time'), |
||||
key: 'createTime' |
||||
}, |
||||
{ |
||||
title: t('datasource.update_time'), |
||||
key: 'updateTime' |
||||
}, |
||||
{ |
||||
title: t('datasource.operation'), |
||||
key: 'operation', |
||||
width: 150, |
||||
render: (rowData, rowIndex) => { |
||||
return h(NSpace, null, { |
||||
default: () => [ |
||||
h( |
||||
NButton, |
||||
{ |
||||
circle: true, |
||||
class: styles['mr-10'], |
||||
type: 'info', |
||||
onClick: () => void onCallback(rowData.id, 'edit') |
||||
}, |
||||
{ |
||||
default: () => |
||||
h(NIcon, null, { default: () => h(EditOutlined) }) |
||||
} |
||||
), |
||||
h( |
||||
NPopconfirm, |
||||
{ |
||||
onPositiveClick: () => void onCallback(rowData.id, 'delete'), |
||||
negativeText: t('datasource.cancel'), |
||||
positiveText: t('datasource.confirm') |
||||
}, |
||||
{ |
||||
trigger: () => |
||||
h( |
||||
NButton, |
||||
{ |
||||
circle: true, |
||||
type: 'error' |
||||
}, |
||||
{ |
||||
default: () => |
||||
h(NIcon, null, { default: () => h(DeleteOutlined) }) |
||||
} |
||||
), |
||||
default: () => t('datasource.delete') |
||||
} |
||||
) |
||||
] |
||||
}) |
||||
} |
||||
} |
||||
] |
||||
|
||||
return { |
||||
columnsRef |
||||
} |
||||
} |
||||
@ -0,0 +1,103 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { reactive } from 'vue' |
||||
import { |
||||
queryDataSource, |
||||
createDataSource, |
||||
updateDataSource, |
||||
connectDataSource, |
||||
verifyDataSourceName |
||||
} from '@/service/modules/data-source' |
||||
import { useI18n } from 'vue-i18n' |
||||
import type { IDataSource } from './types' |
||||
|
||||
export function useDetail(getFieldsValue: Function) { |
||||
const { t } = useI18n() |
||||
const status = reactive({ |
||||
saving: false, |
||||
testing: false, |
||||
loading: false |
||||
}) |
||||
|
||||
let PREV_NAME: string |
||||
|
||||
const formatParams = (): IDataSource => { |
||||
const values = getFieldsValue() |
||||
return { |
||||
...values, |
||||
other: values.other ? JSON.parse(values.other) : null |
||||
} |
||||
} |
||||
|
||||
const queryById = async (id: number) => { |
||||
if (status.loading) return {} |
||||
status.loading = true |
||||
try { |
||||
const dataSourceRes = await queryDataSource(id) |
||||
status.loading = false |
||||
PREV_NAME = dataSourceRes.name |
||||
return dataSourceRes |
||||
} catch (e) { |
||||
window.$message.error((e as Error).message) |
||||
status.loading = false |
||||
return {} |
||||
} |
||||
} |
||||
|
||||
const testConnect = async () => { |
||||
if (status.testing) return |
||||
status.testing = true |
||||
try { |
||||
const res = await connectDataSource(formatParams()) |
||||
window.$message.success( |
||||
res |
||||
? res.msg |
||||
: `${t('datasource.test_connect')} ${t('datasource.success')}` |
||||
) |
||||
status.testing = false |
||||
} catch (e) { |
||||
window.$message.error((e as Error).message) |
||||
status.testing = false |
||||
} |
||||
} |
||||
|
||||
const createOrUpdate = async (id?: number) => { |
||||
const values = getFieldsValue() |
||||
if (status.saving || !values.name) return false |
||||
status.saving = true |
||||
|
||||
try { |
||||
if (PREV_NAME !== values.name) { |
||||
await verifyDataSourceName({ name: values.name }) |
||||
} |
||||
|
||||
id |
||||
? await updateDataSource(formatParams(), id) |
||||
: await createDataSource(formatParams()) |
||||
|
||||
status.saving = false |
||||
return true |
||||
} catch (e) { |
||||
window.$message.error((e as Error).message) |
||||
status.saving = false |
||||
return false |
||||
} |
||||
} |
||||
|
||||
return { status, queryById, testConnect, createOrUpdate } |
||||
} |
||||
@ -0,0 +1,209 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { reactive, ref } from 'vue' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { getKerberosStartupState } from '@/service/modules/data-source' |
||||
import type { FormRules } from 'naive-ui' |
||||
import type { |
||||
IDataSourceDetail, |
||||
IDataBase, |
||||
IDataBaseOption, |
||||
IDataBaseOptionKeys |
||||
} from './types' |
||||
|
||||
export function useForm(id?: number) { |
||||
const { t } = useI18n() |
||||
|
||||
const initialValues = { |
||||
type: 'MYSQL', |
||||
name: '', |
||||
note: '', |
||||
host: '', |
||||
port: datasourceType['MYSQL'].defaultPort, |
||||
principal: '', |
||||
javaSecurityKrb5Conf: '', |
||||
loginUserKeytabUsername: '', |
||||
loginUserKeytabPath: '', |
||||
userName: '', |
||||
password: '', |
||||
database: '', |
||||
connectType: '', |
||||
other: '' |
||||
} as IDataSourceDetail |
||||
|
||||
const state = reactive({ |
||||
detailFormRef: ref(), |
||||
detailForm: { ...initialValues }, |
||||
requiredDataBase: true, |
||||
showConnectType: false, |
||||
showPrincipal: false, |
||||
rules: { |
||||
name: { |
||||
trigger: ['input'], |
||||
validator() { |
||||
if (!state.detailForm.name) { |
||||
return new Error(t('datasource.datasource_name_tips')) |
||||
} |
||||
} |
||||
}, |
||||
host: { |
||||
trigger: ['input'], |
||||
validator() { |
||||
if (!state.detailForm.host) { |
||||
return new Error(t('datasource.ip_tips')) |
||||
} |
||||
} |
||||
}, |
||||
port: { |
||||
trigger: ['input'], |
||||
validator() { |
||||
if (!state.detailForm.port) { |
||||
return new Error(t('datasource.port_tips')) |
||||
} |
||||
} |
||||
}, |
||||
principal: { |
||||
trigger: ['input'], |
||||
validator() { |
||||
if (!state.detailForm.principal && state.showPrincipal) { |
||||
return new Error(t('datasource.principal_tips')) |
||||
} |
||||
} |
||||
}, |
||||
userName: { |
||||
trigger: ['input'], |
||||
validator() { |
||||
if (!state.detailForm.userName) { |
||||
return new Error(t('datasource.user_name_tips')) |
||||
} |
||||
} |
||||
}, |
||||
database: { |
||||
trigger: ['input'], |
||||
validator() { |
||||
if (!state.detailForm.database && state.requiredDataBase) { |
||||
return new Error(t('datasource.database_name_tips')) |
||||
} |
||||
} |
||||
}, |
||||
connectType: { |
||||
trigger: ['update'], |
||||
validator() { |
||||
if (!state.detailForm.connectType && state.showConnectType) { |
||||
return new Error(t('datasource.oracle_connect_type_tips')) |
||||
} |
||||
} |
||||
} |
||||
} as FormRules |
||||
}) |
||||
|
||||
const changeType = async (type: IDataBase, options: IDataBaseOption) => { |
||||
state.detailForm.port = options.previousPort || options.defaultPort |
||||
state.detailForm.type = type |
||||
|
||||
if (type === 'ORACLE' && !id) { |
||||
state.detailForm.connectType = 'ORACLE_SERVICE_NAME' |
||||
} |
||||
state.requiredDataBase = type !== 'POSTGRESQL' |
||||
state.showConnectType = type === 'ORACLE' |
||||
|
||||
if (type === 'HIVE' || type === 'SPARK') { |
||||
try { |
||||
state.showPrincipal = await getKerberosStartupState() |
||||
} catch (e) { |
||||
window.$message.error((e as Error).message) |
||||
} |
||||
} else { |
||||
state.showPrincipal = false |
||||
} |
||||
} |
||||
|
||||
const changePort = async () => { |
||||
if (!state.detailForm.type) return |
||||
const currentDataBaseOption = datasourceType[state.detailForm.type] |
||||
currentDataBaseOption.previousPort = state.detailForm.port |
||||
} |
||||
|
||||
const resetFieldsValue = () => { |
||||
state.detailForm = { ...initialValues } |
||||
} |
||||
const setFieldsValue = (values: object) => { |
||||
state.detailForm = { ...state.detailForm, ...values } |
||||
} |
||||
const getFieldsValue = () => state.detailForm |
||||
|
||||
return { |
||||
state, |
||||
changeType, |
||||
changePort, |
||||
resetFieldsValue, |
||||
setFieldsValue, |
||||
getFieldsValue |
||||
} |
||||
} |
||||
|
||||
const datasourceType: IDataBaseOptionKeys = { |
||||
MYSQL: { |
||||
value: 'MYSQL', |
||||
label: 'MYSQL', |
||||
defaultPort: 3306 |
||||
}, |
||||
POSTGRESQL: { |
||||
value: 'POSTGRESQL', |
||||
label: 'POSTGRESQL', |
||||
defaultPort: 5432 |
||||
}, |
||||
HIVE: { |
||||
value: 'HIVE', |
||||
label: 'HIVE/IMPALA', |
||||
defaultPort: 10000 |
||||
}, |
||||
SPARK: { |
||||
value: 'SPARK', |
||||
label: 'SPARK', |
||||
defaultPort: 10015 |
||||
}, |
||||
CLICKHOUSE: { |
||||
value: 'CLICKHOUSE', |
||||
label: 'CLICKHOUSE', |
||||
defaultPort: 8123 |
||||
}, |
||||
ORACLE: { |
||||
value: 'ORACLE', |
||||
label: 'ORACLE', |
||||
defaultPort: 1521 |
||||
}, |
||||
SQLSERVER: { |
||||
value: 'SQLSERVER', |
||||
label: 'SQLSERVER', |
||||
defaultPort: 1433 |
||||
}, |
||||
DB2: { |
||||
value: 'DB2', |
||||
label: 'DB2', |
||||
defaultPort: 50000 |
||||
}, |
||||
PRESTO: { |
||||
value: 'PRESTO', |
||||
label: 'PRESTO', |
||||
defaultPort: 8080 |
||||
} |
||||
} |
||||
|
||||
export const datasourceTypeList: IDataBaseOption[] = |
||||
Object.values(datasourceType) |
||||
@ -0,0 +1,82 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { reactive } from 'vue' |
||||
import { |
||||
queryDataSourceListPaging, |
||||
deleteDataSource |
||||
} from '@/service/modules/data-source' |
||||
|
||||
export function useTable() { |
||||
const data = reactive({ |
||||
page: 1, |
||||
pageSize: 10, |
||||
itemCount: 0, |
||||
searchVal: '', |
||||
list: [], |
||||
loading: false |
||||
}) |
||||
|
||||
const getList = async () => { |
||||
if (data.loading) return |
||||
data.loading = true |
||||
|
||||
try { |
||||
const listRes = await queryDataSourceListPaging({ |
||||
pageNo: data.page, |
||||
pageSize: data.pageSize, |
||||
searchVal: data.searchVal |
||||
}) |
||||
data.loading = false |
||||
data.list = listRes.totalList |
||||
data.itemCount = listRes.total |
||||
} catch (e) { |
||||
window.$message.error((e as Error).message) |
||||
data.loading = false |
||||
data.list = [] |
||||
} |
||||
} |
||||
|
||||
const updateList = () => { |
||||
if (data.list.length === 1 && data.page > 1) { |
||||
--data.page |
||||
} |
||||
getList() |
||||
} |
||||
|
||||
const deleteRecord = async (id: number) => { |
||||
try { |
||||
const res = await deleteDataSource(id) |
||||
updateList() |
||||
} catch (e) { |
||||
window.$message.error((e as Error).message) |
||||
} |
||||
} |
||||
|
||||
const changePage = (page: number) => { |
||||
data.page = page |
||||
getList() |
||||
} |
||||
|
||||
const changePageSize = (pageSize: number) => { |
||||
data.page = 1 |
||||
data.pageSize = pageSize |
||||
getList() |
||||
} |
||||
|
||||
return { data, changePage, changePageSize, deleteRecord, updateList } |
||||
} |
||||
Loading…
Reference in new issue