Add time zone selection
diff --git a/package-lock.json b/package-lock.json
index 28c7387..0d35cce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3422,7 +3422,7 @@
     },
     "acorn-dynamic-import": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz",
+      "resolved": "http://registry.npm.taobao.org/acorn-dynamic-import/download/acorn-dynamic-import-2.0.2.tgz",
       "integrity": "sha1-x1K9IQvvZ5UBtsbLf8hPj0cVjMQ=",
       "dev": true,
       "requires": {
@@ -3431,7 +3431,7 @@
       "dependencies": {
         "acorn": {
           "version": "4.0.13",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
+          "resolved": "http://registry.npm.taobao.org/acorn/download/acorn-4.0.13.tgz",
           "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
           "dev": true
         }
@@ -3578,7 +3578,7 @@
         },
         "ansi-regex": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz",
           "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
           "dev": true
         },
@@ -3818,7 +3818,7 @@
           "dependencies": {
             "strip-ansi": {
               "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+              "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz",
               "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
               "dev": true,
               "requires": {
@@ -3965,7 +3965,7 @@
     },
     "ansi-styles": {
       "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "resolved": "http://registry.npm.taobao.org/ansi-styles/download/ansi-styles-2.2.1.tgz",
       "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
     },
     "ant-design-palettes": {
@@ -4689,13 +4689,13 @@
     },
     "babel-plugin-syntax-decorators": {
       "version": "6.13.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
       "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=",
       "dev": true
     },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
       "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
       "dev": true
     },
@@ -5402,7 +5402,7 @@
     },
     "buffer": {
       "version": "4.9.1",
-      "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
       "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
       "dev": true,
       "requires": {
@@ -5638,7 +5638,7 @@
     },
     "chalk": {
       "version": "1.1.3",
-      "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "resolved": "http://registry.npm.taobao.org/chalk/download/chalk-1.1.3.tgz",
       "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
       "requires": {
         "ansi-styles": "^2.2.1",
@@ -5925,7 +5925,7 @@
       "dependencies": {
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
           "requires": {
@@ -5940,7 +5940,7 @@
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
           "requires": {
@@ -10409,7 +10409,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
           "integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=",
           "dev": true
         }
@@ -10417,7 +10417,7 @@
     },
     "got": {
       "version": "6.7.1",
-      "resolved": "http://registry.npmjs.org/got/-/got-6.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
       "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
       "dev": true,
       "requires": {
@@ -11442,7 +11442,7 @@
     },
     "is-fullwidth-code-point": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz",
       "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
       "dev": true
     },
@@ -14788,7 +14788,7 @@
     },
     "minimist": {
       "version": "1.2.0",
-      "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
       "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
     },
     "minimist-options": {
@@ -14842,7 +14842,7 @@
     },
     "mkdirp": {
       "version": "0.5.1",
-      "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
       "requires": {
         "minimist": "0.0.8"
@@ -14850,7 +14850,7 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.8",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
         }
       }
@@ -14869,6 +14869,14 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
       "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
     },
+    "moment-timezone": {
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.23.tgz",
+      "integrity": "sha512-WHFH85DkCfiNMDX5D3X7hpNH3/PUhjTGcD0U1SgfBGZxJ3qUmJh5FdvaFjcClxOvB3rzdfj4oRffbI38jEnC1w==",
+      "requires": {
+        "moment": ">= 2.9.0"
+      }
+    },
     "moo": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/moo/-/moo-0.4.3.tgz",
@@ -15422,7 +15430,7 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.10",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
           "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
           "dev": true
         }
@@ -18699,7 +18707,7 @@
       "dependencies": {
         "ansi-regex": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz",
           "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
           "dev": true
         },
@@ -18785,7 +18793,7 @@
             },
             "strip-ansi": {
               "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+              "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz",
               "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
               "dev": true,
               "requires": {
@@ -20846,13 +20854,13 @@
       "dependencies": {
         "ansi-regex": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "resolved": "http://registry.npm.taobao.org/ansi-regex/download/ansi-regex-3.0.0.tgz",
           "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
           "dev": true
         },
         "strip-ansi": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-4.0.0.tgz",
           "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
           "dev": true,
           "requires": {
@@ -21532,7 +21540,7 @@
     },
     "supports-color": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-2.0.0.tgz",
       "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
     },
     "svg-tags": {
@@ -22392,7 +22400,7 @@
     },
     "uglifyjs-webpack-plugin": {
       "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz",
+      "resolved": "http://registry.npm.taobao.org/uglifyjs-webpack-plugin/download/uglifyjs-webpack-plugin-0.4.6.tgz",
       "integrity": "sha1-uVH0q7a9YX5m9j64kUmOORdj4wk=",
       "dev": true,
       "requires": {
@@ -23180,7 +23188,7 @@
         },
         "enhanced-resolve": {
           "version": "3.4.1",
-          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz",
+          "resolved": "http://registry.npm.taobao.org/enhanced-resolve/download/enhanced-resolve-3.4.1.tgz",
           "integrity": "sha1-BCHjOf1xQZs9oT0Smzl5BAIwR24=",
           "dev": true,
           "requires": {
@@ -23192,7 +23200,7 @@
         },
         "has-flag": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
+          "resolved": "http://registry.npm.taobao.org/has-flag/download/has-flag-2.0.0.tgz",
           "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
           "dev": true
         },
@@ -23213,7 +23221,7 @@
         },
         "supports-color": {
           "version": "4.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+          "resolved": "http://registry.npm.taobao.org/supports-color/download/supports-color-4.5.0.tgz",
           "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
           "dev": true,
           "requires": {
@@ -23588,7 +23596,7 @@
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
           "requires": {
@@ -23676,7 +23684,7 @@
         },
         "os-locale": {
           "version": "1.4.0",
-          "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
           "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
           "dev": true,
           "requires": {
@@ -23765,7 +23773,7 @@
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
           "requires": {
@@ -23993,7 +24001,7 @@
     },
     "wrap-ansi": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "dev": true,
       "requires": {
@@ -24003,7 +24011,7 @@
       "dependencies": {
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "resolved": "http://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
           "requires": {
@@ -24012,7 +24020,7 @@
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
           "requires": {
diff --git a/package.json b/package.json
index 5b219d5..764679b 100755
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "lodash": "^4.17.10",
     "lodash-decorators": "^6.0.0",
     "moment": "^2.19.3",
+    "moment-timezone": "^0.5.23",
     "numeral": "^2.0.6",
     "omit.js": "^1.0.0",
     "path-to-regexp": "^2.1.0",
diff --git a/src/components/Duration/Panel/currentTimePanel.js b/src/components/Duration/Panel/currentTimePanel.js
new file mode 100644
index 0000000..03a7ad0
--- /dev/null
+++ b/src/components/Duration/Panel/currentTimePanel.js
@@ -0,0 +1,27 @@
+import React, { PureComponent } from 'react';
+
+class CurrentTimePanel extends PureComponent {
+  state = {
+    currentTime: null,
+  }
+
+  componentDidMount() {
+    this.clock = setInterval(this.timer, 1000)
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.countdown);
+  }
+
+  timer = () => {
+    const { moment } = this.props;
+    this.setState({ currentTime: moment() });
+  }
+
+  render() {
+    const { currentTime } = this.state;
+    return currentTime == null ? null : currentTime.format("YYYY-MM-DD HH:mm:ss");
+  }
+}
+
+export default CurrentTimePanel;
\ No newline at end of file
diff --git a/src/components/Duration/Panel/index.js b/src/components/Duration/Panel/index.js
index fe4094e..a8a7565 100644
--- a/src/components/Duration/Panel/index.js
+++ b/src/components/Duration/Panel/index.js
@@ -17,8 +17,9 @@
 
 import React, { PureComponent } from 'react';
 import { Button, Row, Col, Divider, Form, DatePicker, Select } from 'antd';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import styles from './index.less';
+import CurrentTimePanel from './currentTimePanel';
 
 const { Option } = Select;
 const FormItem = Form.Item;
@@ -42,6 +43,7 @@
   },
 })
 class DurationPanel extends PureComponent {
+
   constructor(props) {
     super(props);
 
@@ -175,13 +177,25 @@
     });
   };
 
+  handleTimeZone = (zone) => {
+    this.props.dispatch({
+      type: 'global/changeTimezone',
+      payload: zone,
+    });
+    this.props.dispatch({
+      type: 'trace/changeTimezone',
+      payload: zone,
+    });
+    this.select(this.props.selected);
+  }
+
   select = newSelectedTime => {
     const { onSelected, selected } = this.props;
     onSelected({ ...selected, ...newSelectedTime });
   };
 
   render() {
-    const { collapsed, form } = this.props;
+    const { collapsed, form, zone } = this.props;
     if (collapsed) {
       return null;
     }
@@ -198,53 +212,64 @@
     };
     const { getFieldDecorator } = form;
     const content = (
-      <Row type="flex" justify="end">
-        <Col xs={24} sm={24} md={24} lg={15} xl={14}>
-          <Form onSubmit={this.handleSubmit} hideRequiredMark>
-            <FormItem {...formItemLayout} label="Time Range">
-              {getFieldDecorator('range-time-picker')(
-                <RangePicker showTime disabledDate={this.disabledDate} format="YYYY-MM-DD HH:mm" />
-              )}
-            </FormItem>
-            <FormItem {...formItemLayout} label="Reloading every ">
-              {getFieldDecorator('step')(
-                <Select style={{ width: 170 }}>
-                  <Option value="0">off</Option>
-                  <Option value="5000">5s</Option>
-                  <Option value="10000">10s</Option>
-                  <Option value="30000">30s</Option>
-                </Select>
-              )}
-            </FormItem>
-            <FormItem wrapperCol={{ offset: 7 }}>
-              <Button type="primary" htmlType="submit">
-                Apply
-              </Button>
-            </FormItem>
-          </Form>
-        </Col>
-        <Col xs={0} sm={0} md={0} lg={0} xl={1}>
-          <Divider type="vertical" style={{ height: 200 }} />
-        </Col>
-        <Col xs={24} sm={24} md={4} lg={4} xl={4}>
-          <ul className={styles.list}>
-            {this.shortcutsDays.map(d => (
-              <li key={d.label}>
-                <a onClick={this.select.bind(this, d)}>{d.label}</a>
-              </li>
-            ))}
-          </ul>
-        </Col>
-        <Col xs={24} sm={24} md={4} lg={4} xl={4}>
-          <ul className={styles.list}>
-            {this.shortcuts.map(d => (
-              <li key={d.label}>
-                <a onClick={this.select.bind(this, d)}>{d.label}</a>
-              </li>
-            ))}
-          </ul>
-        </Col>
-      </Row>
+      <div>
+        <Row type="flex" justify="end">
+          <Select showSearch defaultValue={zone} size="small" style={{ width:150, marginRight: 10 }} onSelect={this.handleTimeZone}>
+            {moment.tz.names().map(_ => <Option key={_} value={_}>{_}</Option>)}
+          </Select>
+          <Button type="primary" icon="clock-circle" size="small" style={{ width:170 }}>
+            <CurrentTimePanel moment={moment} />
+          </Button>
+        </Row>
+        <Divider />
+        <Row type="flex" justify="end">
+          <Col xs={24} sm={24} md={24} lg={15} xl={14}>
+            <Form onSubmit={this.handleSubmit} hideRequiredMark>
+              <FormItem {...formItemLayout} label="Time Range">
+                {getFieldDecorator('range-time-picker')(
+                  <RangePicker showTime disabledDate={this.disabledDate} format="YYYY-MM-DD HH:mm" />
+                )}
+              </FormItem>
+              <FormItem {...formItemLayout} label="Reloading every ">
+                {getFieldDecorator('step')(
+                  <Select style={{ width: 170 }}>
+                    <Option value="0">off</Option>
+                    <Option value="5000">5s</Option>
+                    <Option value="10000">10s</Option>
+                    <Option value="30000">30s</Option>
+                  </Select>
+                )}
+              </FormItem>
+              <FormItem wrapperCol={{ offset: 7 }}>
+                <Button type="primary" htmlType="submit">
+                  Apply
+                </Button>
+              </FormItem>
+            </Form>
+          </Col>
+          <Col xs={0} sm={0} md={0} lg={0} xl={1}>
+            <Divider type="vertical" style={{ height: 200 }} />
+          </Col>
+          <Col xs={24} sm={24} md={4} lg={4} xl={4}>
+            <ul className={styles.list}>
+              {this.shortcutsDays.map(d => (
+                <li key={d.label}>
+                  <a onClick={this.select.bind(this, d)}>{d.label}</a>
+                </li>
+              ))}
+            </ul>
+          </Col>
+          <Col xs={24} sm={24} md={4} lg={4} xl={4}>
+            <ul className={styles.list}>
+              {this.shortcuts.map(d => (
+                <li key={d.label}>
+                  <a onClick={this.select.bind(this, d)}>{d.label}</a>
+                </li>
+              ))}
+            </ul>
+          </Col>
+        </Row>
+      </div>
     );
     return (
       <div className={styles.pageHeader}>
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index ca6bd3d..ead1f91 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -197,7 +197,7 @@
 
   render() {
     const {
-      isMonitor, collapsed, fetching, notices, routerData, match, location,
+      isMonitor, collapsed, fetching, notices, routerData, match, location, zone,
       duration: { selected: dSelected, collapsed: dCollapsed },
     } = this.props;
     const bashRedirect = this.getBashRedirect();
@@ -234,6 +234,8 @@
               selected={dSelected}
               onSelected={this.handleDurationSelected}
               collapsed={dCollapsed}
+              zone={zone}
+              dispatch={this.props.dispatch}
             />
           ) : null}
           <Content style={{ margin: '24px 24px 0', height: '100%' }}>
@@ -300,4 +302,5 @@
   notices: global.notices,
   duration: global.duration,
   globalVariables: global.globalVariables,
+  zone: global.zone,
 }))(BasicLayout);
diff --git a/src/models/global.js b/src/models/global.js
index a4fb74b..a7accc8 100644
--- a/src/models/global.js
+++ b/src/models/global.js
@@ -16,6 +16,7 @@
  */
 
 
+import moment from 'moment-timezone';
 import { exec } from '../services/graphql';
 import { generateDuration } from '../utils/time';
 
@@ -63,6 +64,7 @@
       },
     },
     globalVariables: {},
+    zone: moment.tz.guess(),
   },
 
   effects: {
@@ -138,8 +140,14 @@
         isMonitor: payload,
       };
     },
+    changeTimezone(state, { payload }) {
+      moment.tz.setDefault(payload);
+      return {
+        ...state,
+        zone: payload,
+      };
+    },
   },
-
   subscriptions: {
     setup({ history, dispatch }) {
       // Subscribe history(url) change, trigger `load` action if pathname is `/`
diff --git a/src/models/trace.js b/src/models/trace.js
index b5974f6..9b2f8c4 100644
--- a/src/models/trace.js
+++ b/src/models/trace.js
@@ -148,6 +148,27 @@
         },
       };
     },
+    changeTimezone(state) {
+      const { variables } = state;
+      const { values } = variables;
+      return {
+        ...state,
+        variables: {
+          ...variables,
+          values: {
+            ...values,
+            duration: generateDuration({
+              from() {
+                return moment().subtract(15, 'minutes');
+              },
+              to() {
+                return moment();
+              },
+            }),
+          },
+        },
+      };
+    },
   },
   subscriptions: {
     setup({ history, dispatch }) {
diff --git a/src/routes/Trace/Trace.js b/src/routes/Trace/Trace.js
index 16e788c..6bfe06f 100644
--- a/src/routes/Trace/Trace.js
+++ b/src/routes/Trace/Trace.js
@@ -23,6 +23,7 @@
 import TraceTimeline from './TraceTimeline';
 
 @connect(state => ({
+  zone: state.global.zone,
   trace: state.trace,
   loading: state.loading.models.trace,
 }))
@@ -54,6 +55,7 @@
               loading={this.props.loading}
               globalVariables={this.props.globalVariables}
               dispatch={this.props.dispatch}
+              zone={this.props.zone}
             />
           </Col>
           <Col span={showTimeline ? 24 : 0}>
diff --git a/src/routes/Trace/TraceSearch.js b/src/routes/Trace/TraceSearch.js
index dddeb35..cb48a9b 100644
--- a/src/routes/Trace/TraceSearch.js
+++ b/src/routes/Trace/TraceSearch.js
@@ -213,10 +213,10 @@
 
   renderForm() {
     const { getFieldDecorator } = this.props.form;
-    const { trace: { variables: { options } } } = this.props;
+    const { trace: { variables: { options } }, zone } = this.props;
     return (
       <Form onSubmit={this.handleSearch} layout="vertical">
-        <FormItem label="Time Range">
+        <FormItem label={`Time Range(${zone})`}>
           {getFieldDecorator('range-time-picker', {
             rules: [{
               required: true,