add setting for max retry and connection timeout

Author: taydy

src/constants.js

@@ -3,13 +3,17 @@ export const GLOBAL_SETTINGS_FAVORITE_TABLE_TAB = 'favoriteTableTab'
 export const GLOBAL_SETTINGS_AUTO_SCAN = 'autoScan'
 export const GLOBAL_SETTINGS_PAGE_SIZE = 'pageSize'
 export const GLOBAL_SETTINGS_ITEM_EDIT_TYPE = 'itemEditType'
+export const GLOBAL_SETTINGS_MAX_RETRY = 'maxRetry'
+export const GLOBAL_SETTINGS_CONNECTION_TIMEOUT = 'connectionTimeout'
 
 export const DEFAULT_GLOBAL_SETTING = {
   [`${GLOBAL_SETTINGS_LANGUAGE}`]: 'en',
   [`${GLOBAL_SETTINGS_FAVORITE_TABLE_TAB}`]: 'search',
   [`${GLOBAL_SETTINGS_AUTO_SCAN}`]: 'true',
   [`${GLOBAL_SETTINGS_PAGE_SIZE}`]: '100',
-  [`${GLOBAL_SETTINGS_ITEM_EDIT_TYPE}`]: 'form'
+  [`${GLOBAL_SETTINGS_ITEM_EDIT_TYPE}`]: 'form',
+  [`${GLOBAL_SETTINGS_MAX_RETRY}`]: 1,
+  [`${GLOBAL_SETTINGS_CONNECTION_TIMEOUT}`]: 5
 }
 
 export const LOCAL_STORAGE_DYNAMODB_CONFIGS = 'dynamodb_configs'

src/i18n/langs/en.js

@@ -16,6 +16,8 @@ const en = {
     label_auto_scan: 'Automatic scan operation when accessing the items tab',
     label_page_size: 'Items tab page size',
     label_item_edit_type: 'Items editor mode',
+    label_max_retry: 'Max Retry',
+    label_timeout: 'Connection Timeout (s)',
     default: 'Default'
   },
   config: {

src/i18n/langs/zh.js

@@ -16,6 +16,8 @@ const zh = {
     label_auto_scan: '访问项目选项卡时自动执行扫描操作',
     label_page_size: '分页查询数量',
     label_item_edit_type: '项目编辑器模式',
+    label_max_retry: '最大重试次数',
+    label_timeout: '连接超时时间 (秒)',
     default: '默认'
   },
   config: {

src/page/setting/_setting_from.vue

@@ -38,19 +38,34 @@
             <el-radio label="false">No</el-radio>
           </el-radio-group>
         </el-form-item>
+        <el-form-item :label="$t('setting_form.label_max_retry')">
+          <div style="width: 500px">
+          <el-slider v-model="setting.maxRetry" @change="maxRetryChange" :max="5" :min="0" show-input></el-slider>
+          </div>
+        </el-form-item>
+        <el-form-item :label="$t('setting_form.label_timeout')">
+          <div style="width: 500px">
+          <el-slider v-model="setting.connectionTimeout" @change="connectionTimeoutChange" :max="120" :min="1" show-input></el-slider>
+          </div>
+        </el-form-item>
       </el-form>
     </el-col>
   </div>
 </template>
 
 <script>
 import {
+  LOCAL_STORAGE_CURRENT_APPLY_CONFIG,
   GLOBAL_SETTINGS_LANGUAGE,
   GLOBAL_SETTINGS_FAVORITE_TABLE_TAB,
   GLOBAL_SETTINGS_AUTO_SCAN,
   GLOBAL_SETTINGS_PAGE_SIZE,
-  GLOBAL_SETTINGS_ITEM_EDIT_TYPE
+  GLOBAL_SETTINGS_ITEM_EDIT_TYPE,
+  GLOBAL_SETTINGS_MAX_RETRY,
+  GLOBAL_SETTINGS_CONNECTION_TIMEOUT
 } from '@/constants'
+import { mapMutations } from 'vuex'
+import table from '@/mixins/table'
 export default {
   data() {
     return {
@@ -61,11 +76,17 @@ export default {
         ),
         autoScan: localStorage.getItem(GLOBAL_SETTINGS_AUTO_SCAN),
         pageSize: localStorage.getItem(GLOBAL_SETTINGS_PAGE_SIZE),
-        itemEditType: localStorage.getItem(GLOBAL_SETTINGS_ITEM_EDIT_TYPE)
+        itemEditType: localStorage.getItem(GLOBAL_SETTINGS_ITEM_EDIT_TYPE),
+        maxRetry: parseInt(localStorage.getItem(GLOBAL_SETTINGS_MAX_RETRY) || 0),
+        connectionTimeout: parseInt(localStorage.getItem(GLOBAL_SETTINGS_CONNECTION_TIMEOUT) || 1)
       }
     }
   },
+  mixins: [table],
   methods: {
+    ...mapMutations({
+      UPDATE_CONFIG: 'UPDATE_CONFIG'
+    }),
     languageChange(val) {
       localStorage.setItem(GLOBAL_SETTINGS_LANGUAGE, val)
       this.$i18n.locale = val
@@ -81,6 +102,22 @@ export default {
     },
     itemEditTypeChange(val) {
       localStorage.setItem(GLOBAL_SETTINGS_ITEM_EDIT_TYPE, val)
+    },
+    maxRetryChange(val) {
+      localStorage.setItem(GLOBAL_SETTINGS_MAX_RETRY, val)
+      this.updateConfig()
+    },
+    connectionTimeoutChange(val) {
+      localStorage.setItem(GLOBAL_SETTINGS_CONNECTION_TIMEOUT, val)
+      this.updateConfig()
+    },
+    updateConfig() {
+      var config = JSON.parse(localStorage.getItem(LOCAL_STORAGE_CURRENT_APPLY_CONFIG))
+      // just for deep update
+      config.maxRetries = this.setting.maxRetry
+      if (this.$utils.isNotEmpty(config)) {
+        this.UPDATE_CONFIG(config)
+      }
     }
   }
 }

src/page/tables/detail/search/index.vue

@@ -21,6 +21,10 @@
       </el-collapse-item>
     </el-collapse>
     <div class="data-list">
+      <div class="consumed-capacity" v-if="consumedCapacity">
+        <span>Consumed Capacity:</span>
+        <span>{{consumedCapacity}}</span>
+      </div>
       <div class="table-setting">
         <el-tooltip class="item" effect="dark" :content="$t('table.item_search.i_refresh')" placement="top">
           <i class="fa fa-refresh" @click="refreshTable"></i>
@@ -90,7 +94,8 @@ export default {
       itemsShow: [],
       headerSelectDialogShow: false,
       groupIndexes: [],
-      fileDialogVisible: false
+      fileDialogVisible: false,
+      consumedCapacity: null
     }
   },
   computed: {
@@ -230,6 +235,7 @@ export default {
       this.$refs.searchParams.searchStart()
       this.tableItems = []
       this.loading = true
+      this.consumedCapacity = null
       this.type = type
       this.$dynamodb[`${type}Table`](
         params,
@@ -248,6 +254,9 @@ export default {
           // console.log(result.ConsumedCapacity.CapacityUnits)
           console.log(result.ScannedCount)
           this.getTableItemsAndHeaders(result.Items)
+          if (result.ConsumedCapacity) {
+            this.consumedCapacity = result.ConsumedCapacity.CapacityUnits
+          }
           this.$refs.searchParams.searchFinished()
         },
         () => {
@@ -372,6 +381,13 @@ export default {
     float: right
     margin-right: 20px
   .data-list
+    .consumed-capacity
+      display: inline
+      float: left
+      font-size: 13px
+      margin-top: 10px
+      color: #2F4056
+      font-weight: 500
     .table-setting
       float: right
       margin-top: 10px

src/utils/dynamodb.js

@@ -1,6 +1,10 @@
 import {
   Notification
 } from 'element-ui'
+import {
+  GLOBAL_SETTINGS_MAX_RETRY,
+  GLOBAL_SETTINGS_CONNECTION_TIMEOUT
+} from '@/constants'
 const AWS = require('aws-sdk')
 let dynamodb = new AWS.DynamoDB()
 let docClient = new AWS.DynamoDB.DocumentClient()
@@ -17,10 +21,10 @@ const errNotify = (title, message) => {
 class DynamoDBInstance {
   constructor(config) {
     config.httpOptions = {
-      connectTimeout: 5 * 1000,
-      timeout: 5 * 1000
+      connectTimeout: 1000 * parseInt(localStorage.getItem(GLOBAL_SETTINGS_CONNECTION_TIMEOUT) || 5),
+      timeout: 1000 * parseInt(localStorage.getItem(GLOBAL_SETTINGS_CONNECTION_TIMEOUT) || 5)
     }
-    config.maxRetries = 1
+    config.maxRetries = parseInt(localStorage.getItem(GLOBAL_SETTINGS_MAX_RETRY) || 1)
     this._config = config
     this.params = {}
     this.refresh(config)
@@ -31,6 +35,8 @@ class DynamoDBInstance {
   }
 
   set config(config) {
+    console.log('-----------update config')
+    console.log(config)
     this._config = config
     this.refresh(config)
   }