From e0130d55229aae40b47c91390d202b612d9f661b Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Mon, 27 Mar 2017 16:48:26 +0100
Subject: [PATCH] splitting mock state into reusable objects

---
 frontend/src/index.js                         |   4 +-
 frontend/src/mock-state-testing.json          | 645 -----------------
 frontend/src/mock-state.json                  | 668 ------------------
 frontend/src/mock-states/index.js             |  82 +++
 frontend/src/mock-states/shared/account.js    |  13 +
 .../src/mock-states/shared/datacenters.js     |  36 +
 frontend/src/mock-states/shared/index.js      |  17 +
 frontend/src/mock-states/shared/instances.js  | 183 +++++
 frontend/src/mock-states/shared/members.js    |  26 +
 frontend/src/mock-states/shared/metrics.js    | 138 ++++
 frontend/src/mock-states/shared/projects.js   |  57 ++
 frontend/src/mock-states/shared/services.js   | 158 +++++
 frontend/src/mock-states/testing.js           |  60 ++
 frontend/webpack/base.js                      |   6 +-
 frontend/webpack/paths.js                     |   1 +
 15 files changed, 777 insertions(+), 1317 deletions(-)
 delete mode 100644 frontend/src/mock-state-testing.json
 delete mode 100644 frontend/src/mock-state.json
 create mode 100644 frontend/src/mock-states/index.js
 create mode 100644 frontend/src/mock-states/shared/account.js
 create mode 100644 frontend/src/mock-states/shared/datacenters.js
 create mode 100644 frontend/src/mock-states/shared/index.js
 create mode 100644 frontend/src/mock-states/shared/instances.js
 create mode 100644 frontend/src/mock-states/shared/members.js
 create mode 100644 frontend/src/mock-states/shared/metrics.js
 create mode 100644 frontend/src/mock-states/shared/projects.js
 create mode 100644 frontend/src/mock-states/shared/services.js
 create mode 100644 frontend/src/mock-states/testing.js

diff --git a/frontend/src/index.js b/frontend/src/index.js
index 0ea313d6..d661694b 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -8,8 +8,8 @@ import React from 'react';
 import Perf from 'react-addons-perf';
 
 import App from '@containers/app';
-import MockStateTesting from './mock-state-testing.json';
-import MockState from './mock-state.json';
+import MockStateTesting  from '@mock-states/testing';
+import MockState from '@mock-states';
 import LeakDatasets from './dataset-leak.json';
 import NormalDatasets from './dataset-normal.json';
 import Store from '@state/store';
diff --git a/frontend/src/mock-state-testing.json b/frontend/src/mock-state-testing.json
deleted file mode 100644
index 4e6cfcc1..00000000
--- a/frontend/src/mock-state-testing.json
+++ /dev/null
@@ -1,645 +0,0 @@
-{
-  "account": {
-    "data": {
-      "uuid": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
-      "id": "nicola",
-      "name": "Nicola",
-      "email": "nicola@biztech.com",
-      "avatar": "/static/images/avatar.png"
-    },
-    "ui": {
-      "profile_tooltip": false
-    }
-  },
-  "datacenters": {
-    "data": [{
-      "uuid": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "id": "us-east-1",
-      "location": "Virginia, United States"
-    }, {
-      "uuid": "c4bf6263-be98-4798-bff4-9043bbc6b4e0",
-      "id": "us-east-2",
-      "location": "Virginia, United States"
-    }, {
-      "uuid": "443750e4-a58f-4360-b956-ef84b1a9a8ad",
-      "id": "us-east-3",
-      "location": "Virginia, United States"
-    }, {
-      "uuid": "9f743fdb-9401-48ea-b19e-45fcd1fc6d21",
-      "id": "us-east-3b",
-      "location": "Virginia, United States"
-    }, {
-      "uuid": "79a3ef11-be0a-44f0-b1fd-8c335dea61f4",
-      "id": "us-sw-1",
-      "location": "Nevada, United States"
-    }, {
-      "uuid": "e69017d6-a4ce-4a0e-a7a3-993b426200fd",
-      "id": "us-west-1",
-      "location": "California, United States"
-    }, {
-      "uuid": "8d2eb6f8-27b3-4275-afab-1044cc75def1",
-      "id": "eu-ams-1",
-      "location": "Amsterdam, Netherlands"
-    }, {
-      "uuid": "4395136a-d623-4101-ab19-79f064d7a224",
-      "id": "eu-ams-1",
-      "location": "Amsterdam, Netherlands"
-    }]
-  },
-  "monitors": {
-    "ui": {
-      "page": "create"
-    }
-  },
-  "metrics": {
-    "ui": {
-      "pos": 0,
-      "durations": [
-        "360",
-        "720",
-        "1440",
-        "2880"
-      ]
-    },
-    "data": {
-      "types": [{
-        "uuid": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "name": "CPU",
-        "id": "cpu-agg-usage",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d6",
-        "name": "CPU",
-        "id": "cpu-wait-time",
-        "min": 0,
-        "max": 100,
-        "measurement": "bytes"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
-        "name": "Zfs used",
-        "id": "zfs-used",
-        "min": 1,
-        "max": 2,
-        "measurement": "kb"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d8",
-        "name": "Zfs",
-        "id": "zfs-available",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "name": "Disk",
-        "id": "load-average",
-        "min": 0,
-        "max": 20,
-        "measurement": " Mb"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "name": "Memory",
-        "id": "mem-agg-usage",
-        "min": 0,
-        "max": 100,
-        "measurement": " Mb"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad93-e68b3b0914d4",
-        "name": "Memory limit",
-        "id": "mem-limit",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad94-e68b3b0914d4",
-        "name": "Memory swap",
-        "id": "mem-swap",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad95-e68b3b0914d4",
-        "name": "Aggregated CPU usage",
-        "id": "mem-swap-limit",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad96-e68b3b0914d4",
-        "name": "Aggregated CPU usage",
-        "id": "net-agg-packets-in",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad97-e68b3b0914d4",
-        "name": "Aggregated CPU usage",
-        "id": "net-agg-packets-out",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-47ce-ad91-e68b3b0914d4",
-        "name": "Aggregated CPU usage",
-        "id": "net-agg-bytes-in",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-48ce-ad91-e68b3b0914d4",
-        "name": "Aggregated CPU usage",
-        "id": "net-agg-bytes-out",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-49ce-ad91-e68b3b0914d4",
-        "name": "Aggregated CPU usage",
-        "id": "time-of-day",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }],
-      "datasets": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "uuid": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
-        "data": []
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "uuid": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed",
-        "data": []
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "uuid": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed",
-        "data": []
-      }, {
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "uuid": "crazy-cpu",
-        "data": []
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "uuid": "crazy-disk",
-        "data": []
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "uuid": "crazy-memory",
-        "data": []
-      }]
-    }
-  },
-  "orgs": {
-    "ui": {
-      "invite_toggled": false,
-      "member_status_tooltip": false,
-      "member_role_tooltip": false,
-      "hide_add_and_manage": true,
-      "sections": [
-        "projects",
-        "people",
-        "settings"
-      ],
-      "members_status": [
-        "Active",
-        "Inactive",
-        "Invitation Sent"
-      ],
-      "members_roles": [
-        "Owner",
-        "Unassigned",
-        "Read Only"
-      ]
-    },
-    "data": [{
-      "hide": [
-        "people"
-      ],
-      "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
-      "uuid": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
-      "id": "nicola",
-      "name": "Personal",
-      "image": "https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg",
-      "members": []
-    }]
-  },
-  "projects": {
-    "ui": {
-      "invite_toggled": false,
-      "member_status_tooltip": false,
-      "member_role_tooltip": false,
-      "sections": [
-        "project-feed",
-        "services",
-        "instances",
-        "rollback",
-        "manifest",
-        "settings"
-      ],
-      "members_status": [
-        "Active",
-        "Inactive",
-        "Invitation Sent"
-      ],
-      "members_roles": [
-        "Owner",
-        "Unassigned",
-        "Read Only"
-      ]
-    },
-    "data": [{
-      "uuid": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
-      "id": "forest-foundation-dev",
-      "name": "WarpRecords Blog",
-      "plan": "20.05$ per day",
-      "members": [{
-        "uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f",
-        "role": "Owner",
-        "status": "Active"
-      },
-      {
-        "uuid": "6deddbaa-3b94-4373-8cf7-97129507a872",
-        "role": "Unassigned",
-        "status": "Sent invitation"
-      }]
-    }, {
-      "uuid": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
-      "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
-      "id": "forest-foundation-testing",
-      "name": "Forest Foundation Testing",
-      "plan": "20.05$ per day",
-      "members": []
-    }, {
-      "uuid": "ac2c2498-e865-4ee3-9e26-8c75a81cbe25",
-      "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
-      "id": "forest-foundation-production",
-      "name": "Forest Foundation Production",
-      "plan": "100.17$ per day",
-      "members": []
-    }]
-  },
-  "members": {
-    "data": [{
-      "uuid": "b94033c1-3665-4c36-afab-d9c3d0b51c01"
-    }, {
-      "uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f",
-      "id": "alex-windnett",
-      "name": "Alex Windnett",
-      "email": "alex.windnett@biztech.com"
-    }, {
-      "uuid": "4a248182-f4b5-499d-af5b-d436b70bb309",
-      "id": "alex-fraser",
-      "name": "Alex Fraser",
-      "email": "alex.fraser@biztech.com"
-    }, {
-      "uuid": "a9dfe7de-3938-4e30-93db-6e3b88b003ee",
-      "id": "alex-mcleod",
-      "name": "Alex McLeod",
-      "email": "alex.mcleod@biztech.com"
-    }, {
-      "uuid": "6deddbaa-3b94-4373-8cf7-97129507a872",
-      "id": "casey-jones",
-      "name": "Casey Jones",
-      "email": "caseyjones@biztech.com"
-    }]
-  },
-  "services": {
-    "ui": {
-      "collapsed": [],
-      "sections": [
-        "summary",
-        "instances",
-        "metrics",
-        "networks",
-        "tags-metadata",
-        "activity-feed",
-        "service-manifest",
-        "firewall"
-      ],
-      "tooltip": {
-        "show": false
-      }
-    },
-    "data": [{
-      "uuid": "081a792c-47e0-4439-924b-2efa9788ae9e",
-      "id": "nginx",
-      "name": "Nginx",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }],
-      "connections": [
-        "be227788-74f1-4e5b-a85f-b5c71cbae8d8"
-      ]
-    }, {
-      "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
-      "id": "wordpress",
-      "name": "Wordpress",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "crazy-cpu"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "crazy-disk"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "crazy-memory"
-      }],
-      "connections": [
-        "6a0eee76-c019-413b-9d5f-44712b55b993",
-        "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-        "4ee4103e-1a52-4099-a48e-01588f597c70"
-      ]
-    }, {
-      "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
-      "id": "nfs",
-      "name": "NFS",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }]
-    }, {
-      "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "id": "memcached",
-      "name": "Memcached",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 5,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }]
-    }, {
-      "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "id": "percona",
-      "name": "Percona",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 5,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }]
-    }, {
-      "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
-      "id": "primary",
-      "name": "Primary",
-      "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }]
-    }, {
-      "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
-      "id": "secondaries",
-      "name": "Secondaries",
-      "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 4,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }]
-    }, {
-      "uuid": "97c68055-db88-45c9-ad49-f26da4264777",
-      "id": "consul",
-      "name": "Consul",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }]
-    }]
-  },
-  "instances": {
-    "ui": {
-      "collapsed": []
-    },
-    "data": [{
-      "uuid": "309ecd9f-ac03-474b-aff7-4bd2e743296c",
-      "name": "wordpress_01",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "0db6db53-de6f-4378-839e-5d5b452fbaf2",
-      "name": "nfs_01",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "6a0eee76-c019-413b-9d5f-44712b55b993",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "250c8a6c-7d02-49a9-8abd-e1c22773041d",
-      "name": "consul",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "97c68055-db88-45c9-ad49-f26da4264777",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "2c921f3a-8bc3-4f57-9cd7-789ebae72061",
-      "name": "memcache_01",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "68d3046e-8e34-4f5d-a0e5-db3795a250fd",
-      "name": "memcache_02",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "2ea99763-3b44-4179-8393-d66d94961051",
-      "name": "memcache_03",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "25f6bc62-63b8-4959-908e-1f6d7ff6341d",
-      "name": "memcache_04",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "8be01042-0281-4a77-a357-25979e87bf3d",
-      "name": "memcache_05",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "3d652e9d-73e8-4a6f-8171-84fa83740662",
-      "name": "nginx",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "081a792c-47e0-4439-924b-2efa9788ae9e",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "c3ec7633-a02b-4615-86a0-9e6faeaae94b",
-      "name": "percona-primary",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76",
-      "name": "percona-secondary",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }]
-  }
-}
diff --git a/frontend/src/mock-state.json b/frontend/src/mock-state.json
deleted file mode 100644
index d9276147..00000000
--- a/frontend/src/mock-state.json
+++ /dev/null
@@ -1,668 +0,0 @@
-{
-  "account": {
-    "data": {
-      "uuid": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
-      "id": "nicola",
-      "name": "Nicola",
-      "email": "nicola@biztech.com",
-      "avatar": "/static/images/avatar.png"
-    },
-    "ui": {
-      "profile_tooltip": false
-    }
-  },
-  "datacenters": {
-    "data": [{
-      "uuid": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "id": "us-east-1",
-      "location": "Virginia, United States"
-    }, {
-      "uuid": "c4bf6263-be98-4798-bff4-9043bbc6b4e0",
-      "id": "us-east-2",
-      "location": "Virginia, United States"
-    }, {
-      "uuid": "443750e4-a58f-4360-b956-ef84b1a9a8ad",
-      "id": "us-east-3",
-      "location": "Virginia, United States"
-    }, {
-      "uuid": "9f743fdb-9401-48ea-b19e-45fcd1fc6d21",
-      "id": "us-east-3b",
-      "location": "Virginia, United States"
-    }, {
-      "uuid": "79a3ef11-be0a-44f0-b1fd-8c335dea61f4",
-      "id": "us-sw-1",
-      "location": "Nevada, United States"
-    }, {
-      "uuid": "e69017d6-a4ce-4a0e-a7a3-993b426200fd",
-      "id": "us-west-1",
-      "location": "California, United States"
-    }, {
-      "uuid": "8d2eb6f8-27b3-4275-afab-1044cc75def1",
-      "id": "eu-ams-1",
-      "location": "Amsterdam, Netherlands"
-    }, {
-      "uuid": "4395136a-d623-4101-ab19-79f064d7a224",
-      "id": "eu-ams-1",
-      "location": "Amsterdam, Netherlands"
-    }]
-  },
-  "monitors": {
-    "ui": {
-      "page": "create"
-    }
-  },
-  "metrics": {
-    "ui": {
-      "pos": 0,
-      "durations": [
-        "360",
-        "720",
-        "1440",
-        "2880"
-      ]
-    },
-    "data": {
-      "types": [{
-        "uuid": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "name": "CPU",
-        "id": "cpu-agg-usage",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d6",
-        "name": "CPU",
-        "id": "cpu-wait-time",
-        "min": 0,
-        "max": 100,
-        "measurement": "bytes"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
-        "name": "Zfs used",
-        "id": "zfs-used",
-        "min": 1,
-        "max": 2,
-        "measurement": "kb"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d8",
-        "name": "Zfs",
-        "id": "zfs-available",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "name": "Disk",
-        "id": "load-average",
-        "min": 0,
-        "max": 20,
-        "measurement": " Mb"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "name": "Memory",
-        "id": "mem-agg-usage",
-        "min": 0,
-        "max": 100,
-        "measurement": " Mb"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad93-e68b3b0914d4",
-        "name": "Memory limit",
-        "id": "mem-limit",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad94-e68b3b0914d4",
-        "name": "Memory swap",
-        "id": "mem-swap",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad95-e68b3b0914d4",
-        "name": "Aggregated CPU usage",
-        "id": "mem-swap-limit",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad96-e68b3b0914d4",
-        "name": "Aggregated CPU usage",
-        "id": "net-agg-packets-in",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-46ce-ad97-e68b3b0914d4",
-        "name": "Aggregated CPU usage",
-        "id": "net-agg-packets-out",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-47ce-ad91-e68b3b0914d4",
-        "name": "Aggregated CPU usage",
-        "id": "net-agg-bytes-in",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-48ce-ad91-e68b3b0914d4",
-        "name": "Aggregated CPU usage",
-        "id": "net-agg-bytes-out",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }, {
-        "uuid": "dca08514-72e5-49ce-ad91-e68b3b0914d4",
-        "name": "Aggregated CPU usage",
-        "id": "time-of-day",
-        "min": 0,
-        "max": 100,
-        "measurement": "%"
-      }],
-      "datasets": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "uuid": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
-        "data": []
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "uuid": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed",
-        "data": []
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "uuid": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed",
-        "data": []
-      }, {
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "uuid": "crazy-cpu",
-        "data": []
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "uuid": "crazy-disk",
-        "data": []
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "uuid": "crazy-memory",
-        "data": []
-      }]
-    }
-  },
-  "orgs": {
-    "ui": {
-      "invite_toggled": false,
-      "member_status_tooltip": false,
-      "member_role_tooltip": false,
-      "sections": [
-        "projects",
-        "people",
-        "settings"
-      ],
-      "members_status": [
-        "Active",
-        "Inactive",
-        "Invitation Sent"
-      ],
-      "members_roles": [
-        "Owner",
-        "Unassigned",
-        "Read Only"
-      ]
-    },
-    "data": [{
-      "hide": [
-        "people"
-      ],
-      "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
-      "id": "nicola",
-      "name": "Your dashboard",
-      "image": "https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg",
-      "members": []
-    }, {
-      "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
-      "uuid": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
-      "id": "biz-tech",
-      "name": "BizTech",
-      "members": [
-        {
-          "uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f",
-          "role": "Owner",
-          "status": "Active"
-        },
-        {
-          "uuid": "6deddbaa-3b94-4373-8cf7-97129507a872",
-          "role": "Unassigned",
-          "status": "Sent invitation"
-        }
-      ]
-    }, {
-      "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
-      "uuid": "551f316d-e414-480f-9787-b4c408db3edd",
-      "id": "make-us-proud",
-      "name": "Make Us Proud",
-      "image": "/static/images/make-us-proud.svg",
-      "members": []
-    }]
-  },
-  "projects": {
-    "ui": {
-      "invite_toggled": false,
-      "member_status_tooltip": false,
-      "member_role_tooltip": false,
-      "sections": [
-        "project-feed",
-        "services",
-        "instances",
-        "rollback",
-        "manifest",
-        "people",
-        "settings"
-      ],
-      "members_status": [
-        "Active",
-        "Inactive",
-        "Invitation Sent"
-      ],
-      "members_roles": [
-        "Owner",
-        "Unassigned",
-        "Read Only"
-      ]
-    },
-    "data": [{
-      "uuid": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
-      "id": "forest-foundation-dev",
-      "name": "Forest Foundation Dev",
-      "plan": "20.05$ per day",
-      "members": [{
-        "uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f",
-        "role": "Owner",
-        "status": "Active"
-      },
-      {
-        "uuid": "6deddbaa-3b94-4373-8cf7-97129507a872",
-        "role": "Unassigned",
-        "status": "Sent invitation"
-      }]
-    }, {
-      "uuid": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
-      "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
-      "id": "forest-foundation-testing",
-      "name": "Forest Foundation Testing",
-      "plan": "20.05$ per day",
-      "members": []
-    }, {
-      "uuid": "ac2c2498-e865-4ee3-9e26-8c75a81cbe25",
-      "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
-      "id": "forest-foundation-production",
-      "name": "Forest Foundation Production",
-      "plan": "100.17$ per day",
-      "members": []
-    }]
-  },
-  "members": {
-    "data": [{
-      "uuid": "b94033c1-3665-4c36-afab-d9c3d0b51c01"
-    }, {
-      "uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f",
-      "id": "alex-windnett",
-      "name": "Alex Windnett",
-      "email": "alex.windnett@biztech.com"
-    }, {
-      "uuid": "4a248182-f4b5-499d-af5b-d436b70bb309",
-      "id": "alex-fraser",
-      "name": "Alex Fraser",
-      "email": "alex.fraser@biztech.com"
-    }, {
-      "uuid": "a9dfe7de-3938-4e30-93db-6e3b88b003ee",
-      "id": "alex-mcleod",
-      "name": "Alex McLeod",
-      "email": "alex.mcleod@biztech.com"
-    }, {
-      "uuid": "6deddbaa-3b94-4373-8cf7-97129507a872",
-      "id": "casey-jones",
-      "name": "Casey Jones",
-      "email": "caseyjones@biztech.com"
-    }]
-  },
-  "services": {
-    "ui": {
-      "collapsed": [],
-      "sections": [
-        "summary",
-        "instances",
-        "metrics",
-        "networks",
-        "tags-metadata",
-        "activity-feed",
-        "service-manifest",
-        "firewall"
-      ],
-      "tooltip": {
-        "show": false
-      }
-    },
-    "data": [{
-      "uuid": "081a792c-47e0-4439-924b-2efa9788ae9e",
-      "id": "nginx",
-      "name": "Nginx",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }],
-      "connections": [
-        "be227788-74f1-4e5b-a85f-b5c71cbae8d8"
-      ]
-    }, {
-      "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
-      "id": "wordpress",
-      "name": "Wordpress",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "crazy-cpu"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "crazy-disk"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "crazy-memory"
-      }],
-      "connections": [
-        "6a0eee76-c019-413b-9d5f-44712b55b993",
-        "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-        "4ee4103e-1a52-4099-a48e-01588f597c70"
-      ]
-    }, {
-      "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
-      "id": "nfs",
-      "name": "NFS",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }]
-    }, {
-      "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "id": "memcached",
-      "name": "Memcached",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 5,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }]
-    }, {
-      "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "id": "percona",
-      "name": "Percona",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 5,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }]
-    }, {
-      "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
-      "id": "primary",
-      "name": "Primary",
-      "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }]
-    }, {
-      "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
-      "id": "secondaries",
-      "name": "Secondaries",
-      "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 4,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }]
-    }, {
-      "uuid": "97c68055-db88-45c9-ad49-f26da4264777",
-      "id": "consul",
-      "name": "Consul",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "instances": 1,
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }]
-    }]
-  },
-  "instances": {
-    "ui": {
-      "collapsed": []
-    },
-    "data": [{
-      "uuid": "309ecd9f-ac03-474b-aff7-4bd2e743296c",
-      "name": "wordpress_01",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "0db6db53-de6f-4378-839e-5d5b452fbaf2",
-      "name": "nfs_01",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "6a0eee76-c019-413b-9d5f-44712b55b993",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "250c8a6c-7d02-49a9-8abd-e1c22773041d",
-      "name": "consul",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "97c68055-db88-45c9-ad49-f26da4264777",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "2c921f3a-8bc3-4f57-9cd7-789ebae72061",
-      "name": "memcache_01",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "68d3046e-8e34-4f5d-a0e5-db3795a250fd",
-      "name": "memcache_02",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "2ea99763-3b44-4179-8393-d66d94961051",
-      "name": "memcache_03",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "25f6bc62-63b8-4959-908e-1f6d7ff6341d",
-      "name": "memcache_04",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "8be01042-0281-4a77-a357-25979e87bf3d",
-      "name": "memcache_05",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "3d652e9d-73e8-4a6f-8171-84fa83740662",
-      "name": "nginx",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "081a792c-47e0-4439-924b-2efa9788ae9e",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "c3ec7633-a02b-4615-86a0-9e6faeaae94b",
-      "name": "percona-primary",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }, {
-      "uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76",
-      "name": "percona-secondary",
-      "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
-      "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
-      "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
-      "metrics": [{
-        "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }, {
-        "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
-        "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
-      }, {
-        "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
-        "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
-      }]
-    }]
-  }
-}
diff --git a/frontend/src/mock-states/index.js b/frontend/src/mock-states/index.js
new file mode 100644
index 00000000..c312c19d
--- /dev/null
+++ b/frontend/src/mock-states/index.js
@@ -0,0 +1,82 @@
+/*eslint-disable */
+
+import {
+  account,
+  datacenters,
+  metrics,
+  projects,
+  instances,
+  services,
+  members
+} from './shared/index.js';
+
+export default {
+  "account": account,
+  "datacenters": datacenters,
+  "monitors": {
+    "ui": {
+      "page": "create"
+    }
+  },
+  "metrics": metrics,
+  "orgs": {
+    "ui": {
+      "invite_toggled": false,
+      "member_status_tooltip": false,
+      "member_role_tooltip": false,
+      "sections": [
+        "projects",
+        "people",
+        "settings"
+      ],
+      "members_status": [
+        "Active",
+        "Inactive",
+        "Invitation Sent"
+      ],
+      "members_roles": [
+        "Owner",
+        "Unassigned",
+        "Read Only"
+      ]
+    },
+    "data": [{
+      "hide": [
+        "people"
+      ],
+      "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
+      "id": "nicola",
+      "name": "Your dashboard",
+      "image": "https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg",
+      "members": []
+    }, {
+      "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
+      "uuid": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
+      "id": "biz-tech",
+      "name": "BizTech",
+      "members": [
+        {
+          "uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f",
+          "role": "Owner",
+          "status": "Active"
+        },
+        {
+          "uuid": "6deddbaa-3b94-4373-8cf7-97129507a872",
+          "role": "Unassigned",
+          "status": "Sent invitation"
+        }
+      ]
+    }, {
+      "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
+      "uuid": "551f316d-e414-480f-9787-b4c408db3edd",
+      "id": "make-us-proud",
+      "name": "Make Us Proud",
+      "image": "/static/images/make-us-proud.svg",
+      "members": []
+    }]
+  },
+  "projects": projects,
+  "members": members,
+  "services": services,
+  "instances": instances
+}
diff --git a/frontend/src/mock-states/shared/account.js b/frontend/src/mock-states/shared/account.js
new file mode 100644
index 00000000..18e33fb6
--- /dev/null
+++ b/frontend/src/mock-states/shared/account.js
@@ -0,0 +1,13 @@
+/*eslint-disable */
+export const account = {
+  "data": {
+    "uuid": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
+    "id": "nicola",
+    "name": "Nicola",
+    "email": "nicola@biztech.com",
+    "avatar": "/static/images/avatar.png"
+  },
+  "ui": {
+    "profile_tooltip": false
+  }
+};
\ No newline at end of file
diff --git a/frontend/src/mock-states/shared/datacenters.js b/frontend/src/mock-states/shared/datacenters.js
new file mode 100644
index 00000000..9898316e
--- /dev/null
+++ b/frontend/src/mock-states/shared/datacenters.js
@@ -0,0 +1,36 @@
+/*eslint-disable */
+export const datacenters = {
+  "data": [{
+    "uuid": "f018da03-41c8-4619-a36a-ab8b706160cb",
+    "id": "us-east-1",
+    "location": "Virginia, United States"
+  }, {
+    "uuid": "c4bf6263-be98-4798-bff4-9043bbc6b4e0",
+    "id": "us-east-2",
+    "location": "Virginia, United States"
+  }, {
+    "uuid": "443750e4-a58f-4360-b956-ef84b1a9a8ad",
+    "id": "us-east-3",
+    "location": "Virginia, United States"
+  }, {
+    "uuid": "9f743fdb-9401-48ea-b19e-45fcd1fc6d21",
+    "id": "us-east-3b",
+    "location": "Virginia, United States"
+  }, {
+    "uuid": "79a3ef11-be0a-44f0-b1fd-8c335dea61f4",
+    "id": "us-sw-1",
+    "location": "Nevada, United States"
+  }, {
+    "uuid": "e69017d6-a4ce-4a0e-a7a3-993b426200fd",
+    "id": "us-west-1",
+    "location": "California, United States"
+  }, {
+    "uuid": "8d2eb6f8-27b3-4275-afab-1044cc75def1",
+    "id": "eu-ams-1",
+    "location": "Amsterdam, Netherlands"
+  }, {
+    "uuid": "4395136a-d623-4101-ab19-79f064d7a224",
+    "id": "eu-ams-1",
+    "location": "Amsterdam, Netherlands"
+  }]
+}
\ No newline at end of file
diff --git a/frontend/src/mock-states/shared/index.js b/frontend/src/mock-states/shared/index.js
new file mode 100644
index 00000000..1bc96c71
--- /dev/null
+++ b/frontend/src/mock-states/shared/index.js
@@ -0,0 +1,17 @@
+import { account } from './account';
+import { metrics } from './metrics';
+import { datacenters } from './datacenters';
+import { projects } from './projects';
+import { services } from './services';
+import { members } from './members';
+import { instances } from './instances';
+
+export {
+  account,
+  datacenters,
+  metrics,
+  projects,
+  services,
+  instances,
+  members
+};
diff --git a/frontend/src/mock-states/shared/instances.js b/frontend/src/mock-states/shared/instances.js
new file mode 100644
index 00000000..3a3966ce
--- /dev/null
+++ b/frontend/src/mock-states/shared/instances.js
@@ -0,0 +1,183 @@
+/*eslint-disable */
+export const instances = {
+  "ui": {
+    "collapsed": []
+  },
+  "data": [{
+    "uuid": "309ecd9f-ac03-474b-aff7-4bd2e743296c",
+    "name": "wordpress_01",
+    "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+    "service": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }]
+  }, {
+    "uuid": "0db6db53-de6f-4378-839e-5d5b452fbaf2",
+    "name": "nfs_01",
+    "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+    "service": "6a0eee76-c019-413b-9d5f-44712b55b993",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }]
+  }, {
+    "uuid": "250c8a6c-7d02-49a9-8abd-e1c22773041d",
+    "name": "consul",
+    "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+    "service": "97c68055-db88-45c9-ad49-f26da4264777",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }]
+  }, {
+    "uuid": "2c921f3a-8bc3-4f57-9cd7-789ebae72061",
+    "name": "memcache_01",
+    "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+    "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }]
+  }, {
+    "uuid": "68d3046e-8e34-4f5d-a0e5-db3795a250fd",
+    "name": "memcache_02",
+    "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+    "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }]
+  }, {
+    "uuid": "2ea99763-3b44-4179-8393-d66d94961051",
+    "name": "memcache_03",
+    "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+    "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }]
+  }, {
+    "uuid": "25f6bc62-63b8-4959-908e-1f6d7ff6341d",
+    "name": "memcache_04",
+    "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+    "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }]
+  }, {
+    "uuid": "8be01042-0281-4a77-a357-25979e87bf3d",
+    "name": "memcache_05",
+    "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+    "service": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }]
+  }, {
+    "uuid": "3d652e9d-73e8-4a6f-8171-84fa83740662",
+    "name": "nginx",
+    "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+    "service": "081a792c-47e0-4439-924b-2efa9788ae9e",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }]
+  }, {
+    "uuid": "c3ec7633-a02b-4615-86a0-9e6faeaae94b",
+    "name": "percona-primary",
+    "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+    "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }]
+  }, {
+    "uuid": "c2b5fec2-31e2-41a7-b7fc-cd0bb1822e76",
+    "name": "percona-secondary",
+    "datacenter": "f018da03-41c8-4619-a36a-ab8b706160cb",
+    "service": "4ee4103e-1a52-4099-a48e-01588f597c70",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }]
+  }]
+}
\ No newline at end of file
diff --git a/frontend/src/mock-states/shared/members.js b/frontend/src/mock-states/shared/members.js
new file mode 100644
index 00000000..2d27e09e
--- /dev/null
+++ b/frontend/src/mock-states/shared/members.js
@@ -0,0 +1,26 @@
+/*eslint-disable */
+export const members = {
+  "data": [{
+    "uuid": "b94033c1-3665-4c36-afab-d9c3d0b51c01"
+  }, {
+    "uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f",
+    "id": "alex-windnett",
+    "name": "Alex Windnett",
+    "email": "alex.windnett@biztech.com"
+  }, {
+    "uuid": "4a248182-f4b5-499d-af5b-d436b70bb309",
+    "id": "alex-fraser",
+    "name": "Alex Fraser",
+    "email": "alex.fraser@biztech.com"
+  }, {
+    "uuid": "a9dfe7de-3938-4e30-93db-6e3b88b003ee",
+    "id": "alex-mcleod",
+    "name": "Alex McLeod",
+    "email": "alex.mcleod@biztech.com"
+  }, {
+    "uuid": "6deddbaa-3b94-4373-8cf7-97129507a872",
+    "id": "casey-jones",
+    "name": "Casey Jones",
+    "email": "caseyjones@biztech.com"
+  }]
+}
\ No newline at end of file
diff --git a/frontend/src/mock-states/shared/metrics.js b/frontend/src/mock-states/shared/metrics.js
new file mode 100644
index 00000000..fde3b0bd
--- /dev/null
+++ b/frontend/src/mock-states/shared/metrics.js
@@ -0,0 +1,138 @@
+/*eslint-disable */
+export const metrics = {
+  "ui": {
+    "pos": 0,
+    "durations": [
+      "360",
+      "720",
+      "1440",
+      "2880"
+    ]
+  },
+  "data": {
+    "types": [{
+      "uuid": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "name": "CPU",
+      "id": "cpu-agg-usage",
+      "min": 0,
+      "max": 100,
+      "measurement": "%"
+    }, {
+      "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d6",
+      "name": "CPU",
+      "id": "cpu-wait-time",
+      "min": 0,
+      "max": 100,
+      "measurement": "bytes"
+    }, {
+      "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d7",
+      "name": "Zfs used",
+      "id": "zfs-used",
+      "min": 1,
+      "max": 2,
+      "measurement": "kb"
+    }, {
+      "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d8",
+      "name": "Zfs",
+      "id": "zfs-available",
+      "min": 0,
+      "max": 100,
+      "measurement": "%"
+    }, {
+      "uuid": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "name": "Disk",
+      "id": "load-average",
+      "min": 0,
+      "max": 20,
+      "measurement": " Mb"
+    }, {
+      "uuid": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "name": "Memory",
+      "id": "mem-agg-usage",
+      "min": 0,
+      "max": 100,
+      "measurement": " Mb"
+    }, {
+      "uuid": "dca08514-72e5-46ce-ad93-e68b3b0914d4",
+      "name": "Memory limit",
+      "id": "mem-limit",
+      "min": 0,
+      "max": 100,
+      "measurement": "%"
+    }, {
+      "uuid": "dca08514-72e5-46ce-ad94-e68b3b0914d4",
+      "name": "Memory swap",
+      "id": "mem-swap",
+      "min": 0,
+      "max": 100,
+      "measurement": "%"
+    }, {
+      "uuid": "dca08514-72e5-46ce-ad95-e68b3b0914d4",
+      "name": "Aggregated CPU usage",
+      "id": "mem-swap-limit",
+      "min": 0,
+      "max": 100,
+      "measurement": "%"
+    }, {
+      "uuid": "dca08514-72e5-46ce-ad96-e68b3b0914d4",
+      "name": "Aggregated CPU usage",
+      "id": "net-agg-packets-in",
+      "min": 0,
+      "max": 100,
+      "measurement": "%"
+    }, {
+      "uuid": "dca08514-72e5-46ce-ad97-e68b3b0914d4",
+      "name": "Aggregated CPU usage",
+      "id": "net-agg-packets-out",
+      "min": 0,
+      "max": 100,
+      "measurement": "%"
+    }, {
+      "uuid": "dca08514-72e5-47ce-ad91-e68b3b0914d4",
+      "name": "Aggregated CPU usage",
+      "id": "net-agg-bytes-in",
+      "min": 0,
+      "max": 100,
+      "measurement": "%"
+    }, {
+      "uuid": "dca08514-72e5-48ce-ad91-e68b3b0914d4",
+      "name": "Aggregated CPU usage",
+      "id": "net-agg-bytes-out",
+      "min": 0,
+      "max": 100,
+      "measurement": "%"
+    }, {
+      "uuid": "dca08514-72e5-49ce-ad91-e68b3b0914d4",
+      "name": "Aggregated CPU usage",
+      "id": "time-of-day",
+      "min": 0,
+      "max": 100,
+      "measurement": "%"
+    }],
+    "datasets": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "uuid": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec",
+      "data": []
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "uuid": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed",
+      "data": []
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "uuid": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed",
+      "data": []
+    }, {
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "uuid": "crazy-cpu",
+      "data": []
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "uuid": "crazy-disk",
+      "data": []
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "uuid": "crazy-memory",
+      "data": []
+    }]
+  }
+};
\ No newline at end of file
diff --git a/frontend/src/mock-states/shared/projects.js b/frontend/src/mock-states/shared/projects.js
new file mode 100644
index 00000000..9f11f225
--- /dev/null
+++ b/frontend/src/mock-states/shared/projects.js
@@ -0,0 +1,57 @@
+/*eslint-disable */
+export const projects = {
+  "ui": {
+    "invite_toggled": false,
+    "member_status_tooltip": false,
+    "member_role_tooltip": false,
+    "sections": [
+      "project-feed",
+      "services",
+      "instances",
+      "rollback",
+      "manifest",
+      "settings"
+    ],
+    "members_status": [
+      "Active",
+      "Inactive",
+      "Invitation Sent"
+    ],
+    "members_roles": [
+      "Owner",
+      "Unassigned",
+      "Read Only"
+    ]
+  },
+  "data": [{
+    "uuid": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
+    "id": "forest-foundation-dev",
+    "name": "WarpRecords Blog",
+    "plan": "20.05$ per day",
+    "members": [{
+      "uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f",
+      "role": "Owner",
+      "status": "Active"
+    },
+      {
+        "uuid": "6deddbaa-3b94-4373-8cf7-97129507a872",
+        "role": "Unassigned",
+        "status": "Sent invitation"
+      }]
+  }, {
+    "uuid": "9fcb374d-a267-4c2a-9d9c-ba469b804639",
+    "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
+    "id": "forest-foundation-testing",
+    "name": "Forest Foundation Testing",
+    "plan": "20.05$ per day",
+    "members": []
+  }, {
+    "uuid": "ac2c2498-e865-4ee3-9e26-8c75a81cbe25",
+    "org": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
+    "id": "forest-foundation-production",
+    "name": "Forest Foundation Production",
+    "plan": "100.17$ per day",
+    "members": []
+  }]
+}
\ No newline at end of file
diff --git a/frontend/src/mock-states/shared/services.js b/frontend/src/mock-states/shared/services.js
new file mode 100644
index 00000000..e1bd203a
--- /dev/null
+++ b/frontend/src/mock-states/shared/services.js
@@ -0,0 +1,158 @@
+/*eslint-disable */
+export const services = {
+  "ui": {
+    "collapsed": [],
+    "sections": [
+      "summary",
+      "instances",
+      "metrics",
+      "networks",
+      "tags-metadata",
+      "activity-feed",
+      "service-manifest",
+      "firewall"
+    ],
+    "tooltip": {
+      "show": false
+    }
+  },
+  "data": [{
+    "uuid": "081a792c-47e0-4439-924b-2efa9788ae9e",
+    "id": "nginx",
+    "name": "Nginx",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "instances": 1,
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }],
+    "connections": [
+      "be227788-74f1-4e5b-a85f-b5c71cbae8d8"
+    ]
+  }, {
+    "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8",
+    "id": "wordpress",
+    "name": "Wordpress",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "instances": 1,
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "crazy-cpu"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "crazy-disk"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "crazy-memory"
+    }],
+    "connections": [
+      "6a0eee76-c019-413b-9d5f-44712b55b993",
+      "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+      "4ee4103e-1a52-4099-a48e-01588f597c70"
+    ]
+  }, {
+    "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993",
+    "id": "nfs",
+    "name": "NFS",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "instances": 1,
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }]
+  }, {
+    "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c",
+    "id": "memcached",
+    "name": "Memcached",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "instances": 5,
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }]
+  }, {
+    "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70",
+    "id": "percona",
+    "name": "Percona",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "instances": 5,
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }]
+  }, {
+    "uuid": "9572d367-c4ae-4fb1-8ad5-f5e3830e7034",
+    "id": "primary",
+    "name": "Primary",
+    "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "instances": 1,
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }]
+  }, {
+    "uuid": "c8411ef0-ab39-42cb-a704-d20b170eff31",
+    "id": "secondaries",
+    "name": "Secondaries",
+    "parent": "4ee4103e-1a52-4099-a48e-01588f597c70",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "instances": 4,
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }]
+  }, {
+    "uuid": "97c68055-db88-45c9-ad49-f26da4264777",
+    "id": "consul",
+    "name": "Consul",
+    "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401",
+    "instances": 1,
+    "metrics": [{
+      "type": "2aaa237d-42b3-442f-9094-a17aa470014b",
+      "dataset": "3e6ee79a-7453-4fc6-b9da-7ae1e41138ec"
+    }, {
+      "type": "dca08514-72e5-46ce-ad91-e68b3b0914d9",
+      "dataset": "4e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }, {
+      "type": "dca08514-72e5-46ce-ad92-e68b3b0914d4",
+      "dataset": "6e6ee79a-7453-4fc6-b9da-7ae1e41138ed"
+    }]
+  }]
+}
\ No newline at end of file
diff --git a/frontend/src/mock-states/testing.js b/frontend/src/mock-states/testing.js
new file mode 100644
index 00000000..9f7d101f
--- /dev/null
+++ b/frontend/src/mock-states/testing.js
@@ -0,0 +1,60 @@
+/*eslint-disable */
+
+import {
+  account,
+  datacenters,
+  metrics,
+  projects,
+  instances,
+  services,
+  members
+} from './shared/index.js';
+
+export default {
+  "account": account,
+  "datacenters": datacenters,
+  "monitors": {
+    "ui": {
+      "page": "create"
+    }
+  },
+  "metrics": metrics,
+  "orgs": {
+    "ui": {
+      "invite_toggled": false,
+      "member_status_tooltip": false,
+      "member_role_tooltip": false,
+      "hide_add_and_manage": true,
+      "sections": [
+        "projects",
+        "people",
+        "settings"
+      ],
+      "members_status": [
+        "Active",
+        "Inactive",
+        "Invitation Sent"
+      ],
+      "members_roles": [
+        "Owner",
+        "Unassigned",
+        "Read Only"
+      ]
+    },
+    "data": [{
+      "hide": [
+        "people"
+      ],
+      "owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
+      "uuid": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
+      "id": "nicola",
+      "name": "Personal",
+      "image": "https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg",
+      "members": []
+    }]
+  },
+  "projects": projects,
+  "members": members,
+  "services": services,
+  "instances": instances
+}
diff --git a/frontend/webpack/base.js b/frontend/webpack/base.js
index d75e6709..daa463ff 100644
--- a/frontend/webpack/base.js
+++ b/frontend/webpack/base.js
@@ -9,7 +9,8 @@ const {
   MODULES,
   FRONTEND,
   UI,
-  STATIC
+  STATIC,
+  MOCKSTATE
 } = paths;
 
 module.exports = {
@@ -24,7 +25,8 @@ module.exports = {
         [`@${path.basename(fullpath)}`]: fullpath
       }), {
         '@root': FRONTEND,
-        '@ui': UI
+        '@ui': UI,
+        '@mock-states': MOCKSTATE
       })
   },
   resolveLoader: {
diff --git a/frontend/webpack/paths.js b/frontend/webpack/paths.js
index c8f5e346..d6bfb989 100644
--- a/frontend/webpack/paths.js
+++ b/frontend/webpack/paths.js
@@ -14,6 +14,7 @@ module.exports = {
     'node_modules'
   ],
   FRONTEND: path.join(FRONTEND, 'src'),
+  MOCKSTATE: path.join(FRONTEND, 'src/mock-states'),
   UI: process.env.NODE_ENV === 'production'
     ? path.join(FRONTEND, 'node_modules', '@tomgco/joyent-portal-ui', 'dist')
     : path.join(UI, 'src'),