|
44 | 44 | </el-table-column>
|
45 | 45 | <el-table-column label="Gray Status" class-name="status-col" min-width="100px">
|
46 | 46 | <template slot-scope="scope">
|
47 |
| - <el-tag>{{ scope.row.grayStatus }}</el-tag> |
| 47 | + <el-dropdown trigger="click"> |
| 48 | + <el-tag style="cursor:pointer">{{ scope.row.grayStatus }}</el-tag> |
| 49 | + <el-dropdown-menu slot="dropdown"> |
| 50 | + <el-dropdown-item v-if="scope.row.grayStatus=='CLOSE'" @click.native="handleSwitchGrayStatus(scope.row, 1)">Open</el-dropdown-item> |
| 51 | + <el-dropdown-item v-if="scope.row.grayStatus=='OPEN'" @click.native="handleSwitchGrayStatus(scope.row, 0)">Close</el-dropdown-item> |
| 52 | + </el-dropdown-menu> |
| 53 | + </el-dropdown> |
48 | 54 | </template>
|
49 | 55 | </el-table-column>
|
50 | 56 | <el-table-column label="Gray Lock" class-name="status-col" min-width="100px">
|
51 | 57 | <template slot-scope="scope">
|
52 |
| - <el-tag :type="scope.row.grayLock | grayLockStatusFilter">{{ scope.row.grayLock | grayLockFilter }}</el-tag> |
| 58 | + <el-dropdown trigger="click"> |
| 59 | + <el-tag style="cursor:pointer" :type="scope.row.grayLock | grayLockStatusFilter">{{ scope.row.grayLock | grayLockFilter }}</el-tag> |
| 60 | + <el-dropdown-menu slot="dropdown"> |
| 61 | + <el-dropdown-item v-if="scope.row.grayLock==0" @click.native="handleSwitchGrayLock(scope.row, 1)">Lock</el-dropdown-item> |
| 62 | + <el-dropdown-item v-if="scope.row.grayLock==1" @click.native="handleSwitchGrayLock(scope.row, 0)">UnLock</el-dropdown-item> |
| 63 | + </el-dropdown-menu> |
| 64 | + </el-dropdown> |
53 | 65 | </template>
|
54 | 66 | </el-table-column>
|
55 | 67 | <el-table-column label="Instance Status" min-width="110px">
|
56 | 68 | <template slot-scope="scope">
|
57 |
| - <el-tag>{{ scope.row.instanceStatus }}</el-tag> |
| 69 | + <el-dropdown trigger="click"> |
| 70 | + <el-tag style="cursor:pointer">{{ scope.row.instanceStatus }}</el-tag> |
| 71 | + <el-dropdown-menu slot="dropdown"> |
| 72 | + <el-dropdown-item @click.native="changeInstanceStatus(scope.row, 'STARTING')">STARTING</el-dropdown-item> |
| 73 | + <el-dropdown-item @click.native="changeInstanceStatus(scope.row, 'UP')">UP</el-dropdown-item> |
| 74 | + <el-dropdown-item @click.native="changeInstanceStatus(scope.row, 'OUT_OF_SERVICE')">OUT_OF_SERVICE</el-dropdown-item> |
| 75 | + <el-dropdown-item @click.native="changeInstanceStatus(scope.row, 'DOWN')">DOWN</el-dropdown-item> |
| 76 | + <el-dropdown-item @click.native="changeInstanceStatus(scope.row, 'UNKNOWN')">UNKNOWN</el-dropdown-item> |
| 77 | + </el-dropdown-menu> |
| 78 | + </el-dropdown> |
58 | 79 | </template>
|
59 | 80 | </el-table-column>
|
60 | 81 | <el-table-column label="Des" class-name="status-col" min-width="100px">
|
|
79 | 100 | </el-table-column>-->
|
80 | 101 | <el-table-column label="Actions" align="center" class-name="small-padding fixed-width">
|
81 | 102 | <template slot-scope="{row}">
|
82 |
| - <el-button type="primary" size="mini" class="list-button" @click="handleUpdate(row)"> |
83 |
| - Edit |
84 |
| - </el-button> |
| 103 | + <el-dropdown trigger="click"> |
| 104 | + <el-button size="mini" type="primary" style="width:80px" class="list-button"> |
| 105 | + 编辑 |
| 106 | + <i class="el-icon-arrow-down" /> |
| 107 | + </el-button> |
| 108 | + <el-dropdown-menu slot="dropdown"> |
| 109 | + <el-dropdown-item @click.native="handleUpdate(row)">修改</el-dropdown-item> |
| 110 | + <el-dropdown-item @click.native="handleDelete(row)">删除</el-dropdown-item> |
| 111 | + </el-dropdown-menu> |
| 112 | + </el-dropdown> |
85 | 113 | <router-link :to="`/routingPolicy/instanceGrayPolicyList?ns=${ns}&moduleId=${row.serviceId}&resource=${escapeStr(row.instanceId)}`">
|
86 | 114 | <el-button size="mini" type="success" class="list-button">
|
87 | 115 | 策略
|
88 | 116 | </el-button>
|
89 | 117 | </router-link>
|
90 |
| - <el-button size="mini" type="danger" class="list-button" @click="handleDelete(row)"> |
91 |
| - Delete |
92 |
| - </el-button> |
93 | 118 | <el-dropdown trigger="click">
|
94 | 119 | <el-button size="mini" type="info" style="width:80px" class="list-button">
|
95 | 120 | 实例状态
|
|
138 | 163 | <el-option v-for="item in grayStatusOptions" :key="item" :label="item" :value="item" />
|
139 | 164 | </el-select>
|
140 | 165 | </el-form-item>
|
141 |
| - <el-form-item label="Gray Lock" prop="grayStatus"> |
142 |
| - <el-select v-model="temp.grayLock" class="filter-item" placeholder="Please select"> |
143 |
| - <el-option v-for="item in grayLockOptions" :key="item.value" :label="item.label" :value="item.value" /> |
144 |
| - </el-select> |
145 |
| - </el-form-item> |
146 | 166 | <el-form-item label="Describe" prop="describe">
|
147 | 167 | <el-input v-model="temp.des" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
|
148 | 168 | </el-form-item>
|
|
183 | 203 |
|
184 | 204 | <script>
|
185 | 205 | import { fetchList, deleteInstance, createInstance, updateInstance, tryChangeInstanceStatus } from '@/api/gray-instance'
|
| 206 | +import { putData } from '@/api/api-request' |
186 | 207 | import { getServiceAllInfos, getAllDefinitions } from '@/api/gray-client'
|
187 | 208 | import waves from '@/directive/waves' // waves directive
|
188 | 209 | import { parseTime } from '@/utils'
|
@@ -427,6 +448,47 @@ export default {
|
427 | 448 | })
|
428 | 449 | })
|
429 | 450 | },
|
| 451 | + handleSwitchGrayStatus(row, switchVal) { |
| 452 | + const warningMSG = switchVal === 0 ? 'Confirm to close gray status by the record?' : 'Confirm to open gray status by the record?' |
| 453 | + this.$confirm(warningMSG, 'Warning', { |
| 454 | + confirmButtonText: 'Confirm', |
| 455 | + cancelButtonText: 'Cancel', |
| 456 | + type: 'warning' |
| 457 | + }).then(async() => { |
| 458 | + const url = '/gray/instance/switchStatus?id=' + escape(row.instanceId) + '&switch=' + switchVal |
| 459 | + putData(url).then(() => { |
| 460 | + this.dialogFormVisible = false |
| 461 | + const status = switchVal === 0 ? 'CLOSE' : 'OPEN' |
| 462 | + row.grayStatus = status |
| 463 | + this.$notify({ |
| 464 | + title: 'Success', |
| 465 | + message: 'Operate Successfully', |
| 466 | + type: 'success', |
| 467 | + duration: 2000 |
| 468 | + }) |
| 469 | + }) |
| 470 | + }) |
| 471 | + }, |
| 472 | + handleSwitchGrayLock(row, switchVal) { |
| 473 | + const warningMSG = switchVal === 0 ? 'Confirm to close gray lock by the record?' : 'Confirm to open gray lock by the record?' |
| 474 | + this.$confirm(warningMSG, 'Warning', { |
| 475 | + confirmButtonText: 'Confirm', |
| 476 | + cancelButtonText: 'Cancel', |
| 477 | + type: 'warning' |
| 478 | + }).then(async() => { |
| 479 | + const url = '/gray/instance/switchLock?id=' + escape(row.instanceId) + '&switch=' + switchVal |
| 480 | + putData(url).then(() => { |
| 481 | + this.dialogFormVisible = false |
| 482 | + row.grayLock = switchVal |
| 483 | + this.$notify({ |
| 484 | + title: 'Success', |
| 485 | + message: 'Operate Successfully', |
| 486 | + type: 'success', |
| 487 | + duration: 2000 |
| 488 | + }) |
| 489 | + }) |
| 490 | + }) |
| 491 | + }, |
430 | 492 | async changeInstanceStatus(row, status) {
|
431 | 493 | tryChangeInstanceStatus(row, status).then(() => {
|
432 | 494 | this.dialogFormVisible = false
|
|
0 commit comments