fix

dolphinscheduler-ui/src/js/conf/home/index.js

@@ -46,7 +46,9 @@ const useOpt = i18n.globalScope.LOCALE === 'en_US' ? { locale: locale } : {}
 i18n.globalScope.LOCALE === 'en_US' ? Vue.use(ElementUI, { locale }) : Vue.use(ElementUI)
 
 // Vue.use(ans)
-Vue.use(useOpt, formCreate)
+Vue.use(useOpt)
+Vue.use(formCreate)
+
 sync(store, router)
 
 Vue.config.devtools = true

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/createWarning.vue

@@ -36,7 +36,7 @@
           </template>
         </m-list-box-f>
         <m-list-box-f>
-          <template slot="name"><strong>*</strong>{{$t('Group Type')}}</template>
+          <template slot="name"><strong>*</strong>{{$t('Alarm plugin instance')}}</template>
           <template slot="content">
             <el-select v-model="groupType" size="small">
               <el-option
@@ -81,7 +81,8 @@
       }
     },
     props: {
-      item: Object
+      item: Object,
+      allAlertPluginInstance: Array
     },
     methods: {
       _ok () {

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue

@@ -23,7 +23,7 @@
           <el-dialog
             :visible.sync="createWarningDialog"
             width="auto">
-            <m-create-warning :item="item" @onUpdate="onUpdate" @close="close"></m-create-warning>
+            <m-create-warning :item="item" :allAlertPluginInstance="allAlertPluginInstance" @onUpdate="onUpdate" @close="close"></m-create-warning>
           </el-dialog>
         </template>
       </m-conditions>
@@ -83,13 +83,14 @@
         isLeft: true,
         isADMIN: store.state.user.userInfo.userType === 'ADMIN_USER',
         createWarningDialog: false,
-        item: {}
+        item: {},
+        allAlertPluginInstance: []
       }
     },
     mixins: [listUrlParamHandle],
     props: {},
     methods: {
-      ...mapActions('security', ['getAlertgroupP']),
+      ...mapActions('security', ['getAlertgroupP', 'queryAllAlertPluginInstance']),
       /**
        * Inquire
        */
@@ -110,6 +111,11 @@
         this._create(item)
       },
       _create (item) {
+        this.queryAllAlertPluginInstance().then(res => {
+          this.allAlertPluginInstance = res.data
+        }).catch(e => {
+          this.$message.error(e.msg)
+        })
         this.item = item
         this.createWarningDialog = true
       },

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/_source/createWarning.vue

@@ -0,0 +1,192 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+<template>
+  <m-popup
+          ref="popup"
+          :ok-text="item ? $t('Edit') : $t('Submit')"
+          :nameText="item ? $t('Edit alarm group') : $t('Create alarm group')"
+          @ok="_ok"
+          @close="close">
+    <template slot="content">
+      <div class="create-warning-model">
+        <m-list-box-f>
+          <template slot="name"><strong>*</strong>{{$t('Alarm instance name')}}</template>
+          <template slot="content">
+            <el-input
+                    type="input"
+                    v-model="groupName"
+                    maxlength="60"
+                    size="small"
+                    :placeholder="$t('Please enter group name')">
+            </el-input>
+          </template>
+        </m-list-box-f>
+        <m-list-box-f>
+          <template slot="name"><strong>*</strong>{{$t('Select plugin')}}</template>
+          <template slot="content">
+            <el-select v-model="pluginDefineId" size="small" style="width: 100%" @change="changePlugin">
+              <el-option
+                      v-for="items in pulginInstance"
+                      :key="items.id"
+                      :value="items.id"
+                      :label="items.pluginName">
+              </el-option>
+            </el-select>
+          </template>
+        </m-list-box-f>
+        <div>
+          <template>
+            <div class="alertForm"><form-create v-model="$f" :rule="rule" :option="{submitBtn:false}" size="mini"></form-create></div>
+          </template>
+        </div>
+      </div>
+    </template>
+  </m-popup>
+</template>
+<script>
+  import i18n from '@/module/i18n'
+  import store from '@/conf/home/store'
+  import mPopup from '@/module/components/popup/popup'
+  import mListBoxF from '@/module/components/listBoxF/listBoxF'
+
+  export default {
+    name: 'create-warning',
+    data () {
+      return {
+        store,
+        groupName: '',
+        pluginDefineId: null,
+        description: '',
+        options: [{ code: `${i18n.$t('Email')}`, id: 'EMAIL' }, { code: `${i18n.$t('SMS')}`, id: 'SMS' }],
+        $f: {},
+        rule: [
+          {
+            type: 'input',
+            field: 'dingTalkWebHook',
+            className: 'user-name-dom',
+            title: 'dingtalk.webhook',
+            value: null,
+            props: {
+              placeholder: '请输入用户名称！',
+              size: 'small',
+              disabled: false,
+              readonly: false,
+              clearable: true
+            },
+            validate: [
+              {
+                trigger: 'blur',
+                required: true,
+                message: '用户名称不能为空！'
+              }
+            ]
+          }
+        ]
+      }
+    },
+    props: {
+      item: Object,
+      pulginInstance: Array
+    },
+    methods: {
+      _ok () {
+        if (this._verification()) {
+          // The name is not verified
+          if (this.item && this.item.groupName === this.groupName) {
+            this._submit()
+            return
+          }
+
+          // Verify username
+          this.store.dispatch('security/verifyName', {
+            type: 'alertgroup',
+            groupName: this.groupName
+          }).then(res => {
+            this._submit()
+          }).catch(e => {
+            this.$message.error(e.msg || '')
+          })
+        }
+      },
+      _verification () {
+        // group name
+        if (!this.groupName.replace(/\s*/g, '')) {
+          this.$message.warning(`${i18n.$t('Please enter group name')}`)
+          return false
+        }
+        return true
+      },
+      changePlugin () {
+        console.log(this.rule)
+        console.log(this.pluginDefineId)
+        this.store.dispatch('security/getUiPluginsByID', {
+          pluginId: this.pluginDefineId
+        }).then(res => {
+          console.log(res)
+        }).catch(e => {
+          this.$message.error(e.msg || '')
+        })
+      },
+      _submit () {
+        let param = {
+          groupName: this.groupName,
+          groupType: this.groupType,
+          description: this.description
+        }
+        if (this.item) {
+          param.id = this.item.id
+        }
+        this.$refs.popup.spinnerLoading = true
+        this.store.dispatch(`security/${this.item ? 'updateAlertgrou' : 'createAlertgrou'}`, param).then(res => {
+          this.$emit('onUpdate')
+          this.$message.success(res.msg)
+          setTimeout(() => {
+            this.$refs.popup.spinnerLoading = false
+          }, 800)
+        }).catch(e => {
+          this.$message.error(e.msg || '')
+          this.$refs.popup.spinnerLoading = false
+        })
+      },
+      close () {
+        this.$emit('close')
+      }
+    },
+    watch: {},
+    created () {
+      if (this.item) {
+        this.groupName = this.item.groupName
+        this.groupType = this.item.groupType
+        this.description = this.item.description
+      }
+    },
+    mounted () {
+    },
+    components: { mPopup, mListBoxF }
+  }
+</script>
+<style lang="scss" rel="stylesheet/scss">
+  .alertForm {
+    .el-form-item__label {
+      width: 144px!important;
+    }
+    .el-form-item__content {
+      margin-left: 144px!important;
+      width: calc(100% - 162px);
+    }
+  }
+</style>

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/_source/list.vue

@@ -0,0 +1,131 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+<template>
+  <div class="list-model">
+    <div class="table-box">
+      <el-table :data="list" size="mini" style="width: 100%">
+        <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
+        <el-table-column prop="groupName" :label="$t('Group Name')"></el-table-column>
+        <el-table-column :label="$t('Group Type')" width="100">
+          <template slot-scope="scope">
+            {{scope.row.groupType === 'EMAIL' ? `${$t('Email')}` : `${$t('SMS')}`}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" :label="$t('Remarks')" width="200"></el-table-column>
+        <el-table-column :label="$t('Create Time')" width="140">
+          <template slot-scope="scope">
+            <span>{{scope.row.createTime | formatDate}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('Update Time')" width="140">
+          <template slot-scope="scope">
+            <span>{{scope.row.updateTime | formatDate}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('Operation')" width="130">
+          <template slot-scope="scope">
+            <el-tooltip :content="$t('Edit')" placement="top">
+              <span><el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="_edit(scope.row)" circle></el-button></span>
+            </el-tooltip>
+            <el-tooltip :content="$t('delete')" placement="top">
+              <el-popconfirm
+                :confirmButtonText="$t('Confirm')"
+                :cancelButtonText="$t('Cancel')"
+                icon="el-icon-info"
+                iconColor="red"
+                :title="$t('Delete?')"
+                @onConfirm="_delete(scope.row,scope.row.id)"
+              >
+                <el-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference" :disabled="scope.row.id==1?true: false"></el-button>
+              </el-popconfirm>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+  import { mapActions } from 'vuex'
+
+  export default {
+    name: 'user-list',
+    data () {
+      return {
+        list: [],
+        transferDialog: false,
+        item: {}
+      }
+    },
+    props: {
+      alertgroupList: Array,
+      pageNo: Number,
+      pageSize: Number
+    },
+    methods: {
+      ...mapActions('security', ['deleteAlertgrou', 'grantAuthorization']),
+      _delete (item, i) {
+        this.deleteAlertgrou({
+          id: item.id
+        }).then(res => {
+          this.$emit('on-update')
+          this.$message.success(res.msg)
+        }).catch(e => {
+          this.$message.error(e.msg || '')
+        })
+      },
+      _edit (item) {
+        this.$emit('on-edit', item)
+      },
+      onUpdate (userIds) {
+        this._grantAuthorization('alert-group/grant-user', {
+          userIds: userIds,
+          alertgroupId: this.item.id
+        })
+        this.transferDialog = false
+      },
+      close () {
+        this.transferDialog = false
+      },
+
+      _grantAuthorization (api, param) {
+        this.grantAuthorization({
+          api: api,
+          param: param
+        }).then(res => {
+          this.$message.success(res.msg)
+        }).catch(e => {
+          this.$message.error(e.msg || '')
+        })
+      }
+    },
+    watch: {
+      alertgroupList (a) {
+        this.list = []
+        setTimeout(() => {
+          this.list = a
+        })
+      }
+    },
+    created () {
+      this.list = this.alertgroupList
+    },
+    mounted () {
+    },
+    components: {}
+  }
+</script>

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/index.vue

@@ -0,0 +1,169 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+<template>
+  <m-list-construction :title="$t('Warning group manage')">
+    <template slot="conditions">
+      <m-conditions @on-conditions="_onConditions">
+        <template slot="button-group" v-if="isADMIN">
+          <el-button size="mini" @click="_create('')">{{$t('Create alarm group')}}</el-button>
+          <el-dialog
+            :visible.sync="createWarningDialog"
+            width="auto">
+            <m-create-warning :item="item" :pulginInstance="pulginInstance" @onUpdate="onUpdate" @close="close"></m-create-warning>
+          </el-dialog>
+        </template>
+      </m-conditions>
+    </template>
+    <template slot="content">
+      <template v-if="alertgroupList.length || total>0">
+        <m-list @on-edit="_onEdit"
+                @on-update="_onUpdate"
+                :alertgroup-list="alertgroupList"
+                :page-no="searchParams.pageNo"
+                :page-size="searchParams.pageSize">
+        </m-list>
+        <div class="page-box">
+          <el-pagination
+            background
+            @current-change="_page"
+            @size-change="_pageSize"
+            :page-size="searchParams.pageSize"
+            :current-page.sync="searchParams.pageNo"
+            :page-sizes="[10, 30, 50]"
+            layout="sizes, prev, pager, next, jumper"
+            :total="total">
+          </el-pagination>
+        </div>
+      </template>
+      <template v-if="!alertgroupList.length && total<=0">
+        <m-no-data></m-no-data>
+      </template>
+      <m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin>
+    </template>
+  </m-list-construction>
+</template>
+<script>
+  import _ from 'lodash'
+  import { mapActions } from 'vuex'
+  import mList from './_source/list'
+  import store from '@/conf/home/store'
+  import mSpin from '@/module/components/spin/spin'
+  import mCreateWarning from './_source/createWarning'
+  import mNoData from '@/module/components/noData/noData'
+  import listUrlParamHandle from '@/module/mixin/listUrlParamHandle'
+  import mConditions from '@/module/components/conditions/conditions'
+  import mListConstruction from '@/module/components/listConstruction/listConstruction'
+
+  export default {
+    name: 'warning-groups-index',
+    data () {
+      return {
+        total: null,
+        isLoading: false,
+        alertgroupList: [],
+        searchParams: {
+          pageSize: 10,
+          pageNo: 1,
+          searchVal: ''
+        },
+        isLeft: true,
+        isADMIN: store.state.user.userInfo.userType === 'ADMIN_USER',
+        createWarningDialog: false,
+        item: {},
+        pulginInstance: []
+      }
+    },
+    mixins: [listUrlParamHandle],
+    props: {},
+    methods: {
+      ...mapActions('security', ['getAlertgroupP', 'getPlugins']),
+      /**
+       * Inquire
+       */
+      _onConditions (o) {
+        this.searchParams = _.assign(this.searchParams, o)
+        this.searchParams.pageNo = 1
+      },
+      _page (val) {
+        this.searchParams.pageNo = val
+      },
+      _pageSize (val) {
+        this.searchParams.pageSize = val
+      },
+      _onUpdate () {
+        this._debounceGET()
+      },
+      _onEdit (item) {
+        this._create(item)
+      },
+      _create (item) {
+        this.getPlugins({ pluginType: 'ALERT' }).then(res => {
+          this.pulginInstance = res
+        }).catch(e => {
+          this.$message.error(e.msg)
+        })
+        this.item = item
+        this.createWarningDialog = true
+      },
+
+      onUpdate () {
+        this._debounceGET('false')
+        this.createWarningDialog = false
+      },
+
+      close () {
+        this.createWarningDialog = false
+      },
+
+      _getList (flag) {
+        if (sessionStorage.getItem('isLeft') === 0) {
+          this.isLeft = false
+        } else {
+          this.isLeft = true
+        }
+        this.isLoading = !flag
+        this.getAlertgroupP(this.searchParams).then(res => {
+          if (this.searchParams.pageNo > 1 && res.totalList.length === 0) {
+            this.searchParams.pageNo = this.searchParams.pageNo - 1
+          } else {
+            this.alertgroupList = []
+            this.alertgroupList = res.totalList
+            this.total = res.total
+            this.isLoading = false
+          }
+        }).catch(e => {
+          this.isLoading = false
+        })
+      }
+    },
+    watch: {
+      // router
+      '$route' (a) {
+        // url no params get instance list
+        this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo
+      }
+    },
+    created () {
+    },
+    mounted () {
+    },
+    beforeDestroy () {
+      sessionStorage.setItem('isLeft', 1)
+    },
+    components: { mList, mListConstruction, mConditions, mSpin, mNoData, mCreateWarning }
+  }
+</script>

dolphinscheduler-ui/src/js/conf/home/router/index.js

@@ -398,6 +398,14 @@ const router = new Router({
             title: `${i18n.$t('Warning group manage')}`
           }
         },
+        {
+          path: '/security/warning-Instance',
+          name: 'warning-instance-manage',
+          component: resolve => require(['../pages/security/pages/warningInstance/index'], resolve),
+          meta: {
+            title: `${i18n.$t('Warning instance manage')}`
+          }
+        },
         {
           path: '/security/queue',
           name: 'queue-manage',

dolphinscheduler-ui/src/js/conf/home/store/security/actions.js

@@ -351,6 +351,42 @@ export default {
       })
     })
   },
+  /**
+   * queryUiPlugins
+   */
+  getPlugins ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.post('ui-plugins/queryUiPluginsByType', payload, res => {
+        resolve(res.data)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  },
+  /**
+   * queryUiPluginsByID
+   */
+  getUiPluginsByID ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.post('ui-plugins/queryUiPluginsByID', payload, res => {
+        resolve(res.data)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  },
+  /**
+   * queryAll alert-plugin-instance
+   */
+  queryAllAlertPluginInstance ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.post('alert-plugin-instance/queryAll', payload, res => {
+        resolve(res.data)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  },
   /**
    * Alarm group list
    */

dolphinscheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js

@@ -109,6 +109,15 @@ const menu = {
       icon: 'el-icon-warning',
       children: []
     },
+    {
+      name: `${i18n.$t('Warning instance manage')}`,
+      id: 2,
+      path: 'warning-instance-manage',
+      isOpen: true,
+      enabled: true,
+      icon: 'ri-spam-fill',
+      children: []
+    },
     {
       name: `${i18n.$t('Worker group manage')}`,
       id: 4,

dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js

@@ -210,8 +210,11 @@ export default {
   'Edit alarm group': 'Edit alarm group',
   'Create alarm group': 'Create alarm group',
   'Group Name': 'Group Name',
+  'Alarm instance name': 'Alarm instance name',
+  'Select plugin': 'Select plugin',
   'Please enter group name': 'Please enter group name',
   'Group Type': 'Group Type',
+  'Alarm plugin instance': 'Alarm plugin instance',
   Remarks: 'Remarks',
   SMS: 'SMS',
   'Managing Users': 'Managing Users',
@@ -369,6 +372,7 @@ export default {
   'Process definition': 'Process definition',
   'Task record': 'Task record',
   'Warning group manage': 'Warning group manage',
+  'Warning instance manage': 'Warning instance manage',
   'Servers manage': 'Servers manage',
   'UDF manage': 'UDF manage',
   'Resource manage': 'Resource manage',

dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js

@@ -209,8 +209,11 @@ export default {
   'Edit alarm group': '编辑告警组',
   'Create alarm group': '创建告警组',
   'Group Name': '组名称',
+  'Alarm instance name': '告警实例名称',
+  'Select plugin': '选择插件',
   'Please enter group name': '请输入组名称',
   'Group Type': '组类型',
+  'Alarm plugin instance': '告警插件实例',
   Remarks: '备注',
   SMS: '短信',
   'Managing Users': '管理用户',
@@ -368,6 +371,7 @@ export default {
   'Process definition': '工作流定义',
   'Task record': '任务记录',
   'Warning group manage': '告警组管理',
+  'Warning instance manage': '告警实例管理',
   'Servers manage': '服务管理',
   'UDF manage': 'UDF管理',
   'Resource manage': '资源管理',