Prototyping with Vue Rocks31456-team-dashboard

- Got the User Display Working
- Simulation Panel
- Calendar Initialised

14 files changed, 581 insertions, 93 deletions

diff --git a/app/assets/javascripts/teamdashboard/components/calendarline.vue b/app/assets/javascripts/teamdashboard/components/calendarline.vue
new file mode 100644
index 00000000000..0ced20b22d5
--- /dev/null
+++ b/app/assets/javascripts/teamdashboard/components/calendarline.vue
@@ -0,0 +1,20 @@
+<script>
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+
+export default {
+  props: {
+    milestone: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    userAvatarImage,
+  }
+}
+</script>
+<template>
+  <div class="row">
+    Calendar
+  </div>
+</template>
diff --git a/app/assets/javascripts/teamdashboard/components/issue_item.vue b/app/assets/javascripts/teamdashboard/components/issue_item.vue
new file mode 100644
index 00000000000..6169ce350e5
--- /dev/null
+++ b/app/assets/javascripts/teamdashboard/components/issue_item.vue
@@ -0,0 +1,59 @@
+<script>
+export default {
+  props: {
+    issue: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    issueClass(state) {
+      return `issuable-row issue-block issue-state issue-state-${state}`;
+    },
+    showLabel(label) {
+      return true;
+    },
+    labelStyle(label) {
+      return {
+        backgroundColor: label.color,
+        color: label.textColor,
+      };
+    },
+  }
+}
+</script>
+<template>
+  <li :class="issueClass(issue.state)" data-id="4057910" data-iid="27164" data-url="/gitlab-org/gitlab-ce/issues/27164" id="sortable_issue_4057910">
+          <span>
+            <i
+              class="fa fa-eye-slash confidential-icon"
+              v-if="issue.confidential"
+              aria-hidden="true"
+            />
+            <a
+              class="js-no-trigger"
+              :href="issue.web_url"
+              :title="issue.title">{{ issue.title }}</a>
+
+            <span v-if="issue.weight">
+              <i aria-hidden="true" class="fa fa-balance-scale"></i> {{issue.weight}} 
+            </span>
+          </span>
+          <div class="issuable-detail">
+          <a href="/gitlab-org/gitlab-ce/issues/27164"><span class="issuable-number">#27164</span></a>
+          <a href="/gitlab-org/gitlab-ce/issues?label_name=backend&amp;milestone_title=9.3&amp;state=all">
+            <span
+              class="label color-label has-tooltip"
+              style="background-color:#666"
+              v-for="label in issue.labels"
+              v-if="showLabel(label)" 
+              :style="labelStyle(label)"
+              :title="label.description">
+              {{ label }}
+            </span>
+          </a>
+          <span class="assignee-icon">
+          </span>
+          </div>
+  </li>
+</template>
diff --git a/app/assets/javascripts/teamdashboard/components/issue_list.vue b/app/assets/javascripts/teamdashboard/components/issue_list.vue
new file mode 100644
index 00000000000..1f6275f7732
--- /dev/null
+++ b/app/assets/javascripts/teamdashboard/components/issue_list.vue
@@ -0,0 +1,25 @@
+<script>
+import IssueItem from './issue_item.vue';
+
+export default {
+  props: {
+    issues: {
+      type: Array,
+      required: true,
+    },
+  },
+  components: {
+    IssueItem
+  },
+  methods: {
+    
+  }
+}
+</script>
+<template>
+  <ul class="well-list issues-sortable-list" data-state="unassigned" id="issues-list-unassigned" style="min-height: 0px;">
+    <template v-for="issue in issues">
+      <IssueItem :issue="issue"/>
+    </template>
+  </ul>
+</template>
diff --git a/app/assets/javascripts/teamdashboard/components/teamdashboard.vue b/app/assets/javascripts/teamdashboard/components/teamdashboard.vue
index ad8974fcd1e..92ff9bd54d6 100644
--- a/app/assets/javascripts/teamdashboard/components/teamdashboard.vue
+++ b/app/assets/javascripts/teamdashboard/components/teamdashboard.vue
@@ -1,7 +1,14 @@
 <script>
-import Store from 'store';
-import Service from 'service';
-import TodoComponent from 'todoComponent';
+import TeamDashboardStore from '../stores/teamdashboard_store.js';
+import TeamDashboardService from '../services/teamdashboard_service.js';
+
+import TeamMemberItem from './teammember_item.vue';
+import IssueList from './issue_list.vue';
+import CalendarLine from './calendarline.vue';
+import SimulationPanel from './teamdashboard_simulation_panel.vue';
+
+import '../../lib/utils/datetime_utility';
+
 export default {
   /**  
    * Although most data belongs in the store, each component it's own state.
@@ -12,74 +19,192 @@ export default {
    * We need to access the state of our store.
    */   
   data() {
-    const store = new Store();
+    const store = new TeamDashboardStore();
 
     return {
+      store,
+      milestone: '',
+      milestoneInfo: {},
+      groupInfo: store.groupInfo,
+      groupMembers: store.groupMembers,
+      groupConfiguration: store.groupConfiguration,
+      deliverableInfo: store.deliverableInfo,
       isLoading: false,
-      store: store,
-      todos: store.todos,
+      loadingStatus: ''
     };
   },
 
   components: {
-    todo: TodoComponent,
+    TeamMemberItem,
+    IssueList,
+    CalendarLine,
+    SimulationPanel,
   },
 
   created() {
-    this.service = new Service('todos');
+    const groupId = (window.gl.target === 'local') ? 56 : 'gl-frontend';
+    this.service = new TeamDashboardService(groupId);
 
-    this.getTodos();
-  },
+    this.isLoading = true;
+    this.loadingStatus = 'Group';
 
-  methods: {
-    getTodos() {
-      this.isLoading = true;
+    this.fetchGroup()
+      .then(()=> {
+        this.loadingStatus = 'Group Members';
+        this.fetchGroupMembers().
+          then(() => {
+            this.fetchGroupConfiguration();
+
+            this.milestone = this.store.groupConfiguration.currentMilestone;
+            
+
+            let currentProject = this.store.groupConfiguration.projects[0];
+
+            this.loadingStatus = 'Milestones';
+            this.fetchMilestones(currentProject).
+              then(() => {
+
+                this.milestoneInfo = _.findWhere(this.store.milestones,{title:this.milestone});
+                console.log('Milestone : ',this.milestoneInfo);
+
+                this.loadingStatus = 'Deliverables';
+                this.fetchProjectMilestoneIssues(currentProject,this.milestone, this.store.groupConfiguration.groupIdentityLabels.join(','))
+                  .then(() => {
+                    this.isLoading = false;
+                  });    
+              });                        
+          });        
+      });
+
+    
+  },  
 
-      this.service.getTodos()
+  methods: {
+    fetchGroup() {
+      return this.service.getGroupInfo()
         .then(response => response.json())
         .then((response) => {
-          this.store.setTodos(response);
-          this.isLoading = false;
+          this.store.storeGroupInfo(response);         
         })
         .catch(() => {
-          this.isLoading = false;
-          // Show an error
+          // eslint-disable-next-line no-new
+          new Flash('An error occurred while fetching the group info.');
         });
     },
-
-    addTodo(todo) {
-      this.service.addTodo(todo)
-      then(response => response.json())
-      .then((response) => {
-        this.store.addTodo(response);
-      })
-      .catch(() => {
-        // Show an error
-      });
+    fetchGroupConfiguration() {
+      /*
+        return this.service.getGroupConfiguration()
+          .then((response) => {
+            this.store.storeGroupConfiguration(response)
+          });
+          */
+          //As this is currently a mock implementation its synchronous
+          this.store.storeGroupConfiguration(this.service.getGroupConfiguration());
+    },
+    fetchGroupMembers() {
+      return this.service.getGroupMembers()
+        .then(response => response.json())
+        .then((response) => {
+          this.store.storeGroupMembers(response);          
+        })
+        .catch(() => {
+          // eslint-disable-next-line no-new
+          new Flash('An error occurred while fetching the group members.');
+        });
+    },
+    fetchMilestones(project) {
+      return this.service.getMilestones(project)
+        .then(response => response.json())
+        .then((response) => {
+          this.store.storeMilestones(response);          
+        })
+        .catch(() => {
+          // eslint-disable-next-line no-new
+          new Flash('An error occurred while fetching the milestones.');
+        });
+    },
+    fetchProjectMilestoneIssues(project, milestone, defaultLabels) {
+      return this.service.getProjectMilestoneDeliverables(project, milestone, defaultLabels)
+        .then(response => response.json())
+        .then((response) => {
+          this.store.storeMilestoneDeliverables(response);          
+        })
+        .catch(() => {
+          // eslint-disable-next-line no-new
+          new Flash('An error occurred while fetching the group deliverables.');
+        });
+    },
+    formatShortDate(selectedDate) {
+      return dateFormat(selectedDate, 'mmm d, yyyy');
     }
   }
 }
 </script>
 <template>
-  <div class="container">
+  <div class="container teamdashboard milestone-content">
     <div v-if="isLoading">
-      <i
-        class="fa fa-spin fa-spinner"
-        aria-hidden="true" />
-    </div>
 
+      <h4 class="text-center loading">Loading {{loadingStatus}} ... </h4>
+    </div>    
     <div
-      v-if="!isLoading"
-      class="js-todo-list">
-      <template v-for='todo in todos'>
-        <todo :data="todo" />
-      </template>
-
-      <button
-        @click="addTodo"
-        class="js-add-todo">
-        Add Todo
-      </button>
+      v-if="!isLoading && groupInfo">
+      <div class="row">
+        <div class="col-sm-8">
+          <h5>Team {{store.groupInfo.name}}</h5>
+          <h2>
+            Release {{milestone}} <small>{{formatShortDate(milestoneInfo.start_date)}}-{{formatShortDate(milestoneInfo.due_date)}}</small>
+          </h2>
+        </div>
+        <div class="col-sm-4">
+          <div class="row">
+            <div class="col-sm-4 text-center">
+              <h2>{{deliverableInfo.doneDeliverables}} / {{store.milestoneDeliverables.length}}</h2>
+              <small>Deliverables</small>
+            </div>
+            <div class="col-sm-4 text-center">
+              <h2>4</h2>
+              <small>Regressions</small>
+            </div>
+            <div class="col-sm-4 text-center">
+              <h2>0</h2>
+              <small>Blockers</small>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <CalendarLine :milestone="milestoneInfo"/>
+
+      <div v-if="store.nonAssignedMilestoneDeliverables.length>0" class="panel panel-default">
+        <div class="panel-heading">
+          <div class="title">
+            <h4>{{ store.nonAssignedMilestoneDeliverables.length}} Unassigned Issues</h4>
+          </div>
+        </div>
+        <!--<ul class="well-list issues-sortable-list" data-state="unassigned" id="issues-list-unassigned" style="min-height: 0px;">
+          <li class="issuable-row " data-id="4057910" data-iid="27164" data-url="/gitlab-org/gitlab-ce/issues/27164" id="sortable_issue_4057910">
+          <span>
+          <a title="Projects::IssuesControllers#show is slow due to GIT and DB access" href="/gitlab-org/gitlab-ce/issues/27164">Projects::IssuesControllers#show is slow due to GIT and DB access</a>
+          </span>
+          <div class="issuable-detail">
+          <a href="/gitlab-org/gitlab-ce/issues/27164"><span class="issuable-number">#27164</span>
+          </a><a href="/gitlab-org/gitlab-ce/issues?label_name=backend&amp;milestone_title=9.3&amp;state=all"><span class="label color-label has-tooltip" style="background-color: #F0AD4E; color: #FFFFFF" title="Issues that require backend work" data-container="body">backend</span></a><a href="/gitlab-org/gitlab-ce/issues?label_name=Deliverable&amp;milestone_title=9.3&amp;state=all"><span class="label color-label has-tooltip" style="background-color: #428BCA; color: #FFFFFF" title="" data-container="body">Deliverable</span></a><a href="/gitlab-org/gitlab-ce/issues?label_name=issues&amp;milestone_title=9.3&amp;state=all"><span class="label color-label has-tooltip" style="background-color: #428bca; color: #FFFFFF" title="Issues related to managing issues, including milestones and labels" data-container="body">issues</span></a><a href="/gitlab-org/gitlab-ce/issues?label_name=Discussion&amp;milestone_title=9.3&amp;state=all"><span class="label color-label has-tooltip" style="background-color: #44ad8e; color: #FFFFFF" title="Issues for the Discussion team. Covers Issues, Merge Requests, Markdown, etc. PM: @victorwu" data-container="body">Discussion</span></a><a href="/gitlab-org/gitlab-ce/issues?label_name=performance&amp;milestone_title=9.3&amp;state=all"><span class="label color-label has-tooltip" style="background-color: #ff5f00; color: #FFFFFF" title="Issues related to GitLab's performance" data-container="body">performance</span></a><span class="assignee-icon">
+          </span>
+          </div>
+          </li>
+        </ul>-->
+        <IssueList :issues="store.nonAssignedMilestoneDeliverables"/>
+      </div>
+
+      <div class="row">
+        <template v-for="(groupMember, index) in store.groupMembers">
+          <div :class="(index % 2 ? '' : 'left-col') + ' col-sm-6'">
+          <TeamMemberItem :data="groupMember"/>
+          </div>
+        </template>
+      </div>
+
+      <SimulationPanel :store="store"/>
     </div>
-  <div>
+  </div>
 </template>
diff --git a/app/assets/javascripts/teamdashboard/components/teamdashboard_simulation_panel.vue b/app/assets/javascripts/teamdashboard/components/teamdashboard_simulation_panel.vue
new file mode 100644
index 00000000000..e4a627591a9
--- /dev/null
+++ b/app/assets/javascripts/teamdashboard/components/teamdashboard_simulation_panel.vue
@@ -0,0 +1,29 @@
+
+<script>
+export default {
+  props: {
+    store: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    
+  }
+}
+</script>
+<template>
+  <div class="simulationpanel">
+    <div  class="panel panel-default">
+        <div class="panel-heading">
+          <div class="title">
+            <strong>Simulate : </strong>
+          </div>
+        </div>
+        <div class="panel-content">
+          Testing ...
+        </div>
+        
+      </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/teamdashboard/components/teammember_item.vue b/app/assets/javascripts/teamdashboard/components/teammember_item.vue
new file mode 100644
index 00000000000..9cb69d6f8c2
--- /dev/null
+++ b/app/assets/javascripts/teamdashboard/components/teammember_item.vue
@@ -0,0 +1,32 @@
+<script>
+import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
+import IssueList from './issue_list.vue';
+
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    userAvatarImage,
+    IssueList,
+  }
+}
+</script>
+<template>
+
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <div class="title">
+        <h4>
+        <user-avatar-image :img-src="data.avatar_url" :size="40"/> {{data.name}}
+        <small v-if="data.status" class="text-muted"> - {{data.status}}</small>
+        <div><small>{{data.deliverables.length}} Deliverables<template v-if="data.issues.length>0"> / {{data.issues.length}} Issues</template></small></div>
+      </h4>
+      </div>
+    </div>
+    <IssueList :issues="data.deliverables"/>
+  </div>
+</template>
diff --git a/app/assets/javascripts/teamdashboard/services/group_service.js b/app/assets/javascripts/teamdashboard/services/group_service.js
deleted file mode 100644
index 8adb53ea86d..00000000000
--- a/app/assets/javascripts/teamdashboard/services/group_service.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable class-methods-use-this */
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
-
-export default class EnvironmentsService {
-  constructor(endpoint) {
-    this.environments = Vue.resource(endpoint);
-    this.folderResults = 3;
-  }
-
-  get(scope, page) {
-    return this.environments.get({ scope, page });
-  }
-
-  postAction(endpoint) {
-    return Vue.http.post(endpoint, {}, { emulateJSON: true });
-  }
-
-  getFolderContent(folderUrl) {
-    return Vue.http.get(`${folderUrl}.json?per_page=${this.folderResults}`);
-  }
-}
diff --git a/app/assets/javascripts/teamdashboard/services/teamdashboard_service.js b/app/assets/javascripts/teamdashboard/services/teamdashboard_service.js
new file mode 100644
index 00000000000..833b6a852fd
--- /dev/null
+++ b/app/assets/javascripts/teamdashboard/services/teamdashboard_service.js
@@ -0,0 +1,42 @@
+/* eslint-disable class-methods-use-this */
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+import TeamDashboardMock from '../teamdashboard_mock';
+
+Vue.use(VueResource);
+
+export default class TeamDashboardService {
+  constructor(groupId) {
+    this.groupId = groupId;
+    this.group = Vue.resource(`[[API]]/groups/${groupId}`);
+    this.groupMembers = Vue.resource(`[[API]]/groups/${groupId}/members`);
+
+    this.milestones = Vue.resource(`[[API]]/groups/${groupId}/milestones`);
+  }
+
+  getGroupInfo() {
+    return this.group.get();
+  }
+
+  getGroupMembers() {
+    return this.groupMembers.get();
+  }
+
+  getMilestones(project) {
+    return Vue.http.get(`[[API]]/projects/${encodeURIComponent(project)}/milestones?per_page=200`);
+  }
+
+  getGroupConfiguration() {
+    // return Vue.http.get(`/app/assets/javascripts/teamdashboard/data/${this.groupId}.json`);
+    return TeamDashboardMock[this.groupId];
+  }
+
+  getProjectMilestoneDeliverables(project, milestone, defaultLabels) {
+    return Vue.http.get(`[[API]]/projects/${encodeURIComponent(project)}/issues?milestone=${milestone}&labels=${defaultLabels}&per_page=200`);
+  }
+
+  getFolderContent(folderUrl) {
+    return Vue.http.get(`${folderUrl}.json?per_page=${this.folderResults}`);
+  }
+}
diff --git a/app/assets/javascripts/teamdashboard/stores/teamdashboard_store.js b/app/assets/javascripts/teamdashboard/stores/teamdashboard_store.js
new file mode 100644
index 00000000000..ba07d633028
--- /dev/null
+++ b/app/assets/javascripts/teamdashboard/stores/teamdashboard_store.js
@@ -0,0 +1,91 @@
+import '~/lib/utils/common_utils';
+/**
+ * Team Dashboard Store.
+ *
+ * Stores the selected group, group members, issues
+ */
+export default class TeamDashboardStore {
+  constructor() {
+    this.groupInfo = {};
+    this.groupMembers = [];
+    this.groupConfiguration = {};
+
+    this.milestones = [];
+
+    this.milestoneDeliverables = [];
+    this.nonAssignedMilestoneDeliverables = [];
+
+    this.deliverableInfo = {
+      doneDeliverables: 0,
+    };
+
+    this.blockerIssues = [];
+    this.regressionIssues = [];
+
+    return this;
+  }
+
+  storeGroupInfo(groupInfo) {
+    this.groupInfo = groupInfo;
+    return groupInfo;
+  }
+
+  storeGroupMembers(groupMembers) {
+    this.groupMembers = _.sortBy(groupMembers, 'name');
+    this.groupMembers.forEach((member) => {
+      member.deliverables = [];
+      member.issues = [];
+    });
+
+    return this.groupMembers;
+  }
+
+  storeGroupConfiguration(groupConfiguration) {
+    this.groupConfiguration = groupConfiguration;
+    return groupConfiguration;
+  }
+
+  storeMilestones(milestones) {
+    const transformedMilestones = [];
+
+    milestones.forEach((milestone) => {
+      const newMilestone = milestone;
+      if (newMilestone.due_date) newMilestone.due_date = new Date(newMilestone.due_date);
+      if (newMilestone.start_date) newMilestone.start_date = new Date(newMilestone.start_date);
+      transformedMilestones.push(newMilestone);
+    });
+
+    this.milestones = transformedMilestones;
+    return milestones;
+  }
+
+  storeMilestoneDeliverables(issues) {
+    this.nonAssignedMilestoneDeliverables = [];
+
+    let doneDeliverables = 0;
+
+    issues.forEach((issue) => {
+      let foundGroupMember = false;
+      issue.assignees.forEach((assignee) => {
+        const selectedMember = this.groupMembers.find(member => member.id === assignee.id);
+        if (selectedMember) {
+          selectedMember.deliverables.push(issue);
+          foundGroupMember = true;
+        }
+      });
+      if (!foundGroupMember) {
+        this.nonAssignedMilestoneDeliverables.push(issue);
+      }
+      if (issue.state === 'closed') {
+        doneDeliverables += 1;
+      }
+    });
+
+    this.milestoneDeliverables = issues;
+
+    this.deliverableInfo.doneDeliverables = doneDeliverables;
+
+    return issues;
+  }
+
+}
diff --git a/app/assets/javascripts/teamdashboard/teamdashboard_bundle.js b/app/assets/javascripts/teamdashboard/teamdashboard_bundle.js
index 4394e07f580..0e04ec3c052 100644
--- a/app/assets/javascripts/teamdashboard/teamdashboard_bundle.js
+++ b/app/assets/javascripts/teamdashboard/teamdashboard_bundle.js
@@ -2,33 +2,23 @@
 import Vue from 'vue';
 import VueResource from 'vue-resource';
 
+import TeamDashboardComponent from './components/teamdashboard.vue';
+
+import '../vue_shared/vue_resource_api_interceptor';
+
 Vue.use(VueResource);
 
 document.addEventListener('DOMContentLoaded', () => {
   window.gl = window.gl || {};
 
-  const target = gl.utils.getParameterByName('privateToken') || 'local';
+  window.gl.target = gl.utils.getParameterByName('privateToken') || 'local';
   const privateToken = gl.utils.getParameterByName('privateToken') || 'u8awsaDqQr-TDbrf8Kxq';
-  const groupId = (target === 'local') ? 56 : 'gl-frontend';
-
-  const baseUrl = target === 'local' ? '/api/v4' : 'https://gitlab.com/api/v4';
-
-
-  /*this.boards = Vue.resource(`${root}{/id}.json`, {}, {
-    issues: {
-      method: 'GET',
-      url: `${root}/${boardId}/issues.json`
-    }
-  });*/
+  const groupId = (window.gl.target === 'local') ? 56 : 'gl-frontend';
 
+  window.gl.baseUrl = window.gl.target === 'local' ? '/api/v4' : 'https://gitlab.com/api/v4';
 
-  $.get({
-    url: `${baseUrl}/groups/${groupId}?private_token=${privateToken}`
-  });
 
-  $.get({
-    url: `${baseUrl}/groups/${groupId}/members?private_token=${privateToken}`
-  });
+/*
 
   $.get({
     url: `${baseUrl}/projects/gitlab-org%2fgitlab-ce/issues?milestone=9.3&assignee_username=timzallmann&private_token=${privateToken}`,
@@ -36,14 +26,15 @@ document.addEventListener('DOMContentLoaded', () => {
       //alert(request.getResponseHeader('X-Total'));
      }
   });
+  */
 
-  /*new Vue({
-    el: '#environments-list-view',
+  new Vue({
+    el: '#team_dashboard-view',
     components: {
-      'environments-table-app': EnvironmentsComponent,
+      'teamdashboard-app': TeamDashboardComponent,
     },
-    render: createElement => createElement('environments-table-app'),
-  });*/
+    render: createElement => createElement('teamdashboard-app'),
+  });
 
 
 });
diff --git a/app/assets/javascripts/teamdashboard/teamdashboard_mock.js b/app/assets/javascripts/teamdashboard/teamdashboard_mock.js
new file mode 100644
index 00000000000..a5c6f02fc83
--- /dev/null
+++ b/app/assets/javascripts/teamdashboard/teamdashboard_mock.js
@@ -0,0 +1,19 @@
+/**
+ * Different Mock Configs for basic usage
+ */
+
+const mockData = {
+  'gl-frontend': {
+    currentMilestone: '9.3',
+    projects: [
+      'gitlab-org/gitlab-ce',
+    ],
+    groupIdentityLabels: [
+      'frontend',
+      'Deliverable',
+    ],
+    deliverableLabel: 'Deliverable',
+  },
+};
+
+export default mockData;
diff --git a/app/assets/javascripts/vue_shared/vue_resource_api_interceptor.js b/app/assets/javascripts/vue_shared/vue_resource_api_interceptor.js
new file mode 100644
index 00000000000..7f571b0ab9c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/vue_resource_api_interceptor.js
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+// Inject Private Token + Target URL
+Vue.http.interceptors.push((request, next) => {
+  if (request.url.indexOf('[[API]]') > -1) {
+    const privateToken = gl.utils.getParameterByName('privateToken') || 'u8awsaDqQr-TDbrf8Kxq';
+    const baseUrl = window.gl.target === 'local' ? '/api/v4' : 'https://gitlab.com/api/v4';
+
+    // eslint-disable-next-line no-param-reassign
+    request.url = request.url.replace('[[API]]', baseUrl);
+
+    // eslint-disable-next-line no-param-reassign
+    request.headers['PRIVATE-TOKEN'] = privateToken;
+  }
+  
+  next();
+});
diff --git a/app/assets/stylesheets/pages/teamdashboard.scss b/app/assets/stylesheets/pages/teamdashboard.scss
new file mode 100644
index 00000000000..ddd61f866eb
--- /dev/null
+++ b/app/assets/stylesheets/pages/teamdashboard.scss
@@ -0,0 +1,57 @@
+
+.issue-state {
+  border-left:solid 4px $white-normal;
+}
+
+.issue-state-closed {
+  border-left-color: $green-500;
+}
+
+.issue-state-opened, .issue-state-reopened {
+  border-left-color: $blue-500;
+}
+
+.release-late {
+  .issue-state-opened, .issue-state-reopened {
+    border-left-color: $red-500;
+  }
+}
+
+.teamdashboard {
+  .panel-heading {
+    h1,h2,h3,h4,h5 {
+      margin: 0;
+    }
+
+    .text-muted {
+      font-weight:300;
+      color: $gl-gray-light;
+    }
+  }
+
+  .issuable-detail {
+    display:none;
+  }
+
+  .left-col {
+    clear:both;
+  }
+
+}
+
+.simulationpanel {
+    position: fixed;
+    top: 110px;
+    left: 20px;
+    z-index: 1000;
+    width: 200px;
+
+    .panel-heading {
+      padding: 4px;
+    }
+
+    .panel-content {
+      padding: 4px;
+      
+    }
+}
diff --git a/app/views/groups/team_dashboard/index.html.haml b/app/views/groups/team_dashboard/index.html.haml
index ca8c481c0a2..8ea2830dd1b 100644
--- a/app/views/groups/team_dashboard/index.html.haml
+++ b/app/views/groups/team_dashboard/index.html.haml
@@ -4,4 +4,6 @@
   = webpack_bundle_tag 'common_vue'
   = webpack_bundle_tag 'teamdashboard'
 
-  %script#js-board-template{ type: "text/x-template" }= render "projects/boards/components/board"
+#team_dashboard-view
+
+