Skip to content

Commit 1b4ae86

Browse files
GiorunoGiovannaRobertIndie
GiorunoGiovanna
and
RobertIndie
authored
API joint for pulsar backend: create,update (#42)
* test * test * test * Support multi input topics config * Support multi-input-topics config * [#6]Support multi-input-topics config * create images management * create images management * create images management * update inputs * update inputs * Delete index.vue * Delete AddForm.vue * Delete FunctionDetail.vue * Delete FunctionTable.vue * Delete Trigger.vue * Update router.config.js * Update func.js * Update func.js * Update front-end/src/mock/services/func.js Co-authored-by: Zike Yang <zkyang@streamnative.io> * Update front-end/src/views/function/components/AddForm.vue Co-authored-by: Zike Yang <zkyang@streamnative.io> * Update front-end/src/views/function/components/AddForm.vue Co-authored-by: Zike Yang <zkyang@streamnative.io> * Update front-end/src/views/function/components/AddForm.vue Co-authored-by: Zike Yang <zkyang@streamnative.io> * fix bug and clean up comment * Update front-end/src/views/function/components/AddForm.vue Co-authored-by: Zike Yang <zkyang@streamnative.io> * Update front-end/src/views/function/components/AddForm.vue Co-authored-by: Zike Yang <zkyang@streamnative.io> * clean up comments * add Function Name field * Revert "add Function Name field" This reverts commit ddb837e. * add Function Name field * resolve conflicts * fix problems * Update .env.api * Update .env.api * Update .gitignore * Update .gitignore * Update .gitignore * Update .gitignore * resolve conflicts * resolve conflicts * resolve conflicts * resolve conflicts * fix problems * fix problems * API joint for pulsar backend： update * Solve the problem of refresh * Update FunctionTable.vue * resolve problems Co-authored-by: Zike Yang <zkyang@streamnative.io>
1 parent 1a98a76 commit 1b4ae86

File tree

5 files changed

+81
-36
lines changed

5 files changed

+81
-36
lines changed

‎front-end/src/api/func.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import request from '@/utils/request'
22

3-
const { post, get } = request
3+
const { post, get, put } = request
44

55
export const funcApi = {
66
list: '/admin/v3/functions/public/default',
7-
create: '/admin/v3/functions/public/default/myfunc',
7+
create: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}`,
8+
update: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}`,
89
info: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}`,
910
stats: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}/stats`,
1011
status: ({ funcName }) => `/admin/v3/functions/public/default/${funcName}/status`,
@@ -18,8 +19,12 @@ export function getList () {
1819
return get(funcApi.list)
1920
}
2021

21-
export function createFunc (data) {
22-
return post(funcApi.create, { data })
22+
export function create (funcName, data) {
23+
return post(funcApi.create({ funcName }), data, { headers: { 'Content-Type': 'multipart/form-data' } })
24+
}
25+
26+
export function update (funcName, data) {
27+
return put(funcApi.update({ funcName }), data, { headers: { 'Content-Type': 'multipart/form-data' } })
2328
}
2429

2530
export function getInfo (funcName) {

‎front-end/src/mock/services/func.js

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -115,24 +115,18 @@ const trigger = (option) => {
115115
return `${data}!!!`;
116116
}
117117

118-
const addFunc = (option) => {
119-
console.log("Test value return to the frontend：",option)
120-
return 0
121-
}
122-
123118
const startFunc = {result: 0};
124119

125120
const stopFunc = {result: 0};
126121

127122
const deleteFunc = { result: 0 };
128123

129124
get(/\/admin\/v3\/functions\/public\/default/, list);
130-
get(/function\/create/, createFunc);
131125
get(/\/admin\/v3\/functions\/public\/default\/[^/]*/, info);
132126
get(/\/admin\/v3\/functions\/public\/default\/[^/]*\/stats/, stats);
133127
get(/\/admin\/v3\/functions\/public\/default\/[^/]*\/status/, status);
134128
post(/\/admin\/v3\/functions\/public\/default\/[^/]*\/trigger/, trigger);
135129
post(/\/admin\/v3\/functions\/public\/default\/[^/]*\/delete/, deleteFunc);
136-
post(/\/admin\/v3\/functions\/public\/default\/[^/]*\/add/, addFunc);
130+
post(/\/admin\/v3\/functions\/public\/default\/[^/]*/, createFunc);
137131
post(/\/admin\/v3\/functions\/public\/default\/[^/]*\/start/, startFunc);
138132
post(/\/admin\/v3\/functions\/public\/default\/[^/]*\/stop/, stopFunc);

‎front-end/src/views/function/components/AddForm.vue

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -194,20 +194,28 @@ import { create } from '@/api/func'
194194
onSub () {
195195
this.form.validateFields((err, values) => {
196196
if (err) return
197-
console.log(values)
197+
const functionName = values.FunctionName
198+
const data = new FormData()
199+
data.append('data', this.fileList)
200+
const functionConfig = values
201+
delete functionConfig.data
202+
delete functionConfig.FunctionName //参数处理
203+
data.append('functionConfig', new Blob([JSON.stringify(functionConfig)], { type: 'application/json' }))
198204
const _this = this
199205
this.$confirm({
200206
title: 'Are you sure to create this function?',
201207
content: 'Some descriptions',
202208
okType: 'primary',
203209
async onOk () {
204210
try {
205-
await create(values.FunctionName, values)
211+
await create(functionName, data)
206212
.then((res) => {
207-
_this.$notification.success({ message: ` "${values.FunctionName}" function created successfully` })
213+
_this.$parent.refresh()
214+
_this.$parent.closeDrawer()
215+
_this.$notification.success({ message: `function "${functionName}" created successfully` })
208216
})
209217
} catch (error) {
210-
_this.$notification.error({ message: ` "${values.FunctionName}" funciton creation failed` })
218+
_this.$notification.error({ message: ` funciton "${functionName}" creation failed` })
211219
}
212220
}
213221
})
@@ -226,8 +234,7 @@ import { create } from '@/api/func'
226234
return []
227235
},
228236
fbeforeUpload (file) {
229-
this.fileList = [...this.fileList, file]
230-
console.log(this.fileList)
237+
this.fileList = file
231238
return false
232239
},
233240
addInput () {

‎front-end/src/views/function/components/FunctionDetail.vue

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@
4343
}
4444
]"
4545
class="inputDefault"
46-
:disabled="!editable"
47-
:class="{editable:!editable}" />
46+
:disabled="true"
47+
:class="{editable:true}" />
4848
</a-form-item>
4949
</a-descriptions-item>
5050
<a-descriptions-item label="Runtime"
@@ -72,7 +72,7 @@
7272
shape="circle"
7373
type="dashed"
7474
size="small"
75-
v-show="editable"
75+
v-show="false"
7676
@click="addInput" />
7777
</span>
7878
<a-form-item :wrapper-col="{ span: 24 }"
@@ -88,8 +88,8 @@
8888
}
8989
]"
9090
class="inputDefault"
91-
:disabled="!editable"
92-
:class="{editable:!editable}" />
91+
:disabled="true"
92+
:class="{editable:true}" />
9393
</a-col>
9494
<a-col>
9595
<a-button icon="minus"
@@ -182,14 +182,16 @@
182182
</template>
183183
<script>
184184
import { uid } from 'uid'
185+
import { update } from '@/api/func'
185186
186187
export default {
187188
data () {
188189
return {
189190
editable: false,
190191
form: this.$form.createForm(this),
191192
loadingSave: false,
192-
inputs: []
193+
inputs: [],
194+
file: ''
193195
}
194196
},
195197
props: {
@@ -251,19 +253,39 @@ export default {
251253
this.inputs = this.inputs?.filter(input => input.key !== key)
252254
},
253255
saveEdit () {
254-
const _this = this
255-
this.loadingSave = true
256256
this.form.validateFields((err, values) => {
257-
if (!err) {
258-
console.log('Received values of form: ', values)
259-
setTimeout(() => {
260-
this.loadingSave = false
261-
_this.$notification.success({ message: `"${_this.currentFuncionInfo?.name}" function Modified successfully` })
262-
}, 1000)
263-
} else {
264-
this.loadingSave = false
265-
}
266-
})
257+
if (err) return
258+
console.log(values)
259+
const functionName = values.name
260+
const data = new FormData()
261+
if(values.data){
262+
data.append('data', this.file)
263+
}
264+
const functionConfig = values
265+
delete functionConfig.data
266+
delete functionConfig.Name //参数处理
267+
data.append('functionConfig', new Blob([JSON.stringify(functionConfig)], { type: 'application/json' }))
268+
const _this = this
269+
this.$confirm({
270+
title: 'Are you sure to create this function?',
271+
content: 'Some descriptions',
272+
okType: 'primary',
273+
async onOk () {
274+
try {
275+
await update(functionName, data)
276+
.then((res) => {
277+
_this.$parent.refresh()
278+
_this.$parent.closeDetail()
279+
_this.$notification.success({ message: `function "${functionName}" created successfully` })
280+
})
281+
} catch (error) {
282+
const errMessage = error.response.data.reason
283+
_this.$notification.error({ message: ` funciton "${functionName}" creation failed, because ${errMessage}` })
284+
}
285+
}
286+
})
287+
this.file = ''
288+
})
267289
},
268290
normFile (e) {
269291
console.log('Upload event:', e)
@@ -273,7 +295,8 @@ export default {
273295
if (e && e.fileList.length > 0) return [e.fileList[e.fileList.length - 1]]
274296
return []
275297
},
276-
fbeforeUpload () {
298+
fbeforeUpload (file) {
299+
this.file = file
277300
return false
278301
}
279302
},

‎front-end/src/views/function/index.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,22 @@ export default {
6161
this.refreshFunc()
6262
},
6363
methods: {
64+
async refresh () {
65+
this.loadingList = true
66+
try {
67+
const res = await getList()
68+
if (Array.isArray(res)) {
69+
this.functionList = res?.map((name) => ({ key: name, name }))
70+
// get status
71+
res?.map(async (name, i) => {
72+
const res = await getStatus(name)
73+
this.$set(this.functionList[i], 'status', !!res?.instances?.[0]?.status?.running)
74+
this.$set(this.functionList[i], 'statusInfo', res)
75+
})
76+
}
77+
} catch (e) { }
78+
this.loadingList = false
79+
},
6480
formatDate (date) {
6581
return moment(date).format('YYYY/MM/DD')
6682
},

0 commit comments

Comments
 (0)