added connector configuration api
Davide Di Modica committed
Aug 9, 2023 at 11:54 UTC
83a74c43051a405101c55516a33e08ab9b29ad62
5 files changed
+133
-165
src/api/connectors.ts
+6
@@ -5,5 +5,11 @@ import { HttpClient } from "./httpClient"
5
export default {
6
getAll() {
7
return HttpClient.get<FlaskBaseResponse & { connectors: Connector[] }>("/connectors")
8
+ },
9
+ configure(connectorId, payload) {
10
+ return HttpClient.post<FlaskBaseResponse & { connectors: Connector[] }>(`/connectors/${connectorId}`, payload)
11
+ },
12
+ update(connectorId, payload) {
13
+ return HttpClient.put<FlaskBaseResponse & { connectors: Connector[] }>(`/connectors/${connectorId}`, payload)
14
}
15
}
src/components/connectors/ConfigForm/ConfigForm.vue
+77
-155
@@ -1,5 +1,5 @@
1
<template>
2
- <div class="connector-form">
2
+ <div class="connector-form" v-loading="loading">
3
<div class="connector-header">
4
<el-image
5
class="connector-image"
@@ -22,12 +22,12 @@
22
</div>
23
24
<div class="connector-form-type">
25
- <CredentialsType :form="connectorForm" v-if="connectorFormType === ConnectorFormType.CREDENTIALS" />
26
- <FileType :form="connectorForm" v-if="connectorFormType === ConnectorFormType.FILE" />
27
- <TokenType :form="connectorForm" v-if="connectorFormType === ConnectorFormType.TOKEN" />
25
+ <CredentialsType :form="connectorForm" v-if="connectorFormType === ConnectorFormType.CREDENTIALS" @mounted="formRef = $event" />
26
+ <FileType :form="connectorForm" v-if="connectorFormType === ConnectorFormType.FILE" @mounted="formRef = $event" />
27
+ <TokenType :form="connectorForm" v-if="connectorFormType === ConnectorFormType.TOKEN" @mounted="formRef = $event" />
28
</div>
29
30
- <div class="connector-footer">
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>
@@ -44,6 +44,8 @@ import CredentialsType from "./FormTypes/CredentialsType.vue"
44
import FileType from "./FormTypes/FileType.vue"
45
import TokenType from "./FormTypes/TokenType.vue"
46
import _pick from "lodash/pick"
47
+import { ElMessage, FormInstance } from "element-plus"
48
+import Api from "@/api"
49
50
const props = defineProps<{
51
connector: Connector
@@ -63,6 +65,8 @@ const connectorForm = ref<ConnectorForm>({
65
})
66
const connectorFormType = computed<ConnectorFormType>(() => getConnectorFormType(connector.value))
67
const isConnectorConfigured = computed<boolean>(() => connector.value.connector_configured)
68
+const formRef = ref<FormInstance | null>(null)
69
+const loading = ref<boolean>(false)
70
71
function setUpForm() {
72
connectorForm.value = _pick(connector.value, [
@@ -88,173 +92,91 @@ function getConnectorFormType(connector: Connector): ConnectorFormType {
92
}
93
94
function saveConnector() {
91
- console.log("saveConnector")
95
+ if (!formRef.value) return
96
+
97
+ formRef.value.validate(valid => {
98
+ if (valid) {
99
+ configureConnector()
100
+ } else {
101
+ ElMessage({
102
+ message: "You must fill in the required fields correctly.",
103
+ type: "warning"
104
+ })
105
+ return false
106
+ }
107
+ })
108
}
109
110
function abortForm() {
111
emit("close")
96
- console.log("abortForm")
112
}
113
99
-/*
100
-function configureConnector(event) {
101
- event.preventDefault()
102
- const { connector_url, username, password, connector_api_key } = this.connectorForm
103
- const path = `http://127.0.0.1:5000/connectors/${this.currentConnector.id}`
104
- this.loading = true
105
- this.closeDialogUserandPass()
114
+function configureConnector() {
115
+ loading.value = true
116
+
117
+ const { connector_url, connector_username, connector_password, connector_file, connector_api_key } = connectorForm.value
118
+
119
+ const requestMethod = isConnectorConfigured.value ? Api.connectors.update : Api.connectors.configure
120
107
- if (connector_api_key) {
108
- console.log("POST request to: ", path)
109
- console.log("Data: ", {
110
- connector_url: connector_url,
111
- connector_api_key: connector_api_key
121
+ let requestPayload = { connector_url }
122
+
123
+ if (connectorFormType.value === ConnectorFormType.TOKEN) {
124
+ requestPayload = Object.assign(requestPayload, {
125
+ connector_api_key
126
})
113
- axios
114
- .post(path, {
115
- connector_url: connector_url,
116
- connector_api_key: connector_api_key
117
- })
118
- .then(() => {
119
- this.successMessage = "Connector has been successfully configured." // Set success message
120
- setTimeout(() => {
121
- this.successMessage = "" // Clear success message after 5 seconds
122
- }, 5000)
123
- this.getConnectors() // Refresh the connectors
124
- })
125
- .catch(err => {
126
- if (err.response.status === 400) {
127
- this.errorMessage =
128
- "This connector is already configured. If you would like to reconfigure this connector select `Edit`." // Set the error message
129
- } else if (err.response.status === 401) {
130
- this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
131
- } else {
132
- this.errorMessage = "Error updating the connector. Your settings were not inserted into the keystore. Please try again." // Set the error message
133
- }
134
- setTimeout(() => {
135
- this.errorMessage = "" // Clear error message after 5 seconds
136
- }, 5000)
137
- this.getConnectors() // Refresh the connectors
138
- console.error(err) // Also log the error for debugging
139
- })
140
- .finally(() => {
141
- this.loading = false // Set loading to false
142
- })
143
- } else {
144
- axios
145
- .post(path, {
146
- connector_url: connector_url,
147
- connector_username: username,
148
- connector_password: password
149
- })
150
- .then(() => {
151
- this.successMessage = "Connector has been successfully configured." // Set success message
152
- setTimeout(() => {
153
- this.successMessage = "" // Clear success message after 5 seconds
154
- }, 5000)
155
- this.getConnectors() // Refresh the connectors
156
- })
157
- .catch(err => {
158
- if (err.response.status === 400) {
159
- this.errorMessage =
160
- "This connector is already configured. If you would like to reconfigure this connector select `Edit`." // Set the error message
161
- } else if (err.response.status === 401) {
162
- this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
163
- } else {
164
- this.errorMessage = "Error updating the connector. Your settings were not inserted into the keystore. Please try again." // Set the error message
165
- }
166
- setTimeout(() => {
167
- this.errorMessage = "" // Clear error message after 5 seconds
168
- }, 5000)
169
- this.getConnectors() // Refresh the connectors
170
- console.error(err) // Also log the error for debugging
171
- })
172
- .finally(() => {
173
- this.loading = false // Set loading to false
174
- })
127
}
176
-}
177
-function updateConnector(event) {
178
- event.preventDefault()
179
- const { connector_url, username, password, connector_api_key } = this.connectorForm
180
- const path = `http://127.0.0.1:5000/connectors/${this.currentConnector.id}`
181
- this.loading = true
182
- this.closeUpdateModal()
183
-
184
- if (connector_api_key) {
185
- console.log("POST request to: ", path)
186
- console.log("Data: ", {
187
- connector_url: connector_url,
188
- connector_api_key: connector_api_key
128
+ if (connectorFormType.value === ConnectorFormType.CREDENTIALS) {
129
+ requestPayload = Object.assign(requestPayload, {
130
+ connector_username,
131
+ connector_password
132
})
133
+ }
134
191
- axios
192
- .put(path, {
193
- connector_url: connector_url,
194
- connector_username: username,
195
- connector_password: password,
196
- connector_api_key: connector_api_key
135
+ requestMethod(connector.value.id, requestPayload)
136
+ .then(() => {
137
+ ElMessage({
138
+ message: "Connector has been successfully configured.",
139
+ type: "success"
140
})
198
- .then(() => {
199
- this.successMessage = "Connector has been successfully updated." // Set success message
200
- setTimeout(() => {
201
- this.successMessage = "" // Clear success message after 5 seconds
202
- }, 5000)
203
- this.getConnectors() // Refresh the connectors
204
- })
205
- .catch(err => {
206
- if (err.response.status === 400) {
207
- this.errorMessage =
208
- "This connector is not configured. If you would like to configure this connector select `Configure`." // Set the error message
209
- } else if (err.response.status === 401) {
210
- this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
141
+ // this.getConnectors() // Refresh the connectors
142
+ })
143
+ .catch(err => {
144
+ if (err.response.status === 400) {
145
+ if (isConnectorConfigured.value) {
146
+ ElMessage({
147
+ message: "This connector is not configured. If you would like to configure this connector select `Configure`.",
148
+ type: "error"
149
+ })
150
} else {
212
- this.errorMessage = "Error updating the connector. Please try again." // Set the error message
151
+ ElMessage({
152
+ message: "This connector is already configured. If you would like to reconfigure this connector select `Edit`.",
153
+ type: "error"
154
+ })
155
}
214
- setTimeout(() => {
215
- this.errorMessage = "" // Clear error message after 5 seconds
216
- }, 5000)
217
- this.getConnectors() // Refresh the connectors
218
- console.error(err) // Also log the error for debugging
219
- })
220
- .finally(() => {
221
- this.loading = false // Set loading to false
222
- })
223
- } else {
224
- axios
225
- .put(path, {
226
- connector_url: connector_url,
227
- connector_username: username,
228
- connector_password: password
229
- })
230
- .then(() => {
231
- this.successMessage = "Connector has been successfully updated." // Set success message
232
- setTimeout(() => {
233
- this.successMessage = "" // Clear success message after 5 seconds
234
- }, 5000)
235
- this.getConnectors() // Refresh the connectors
236
- })
237
- .catch(err => {
238
- if (err.response.status === 400) {
239
- this.errorMessage =
240
- "This connector is not configured. If you would like to configure this connector select `Configure`." // Set the error message
241
- } else if (err.response.status === 401) {
242
- this.errorMessage = "Unauthorized. Please check your endpoint URL, username and password." // Set the error message
156
+ } 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 {
244
- this.errorMessage = "Error updating the connector. Please try again." // Set the error message
163
+ ElMessage({
164
+ message: "Unauthorized. Please check your endpoint URL and Key",
165
+ type: "error"
166
+ })
167
}
246
- setTimeout(() => {
247
- this.errorMessage = "" // Clear error message after 5 seconds
248
- }, 5000)
249
- this.getConnectors() // Refresh the connectors
250
- console.error(err) // Also log the error for debugging
251
- })
252
- .finally(() => {
253
- this.loading = false // Set loading to false
254
- })
255
- }
168
+ } else {
169
+ ElMessage({
170
+ message: "Error updating the connector. Your settings were not inserted into the keystore. Please try again.",
171
+ type: "error"
172
+ })
173
+ }
174
+ // this.getConnectors() // Refresh the connectors
175
+ })
176
+ .finally(() => {
177
+ loading.value = false // Set loading to false
178
+ })
179
}
257
-*/
180
181
onMounted(() => {
182
setUpForm()
src/components/connectors/ConfigForm/FormTypes/CredentialsType.vue
+11
-3
@@ -14,7 +14,7 @@
14
15
<script setup lang="ts">
16
import { FormInstance, FormRules } from "element-plus"
17
-import { reactive, ref, toRefs } from "vue"
17
+import { onMounted, reactive, ref, toRefs } from "vue"
18
import isURL from "validator/lib/isURL"
19
20
export interface ICredentialsForm {
@@ -23,6 +23,10 @@ export interface ICredentialsForm {
23
connector_password: string
24
}
25
26
+const emit = defineEmits<{
27
+ (e: "mounted", value: FormInstance): void
28
+}>()
29
+
30
const props = defineProps<{
31
form: ICredentialsForm
32
}>()
@@ -46,6 +50,10 @@ const rules = reactive<FormRules<typeof form>>({
50
connector_username: [{ required: true, message: "Please input a valid Username", trigger: "blur" }],
51
connector_password: [{ required: true, message: "Please input a valid Password", trigger: "blur" }]
52
})
49
-</script>
53
51
-<style lang="scss" scoped></style>
54
+onMounted(() => {
55
+ if (formRef.value) {
56
+ emit("mounted", formRef.value)
57
+ }
58
+})
59
+</script>
src/components/connectors/ConfigForm/FormTypes/FileType.vue
+28
-4
@@ -3,8 +3,8 @@
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>
6
- <el-form-item label="File" prop="file">
7
- <el-upload class="upload-demo" drag :limit="1" :auto-upload="false" :on-exceed="handleExceed" ref="upload">
6
+ <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">
8
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
9
<div class="el-upload__text">Drop file here or <em>click to upload</em></div>
10
<template #tip>
@@ -19,7 +19,7 @@
19
import { FormInstance, FormRules } from "element-plus"
20
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus"
21
import { UploadFilled } from "@element-plus/icons-vue"
22
-import { reactive, ref, toRefs } from "vue"
22
+import { onMounted, reactive, ref, toRefs } from "vue"
23
import isURL from "validator/lib/isURL"
24
25
export interface IFileForm {
@@ -27,6 +27,10 @@ export interface IFileForm {
27
connector_file: string
28
}
29
30
+const emit = defineEmits<{
31
+ (e: "mounted", value: FormInstance): void
32
+}>()
33
+
34
const props = defineProps<{
35
form: IFileForm
36
}>()
@@ -61,6 +65,26 @@ 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" }]
67
})
68
+
69
+onMounted(() => {
70
+ if (formRef.value) {
71
+ emit("mounted", formRef.value)
72
+ }
73
+})
74
</script>
75
66
-<style lang="scss" scoped></style>
76
+<style scoped lang="scss">
77
+.file-upload-wrap {
78
+ width: 100%;
79
+
80
+ .el-icon--upload {
81
+ margin-bottom: 0px;
82
+ }
83
+
84
+ :deep() {
85
+ .el-upload-dragger {
86
+ padding: 20px 10px;
87
+ }
88
+ }
89
+}
90
+</style>
src/components/connectors/ConfigForm/FormTypes/TokenType.vue
+11
-3
@@ -11,7 +11,7 @@
11
12
<script setup lang="ts">
13
import { FormInstance, FormRules } from "element-plus"
14
-import { reactive, ref, toRefs } from "vue"
14
+import { onMounted, reactive, ref, toRefs } from "vue"
15
import isURL from "validator/lib/isURL"
16
17
export interface ITokenForm {
@@ -19,6 +19,10 @@ export interface ITokenForm {
19
connector_api_key: string
20
}
21
22
+const emit = defineEmits<{
23
+ (e: "mounted", value: FormInstance): void
24
+}>()
25
+
26
const props = defineProps<{
27
form: ITokenForm
28
}>()
@@ -41,6 +45,10 @@ const rules = reactive<FormRules<typeof form>>({
45
connector_url: [{ required: true, validator: validateUrl, trigger: "blur" }],
46
connector_api_key: [{ required: true, message: "Please input a valid API Key", trigger: "blur" }]
47
})
44
-</script>
48
46
-<style lang="scss" scoped></style>
49
+onMounted(() => {
50
+ if (formRef.value) {
51
+ emit("mounted", formRef.value)
52
+ }
53
+})
54
+</script>