Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

WIP: feat(connection): support rest connection props #795

Merged
merged 1 commit into from
Dec 1, 2021
Merged

WIP: feat(connection): support rest connection props #795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions src/lang/connections.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,20 +300,34 @@ export default {
ja: 'Topic Aliasの最大値',
hu: 'Macimális téma becenév',
},
maximumPacketSize: {
zh: '最大数据包大小',
en: 'Maximum Packet Size',
tr: 'En Büyük Paket Boyutu',
ja: '最大パケット サイズ',
hu: 'Maximális csomagméret',
},
requestResponseInformation: {
zh: '请求响应信息',
en: 'Request Response Information',
en: 'Request Response Info',
tr: 'Yanıt Bilgisi İste',
ja: 'レスポンス情報をリクエストする',
hu: 'Válasz információ kérése',
},
requestProblemInformation: {
zh: '请求失败信息',
en: 'Request Problem Information',
en: 'Request Problem Info',
tr: 'Sorun Bilgisi İste',
ja: '失敗情報をリクエストする',
hu: 'Probléma információ kérése',
},
userProperties: {
zh: '用户属性',
en: 'User Properties',
tr: 'Kullanıcı Özellikleri',
ja: 'ユーザー プロパティ',
hu: 'Felhasználói tulajdonságok',
},
topicReuired: {
zh: '请输入 Topic',
en: 'Topic is required',
Expand Down
2 changes: 1 addition & 1 deletion src/types/global.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Vue from 'vue'
import { TranslateResult } from 'vue-i18n'
import { MqttClient, IClientOptions } from 'mqtt'
import { MqttClient } from 'mqtt'

declare global {
type $TSFixed = any
Expand Down
6 changes: 3 additions & 3 deletions src/utils/mqttUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import time from '@/utils/time'
import { getSSLFile } from '@/utils/getFiles'
import _ from 'lodash'

const setMQTT5Properties = (option: IClientOptions['properties']): IClientOptions['properties'] | undefined => {
const setMQTT5Properties = (option: ClientPropertiesModel): ClientPropertiesModel | undefined => {
if (option === undefined) {
return undefined
}
const properties: IClientOptions['properties'] = _.cloneDeep(option)
return Object.fromEntries(Object.entries(properties).filter(([_, v]) => v !== null && v !== undefined && v !== ''))
const properties: ClientPropertiesModel = _.cloneDeep(option)
return Object.fromEntries(Object.entries(properties).filter(([_, v]) => v !== null && v !== undefined))
}

const setWillMQTT5Properties = (option: WillPropertiesModel): WillPropertiesModel | undefined => {
Expand Down
130 changes: 128 additions & 2 deletions src/views/connections/ConnectionForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@
<el-input-number
size="mini"
type="number"
:min="0"
:min="1"
v-model="record.properties.sessionExpiryInterval"
controls-position="right"
>
Expand All @@ -323,19 +323,77 @@
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="22">
<el-form-item :label="$t('connections.maximumPacketSize')" prop="maximumPacketSize">
<el-input-number
size="mini"
type="number"
:min="100"
v-model="record.properties.maximumPacketSize"
controls-position="right"
>
</el-input-number>
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="22">
<el-form-item :label="$t('connections.topicAliasMaximum')" prop="topicAliasMaximum">
<el-input-number
size="mini"
type="number"
:min="0"
:min="1"
v-model="record.properties.topicAliasMaximum"
controls-position="right"
>
</el-input-number>
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="22">
<el-form-item :label="$t('connections.requestResponseInformation')" prop="requestResponseInformation">
<el-radio-group v-model="record.properties.requestResponseInformation">
<el-radio :label="true"></el-radio>
<el-radio :label="false"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="22">
<el-form-item :label="$t('connections.requestProblemInformation')" prop="requestProblemInformation">
<el-radio-group v-model="record.properties.requestProblemInformation">
<el-radio :label="true"></el-radio>
<el-radio :label="false"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="22">
<el-form-item :label="$t('connections.userProperties')">
<div class="user-props">
<el-button icon="el-icon-plus" class="btn-props-plus" type="text" @click="addItem" />
<div v-for="(item, index) in listData" class="user-props-row" :key="index">
<a class="btn-check" @click="checkItem(index)">
<i v-if="item.checked" class="iconfont el-icon-check"></i>
<i v-else class="iconfont el-icon-check disable-icon"></i>
</a>
<el-input
placeholder="key"
size="mini"
v-model="item.key"
class="input-user-prop user-prop-key"
/>
<el-input
placeholder="value"
size="mini"
v-model="item.value"
class="input-user-prop user-prop-value"
/>
<el-button icon="el-icon-delete" class="btn-delete" type="text" @click="deleteItem(index)" />
</div>
</div>
</el-form-item>
Comment on lines +371 to +394
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This part of the form item was used on the meta card. And the add & delete logics were the same. So, I think making it to a common component is better. Just need a bind value.

</el-col>
<el-col :span="2"></el-col>
</template>
</el-row>
</el-card>
Expand Down Expand Up @@ -485,6 +543,8 @@ import _ from 'lodash'
import time from '@/utils/time'
import useServices from '@/database/useServices'

type UserPairObect = { key: string; value: string; checked: boolean }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this type was defined in the MsgPublish.vue, Why not set it to common?


@Component({
components: {
Editor,
Expand Down Expand Up @@ -514,6 +574,25 @@ export default class ConnectionForm extends Vue {
private defaultRecord: ConnectionModel = getDefaultRecord()

private record: ConnectionModel = _.cloneDeep(this.defaultRecord)
public defaultPropObj = { key: '', value: '', checked: true }

public listData: UserPairObect[] = [_.cloneDeep(this.defaultPropObj)]

private checkItem(index: number) {
this.listData[index].checked = !this.listData[index].checked
}

private deleteItem(index: number) {
if (this.listData.length > 1) {
this.listData.splice(index, 1)
} else if (this.listData.length === 1) {
this.listData = [_.cloneDeep(this.defaultPropObj)]
}
}

private addItem() {
this.listData.push(_.cloneDeep(this.defaultPropObj))
}
Comment on lines +579 to +595
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here.


@Watch('oper')
private handleCreateNewConnection(val: string) {
Expand Down Expand Up @@ -561,6 +640,25 @@ export default class ConnectionForm extends Vue {
if (!valid) {
return false
}

const checkedList = this.listData.filter((pair) => !(pair.key === '' || !pair.checked))
const userProps: {
[key: string]: string
} = {}
if (checkedList.length > 0) {
checkedList.forEach((pair) => {
if (pair && pair.key) {
userProps[pair.key] = pair.value
}
})
}

if (Object.keys(userProps).length > 0) {
this.record.properties = { ...this.record.properties, userProperties: userProps }
} else {
this.record.properties = { ...this.record.properties, userProperties: undefined }
}

const data = { ...this.record }
this.trimString(data)
let res: ConnectionModel | undefined = undefined
Expand Down Expand Up @@ -746,6 +844,34 @@ export default class ConnectionForm extends Vue {
.el-form {
padding-top: 80px;
padding-bottom: 40px;
.user-props {
position: relative;
.btn-props-plus {
position: absolute;
left: 0;
top: 2px;
}
.user-props-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-left: 20px;
.input-user-prop {
padding: 0px;
margin-right: 10px;
}
.btn-check {
.el-icon-check {
font-size: 14px;
margin-right: 10px;
}
.disable-icon {
color: dimgray;
}
}
}
}
// normal icon operation style
.icon-oper {
color: var(--color-text-default);
Expand Down