diff --git a/dbmind/common/parser/sql_parsing.py b/dbmind/common/parser/sql_parsing.py
index 90cbeb75d41b69a4363720b2dc53d29424014ce5..3ea4a969b1d0579b9cf4785a23a3f5a8c27f59da 100644
--- a/dbmind/common/parser/sql_parsing.py
+++ b/dbmind/common/parser/sql_parsing.py
@@ -246,10 +246,11 @@ def exists_bool_clause(query):
     def get_in_clause(parsed):
         for item in parsed:
             if item.is_group:
-                if isinstance(item, Parenthesis) and isinstance(item.parent, Comparison):
+                if isinstance(item, Parenthesis) and isinstance(item.parent, Where):
                     comparisons = [subitem.value for subitem in item.parent.tokens if
-                                   subitem.ttype == sqlparse.tokens.Token.Operator.Comparison]
-                    if any(op in comparisons for op in ('not in',)):
+                                   subitem.ttype == sqlparse.tokens.Token.Keyword]
+                    if any(comparisons[i - 1] == 'not' for i, x in enumerate(comparisons) if x == 'in') \
+                            or any(op in comparisons for op in ('not in',)):
                         for sub_item in item.tokens:
                             if isinstance(sub_item, IdentifierList):
                                 flags.append(sub_item.value.split(','))
diff --git a/dbmind/controllers/dbmind_core.py b/dbmind/controllers/dbmind_core.py
index 041603267abf101c1e82a04908b28ce5541de2cc..51e805592a09a86304d223ad8110bddb55bdd038 100644
--- a/dbmind/controllers/dbmind_core.py
+++ b/dbmind/controllers/dbmind_core.py
@@ -294,6 +294,14 @@ def get_db_list():
     return data_transformer.get_database_list()
 
 
+@request_mapping('/api/list/users', methods=['GET'], api=True)
+@oauth2.token_authentication()
+@standardized_api_output
+def get_users():
+    username, password = oauth2.credential
+    return data_transformer.get_users(username, password)
+
+
 @request_mapping('/api/summary/index_advisor', methods=['GET'], api=True)
 @oauth2.token_authentication()
 @standardized_api_output
diff --git a/dbmind/service/web/data_transformer.py b/dbmind/service/web/data_transformer.py
index 5033dbbec8dee696421db286b8075548363e23c1..098b177046f50bf1740c208b0e4a24d07441c7d8 100644
--- a/dbmind/service/web/data_transformer.py
+++ b/dbmind/service/web/data_transformer.py
@@ -390,6 +390,15 @@ def get_database_list():
     return list(rv)
 
 
+def get_users(username, password):
+    stmt = 'select usename from pg_user;'
+    _res = global_vars.agent_proxy.current_rpc().call_with_another_credential(username, password, 'query_in_postgres', stmt)
+    res = []
+    for user in psycopg2_dict_jsonify(_res).get('rows', []):
+        res.append(user[0])
+    return res
+
+
 def get_cluster_summary():
     node_status = get_cluster_node_status()['node_list']
     nb_node = len(node_status)
diff --git a/ui/src/api/aiTool.js b/ui/src/api/aiTool.js
index a3c22f650d3f686ad7de5bd200b9b0703cc6413b..9b2686c07f95ff0eb85cbdd481c1bedf3b73cf89 100644
--- a/ui/src/api/aiTool.js
+++ b/ui/src/api/aiTool.js
@@ -6,6 +6,9 @@ import {
 export const getItemListInterface = () => {
   return get('/list/database');
 };
+export const getUserItemListInterface = () => {
+  return get('/list/users');
+};
 export const getListIndexAdvisorInterface = (data) => {
   return post(`/toolkit/advise/index?database=${data.database}&instance=${data.instance}&max_index_num=${data.max_index_num}&max_index_storage=${data.max_index_storage}&current=${data.current}&pagesize=${data.pagesize}`, data.textareaVal);
 };
diff --git a/ui/src/components/AutonomousManagement/AlarmsModules/SelfhealingRecordsTable.jsx b/ui/src/components/AutonomousManagement/AlarmsModules/SelfhealingRecordsTable.jsx
index 450e08b153ddc68435172eb4cb47dd4f51b7a0a8..0257052dd435f23871534da2236652e86b0bd17b 100644
--- a/ui/src/components/AutonomousManagement/AlarmsModules/SelfhealingRecordsTable.jsx
+++ b/ui/src/components/AutonomousManagement/AlarmsModules/SelfhealingRecordsTable.jsx
@@ -7,6 +7,10 @@ import Setup from '../../../assets/imgs/Setup.png';
 import { getSelfhealingface, getSelfhealingSetting, getSelfhealingSubmit, getSelfhealingDelete, getSelfhealingPause, getSelfhealingResumption } from '../../../api/autonomousManagement';
 
 const { Option } = Select;
+const formItemLayout = {
+  labelCol:{ span: 7,offset: 4},
+  wrapperCol:{ span: 12 }
+}
 export default class SelfhealingRecordsTable extends Component {
   constructor() {
     super()
@@ -374,8 +378,6 @@ export default class SelfhealingRecordsTable extends Component {
         {!this.state.isModalVisible ? null :<Modal title={this.state.modelTitle}  width="40vw" destroyOnClose={true} bodyStyle={{overflowY: "auto",overflowX:"none",height: "60vh"}} visible={this.state.isModalVisible} maskClosable = {false} centered='true' 
         onOk={() => this.validateFieldValue()} onCancel={() => this.handleCancel()} okButtonProps={{disabled: this.state.isDisabled}} className='formlistclass'>
               <Form
-                labelCol={{ span: 7,offset: 4}}
-                wrapperCol={{ span: 12 }}
                 layout='horizontal'
                 disabled={this.state.isDisabled}
                 style={{ maxWidth: 520 }}
@@ -384,13 +386,13 @@ export default class SelfhealingRecordsTable extends Component {
                 }}
                 autoComplete="off"
               >
-                <Form.Item name="name" label="name" rules={[{required: true, message: 'Missing name'}]}>
+                <Form.Item {...formItemLayout} name="name" label="name" rules={[{required: true, message: 'Missing name'}]}>
                   <Input placeholder="" allowClear={true} />
                 </Form.Item>
-                <Form.Item name="duration" label="duration(second)" rules={[{required: true, message: 'Missing duration'}]}>
+                <Form.Item {...formItemLayout} name="duration" label="duration(second)" rules={[{required: true, message: 'Missing duration'}]}>
                   <InputNumber min={1} style={{ width: 260 }} />
                 </Form.Item>
-                <Form.Item name="alarm_type" label="alarm type"  rules={[{required: true, message: 'Missing alarm type'}]}>
+                <Form.Item {...formItemLayout} name="alarm_type" label="alarm type"  rules={[{required: true, message: 'Missing alarm type'}]}>
                   <Select value={this.state.alarmtypeValue} onChange={(val) => { this.changeAlarmtypeVal(val) }} showSearch
                       optionFilterProp="children" filterOption={(input, option) =>
                         option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} style={{ width: 260 }}>
@@ -403,7 +405,7 @@ export default class SelfhealingRecordsTable extends Component {
                       }
                   </Select>
                 </Form.Item>
-                <Form.Item name="alarm_level" label="alarm level" rules={[{required: true, message: 'Missing alarm level'}]}>
+                <Form.Item {...formItemLayout} name="alarm_level" label="alarm level" rules={[{required: true, message: 'Missing alarm level'}]}>
                   <Select value={this.state.alarmlevelValue} onChange={(val) => { this.changeAlarmlevelVal(val) }} showSearch
                       optionFilterProp="children" filterOption={(input, option) =>
                         option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} style={{ width: 260 }}>
@@ -416,13 +418,13 @@ export default class SelfhealingRecordsTable extends Component {
                       }
                   </Select>
                 </Form.Item>
-                <Form.Item name="alarm_content" label="alarm content">
+                <Form.Item {...formItemLayout} name="alarm_content" label="alarm content">
                   <Input placeholder="" allowClear={true} />
                 </Form.Item>
-                <Form.Item name="alarm_cause" label="alarm cause">
+                <Form.Item {...formItemLayout} name="alarm_cause" label="alarm cause">
                   <Input placeholder="" allowClear={true} />
                 </Form.Item>
-                <Form.Item name="extra" label="extra">
+                <Form.Item {...formItemLayout} name="extra" label="extra">
                   <Input placeholder="" allowClear={true} />
                 </Form.Item>
                 <Form.Item shouldUpdate >
@@ -435,6 +437,7 @@ export default class SelfhealingRecordsTable extends Component {
                               <CloseOutlined onClick={() => remove(field.name)} style={{display:this.state.isDisabled ? 'none' :'block',textAlign:'end',marginBottom:24}} />
                                   <Form.Item
                                     {...field}
+                                    {...formItemLayout}
                                     style={{ width: 520 }}
                                     label="detectorName"
                                     name={[field.name, 'detector_name']}
@@ -459,7 +462,8 @@ export default class SelfhealingRecordsTable extends Component {
                                   </Form.Item>
                               <Form.Item
                                 {...field}
-                                style={{ width: 380 }}
+                                {...formItemLayout}
+                                style={{ width: 520 }}
                                 label="metricName"
                                 name={[field.name, 'metric_name']}
                                 key={[field.key, 'metric_name']}
@@ -474,7 +478,8 @@ export default class SelfhealingRecordsTable extends Component {
                               </Form.Item>
                               <Form.Item
                                 {...field}
-                                style={{ width: 380 }}
+                                {...formItemLayout}
+                                style={{ width: 520 }}
                                 label="Host"
                                 name={[field.name, 'from_instance']}
                                 key={[field.key, "from_instance"]}
@@ -499,6 +504,7 @@ export default class SelfhealingRecordsTable extends Component {
                                             this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'VolatilityShiftDetector' ?<Form.Item
                                             {...field}
                                             label='side'
+                                            {...formItemLayout}
                                             name={[field.name, 'side']}
                                             key={[field.key, 'side']}
                                             rules={[
@@ -518,6 +524,7 @@ export default class SelfhealingRecordsTable extends Component {
                                           </Form.Item>:null}
                                           {this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'GradientDetector' ?<Form.Item
                                             {...field}
+                                            {...formItemLayout}
                                             label='max_coef'
                                             name={[field.name, 'max_coef']}
                                             key={[field.key, 'max_coef']}
@@ -533,6 +540,7 @@ export default class SelfhealingRecordsTable extends Component {
                                           {this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'EsdTestDetector' ||
                                             this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'IncreaseDetector' ? <Form.Item
                                             {...field}
+                                            {...formItemLayout}
                                             label='alpha'
                                             name={[field.name, 'alpha']}
                                             key={[field.key, 'alpha']}
@@ -551,6 +559,7 @@ export default class SelfhealingRecordsTable extends Component {
                                             this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) ==='SeasonalDetector'|| 
                                             this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) ==='SpikeDetector'?<Form.Item
                                             {...field}
+                                            {...formItemLayout}
                                             label='upperOutlier'
                                             name={[field.name, 'upperOutlier']}
                                             key={[field.key, 'upperOutlier']}
@@ -568,6 +577,7 @@ export default class SelfhealingRecordsTable extends Component {
                                             this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) ==='SeasonalDetector'|| 
                                             this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) ==='SpikeDetector'?<Form.Item
                                             {...field}
+                                            {...formItemLayout}
                                             label='lowerOutlier'
                                             name={[field.name, 'lowerOutlier']}
                                             key={[field.key, 'lowerOutlier']}
@@ -585,6 +595,7 @@ export default class SelfhealingRecordsTable extends Component {
                                             this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'SpikeDetector'||
                                             this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'VolatilityShiftDetector' ? <Form.Item
                                             {...field}
+                                            {...formItemLayout}
                                             label='window'
                                             name={[field.name, 'window']}
                                             key={[field.key, 'window']}
@@ -600,6 +611,7 @@ export default class SelfhealingRecordsTable extends Component {
                                           {this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'QuantileDetector'||
                                             this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'ThresholdDetector' ? <Form.Item
                                             {...field}
+                                            {...formItemLayout}
                                             label='high'
                                             name={[field.name, 'high']}
                                             key={[field.key, 'high']}
@@ -615,6 +627,7 @@ export default class SelfhealingRecordsTable extends Component {
                                           {this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'QuantileDetector'||
                                             this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'ThresholdDetector' ? <Form.Item
                                             {...field}
+                                            {...formItemLayout}
                                             label='low'
                                             name={[field.name, 'low']}
                                             key={[field.key, 'low']}
@@ -629,6 +642,7 @@ export default class SelfhealingRecordsTable extends Component {
                                           </Form.Item>:null}
                                           {this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'SeasonalDetector' ? <Form.Item
                                             {...field}
+                                            {...formItemLayout}
                                             label='high_ac_threshold'
                                             name={[field.name, 'high_ac_threshold']}
                                             key={[field.key, 'high_ac_threshold']}
@@ -643,6 +657,7 @@ export default class SelfhealingRecordsTable extends Component {
                                           </Form.Item>:null}
                                           {this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'SeasonalDetector' ? <Form.Item
                                             {...field}
+                                            {...formItemLayout}
                                             label='min_seasonal_freq'
                                             name={[field.name, 'min_seasonal_freq']}
                                             key={[field.key, 'min_seasonal_freq']}
@@ -657,6 +672,7 @@ export default class SelfhealingRecordsTable extends Component {
                                           </Form.Item> : null}
                                           {this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'SeasonalDetector' ? <Form.Item
                                             {...field}
+                                            {...formItemLayout}
                                             label='period'
                                             name={[field.name, 'period']}
                                             key={[field.key, 'period']}
@@ -673,6 +689,7 @@ export default class SelfhealingRecordsTable extends Component {
                                             this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'SpikeDetector'||
                                             this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'VolatilityShiftDetector' ? <Form.Item
                                             {...field}
+                                            {...formItemLayout}
                                             label='agg'
                                             name={[field.name, 'agg']}
                                             key={[field.key, 'agg']}
@@ -693,6 +710,7 @@ export default class SelfhealingRecordsTable extends Component {
                                           </Form.Item>:null}
                                           {this.FormRef.getFieldValue(['detectors', field.name, 'detector_name' ]) === 'ThresholdDetector' ? <Form.Item
                                             {...field}
+                                            {...formItemLayout}
                                             label='percentage'
                                             name={[field.name, 'percentage']}
                                             key={[field.key, 'percentage']}
diff --git a/ui/src/components/AutonomousManagement/IntelligentInspectionModules/InspectionTask.jsx b/ui/src/components/AutonomousManagement/IntelligentInspectionModules/InspectionTask.jsx
index df3c374f6120149d606f50ed82b2b0f228013f4a..854a5c61d4ff7521e392011cf797045cf17d7932 100644
--- a/ui/src/components/AutonomousManagement/IntelligentInspectionModules/InspectionTask.jsx
+++ b/ui/src/components/AutonomousManagement/IntelligentInspectionModules/InspectionTask.jsx
@@ -74,7 +74,7 @@ export default class InspectionTask extends Component {
                 title="Sure to delete?"
                 onConfirm={() => this.handleDelete(record)}
               >
-                <span>Delete</span>
+                <span className="deleteStyle">Delete</span>
               </Popconfirm>
             );
           } else {
@@ -112,6 +112,10 @@ export default class InspectionTask extends Component {
     this.setState({ isModalVisible: true });
   }
   async handleOk() {
+    if(this.state.checkedKey === "real_time_check" && !this.state.startTime){
+      message.warning("Please select time!");
+      return;
+    }
     let params = {
       inspectionType: this.state.checkedKey,
       startTime: this.state.startTime,
diff --git a/ui/src/components/DatabaseOptimization/IndexTuning.jsx b/ui/src/components/DatabaseOptimization/IndexTuning.jsx
index 4afcbc40be242b69a4310417e699c89dc03f3f65..1c71f6929e9157d7e5257597370cbf569d971555 100644
--- a/ui/src/components/DatabaseOptimization/IndexTuning.jsx
+++ b/ui/src/components/DatabaseOptimization/IndexTuning.jsx
@@ -135,8 +135,8 @@ export default class IndexTuning extends Component {
   render () {
     return (
       <div className="contentWrap">
-        <div className="indexTuning">
-          {this.state.showflag ? <Spin style={{ margin: '260px 0 ' }} /> :
+        <div className="indexTuning"style={{textAlign:'center'}}>
+          {this.state.showflag ? <Spin style={{ margin: '260px 0 '}} /> :
             <>
               <TopShowList topList={this.state.topList} />
             
diff --git a/ui/src/components/DatabaseOptimization/IntelligentSqlCondition.jsx b/ui/src/components/DatabaseOptimization/IntelligentSqlCondition.jsx
index 01cba67faf45d4e581907808f1bd06a2f45fc011..2c31e26a0e13a3878950de296952fca361711694 100644
--- a/ui/src/components/DatabaseOptimization/IntelligentSqlCondition.jsx
+++ b/ui/src/components/DatabaseOptimization/IntelligentSqlCondition.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Button, Input, message, Select, Card, Col, Row, Table, Form, DatePicker, Checkbox, Modal, InputNumber,Radio } from 'antd';
-import { getItemListInterface } from '../../api/aiTool';
+import { getItemListInterface, getUserItemListInterface } from '../../api/aiTool';
 import { getIntelligentSqlCondition } from '../../api/databaseOptimization';
 import ReactEcharts from 'echarts-for-react';
 import moment from 'moment';
@@ -21,6 +21,7 @@ export default class IntelligentSqlCondition extends Component {
       columns: [],
       loading: false,
       options: [],
+      userDatas: [],
       optionsSource: ['pg_stat_activity','dbe_perf.statement_history','asp'],
       selValue: 'pg_stat_activity',
       isCreateVisible:false,
@@ -74,6 +75,14 @@ export default class IntelligentSqlCondition extends Component {
       message.error(msg)
     }
   }
+  async getUserItemList () {
+    const { success, data, msg } = await getUserItemListInterface()
+    if (success) {
+      this.setState({userDatas: data})
+    } else {
+      message.error(msg)
+    }
+  }
   async getIntelligentSqlAnalysis (params) {
     this.setState({ loading: true })
     const { success, msg, data } = await getIntelligentSqlCondition(params)
@@ -196,7 +205,8 @@ export default class IntelligentSqlCondition extends Component {
     this.setState(() => ({routeTo: flg}))
   }
   componentDidMount () {
-    this.getItemList()
+    this.getItemList();
+    this.getUserItemList();
   }
   render () {
     return (
@@ -272,35 +282,45 @@ export default class IntelligentSqlCondition extends Component {
                     <InputNumber  min={0} placeholder="10ms" style={{ width: 260 }} />
                   </Form.Item>
                 </Col>}
-                <Col span={24}>
+                <Col span={24} className="errorinvalid">
                   <Form.Item
-                    label="User"
-                    name="users"
+                    label="Database"
+                    name="database"
                     rules={[
                       {
                         required: true,
-                        message: 'The value cannot be empty',
+                        message: 'Please select an option!',
                       }
                     ]}
                   >
-                    <Input placeholder="user" style={{ width: 600 }} />
+                    <Select showSearch optionFilterProp="children" filterOption={(input, option) =>
+                        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} style={{ width: 600 }}>
+                      {
+                        this.state.options.map(item => {
+                          return (
+                            <Option value={item} key={item}>{item}</Option>
+                          )
+                        })
+                      }
+                    </Select>
                   </Form.Item>
                 </Col>
-                <Col span={24} className="errorinvalid">
+                <Col span={24}>
                   <Form.Item
-                    label="Database"
-                    name="database"
+                    label="User"
+                    name="users"
                     rules={[
                       {
                         required: true,
-                        message: 'Please select an option!',
+                        message: 'The value cannot be empty',
                       }
                     ]}
                   >
+                    {/* <Input placeholder="user" style={{ width: 600 }} /> */}
                     <Select showSearch optionFilterProp="children" filterOption={(input, option) =>
                         option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} style={{ width: 600 }}>
                       {
-                        this.state.options.map(item => {
+                        this.state.userDatas.map(item => {
                           return (
                             <Option value={item} key={item}>{item}</Option>
                           )
diff --git a/ui/src/components/DatabaseOptimization/SlowQueryAnalysis.jsx b/ui/src/components/DatabaseOptimization/SlowQueryAnalysis.jsx
index dac680135f2f23770548d3b9fde2ac3adcf24fed..8f35e7e984d7a1a0ec4851ff55bc2f0ca769e2cf 100644
--- a/ui/src/components/DatabaseOptimization/SlowQueryAnalysis.jsx
+++ b/ui/src/components/DatabaseOptimization/SlowQueryAnalysis.jsx
@@ -452,9 +452,6 @@ export default class SlowQueryAnalysis extends Component {
                       <MeanBufferHitRateChart
                         meanBufferHitRate={this.state.meanBufferHitRate}
                       />
-                      <MeanFetchTimeChart
-                        meanFetchTime={this.state.meanFetchTime}
-                      />
                     </div>
                   </div>
                   <div className="queryTable">
diff --git a/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanBufferHitRateChart.jsx b/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanBufferHitRateChart.jsx
index fbb0ae8be7a2c6679dd702c668c43e0eb8367f95..ac71d09255c6ec54854755deb6c87cabc76cf30e 100644
--- a/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanBufferHitRateChart.jsx
+++ b/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanBufferHitRateChart.jsx
@@ -23,7 +23,7 @@ export default class MeanBufferHitRateChart extends Component {
           axisLine: {
             roundCap:true,
             lineStyle: {
-              width: 18,
+              width: 8,
             },
           },
           progress: {
@@ -48,11 +48,6 @@ export default class MeanBufferHitRateChart extends Component {
               return value.toFixed(0);
             },
           },
-          axisLine: {
-            lineStyle: {
-              width: 8,
-            },
-          },
           anchor: {
             show: true,
             showAbove: true,
@@ -115,13 +110,13 @@ export default class MeanBufferHitRateChart extends Component {
   render () {
     return (
       
-        <Card title="Mean Buffer Hit Rate for Slow Query">
+        <Card title={<span style={{fontWeight:'normal'}} title="Mean Buffer Hit Rate for Slow Query">Mean Buffer Hit Rate for Slow Query</span>} style={{ height: 322}}>
           <ReactEcharts
             ref={(e) => {
               this.echartsElement = e
             }}
             option={this.getOption()}
-            style={{ width: '100%', height: 200 }}
+            style={{ width: '100%', height: 260 }}
             lazyUpdate={true}
           >
           </ReactEcharts>
diff --git a/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanCpuTimeChart.jsx b/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanCpuTimeChart.jsx
index 1a72d4dcedde35b11020c5f6af3510668f360858..9014d2da966e57e200ebfdd4b8a60fcd901d4905 100644
--- a/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanCpuTimeChart.jsx
+++ b/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanCpuTimeChart.jsx
@@ -22,7 +22,7 @@ export default class MeanCpuTimeChart extends Component {
           axisLine: {
             roundCap: true,
             lineStyle: {
-              width: 18,
+              width: 8,
             },
           },
           progress: {
@@ -47,11 +47,6 @@ export default class MeanCpuTimeChart extends Component {
               return value.toFixed(1);
             },
           },
-          axisLine: {
-            lineStyle: {
-              width: 8,
-            },
-          },
           anchor: {
             show: true,
             showAbove: true,
@@ -110,13 +105,13 @@ export default class MeanCpuTimeChart extends Component {
   render() {
     return (
       <div>
-        <Card title="Mean CPU Time">
+        <Card title="Mean CPU Time" style={{ height: 321}}>
           <ReactEcharts
             ref={(e) => {
               this.echartsElement = e;
             }}
             option={this.getOption()}
-            style={{ height: "200px" }}
+            style={{ height: 260 }}
             lazyUpdate={true}
           ></ReactEcharts>
         </Card>
diff --git a/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanFetchTimeChart.jsx b/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanFetchTimeChart.jsx
index 54104c56c72fddc756e6ec80db535c5564c845f0..f611199a9b5d319eb831eb1a4d05c296b8c258f7 100644
--- a/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanFetchTimeChart.jsx
+++ b/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanFetchTimeChart.jsx
@@ -21,7 +21,7 @@ export default class MeanFetchTimeChart extends Component {
           axisLine: {
             roundCap:true,
             lineStyle: {
-              width: 18,
+              width: 8,
             },
           },
           progress: {
@@ -46,11 +46,6 @@ export default class MeanFetchTimeChart extends Component {
               return value.toFixed(0);
             },
           },
-          axisLine: {
-            lineStyle: {
-              width: 8,
-            },
-          },
           anchor: {
             show: true,
             showAbove: true,
diff --git a/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanIoTimeChart.jsx b/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanIoTimeChart.jsx
index 0316d3563746c5d45f15762f521ca79183a9da91..f8dffdf5c40da7892b91437ec397266442ea59dc 100644
--- a/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanIoTimeChart.jsx
+++ b/ui/src/components/DatabaseOptimization/SlowQueryAnalysisModules/MeanIoTimeChart.jsx
@@ -21,7 +21,7 @@ export default class MeanIoTimeChart extends Component {
           axisLine: {
             roundCap:true,
             lineStyle: {
-              width: 18,
+              width: 8,
             },
           },
           progress: {
@@ -46,11 +46,6 @@ export default class MeanIoTimeChart extends Component {
               return value.toFixed(1);
           }
           },
-          axisLine: {
-            lineStyle: {
-              width: 8,
-            },
-          },
           anchor: {
             show: true,
             showAbove: true,
@@ -113,13 +108,13 @@ export default class MeanIoTimeChart extends Component {
   render () {
     return (
       <div>
-        <Card title="Mean IO Time">
+        <Card title="Mean IO Time" style={{ height: 321}}>
           <ReactEcharts
             ref={(e) => {
               this.echartsElement = e
             }}
             option={this.getOption()}
-            style={{ width: '100%', height: 200 }}
+            style={{ width: '100%', height: 260 }}
             lazyUpdate={true}
           >
           </ReactEcharts>
diff --git a/ui/src/components/NodeInformation/CacheInformation.jsx b/ui/src/components/NodeInformation/CacheInformation.jsx
index b6b7f3eb3f24230e9ae819ca5e8e859083b404f3..ae2466f4e4aecf1514f00d7539db76a854739809 100644
--- a/ui/src/components/NodeInformation/CacheInformation.jsx
+++ b/ui/src/components/NodeInformation/CacheInformation.jsx
@@ -12,7 +12,7 @@ export default class CacheInformation extends Component {
       selTimeValue:this.props.selTimeValue,
       primitiveDataAll:[],
       serviceAllData:[],
-      vectorKey:''
+      vectorKey:["0"]
     }
   }
   async getCacheInformationData1 () {
@@ -93,9 +93,8 @@ export default class CacheInformation extends Component {
             this.setState(() => ({
               serviceAllData: serviceAllArray,
               primitiveDataAll:primitiveDataAll,
-              vectorKey:0,
             }),()=>{
-              this.onChange(0)
+              this.onChange(this.state.vectorKey)
             })
       }
       }).catch((error) => {
@@ -117,7 +116,9 @@ export default class CacheInformation extends Component {
       this.getCacheInformationDataAll()
     }
     onChange = (key) => {
-      this.setState({vectorKey:key})
+      this.setState({vectorKey:key}, () => {
+        this.forceUpdate();
+      })
     };
   render() {
     return (
@@ -129,13 +130,13 @@ export default class CacheInformation extends Component {
                 <Panel header={this.state.primitiveDataAll[index][0].labels.datname} key={index} forceRender={true} className='panelStyle'>
                 <Row gutter={10}>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[0]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[0]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[1]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[1]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={24}>
-                    <NodeEchartFormWork echartData={item[2]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[2]} />:''}
                   </Col>
                 </Row>
               </Panel>
diff --git a/ui/src/components/NodeInformation/DBLockingAndCaching.jsx b/ui/src/components/NodeInformation/DBLockingAndCaching.jsx
index 7d26aba6e062363f1fa869acef4557bea2af572c..472cab062508d810627f0f261f016c05d820a0ba 100644
--- a/ui/src/components/NodeInformation/DBLockingAndCaching.jsx
+++ b/ui/src/components/NodeInformation/DBLockingAndCaching.jsx
@@ -37,7 +37,7 @@ export default class DBLockingAndCaching extends Component {
     return (
       <div className='thirdTabClass'>
         {this.state.ifShow ? 
-        <Tabs tabBarGutter={30}  className='childstyle' type="card "  defaultActiveKey="1" items={items} onChange={this.onChange} tabBarExtraContent={
+        <Tabs tabBarGutter={30}  className='childstyle' type="card " destroyInactiveTabPane={true}  defaultActiveKey="1" items={items} onChange={this.onChange} tabBarExtraContent={
           (this.state.tabChildkey === '1') &&<img
           src={Refresh}
           title='Refresh'
diff --git a/ui/src/components/NodeInformation/DBServiceCapability.jsx b/ui/src/components/NodeInformation/DBServiceCapability.jsx
index e2dadc3020d4ad621025c9fcb9fd7ae3f98a7636..c3dbb352f1e1b671fd9da8b7b5c22ad4c86fc03f 100644
--- a/ui/src/components/NodeInformation/DBServiceCapability.jsx
+++ b/ui/src/components/NodeInformation/DBServiceCapability.jsx
@@ -12,7 +12,7 @@ export default class DBServiceCapability extends Component {
       selTimeValue:this.props.selTimeValue,
       primitiveDataAll:[],
       serviceAllData:[],
-      vectorKey:''
+      vectorKey:["0"]
     }
   }
   async getServiceData1 () {
@@ -298,9 +298,8 @@ async getServiceDataAll () {
           this.setState(() => ({
             serviceAllData: serviceAllArray,
             primitiveDataAll:primitiveDataAll,
-            vectorKey:0,
           }),()=>{
-            this.onChange(0)
+            this.onChange(this.state.vectorKey)
           })
     }
     }).catch((error) => {
@@ -322,7 +321,9 @@ async getServiceDataAll () {
     this.getServiceDataAll()
   }
   onChange = (key) => {
-    this.setState({vectorKey:key})
+    this.setState({vectorKey:key}, () => {
+      this.forceUpdate();
+    })
   };
   render() {
     return (
@@ -334,22 +335,22 @@ async getServiceDataAll () {
                 <Panel header={this.state.primitiveDataAll[index][0].labels.datname} key={index} forceRender={true} className='panelStyle'>
                 <Row gutter={[10, 10]}>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[0]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[0]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[1]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[1]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[2]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[2]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[3]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[3]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[4]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[4]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[5]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[5]} />:''}
                   </Col>
                 </Row>
               </Panel>
diff --git a/ui/src/components/NodeInformation/Host.jsx b/ui/src/components/NodeInformation/Host.jsx
index 37502c9a4e3c12b3ce15d64096729c925f4ffb7a..4730fc15cc570adf89c0a12c90d9287d7efa4b7b 100644
--- a/ui/src/components/NodeInformation/Host.jsx
+++ b/ui/src/components/NodeInformation/Host.jsx
@@ -98,7 +98,7 @@ export default class Host extends Component {
     return (
       <div className='nodeselect'>
         {this.state.ifShow ? 
-        <Tabs tabBarGutter={30}  className='childstyle' type="card "  defaultActiveKey="1" items={items} onChange={this.onChange}
+        <Tabs tabBarGutter={30}  className='childstyle' type="card "  defaultActiveKey="1" items={items} onChange={this.onChange} destroyInactiveTabPane={true}
          tabBarExtraContent={
           <div>
           <Select disabled value={this.state.selValue} onChange={(val) => { this.changeSelVal(val) }} showSearch
diff --git a/ui/src/components/NodeInformation/Node.jsx b/ui/src/components/NodeInformation/Node.jsx
index f67f61ed8f3ce4782ad43ad5a7d1f2d061556922..35ed249c17afb46964946d8332b9e8a49b3ede01 100644
--- a/ui/src/components/NodeInformation/Node.jsx
+++ b/ui/src/components/NodeInformation/Node.jsx
@@ -87,7 +87,7 @@ export default class Node extends Component {
     return (
       <div className='nodeselect'>
         {this.state.ifShow ? 
-        <Tabs tabBarGutter={30}  className='childstyle' type="card "  defaultActiveKey="1" items={items} onChange={this.onChange}
+        <Tabs tabBarGutter={30}  className='childstyle' type="card "  defaultActiveKey="1" items={items} onChange={this.onChange} destroyInactiveTabPane={true}
          tabBarExtraContent={
           <div>
           <Select value={this.state.selValue} onChange={(val) => { this.changeSelVal(val) }} showSearch
diff --git a/ui/src/components/NodeInformation/NodeIO.jsx b/ui/src/components/NodeInformation/NodeIO.jsx
index af5f8b9ba9169e10d9b259069efe43e9bc1c7472..184517882d1689f1a0f2b799c55a6adcd5bd3005 100644
--- a/ui/src/components/NodeInformation/NodeIO.jsx
+++ b/ui/src/components/NodeInformation/NodeIO.jsx
@@ -9,6 +9,7 @@ import Tps from '../../assets/imgs/Tps.png';
 import Writerate from '../../assets/imgs/Write rate.png';
 import NodeEchartFormWork from '../NodeInformation/NodeModules/NodeEchartFormWork';
 import { getCommonMetric } from '../../api/autonomousManagement';
+import { string } from 'prop-types';
 
 const { Panel } = Collapse;
 export default class NodeIO extends Component {
@@ -19,7 +20,7 @@ export default class NodeIO extends Component {
       selTimeValue:this.props.selTimeValue,
       primitiveDataAll:[],
       ioAllData:[],
-      vectorKey:''
+      vectorKey:["0"]
     }
   }
   async getIoData1 () {
@@ -162,9 +163,8 @@ export default class NodeIO extends Component {
             this.setState(() => ({
               ioAllData: ioAllArray,
               primitiveDataAll:primitiveDataAll,
-              vectorKey:0,
-            }),()=>{
-              this.onChange(0)
+            }), () => {
+              this.onChange(this.state.vectorKey)
             })
       }
       }).catch((error) => {
@@ -186,7 +186,9 @@ export default class NodeIO extends Component {
     this.getIoDataAll()
   }
   onChange = (key) => {
-    this.setState({vectorKey:key})
+    this.setState({vectorKey:key}, () => {
+      this.forceUpdate();
+    })
   };
   render() {
     return (
@@ -194,23 +196,23 @@ export default class NodeIO extends Component {
           {
             this.state.ioAllData.length > 0 ? this.state.ioAllData.map((item,index) => {
               return (
-                <Collapse  activeKey={this.state.vectorKey}  onChange={(key)=>{this.onChange(key)}} expandIconPosition='end' >
+                <Collapse  activeKey={this.state.vectorKey}  onChange={(key)=>{this.onChange(key)}} expandIconPosition='end'  >
                 <Panel header={this.state.primitiveDataAll[index][0].labels.device} key={index} forceRender={true} className='panelStyle'>
-                <Row gutter={[10, 10]}>
+                  <Row gutter={[10, 10]}>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[0]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[0]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[1]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[1]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[2]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[2]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[3]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[3]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={24}>
-                    <NodeEchartFormWork echartData={item[4]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[4]} />:''}
                   </Col>
                 </Row>
               </Panel>
diff --git a/ui/src/components/NodeInformation/NodeModules/NodeEchartFormWork.jsx b/ui/src/components/NodeInformation/NodeModules/NodeEchartFormWork.jsx
index c3954811278ba51708f363af5ab825bbd13ad593..b5dffa9b9d15928b2dfa478f744bfe2c7e728800 100644
--- a/ui/src/components/NodeInformation/NodeModules/NodeEchartFormWork.jsx
+++ b/ui/src/components/NodeInformation/NodeModules/NodeEchartFormWork.jsx
@@ -238,6 +238,9 @@ export default class NodeEchartFormWork extends Component {
       })
     }
   }
+  componentDidMount() {
+    this.echartsElement.resize()
+  }
   render() {
     return (
       this.state.ifShow ?
diff --git a/ui/src/components/NodeInformation/NodeNetwork.jsx b/ui/src/components/NodeInformation/NodeNetwork.jsx
index e75e440e7669e7b37c805869c5928bad0a3194cb..6e890e5e89671dcef6b96dd46254e8ada8f30810 100644
--- a/ui/src/components/NodeInformation/NodeNetwork.jsx
+++ b/ui/src/components/NodeInformation/NodeNetwork.jsx
@@ -18,7 +18,7 @@ export default class NodeNetwork extends Component {
       selTimeValue:this.props.selTimeValue,
       primitiveDataAll:[],
       networkAllData:[],
-      vectorKey:''
+      vectorKey:["0"]
     }
   }
   async getNetworkData1 () {
@@ -145,9 +145,8 @@ export default class NodeNetwork extends Component {
             this.setState(() => ({
               networkAllData: networkAllArray,
               primitiveDataAll:primitiveDataAll,
-              vectorKey:0,
             }),()=>{
-              this.onChange(0)
+              this.onChange(this.state.vectorKey)
             })
       }
       }).catch((error) => {
@@ -169,7 +168,9 @@ export default class NodeNetwork extends Component {
     this.getNetworkDataAll()
   }
   onChange = (key) => {
-    this.setState({vectorKey:key})
+    this.setState({vectorKey:key}, () => {
+      this.forceUpdate();
+    })
   };
   render() {
     return (
@@ -203,16 +204,16 @@ export default class NodeNetwork extends Component {
                 } key={index} forceRender={true} className='panelStyle'>
                 <Row gutter={[10, 10]}>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[0]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[0]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[1]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[1]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[2]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[2]} />:''}
                   </Col>
                   <Col className="gutter-row cpuborder" span={12}>
-                    <NodeEchartFormWork echartData={item[3]} />
+                    {this.state.vectorKey.indexOf(index.toString()) !== -1 ?<NodeEchartFormWork echartData={item[3]} />:''}
                   </Col>
                 </Row>
               </Panel>
diff --git a/ui/src/components/NodeInformation/Session.jsx b/ui/src/components/NodeInformation/Session.jsx
index a5cf6097a5e01a9ad55f346fd434359d8a6ffe0d..55e8b4a545315eca4de1f2af365df6ad325ae179 100644
--- a/ui/src/components/NodeInformation/Session.jsx
+++ b/ui/src/components/NodeInformation/Session.jsx
@@ -259,7 +259,7 @@ export default class Session extends Component {
     return (
       <div>
         <Table bordered showSorterTooltip={false} components={this.components} columns={columns} dataSource={this.state.dataSource} rowKey={record => record.key} pagination={this.state.pagination} loading={this.state.loadingActiveSql} scroll={{ x: '100%'}} />
-        <Modal title="Abnormal Root Cause Analysis" style={{maxWidth: "60vw"}} bodyStyle={{overflowY: "auto", background: '#f1f1f1'}} width="60vw" okButtonProps={{ style: { display: 'none' } }} 
+        <Modal title="Session Wait Event" style={{maxWidth: "60vw"}} bodyStyle={{overflowY: "auto", background: '#f1f1f1'}} width="60vw" okButtonProps={{ style: { display: 'none' } }} 
          destroyOnClose='true' visible={this.state.isModalVisible} maskClosable = {false} centered='true' onCancel={() => this.handleCancel()}>
            <Table bordered showSorterTooltip={false} components={this.components} columns={columnsDetails} dataSource={this.state.dataSourceDetails} rowKey={record => record.key} pagination={this.state.paginationDetails} scroll={{ x: '100%'}} />
         </Modal>
diff --git a/ui/src/components/NodeInformation/VisualDeadlock.jsx b/ui/src/components/NodeInformation/VisualDeadlock.jsx
index 6872a75913f7cd041bfb9a523001b5822797a33e..38e41877f12884fa6573db6c65f8257840521e08 100644
--- a/ui/src/components/NodeInformation/VisualDeadlock.jsx
+++ b/ui/src/components/NodeInformation/VisualDeadlock.jsx
@@ -53,7 +53,7 @@ export default class VisualDeadlock extends Component {
           const s = parseInt(indexNum / 4);
           const l = indexNum % 4;
           // 商数是偶数
-          if (s % 2 == 0) {
+          if (s % 2 === 0) {
             let XArr = [100, 200, 300, 400];
             if (l < 1) {
               ele.x = XArr[0];
@@ -70,7 +70,7 @@ export default class VisualDeadlock extends Component {
             }
           }
 
-          if (l == 0) {
+          if (l === 0) {
             ele.y = firstY + 50 * (s - 1);
           } else {
             ele.y = firstY + 50 * s;