diff --git a/frontend/locales/en-us.json b/frontend/locales/en-us.json
index 8262cd3b..59ab9dd4 100644
--- a/frontend/locales/en-us.json
+++ b/frontend/locales/en-us.json
@@ -18,5 +18,24 @@
   "mem-res-set-size": "Memory resident set size",
   "mem-res-set-size-sm": "Process memory that is actually stored in the RAM",
   "apache-http-reqs": "Apache HTTP requests",
-  "apache-http-reqs-sm": "Number of website requests to apache if it is used"
-}
\ No newline at end of file
+  "apache-http-reqs-sm": "Number of website requests to apache if it is used",
+  "metrics": {
+    "add": {
+      "add-label": "Add",
+      "added-label": "Added",
+      "link-label": "Learn more"
+    },
+    "cpu_agg_usage": {
+      "title": "Aggregated CPU usage",
+      "description": "CPU usages accross all of the CPU cores."
+    },
+    "cpu_wait_time": {
+      "title": "Memory resident set size (tmp)",
+      "description": "Process memory that is actually stored in the RAM. (tmp)"
+    },
+    "zfs_used": {
+      "title": "Apache HTTP requests (tmp)",
+      "description": "Number of website requests to apache if it is used. (tmp)"
+    }
+  }
+}
diff --git a/frontend/scripts/build-locales.js b/frontend/scripts/build-locales.js
index 599b7e0d..4546e5b8 100644
--- a/frontend/scripts/build-locales.js
+++ b/frontend/scripts/build-locales.js
@@ -22,13 +22,32 @@ const source = ({
   })();
 `;
 
+const flattenMessages = (nestedMessages, prefix='') => {
+  return Object.keys(nestedMessages).reduce((messages, key) => {
+    const value = nestedMessages[key];
+    const prefixedKey = prefix ? `${prefix}.${key}` : key;
+
+    if(typeof value === 'string') {
+      messages[prefixedKey] = value;
+    }
+    else {
+      Object.assign(messages, flattenMessages(value, prefixedKey));
+    }
+
+    return messages;
+  }, {});
+};
+
 const compile = async () => {
   const files = await readdir(root);
   const jsons = files.filter(filename => path.extname(filename) === '.json');
 
   const locales = jsons.reduce((res, filename) => {
     const name = path.parse(filename).name;
-    const json = JSON.stringify(require(path.join(root, filename)));
+    const messages = require(path.join(root, filename));
+    const flattenedMessages = flattenMessages(messages);
+    console.log('flattenedMessages = ', flattenedMessages);
+    const json = JSON.stringify(flattenedMessages);
     const lang = name.split(/\-/)[0];
 
     return {
diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
index b1a729c4..940a4c12 100644
--- a/frontend/src/mock-state.json
+++ b/frontend/src/mock-state.json
@@ -47,6 +47,24 @@
     }]
   },
   "metrics": {
+    "ui": {
+      "types": [
+        "cpu_agg_usage",
+        "cpu_wait_time",
+        "zfs_used",
+        "zfs_available",
+        "load_average",
+        "mem_agg_usage",
+        "mem_limit",
+        "mem_swap",
+        "mem_swap_limit",
+        "net_agg_packets_in",
+        "net_agg_packets_out",
+        "net_agg_bytes_in",
+        "net_agg_bytes_out",
+        "time_of_day"
+      ]
+    },
     "data": [{
       "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d4",
       "id": "agg-cpu-usage"
diff --git a/frontend/src/state/reducers/index.js b/frontend/src/state/reducers/index.js
index 8085e6d8..e064169a 100644
--- a/frontend/src/state/reducers/index.js
+++ b/frontend/src/state/reducers/index.js
@@ -9,6 +9,7 @@ module.exports = () => {
     account: require('@state/reducers/account'),
     app: require('@state/reducers/app'),
     intl: require('@state/reducers/intl'),
+    metrics: require('@state/reducers/metrics'),
     orgs: require('@state/reducers/orgs'),
     projects: require('@state/reducers/projects'),
     services: require('@state/reducers/services')
diff --git a/frontend/src/state/reducers/metrics.js b/frontend/src/state/reducers/metrics.js
new file mode 100644
index 00000000..7fec06fb
--- /dev/null
+++ b/frontend/src/state/reducers/metrics.js
@@ -0,0 +1,9 @@
+const ReduxActions = require('redux-actions');
+
+const {
+  handleActions
+} = ReduxActions;
+
+module.exports = handleActions({
+  'x': (state) => state // somehow handleActions needs at least one reducer
+}, {});