Updated

config/dev.env.js

@@ -7,7 +7,7 @@ module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   SESSION: '"http://fortress.sh/v1/sessions"',
   API_URL: '"http://fortress.sh/"',
-  API_TIMEOUT: '"4000"',
+  API_TIMEOUT: '"10000"',
   GITHUB_OAUTH: '"https://github.com/login/oauth/authorize?client_id=aa942c520baf3f84f67f&scope=admin:org_hook%20admin:repo_hook%20admin:public_key%20repo%20user"',
   SOCKET_URL: '"ws://fortress.sh"',
   SOCKET_PATH: '"/notifications"',

config/prod.env.js

@@ -5,7 +5,7 @@ module.exports = {
   NODE_ENV: '"production"',
   SESSION: '"http://fortress.sh/v1/sessions"',
   API_URL: '"http://fortress.sh/"',
-  API_TIMEOUT: '"4000"',
+  API_TIMEOUT: '"10000"',
   GITHUB_OAUTH: '"https://github.com/login/oauth/authorize?client_id=aa942c520baf3f84f67f&scope=admin:org_hook%20admin:repo_hook%20admin:public_key%20repo%20user"',
   SOCKET_URL: '"wss://fortress.sh"',
   SOCKET_PATH: '"/notifications"',

config/test.env.js

@@ -6,7 +6,7 @@ module.exports = merge(devEnv, {
   NODE_ENV: '"testing"',
   SESSION: '"http://api.fortress.sh/v1/sessions"',
   API_URL: '"http://api.fortress.sh/"',
-  API_TIMEOUT: '"4000"',
+  API_TIMEOUT: '"10000"',
   GITHUB_OAUTH: '"https://github.com/login/oauth/authorize?client_id=aa942c520baf3f84f67f&scope=admin:org_hook%20admin:repo_hook%20admin:public_key%20repo%20user"',
   SOCKET_URL: '"ws://websockets.fortress.sh"',
   SOCKET_PATH: '"/notifications"',

src/components/builds/build-item.vue

@@ -5,17 +5,19 @@
     <article class="media">
         <div class="media-left">
           <figure class="image is-64x64">
-            <img v-if="status == 'success'"
+            <img v-if="status == 'successful'"
               src="/static/success.svg">
-            <img v-else-if="status == 'failure'"
+            <img v-else-if="status == 'failed'"
               src="/static/exclamation-mark.svg">
             <img v-else-if="status == 'running'"
               src="/static/running.svg">
-            <img v-else-if="status == 'maintenance'"
+            <img v-else-if="status == 'maintenanced'"
               src="/static/fence.svg">
             <img v-else-if="status == 'created'"
               src="/static/new.svg">
             <img v-else-if="status == 'scheduled'"
+              src="/static/queue.svg">
+            <img v-else-if="status == 'timeouted'"
               src="/static/scheduled.svg">
             <img v-else
               src="/static/fence.svg">
@@ -24,9 +26,9 @@
         <div class="media-content">
           <div class="content">
             <p class="fsh-elipsis">
-              <strong>{{ branch }}</strong>
+              <strong>{{ branch }} # {{ commit }} # {{ id }}</strong>
               <br>
-              <small>1 hour ago</small>
+              <small>{{ createdAtFromNow }}</small>
             </p>
           </div>
         </div>
@@ -35,6 +37,7 @@
 </template>
 <script>
 import { mapGetters, mapActions } from 'vuex';
+import moment from 'moment';
 
 export default {
   created() {
@@ -45,6 +48,9 @@ export default {
   },
   computed: {
     ...mapGetters('socket', ['connection']),
+    createdAtFromNow() {
+      return moment(this.createdAt).fromNow();
+    },
   },
   methods: {
     ...mapActions('builds', ['update']),
@@ -53,6 +59,8 @@ export default {
     status: String,
     id: Number,
     branch: String,
+    createdAt: String,
+    commit: String,
   },
 };
 </script>

src/components/builds/build-page.vue

@@ -1,8 +1,8 @@
 <template>
-  <div id="build-page">
+  <div id="build-page" v-if="!isBuildLoading && !isLogsLoading">
     <br>
     <div class="content">
-      <pre :class="buildStatusClassName">{{ logs || '...' }}</pre>
+      <pre width="80" :class="buildStatusClassName">{{ logs || '...' }}</pre>
     </div>
   </div>
 </template>
@@ -12,13 +12,17 @@ import { mapState, mapActions, mapGetters } from 'vuex';
 export default {
   created() {
     const projectId = this.$route.params.project_id;
-    const buildId = this.$route.params.id;
-    this.prefetch({
+    const id = this.$route.params.id;
+    this.prefetchLogs({
       projectId,
-      buildId,
+      id,
     });
-    this.updateBuildEvent = `builds:${buildId}:update`;
-    this.newLogEvent = `logs:${buildId}:new`;
+    this.prefetchBuild({
+      projectId,
+      id,
+    });
+    this.updateBuildEvent = `builds:${id}:update`;
+    this.newLogEvent = `logs:${id}:new`;
     this.connection.on(this.newLogEvent, this.log.bind(this));
     this.connection.on(this.updateBuildEvent, this.update.bind(this));
   },
@@ -30,27 +34,36 @@ export default {
     ...mapGetters('socket', [
       'connection',
     ]),
-    ...mapState('build', [
-      'status',
-    ]),
-    ...mapGetters('build', [
-      'logs',
-    ]),
+    ...mapState('build', {
+      build: 'build',
+      isBuildLoading: 'isLoading',
+    }),
+    ...mapState('log', {
+      isLogsLoading: 'isLoading',
+    }),
+    ...mapGetters('log', {
+      logs: 'logs',
+    }),
     buildStatusClassName() {
+      const { status } = this.build;
       return {
-        'fsh-build-success': this.status === 'success',
-        'fsh-build-failure': ['failure', 'maintenance'].includes(this.status),
-        'fsh-build-primary': ['created', 'scheduled'].includes(this.status),
-        'fsh-build-running': this.status === 'running',
+        'fsh-build-success': status === 'successful',
+        'fsh-build-failure': ['failed', 'maintenance'].includes(status),
+        'fsh-build-primary': ['created', 'scheduled', 'timeouted']
+          .includes(status),
+        'fsh-build-running': status === 'running',
       };
     },
   },
   methods: {
-    ...mapActions('build', [
-      'log',
-      'prefetch',
-      'update',
-    ]),
+    ...mapActions('log', {
+      prefetchLogs: 'prefetch',
+      log: 'log',
+    }),
+    ...mapActions('build', {
+      prefetchBuild: 'prefetch',
+      update: 'update',
+    }),
   },
 };
 </script>
@@ -67,4 +80,11 @@ export default {
   .fsh-build-running {
     border-top: 5px solid #8080f2;
   }
+  pre {
+    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
+    white-space: -pre-wrap; /* Opera */
+    white-space: -o-pre-wrap; /* Opera */
+    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
+    word-wrap: break-word; /* IE 5.5+ */
+  }
 </style>

src/components/builds/builds-page.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="builds-page">
+  <div id="builds-page" v-if="!isLoading">
     <br>
     <div v-if="builds.length" class="columns is-multiline">
       <div class="column is-12"
@@ -9,6 +9,8 @@
           :id="build.id"
           :branch="build.branch"
           :status="build.status"
+          :createdAt="build.created_at"
+          :commit="build.commit"
           ></build-item>
       </div>
     </div>
@@ -37,6 +39,7 @@ export default {
   computed: {
     ...mapState('builds', [
       'builds',
+      'isLoading',
     ]),
     ...mapGetters('socket', [
       'connection',

src/components/dashboard/dashboard-header.vue

@@ -74,14 +74,18 @@ export default {
     ...mapState('build', {
       isBuildLoading: 'isLoading',
     }),
+    ...mapState('log', {
+      isLogLoading: 'isLoading',
+    }),
     isLogoutLoadingClass() {
       return {
         'is-loading': this.isLogoutLoading ||
           this.isProjectsLoading ||
           this.isSubscriptionsLoading ||
           this.isBuildsLoading ||
           this.isBuildLoading ||
-          this.isProjectLoading,
+          this.isProjectLoading ||
+          this.isLogLoading,
       };
     },
   },

src/store/index.js

@@ -5,6 +5,7 @@ import authentication from './modules/authentication';
 import projects from './modules/projects';
 import project from './modules/project';
 import subscriptions from './modules/subscriptions';
+import log from './modules/log';
 import build from './modules/build';
 import builds from './modules/builds';
 
@@ -17,6 +18,7 @@ export default new Vuex.Store({
     authentication,
     project,
     subscriptions,
+    log,
     build,
     builds,
   },

src/store/modules/build.js

@@ -1,70 +1,53 @@
 import HTTP from '@/api';
 
 const initialState = {
-  logs: [],
-  status: null,
+  build: null,
+  status: 'created',
   isLoading: false,
   isError: false,
   error: null,
 };
 
-const PREFETCH = 'PREFETCH';
-const PREFETCH_SUCCESS = 'PREFETCH_SUCCESS';
-const PREFETCH_FAILURE = 'PREFETCH_FAILURE';
-const LOG = 'LOG';
-const UPDATE = 'UPDATE';
+const BUILD_PREFETCH = 'BUILD_PREFETCH';
+const BUILD_PREFETCH_SUCCESS = 'BUILD_PREFETCH_SUCCESS';
+const BUILD_PREFETCH_FAILURE = 'BUILD_PREFETCH_FAILURE';
+const UPDATE_BUILD = 'UPDATE_BUILD';
 
 const mutations = {
-  [PREFETCH](state) {
+  [BUILD_PREFETCH](state) {
     state.isLoading = true;
     state.isError = false;
     state.error = null;
-    state.logs = [];
-    state.status = 'created';
+    state.build = null;
   },
-  [PREFETCH_SUCCESS](state, build) {
+  [BUILD_PREFETCH_SUCCESS](state, build) {
     state.isLoading = false;
     state.isError = false;
     state.error = null;
-    state.logs = build.logs;
-    state.status = build.status;
+    state.build = build;
   },
-  [PREFETCH_FAILURE](state, error) {
+  [BUILD_PREFETCH_FAILURE](state, error) {
     state.isLoading = false;
     state.isError = true;
     state.error = error;
   },
-  [UPDATE](state, payload) {
+  [UPDATE_BUILD](state, payload) {
     state.status = payload.status;
   },
-  [LOG](state, payload) {
-    state.logs.push(payload);
-  },
 };
 
 const actions = {
-  prefetch({ commit }, { projectId, buildId }) {
-    commit(PREFETCH);
-    HTTP.get(`/v1/projects/${projectId}/builds/${buildId}/logs`)
-      .then(response => response.data.logs)
-      .then(logs => commit(PREFETCH_SUCCESS, logs))
-      .catch(error => commit(PREFETCH_FAILURE, error));
+  prefetch({ commit }, { projectId, id }) {
+    commit(BUILD_PREFETCH);
+    /* eslint-disable */
+    console.log('fuck');
+    HTTP.get(`/v1/projects/${projectId}/builds/${id}`)
+      .then(response => response.data.build)
+      .then(build => commit(BUILD_PREFETCH_SUCCESS, build))
+      .catch(error => commit(BUILD_PREFETCH_FAILURE, error));
   },
   update({ commit }, payload) {
-    commit(UPDATE, payload);
-  },
-  log({ commit }, payload) {
-    commit(LOG, payload);
-  },
-};
-
-const sortByPosition = (a, b) => a.position - b.position;
-
-const getters = {
-  logs(state) {
-    return state.logs.concat()
-      .sort(sortByPosition)
-      .reduce((a, c) => a + c.content, '');
+    commit(UPDATE_BUILD, payload);
   },
 };
 
@@ -73,5 +56,4 @@ export default {
   state: initialState,
   actions,
   mutations,
-  getters,
 };