|
| 1 | +// Licensed to the Apache Software Foundation (ASF) under one |
| 2 | +// or more contributor license agreements. See the NOTICE file |
| 3 | +// distributed with this work for additional information |
| 4 | +// regarding copyright ownership. The ASF licenses this file |
| 5 | +// to you under the Apache License, Version 2.0 (the |
| 6 | +// "License"); you may not use this file except in compliance |
| 7 | +// with the License. You may obtain a copy of the License at |
| 8 | +// |
| 9 | +// http://www.apache.org/licenses/LICENSE-2.0 |
| 10 | +// |
| 11 | +// Unless required by applicable law or agreed to in writing, |
| 12 | +// software distributed under the License is distributed on an |
| 13 | +// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| 14 | +// KIND, either express or implied. See the License for the |
| 15 | +// specific language governing permissions and limitations |
| 16 | +// under the License. |
| 17 | + |
| 18 | +<template> |
| 19 | + <div> |
| 20 | + {{ $t('label.select.vnf.service') + ':' }} |
| 21 | + <a-select |
| 22 | + v-focus="true" |
| 23 | + style="width: 40%; margin-left: 15px;margin-bottom: 15px" |
| 24 | + :loading="fetchLoading" |
| 25 | + defaultActiveFirstOption |
| 26 | + v-model:value="vnfServiceName" |
| 27 | + @change="handleVnfServiceSelect" |
| 28 | + showSearch |
| 29 | + optionFilterProp="label" |
| 30 | + :filterOption="(input, option) => { |
| 31 | + return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 |
| 32 | + }" > |
| 33 | + <a-select-option v-for="service in vnfServices" :key="service.name" :value="service.name" :label="service.name" style="width: 90%;"> |
| 34 | + {{ service.name }} |
| 35 | + </a-select-option> |
| 36 | + </a-select> |
| 37 | + </div> |
| 38 | + <div> |
| 39 | + {{ $t('label.select.vnf.operation') + ':' }} |
| 40 | + <a-select |
| 41 | + v-focus="true" |
| 42 | + style="width: 40%; margin-left: 15px;margin-bottom: 15px" |
| 43 | + :loading="fetchLoading" |
| 44 | + defaultActiveFirstOption |
| 45 | + v-model:value="vnfOperationName" |
| 46 | + @change="handleVnfOperationSelect" |
| 47 | + showSearch |
| 48 | + optionFilterProp="label" |
| 49 | + :filterOption="(input, option) => { |
| 50 | + return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 |
| 51 | + }" > |
| 52 | + <a-select-option v-for="operation in vnfOperations" :key="operation.name" :value="operation.name" :label="operation.description" style="width: 90%;"> |
| 53 | + {{ operation.description }} |
| 54 | + </a-select-option> |
| 55 | + </a-select> |
| 56 | + </div> |
| 57 | + <a-alert type="info" :showIcon="true" v-if="this.vnfOperation && this.vnfOperation.requiredParameters && !this.vnfOperationResponse"> |
| 58 | + <template #description> |
| 59 | + <div> |
| 60 | + <strong>{{ $t('label.vnf.operation.parameters') + " : " + this.vnfOperation.name }}</strong> |
| 61 | + </div> |
| 62 | + <br> |
| 63 | + <a-form layout="vertical" style="margin-top: 10px"> |
| 64 | + <a-row |
| 65 | + v-for="param in vnfOperation.requiredParameters" |
| 66 | + :key="param.name" |
| 67 | + gutter="16" |
| 68 | + style="margin-bottom: 1rem; align-items: center;" |
| 69 | + > |
| 70 | + <a-col :span="12"> |
| 71 | + <strong>{{ param.description }}</strong> |
| 72 | + </a-col> |
| 73 | + |
| 74 | + <a-col :span="6"> |
| 75 | + <a-input |
| 76 | + v-if="param.type === 'string'" |
| 77 | + v-model:value="formData[param.name]" |
| 78 | + :placeholder="param.name" |
| 79 | + /> |
| 80 | + </a-col> |
| 81 | + </a-row> |
| 82 | + <a-button ref="submit" type="primary" @click="handleSubmit">{{ $t('label.submit') }}</a-button> |
| 83 | + </a-form> |
| 84 | + </template> |
| 85 | + </a-alert> |
| 86 | + <a-alert v-if="vnfOperationResponseNode" type="success" :showIcon="true"> |
| 87 | + <template #description> |
| 88 | + <component :is="vnfOperationResponseNode" /> |
| 89 | + </template> |
| 90 | + </a-alert> |
| 91 | +</template> |
| 92 | + |
| 93 | +<script> |
| 94 | +import { getAPI, postAPI } from '@/api' |
| 95 | +import Status from '@/components/widgets/Status' |
| 96 | +import { h } from 'vue' |
| 97 | +
|
| 98 | +export default { |
| 99 | + name: 'VnfAppliancesTab', |
| 100 | + components: { |
| 101 | + Status |
| 102 | + }, |
| 103 | + props: { |
| 104 | + resource: { |
| 105 | + type: Object, |
| 106 | + required: true |
| 107 | + }, |
| 108 | + loading: { |
| 109 | + type: Boolean, |
| 110 | + default: false |
| 111 | + } |
| 112 | + }, |
| 113 | + data () { |
| 114 | + return { |
| 115 | + fetchLoading: false, |
| 116 | + vnfService: null, |
| 117 | + vnfServiceName: '', |
| 118 | + vnfServices: [], |
| 119 | + vnfOperation: null, |
| 120 | + vnfOperationName: '', |
| 121 | + vnfOperations: [], |
| 122 | + formData: {}, |
| 123 | + vnfOperationResponse: '', |
| 124 | + vnfOperationResponseNode: null |
| 125 | + } |
| 126 | + }, |
| 127 | + created () { |
| 128 | + this.fetchData() |
| 129 | + }, |
| 130 | + watch: { |
| 131 | + resource: { |
| 132 | + deep: true, |
| 133 | + handler (newItem) { |
| 134 | + if (!newItem || !newItem.id) { |
| 135 | + return |
| 136 | + } |
| 137 | + this.fetchData() |
| 138 | + } |
| 139 | + } |
| 140 | + }, |
| 141 | + methods: { |
| 142 | + fetchData () { |
| 143 | + var params = { |
| 144 | + virtualmachineid: this.resource.id |
| 145 | + } |
| 146 | + this.fetchLoading = true |
| 147 | + getAPI('vnfListProviders', params).then(json => { |
| 148 | + this.vnfServices = json.vnflistprovidersresponse.vnfprovider?.[0]?.service || [] |
| 149 | + this.vnfServiceName = this.vnfServices?.[0]?.name || '' |
| 150 | + if (this.vnfServiceName) { |
| 151 | + this.handleVnfServiceSelect(this.vnfServiceName) |
| 152 | + } |
| 153 | + }).catch(error => { |
| 154 | + this.$notifyError(error) |
| 155 | + }).finally(() => { |
| 156 | + this.fetchLoading = false |
| 157 | + }) |
| 158 | + }, |
| 159 | + resetVnfOperationRequestResponse () { |
| 160 | + this.formData = {} |
| 161 | + this.vnfOperationResponse = null |
| 162 | + this.vnfOperationResponseNode = null |
| 163 | + }, |
| 164 | + handleVnfServiceSelect (service) { |
| 165 | + this.resetVnfOperationRequestResponse() |
| 166 | + this.vnfServiceName = service |
| 167 | + this.vnfService = this.vnfServices.find(vnfService => vnfService.name === service) |
| 168 | + this.vnfOperations = this.vnfService.operations |
| 169 | + this.vnfOperationName = this.vnfOperations?.[0]?.name || '' |
| 170 | + if (this.vnfOperationName) { |
| 171 | + this.handleVnfOperationSelect(this.vnfOperationName) |
| 172 | + } |
| 173 | + }, |
| 174 | + handleVnfOperationSelect (operation) { |
| 175 | + this.resetVnfOperationRequestResponse() |
| 176 | + this.vnfOperationName = operation |
| 177 | + this.vnfOperation = this.vnfOperations.find(vnfOperation => vnfOperation.name === operation) |
| 178 | + if (['FIREWALL_RULE_LIST'].includes(this.vnfOperationName)) { |
| 179 | + this.vnfOperation.autoSubmit = true |
| 180 | + } else if (this.vnfOperationName === 'FIREWALL_RULE_CREATE') { |
| 181 | + this.vnfOperation.requiredParameters = JSON.parse('[{"name":"action","type":"string","description":"Action to perform: pass or block"},' + |
| 182 | + '{"name":"interface","type":"string","description":"Interface where the rule applies, e.g., lan, wan"},' + |
| 183 | + '{"name":"ipprotocol","type":"string","description":"IP protocol: inet (IPv4), inet6 (IPv6), or any"},' + |
| 184 | + '{"name":"protocol","type":"string","description":"Transport protocol: tcp, udp, icmp, or any"},' + |
| 185 | + '{"name":"source_net","type":"string","description":"Source network address or subnet"},' + |
| 186 | + '{"name":"source_port","type":"string","description":"Source port number or any"},' + |
| 187 | + '{"name":"destination_net","type":"string","description":"Destination network address or subnet"},' + |
| 188 | + '{"name":"destination_port","type":"string","description":"Destination port number or any"},' + |
| 189 | + '{"name":"descr","type":"string","description":"Description of the firewall rule"},' + |
| 190 | + '{"name":"vnf_rule_id","type":"string","description":"Unique identifier for the VNF firewall rule"}]') |
| 191 | + this.vnfOperation.optionalParameters = '' |
| 192 | + } |
| 193 | + if (this.vnfOperation.autoSubmit) { |
| 194 | + this.handleSubmit() |
| 195 | + } |
| 196 | + }, |
| 197 | + handleSubmit () { |
| 198 | + if (this.formData) { |
| 199 | + console.log('data = ' + JSON.stringify(this.formData)) |
| 200 | + } |
| 201 | + var params = { |
| 202 | + service: this.vnfServiceName, |
| 203 | + operation: this.vnfOperationName, |
| 204 | + data: JSON.stringify(this.formData) |
| 205 | + } |
| 206 | + postAPI('performVnfAction', params).then(json => { |
| 207 | + const response = json.performvnfactionresponse.response || null |
| 208 | + if (response) { |
| 209 | + console.log('response = ' + JSON.stringify(response)) |
| 210 | + } |
| 211 | + }).finally(() => { |
| 212 | + this.fetchLoading = false |
| 213 | + this.vnfOperationResponse = '{}' |
| 214 | + if (this.vnfOperationName === 'FIREWALL_RULE_LIST') { |
| 215 | + this.vnfOperationResponse = '{"result":[' + |
| 216 | + '{"uuid":"123e4567-e89b-12d3-a456-426614174000","id":1,"action":"pass","enabled":true,"interface":"lan","direction":"in","ipprotocol":"inet","protocol":"tcp","source_net":"192.168.1.0/24","source_port":"any","destination_net":"any","destination_port":443,"description":"Allow LAN → any on HTTPS"},' + |
| 217 | + '{"uuid":"123e4567-e89b-12d3-a456-426614174001","id":2,"action":"block","enabled":true,"interface":"lan","direction":"in","ipprotocol":"inet","protocol":"any","source_net":"any","source_port":"any","destination_net":"192.168.1.0/24","destination_port":"any","description":"Block any inbound to LAN subnet"},' + |
| 218 | + '{"uuid":"123e4567-e89b-12d3-a456-426614174002","id":3,"action":"pass","enabled":true,"interface":"wan","direction":"in","ipprotocol":"inet","protocol":"tcp","source_net":"any","source_port":"any","destination_net":"203.0.113.10","destination_port":22,"description":"Allow SSH access to firewall host"}]}' |
| 219 | + } |
| 220 | + this.processVnfOperationResponse() |
| 221 | + }) |
| 222 | + }, |
| 223 | + processVnfOperationResponse () { |
| 224 | + const message = this.$t('label.vnf.operation.response') + ' : ' + this.vnfOperationName |
| 225 | + this.vnfOperationResponseNode = [h('p', `${message}`)] |
| 226 | + let parsedVnfOperationResponse = JSON.parse(this.vnfOperationResponse)?.result |
| 227 | + if (!parsedVnfOperationResponse) { |
| 228 | + this.vnfOperationResponseNode = h('div', this.vnfOperationResponseNode) |
| 229 | + return |
| 230 | + } |
| 231 | + if (parsedVnfOperationResponse && !Array.isArray(parsedVnfOperationResponse) && typeof parsedVnfOperationResponse === 'object' && Object.keys(parsedVnfOperationResponse).length > 0) { |
| 232 | + parsedVnfOperationResponse = [parsedVnfOperationResponse] |
| 233 | + } |
| 234 | +
|
| 235 | + if (Array.isArray(parsedVnfOperationResponse) && parsedVnfOperationResponse.length > 0) { |
| 236 | + this.vnfOperationResponseNode.push( |
| 237 | + h('div', { |
| 238 | + style: { |
| 239 | + marginTop: '1em', |
| 240 | + maxHeight: '50vh', |
| 241 | + maxWidth: '100%', |
| 242 | + overflow: 'auto', |
| 243 | + backgroundColor: '#f6f6f6', |
| 244 | + border: '1px solid #ddd', |
| 245 | + borderRadius: '4px', |
| 246 | + display: 'block' |
| 247 | + } |
| 248 | + }, [ |
| 249 | + h('table', { |
| 250 | + style: { |
| 251 | + width: '100%', |
| 252 | + minWidth: 'max-content', |
| 253 | + borderCollapse: 'collapse', |
| 254 | + whiteSpace: 'pre-wrap' |
| 255 | + } |
| 256 | + }, [ |
| 257 | + h('thead', [ |
| 258 | + h('tr', Object.keys(parsedVnfOperationResponse[0]).map(key => |
| 259 | + h('th', { |
| 260 | + style: { |
| 261 | + padding: '8px', |
| 262 | + border: '1px solid #ddd', |
| 263 | + textAlign: 'left', |
| 264 | + fontWeight: 'bold', |
| 265 | + backgroundColor: '#fafafa' |
| 266 | + } |
| 267 | + }, key) |
| 268 | + )) |
| 269 | + ]), |
| 270 | + h('tbody', parsedVnfOperationResponse.map(row => |
| 271 | + h('tr', Object.values(row).map(value => |
| 272 | + h('td', { |
| 273 | + style: { |
| 274 | + padding: '8px', |
| 275 | + border: '1px solid #ddd', |
| 276 | + fontFamily: 'monospace' |
| 277 | + } |
| 278 | + }, String(value)) |
| 279 | + )) |
| 280 | + )) |
| 281 | + ]) |
| 282 | + ]) |
| 283 | + ) |
| 284 | + } |
| 285 | + this.vnfOperationResponseNode = h('div', this.vnfOperationResponseNode) |
| 286 | + } |
| 287 | + } |
| 288 | +} |
| 289 | +</script> |
| 290 | +<style lang="scss" scoped> |
| 291 | +.status { |
| 292 | + margin-top: -5px; |
| 293 | +
|
| 294 | + &--end { |
| 295 | + margin-left: 5px; |
| 296 | + } |
| 297 | +} |
| 298 | +</style> |
0 commit comments