updated connector form dialog
Davide Di Modica committed
Aug 9, 2023 at 15:54 UTC
8f4f9d7e511703b4d758937ce81bfa9cbc3c5a98
7 files changed
+79
-55
src/api/connectors.ts
+6
-3
@@ -1,15 +1,18 @@
1
import { FlaskBaseResponse } from "@/types/flask"
2
-import { Connector } from "@/types/connectors"
2
+import { Connector, ConnectorRequestPayload } from "@/types/connectors"
3
import { HttpClient } from "./httpClient"
4
5
export default {
6
getAll() {
7
return HttpClient.get<FlaskBaseResponse & { connectors: Connector[] }>("/connectors")
8
},
9
- configure(connectorId, payload) {
9
+ configure(connectorId: string | number, payload: ConnectorRequestPayload) {
10
return HttpClient.post<FlaskBaseResponse & { connectors: Connector[] }>(`/connectors/${connectorId}`, payload)
11
},
12
- update(connectorId, payload) {
12
+ update(connectorId: string | number, payload: ConnectorRequestPayload) {
13
return HttpClient.put<FlaskBaseResponse & { connectors: Connector[] }>(`/connectors/${connectorId}`, payload)
14
+ },
15
+ upload(connectorId: string | number, formData: FormData) {
16
+ return HttpClient.post<FlaskBaseResponse & { connectors: Connector[] }>(`/connectors/upload`, formData)
17
}
18
}
src/components/connectors/ConfigForm/ConfigForm.vue
+30
-23
@@ -30,7 +30,7 @@
30
<div class="connector-footer mt-40">
31
<el-form-item>
32
<el-button type="primary" @click="saveConnector()">Save</el-button>
33
- <el-button @click="abortForm()">Cancel</el-button>
33
+ <el-button @click="closeForm(false)">Cancel</el-button>
34
</el-form-item>
35
</div>
36
</div>
@@ -53,7 +53,7 @@ const props = defineProps<{
53
const { connector } = toRefs(props)
54
55
const emit = defineEmits<{
56
- (e: "close"): void
56
+ (e: "close", value: boolean): void
57
}>()
58
59
const connectorForm = ref<ConnectorForm>({
@@ -61,7 +61,7 @@ const connectorForm = ref<ConnectorForm>({
61
connector_username: "",
62
connector_password: "",
63
connector_api_key: "",
64
- connector_file: ""
64
+ connector_file: null
65
})
66
const connectorFormType = computed<ConnectorFormType>(() => getConnectorFormType(connector.value))
67
const isConnectorConfigured = computed<boolean>(() => connector.value.connector_configured)
@@ -75,7 +75,7 @@ function setUpForm() {
75
"connector_password",
76
"connector_api_key",
77
"connector_file"
78
- ]) as ConnectorForm
78
+ ]) as unknown as ConnectorForm
79
}
80
81
function getConnectorFormType(connector: Connector): ConnectorFormType {
@@ -107,18 +107,26 @@ function saveConnector() {
107
})
108
}
109
110
-function abortForm() {
111
- emit("close")
110
+function closeForm(update: boolean) {
111
+ emit("close", update)
112
+}
113
+
114
+function getRequestMethod() {
115
+ if (connectorFormType.value === ConnectorFormType.FILE) {
116
+ return Api.connectors.upload
117
+ }
118
+
119
+ return isConnectorConfigured.value ? Api.connectors.update : Api.connectors.configure
120
}
121
122
function configureConnector() {
123
loading.value = true
124
117
- const { connector_url, connector_username, connector_password, connector_file, connector_api_key } = connectorForm.value
125
+ const { connector_url, connector_username, connector_password, connector_api_key, connector_file } = connectorForm.value
126
119
- const requestMethod = isConnectorConfigured.value ? Api.connectors.update : Api.connectors.configure
127
+ const requestMethod = getRequestMethod()
128
121
- let requestPayload = { connector_url }
129
+ let requestPayload: any = { connector_url }
130
131
if (connectorFormType.value === ConnectorFormType.TOKEN) {
132
requestPayload = Object.assign(requestPayload, {
@@ -131,6 +139,12 @@ function configureConnector() {
139
connector_password
140
})
141
}
142
+ if (connectorFormType.value === ConnectorFormType.FILE) {
143
+ const form = new FormData()
144
+ form.append("file", connector_file, connector_file.name)
145
+
146
+ requestPayload = form
147
+ }
148
149
requestMethod(connector.value.id, requestPayload)
150
.then(() => {
@@ -138,7 +152,7 @@ function configureConnector() {
152
message: "Connector has been successfully configured.",
153
type: "success"
154
})
141
- // this.getConnectors() // Refresh the connectors
155
+ closeForm(true)
156
})
157
.catch(err => {
158
if (err.response.status === 400) {
@@ -154,27 +168,20 @@ function configureConnector() {
168
})
169
}
170
} else if (err.response.status === 401) {
157
- if (connectorFormType.value === ConnectorFormType.CREDENTIALS) {
158
- ElMessage({
159
- message: "Unauthorized. Please check your endpoint URL, username and password.",
160
- type: "error"
161
- })
162
- } else {
163
- ElMessage({
164
- message: "Unauthorized. Please check your endpoint URL and Key",
165
- type: "error"
166
- })
167
- }
171
+ ElMessage({
172
+ message: "Unauthorized. Please check all fields",
173
+ type: "error"
174
+ })
175
} else {
176
ElMessage({
177
message: "Error updating the connector. Your settings were not inserted into the keystore. Please try again.",
178
type: "error"
179
})
180
}
174
- // this.getConnectors() // Refresh the connectors
181
+ closeForm(false)
182
})
183
.finally(() => {
177
- loading.value = false // Set loading to false
184
+ loading.value = false
185
})
186
}
187
src/components/connectors/ConfigForm/FormTypes/CredentialsType.vue
+1
-1
@@ -34,7 +34,7 @@ const { form } = toRefs(props)
34
35
const formRef = ref<FormInstance>()
36
37
-const validateUrl = (rule: any, value: any, callback: any) => {
37
+const validateUrl = (rule: any, value: string, callback: any) => {
38
if (!value) {
39
return callback(new Error("Please input a valid URL"))
40
}
src/components/connectors/ConfigForm/FormTypes/FileType.vue
+27
-24
@@ -1,14 +1,20 @@
1
<template>
2
<el-form :model="form" status-icon :rules="rules" label-width="120px" ref="formRef" label-position="top">
3
- <el-form-item label="Connector URL" prop="connector_url">
4
- <el-input v-model="form.connector_url" required type="url" />
5
- </el-form-item>
3
<el-form-item label="File" prop="connector_file">
7
- <el-upload class="file-upload-wrap" drag :limit="1" :auto-upload="false" :on-exceed="handleExceed" ref="upload">
4
+ <el-upload
5
+ class="file-upload-wrap"
6
+ drag
7
+ :limit="1"
8
+ :auto-upload="false"
9
+ :on-exceed="handleExceed"
10
+ :on-change="handleChange"
11
+ ref="uploadRef"
12
+ accept=".yaml, .YAML"
13
+ >
14
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
15
<div class="el-upload__text">Drop file here or <em>click to upload</em></div>
16
<template #tip>
11
- <div class="el-upload__tip text-red">limit 1 file, new file will cover the old file</div>
17
+ <div class="el-upload__tip text-red">Limit 1 file .YAML, new file will cover the old file</div>
18
</template>
19
</el-upload>
20
</el-form-item>
@@ -16,15 +22,13 @@
22
</template>
23
24
<script setup lang="ts">
19
-import { FormInstance, FormRules } from "element-plus"
20
-import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus"
25
+import { FormInstance } from "element-plus"
26
+import type { UploadFile, UploadInstance, UploadProps, UploadRawFile } from "element-plus"
27
import { UploadFilled } from "@element-plus/icons-vue"
28
import { onMounted, reactive, ref, toRefs } from "vue"
23
-import isURL from "validator/lib/isURL"
29
30
export interface IFileForm {
26
- connector_url: string
27
- connector_file: string
31
+ connector_file: File | null
32
}
33
34
const emit = defineEmits<{
@@ -37,33 +41,32 @@ const props = defineProps<{
41
const { form } = toRefs(props)
42
43
const formRef = ref<FormInstance>()
44
+const uploadRef = ref<UploadInstance>()
45
41
-const upload = ref<UploadInstance>()
42
-
43
-const handleExceed: UploadProps["onExceed"] = files => {
44
- upload.value!.clearFiles()
46
+const handleExceed: UploadProps["onExceed"] = (files: File[]) => {
47
+ uploadRef.value!.clearFiles()
48
const file = files[0] as UploadRawFile
46
- upload.value!.handleStart(file)
49
+ uploadRef.value!.handleStart(file)
50
}
51
49
-const submitUpload = () => {
50
- upload.value!.submit()
52
+const handleChange: UploadProps["onChange"] = (file: UploadFile) => {
53
+ form.value.connector_file = file.raw
54
}
55
53
-const validateUrl = (rule: any, value: any, callback: any) => {
56
+const validateFile = (rule: any, value: File, callback: any) => {
57
if (!value) {
55
- return callback(new Error("Please input a valid URL"))
58
+ return callback(new Error("Please input a valid File"))
59
}
57
- if (!isURL(value)) {
58
- return callback(new Error("Please input a valid URL"))
60
+
61
+ if (value.type.indexOf("yaml") === -1) {
62
+ return callback(new Error("Please input a valid File"))
63
}
64
65
return callback()
66
}
67
64
-const rules = reactive<FormRules<typeof form>>({
65
- connector_url: [{ required: true, validator: validateUrl, trigger: "blur" }],
66
- connector_file: [{ required: true, message: "Please input a valid File", trigger: "blur" }]
68
+const rules = reactive({
69
+ connector_file: [{ required: true, validator: validateFile, trigger: "blur" }]
70
})
71
72
onMounted(() => {
src/components/connectors/ConfigForm/FormTypes/TokenType.vue
+1
-1
@@ -30,7 +30,7 @@ const { form } = toRefs(props)
30
31
const formRef = ref<FormInstance>()
32
33
-const validateUrl = (rule: any, value: any, callback: any) => {
33
+const validateUrl = (rule: any, value: string, callback: any) => {
34
if (!value) {
35
return callback(new Error("Please input a valid URL"))
36
}
src/types/connectors.d.ts
+8
-1
@@ -36,5 +36,12 @@ export interface ConnectorForm {
36
connector_username: string
37
connector_password: string
38
connector_api_key: string
39
- connector_file: string
39
+ connector_file: File | null
40
+}
41
+
42
+export interface ConnectorRequestPayload {
43
+ connector_url: string
44
+ connector_username?: string
45
+ connector_password?: string
46
+ connector_api_key?: string
47
}
src/views/apps/Connectors.vue
+6
-2
@@ -59,7 +59,7 @@
59
:close-on-press-escape="false"
60
width="600px"
61
>
62
- <ConfigForm v-if="currentConnector" :connector="currentConnector" @close="closeConfigDialog()" />
62
+ <ConfigForm v-if="currentConnector" :connector="currentConnector" @close="closeConfigDialog" />
63
</el-dialog>
64
</div>
65
</template>
@@ -102,9 +102,13 @@ export default defineComponent({
102
this.showConfigDialog = true
103
},
104
105
- closeConfigDialog() {
105
+ closeConfigDialog(update: boolean) {
106
this.currentConnector = null
107
this.showConfigDialog = false
108
+
109
+ if (update) {
110
+ this.getConnectors()
111
+ }
112
},
113
114
getConnectors() {