diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/createWarning.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/createWarning.vue
index b317096e18..0d3a335d8a 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/createWarning.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/createWarning.vue
@@ -38,12 +38,12 @@
         <m-list-box-f>
           <template slot="name"><strong>*</strong>{{$t('Alarm plugin instance')}}</template>
           <template slot="content">
-            <el-select v-model="groupType" size="small">
+            <el-select v-model="alertInstanceIds" size="small" style="width: 100%">
               <el-option
-                      v-for="city in options"
-                      :key="city.id"
-                      :value="city.id"
-                      :label="city.code">
+                      v-for="items in allAlertPluginInstance"
+                      :key="items.id"
+                      :value="items.id"
+                      :label="items.instanceName">
               </el-option>
             </el-select>
           </template>
@@ -75,7 +75,7 @@
       return {
         store,
         groupName: '',
-        groupType: 'EMAIL',
+        alertInstanceIds: null,
         description: '',
         options: [{ code: `${i18n.$t('Email')}`, id: 'EMAIL' }, { code: `${i18n.$t('SMS')}`, id: 'SMS' }]
       }
@@ -115,7 +115,7 @@
       _submit () {
         let param = {
           groupName: this.groupName,
-          groupType: this.groupType,
+          alertInstanceIds: this.alertInstanceIds,
           description: this.description
         }
         if (this.item) {
@@ -141,7 +141,7 @@
     created () {
       if (this.item) {
         this.groupName = this.item.groupName
-        this.groupType = this.item.groupType
+        this.alertInstanceIds = Number(this.item.alertInstanceIds)
         this.description = this.item.description
       }
     },
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue
index a06e868e15..c3c0a9e343 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/list.vue
@@ -20,11 +20,6 @@
       <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">
@@ -50,7 +45,7 @@
                 :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-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference"></el-button>
               </el-popconfirm>
             </el-tooltip>
           </template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue
index 88b16ef7a9..53b4783a53 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue
@@ -90,7 +90,7 @@
     mixins: [listUrlParamHandle],
     props: {},
     methods: {
-      ...mapActions('security', ['getAlertgroupP', 'queryAllAlertPluginInstance']),
+      ...mapActions('security', ['queryAlertGroupListPaging', 'queryAllAlertPluginInstance']),
       /**
        * Inquire
        */
@@ -112,7 +112,7 @@
       },
       _create (item) {
         this.queryAllAlertPluginInstance().then(res => {
-          this.allAlertPluginInstance = res.data
+          this.allAlertPluginInstance = res
         }).catch(e => {
           this.$message.error(e.msg)
         })
@@ -136,7 +136,7 @@
           this.isLeft = true
         }
         this.isLoading = !flag
-        this.getAlertgroupP(this.searchParams).then(res => {
+        this.queryAlertGroupListPaging(this.searchParams).then(res => {
           if (this.searchParams.pageNo > 1 && res.totalList.length === 0) {
             this.searchParams.pageNo = this.searchParams.pageNo - 1
           } else {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/_source/createWarning.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/_source/createWarningInstance.vue
similarity index 67%
rename from dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/_source/createWarning.vue
rename to dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/_source/createWarningInstance.vue
index 9bdea2543e..7ce296e272 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/_source/createWarning.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/_source/createWarningInstance.vue
@@ -18,7 +18,7 @@
   <m-popup
           ref="popup"
           :ok-text="item ? $t('Edit') : $t('Submit')"
-          :nameText="item ? $t('Edit alarm group') : $t('Create alarm group')"
+          :nameText="item ? $t('Edit Alarm Instance') : $t('Create Alarm Instance')"
           @ok="_ok"
           @close="close">
     <template slot="content">
@@ -28,7 +28,7 @@
           <template slot="content">
             <el-input
                     type="input"
-                    v-model="groupName"
+                    v-model="instanceName"
                     maxlength="60"
                     size="small"
                     :placeholder="$t('Please enter group name')">
@@ -38,7 +38,15 @@
         <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-select v-model="pluginDefineId" size="small" style="width: 100%" @change="changePlugin" disabled="true" v-if="item.id">
+              <el-option
+                      v-for="items in pulginInstance"
+                      :key="items.id"
+                      :value="items.id"
+                      :label="items.pluginName">
+              </el-option>
+            </el-select>
+            <el-select v-model="pluginDefineId" size="small" style="width: 100%" @change="changePlugin" v-else>
               <el-option
                       v-for="items in pulginInstance"
                       :key="items.id"
@@ -68,34 +76,11 @@
     data () {
       return {
         store,
-        groupName: '',
+        instanceName: '',
         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: '用户名称不能为空！'
-              }
-            ]
-          }
-        ]
+        rule: []
       }
     },
     props: {
@@ -106,15 +91,15 @@
       _ok () {
         if (this._verification()) {
           // The name is not verified
-          if (this.item && this.item.groupName === this.groupName) {
+          if (this.item && this.item.instanceName === this.instanceName) {
             this._submit()
             return
           }
 
           // Verify username
           this.store.dispatch('security/verifyName', {
-            type: 'alertgroup',
-            groupName: this.groupName
+            type: 'alarmInstance',
+            instanceName: this.instanceName
           }).then(res => {
             this._submit()
           }).catch(e => {
@@ -124,34 +109,56 @@
       },
       _verification () {
         // group name
-        if (!this.groupName.replace(/\s*/g, '')) {
+        if (!this.instanceName.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.rule = [
+        //   {
+        //     type: 'input',
+        //     field: 'dingTalkWebHook',
+        //     className: 'user-name-dom',
+        //     title: $t('Alarm instance name'),
+        //     value: null,
+        //     props: {
+        //       placeholder: '请输入用户名称！',
+        //       size: 'small',
+        //       disabled: false,
+        //       readonly: false,
+        //       clearable: true
+        //     },
+        //     validate: [
+        //       {
+        //         trigger: 'blur',
+        //         required: true,
+        //         message: '用户名称不能为空！'
+        //       }
+        //     ]
+        //   }
+        // ]
         this.store.dispatch('security/getUiPluginsByID', {
           pluginId: this.pluginDefineId
         }).then(res => {
-          console.log(res)
+          this.rule = JSON.parse(res.pluginParams)
         }).catch(e => {
           this.$message.error(e.msg || '')
         })
       },
       _submit () {
         let param = {
-          groupName: this.groupName,
-          groupType: this.groupType,
-          description: this.description
+          instanceName: this.instanceName,
+          pluginDefineId: this.pluginDefineId,
+          pluginInstanceParams: JSON.stringify(this.$f.rule)
         }
         if (this.item) {
-          param.id = this.item.id
+          param.alertPluginInstanceId = this.item.id
+          param.pluginDefineId = null
         }
         this.$refs.popup.spinnerLoading = true
-        this.store.dispatch(`security/${this.item ? 'updateAlertgrou' : 'createAlertgrou'}`, param).then(res => {
+        this.store.dispatch(`security/${this.item ? 'updateAlertPluginInstance' : 'createAlertPluginInstance'}`, param).then(res => {
           this.$emit('onUpdate')
           this.$message.success(res.msg)
           setTimeout(() => {
@@ -169,9 +176,9 @@
     watch: {},
     created () {
       if (this.item) {
-        this.groupName = this.item.groupName
-        this.groupType = this.item.groupType
-        this.description = this.item.description
+        this.instanceName = this.item.instanceName
+        this.pluginDefineId = this.item.pluginDefineId
+        this.rule = JSON.parse(this.item.pluginInstanceParams)
       }
     },
     mounted () {
@@ -181,8 +188,14 @@
 </script>
 <style lang="scss" rel="stylesheet/scss">
   .alertForm {
+    label {
+      span {
+        font-weight: 10!important;
+      }
+    }
     .el-form-item__label {
       width: 144px!important;
+      color: #606266!important;
     }
     .el-form-item__content {
       margin-left: 144px!important;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/_source/list.vue
index a06e868e15..5a8cf2ad1b 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/_source/list.vue
@@ -19,19 +19,13 @@
     <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">
+        <el-table-column prop="instanceName" :label="$t('Alarm instance name')"></el-table-column>
+        <el-table-column :label="$t('Create Time')">
           <template slot-scope="scope">
             <span>{{scope.row.createTime | formatDate}}</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Update Time')" width="140">
+        <el-table-column :label="$t('Update Time')">
           <template slot-scope="scope">
             <span>{{scope.row.updateTime | formatDate}}</span>
           </template>
@@ -50,7 +44,7 @@
                 :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-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference"></el-button>
               </el-popconfirm>
             </el-tooltip>
           </template>
@@ -77,9 +71,9 @@
       pageSize: Number
     },
     methods: {
-      ...mapActions('security', ['deleteAlertgrou', 'grantAuthorization']),
+      ...mapActions('security', ['deletAelertPluginInstance']),
       _delete (item, i) {
-        this.deleteAlertgrou({
+        this.deletAelertPluginInstance({
           id: item.id
         }).then(res => {
           this.$emit('on-update')
@@ -91,26 +85,8 @@
       _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: {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/index.vue
index 72f0b7d629..54a8177e9e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/index.vue
@@ -15,21 +15,21 @@
  * limitations under the License.
  */
 <template>
-  <m-list-construction :title="$t('Warning group manage')">
+  <m-list-construction :title="$t('Warning instance 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-button size="mini" @click="_create('')">{{$t('Create Alarm Instance')}}</el-button>
           <el-dialog
             :visible.sync="createWarningDialog"
-            width="auto">
-            <m-create-warning :item="item" :pulginInstance="pulginInstance" @onUpdate="onUpdate" @close="close"></m-create-warning>
+            width="45%">
+            <m-create-warning-instance :item="item" :pulginInstance="pulginInstance" @onUpdate="onUpdate" @close="close"></m-create-warning-instance>
           </el-dialog>
         </template>
       </m-conditions>
     </template>
     <template slot="content">
-      <template v-if="alertgroupList.length || total>0">
+      <template v-if="alertgroupList!==null || total>0 ">
         <m-list @on-edit="_onEdit"
                 @on-update="_onUpdate"
                 :alertgroup-list="alertgroupList"
@@ -49,7 +49,7 @@
           </el-pagination>
         </div>
       </template>
-      <template v-if="!alertgroupList.length && total<=0">
+      <template v-if="alertgroupList===null && total<=0">
         <m-no-data></m-no-data>
       </template>
       <m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin>
@@ -62,14 +62,14 @@
   import mList from './_source/list'
   import store from '@/conf/home/store'
   import mSpin from '@/module/components/spin/spin'
-  import mCreateWarning from './_source/createWarning'
+  import mCreateWarningInstance from './_source/createWarningInstance'
   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',
+    name: 'warning-instance-index',
     data () {
       return {
         total: null,
@@ -90,7 +90,7 @@
     mixins: [listUrlParamHandle],
     props: {},
     methods: {
-      ...mapActions('security', ['getAlertgroupP', 'getPlugins']),
+      ...mapActions('security', ['queryAlertPluginInstanceListPaging', 'getPlugins']),
       /**
        * Inquire
        */
@@ -136,7 +136,7 @@
           this.isLeft = true
         }
         this.isLoading = !flag
-        this.getAlertgroupP(this.searchParams).then(res => {
+        this.queryAlertPluginInstanceListPaging(this.searchParams).then(res => {
           if (this.searchParams.pageNo > 1 && res.totalList.length === 0) {
             this.searchParams.pageNo = this.searchParams.pageNo - 1
           } else {
@@ -164,6 +164,6 @@
     beforeDestroy () {
       sessionStorage.setItem('isLeft', 1)
     },
-    components: { mList, mListConstruction, mConditions, mSpin, mNoData, mCreateWarning }
+    components: { mList, mListConstruction, mConditions, mSpin, mNoData, mCreateWarningInstance }
   }
 </script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/router/index.js b/dolphinscheduler-ui/src/js/conf/home/router/index.js
index 9b81b66783..af74919307 100644
--- a/dolphinscheduler-ui/src/js/conf/home/router/index.js
+++ b/dolphinscheduler-ui/src/js/conf/home/router/index.js
@@ -399,7 +399,7 @@ const router = new Router({
           }
         },
         {
-          path: '/security/warning-Instance',
+          path: '/security/warning-instance',
           name: 'warning-instance-manage',
           component: resolve => require(['../pages/security/pages/warningInstance/index'], resolve),
           meta: {
diff --git a/dolphinscheduler-ui/src/js/conf/home/store/security/actions.js b/dolphinscheduler-ui/src/js/conf/home/store/security/actions.js
index f92608396c..48eaa12c41 100644
--- a/dolphinscheduler-ui/src/js/conf/home/store/security/actions.js
+++ b/dolphinscheduler-ui/src/js/conf/home/store/security/actions.js
@@ -43,6 +43,12 @@ export default {
           groupName: payload.groupName
         },
         api: 'alert-group/verify-group-name'
+      },
+      alarmInstance: {
+        param: {
+          alertInstanceName: payload.instanceName
+        },
+        api: 'alert-plugin-instance/verify-alert-instance-name'
       }
     }
 
@@ -340,9 +346,9 @@ export default {
     })
   },
   /**
-   * Paging query alarm group list
+   * queryAlertGroupListPaging
    */
-  getAlertgroupP ({ state }, payload) {
+  queryAlertGroupListPaging ({ state }, payload) {
     return new Promise((resolve, reject) => {
       io.get('alert-group/list-paging', payload, res => {
         resolve(res.data)
@@ -351,6 +357,18 @@ export default {
       })
     })
   },
+  /**
+   * queryAlertPluginInstanceListPaging
+   */
+  queryAlertPluginInstanceListPaging ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.get('alert-plugin-instance/list-paging', payload, res => {
+        resolve(res.data)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  },
   /**
    * queryUiPlugins
    */
@@ -411,6 +429,30 @@ export default {
       })
     })
   },
+  /**
+   * create alert plugin instance operation
+   */
+  createAlertPluginInstance ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.post('alert-plugin-instance/create', payload, res => {
+        resolve(res)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  },
+  /**
+   * update alert plugin instance operation
+   */
+  updateAlertPluginInstance ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.get('alert-plugin-instance/update', payload, res => {
+        resolve(res)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  },
   /**
    * update an alarm group.
    */
@@ -435,6 +477,18 @@ export default {
       })
     })
   },
+  /**
+   * delete alert plugin instance operation
+   */
+  deletAelertPluginInstance ({ state }, payload) {
+    return new Promise((resolve, reject) => {
+      io.get('alert-plugin-instance/delete', payload, res => {
+        resolve(res)
+      }).catch(e => {
+        reject(e)
+      })
+    })
+  },
   /**
    * Master list
    */
diff --git a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
index 39d30eecdf..145330420c 100755
--- a/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
+++ b/dolphinscheduler-ui/src/js/module/i18n/locale/en_US.js
@@ -210,6 +210,8 @@ export default {
   'Edit alarm group': 'Edit alarm group',
   'Create alarm group': 'Create alarm group',
   'Group Name': 'Group Name',
+  'Create Alarm Instance': 'Create Alarm Instance',
+  'Edit Alarm Instance': 'Edit Alarm Instance',
   'Alarm instance name': 'Alarm instance name',
   'Select plugin': 'Select plugin',
   'Please enter group name': 'Please enter group name',
diff --git a/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js b/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
index b6dccdb3bc..3bdc62d08c 100755
--- a/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
+++ b/dolphinscheduler-ui/src/js/module/i18n/locale/zh_CN.js
@@ -208,6 +208,8 @@ export default {
   'Please select UDF resources directory': '请选择UDF资源目录',
   'Edit alarm group': '编辑告警组',
   'Create alarm group': '创建告警组',
+  'Create Alarm Instance': '创建告警实例',
+  'Edit Alarm Instance': '编辑告警实例',
   'Group Name': '组名称',
   'Alarm instance name': '告警实例名称',
   'Select plugin': '选择插件',