Frontend v2

.taskcluster.yml

@@ -32,6 +32,17 @@ tasks:
         else: 'dev'
       else: 'dev'
 
+    backend_url:
+      $if: 'tasks_for == "github-push"'
+      then:
+        $if: 'event.ref == "refs/heads/testing"'
+        then: 'https://api.code-review.testing.moz.tools'
+        else: 'https://api.code-review.moz.tools'
+      else:
+        $if: 'tasks_for == "github-pull-request"'
+        then: 'https://api.code-review.testing.moz.tools'
+        else: 'https://api.code-review.moz.tools'
+
     taskboot_image: "mozilla/taskboot:0.1.10"
 
     pip_install: "pip install --disable-pip-version-check --no-cache-dir --quiet"
@@ -129,6 +140,8 @@ tasks:
       payload:
         maxRunTime: 3600
         image: node:11-alpine
+        env:
+          BACKEND_URL: "${backend_url}"
         command:
           - sh
           - -lxce

frontend/.neutrinorc.js

@@ -2,6 +2,7 @@ fs = require('fs');
 
 const envs = {
   CONFIG: process.env.CONFIG || 'staging',
+  BACKEND_URL: process.env.BACKEND_URL || 'http://localhost:8000',
 };
 const PORT = process.env.PORT || 8010;
 // HTTPS can be disabled by setting HTTPS_DISABLED environment variable to
@@ -26,7 +27,7 @@ module.exports = {
       '@neutrinojs/vue',
       {
         html: {
-          title: 'Mozilla Static Analysis'
+          title: 'Mozilla Code Review Bot'
         },
         devServer: {
           port: PORT,

frontend/src/App.vue

@@ -1,24 +1,9 @@
 <script>
-import Tasks from './Tasks.vue'
-
 export default {
   name: 'App',
-  components: {
-    Tasks
-  },
-  data () {
-    return {
-      channels: ['testing', 'production']
-    }
-  },
-  methods: {
-    switch_channel (channel) {
-      this.$store.dispatch('switch_channel', channel)
-    }
-  },
   computed: {
-    channel () {
-      return this.$store.state.channel
+    backend_url () {
+      return this.$store.state.backend_url
     }
   }
 }
@@ -30,28 +15,28 @@ export default {
       <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
         <div class="container is-fluid">
           <div class="navbar-brand">
-            <div class="navbar-item">Static analysis</div>
+            <router-link to="/" v-slot="{ href, route, navigate, isActive, isExactActive }">
+              <a class="navbar-item" :href="href" v-on:click="navigate">🤖 Code Review Bot</a>
+            </router-link>
           </div>
           <div class="navbar-menu">
 
             <div class="navbar-start">
-              <div class="navbar-item has-dropdown is-hoverable">
-                <span class="navbar-link">{{ channel }}</span>
-                <div class="navbar-dropdown is-boxed">
-                  <a class="dropdown-item" v-for="c in channels" :class="{'is-active': c == channel}" v-on:click="switch_channel(c)">
-                    {{ c }}
-                  </a>
-                </div>
+              <div class="navbar-item">
+                <span class="navbar-item">Connected to {{ backend_url }}</span>
               </div>
             </div>
 
             <div class="navbar-end">
-              <div class="navbar-item" v-if="$route.name != 'stats'">
-                <router-link to="/stats" class="button is-link">All checks</router-link>
-              </div>
-              <div class="navbar-item" v-if="$route.name != 'tasks'">
-                <router-link to="/" class="button is-link">All tasks</router-link>
-              </div>
+              <router-link to="/stats" v-slot="{ href, route, navigate, isActive, isExactActive }">
+                <a :href="href" v-on:click="navigate" class="navbar-item" :class="{'is-active': isExactActive}">💥 All checks</a>
+              </router-link>
+              <router-link to="/" v-slot="{ href, route, navigate, isActive, isExactActive }">
+                <a :href="href" v-on:click="navigate" class="navbar-item" :class="{'is-active': isExactActive}">🔍 Browse diffs</a>
+              </router-link>
+              <router-link to="/tasks" v-slot="{ href, route, navigate, isActive, isExactActive }">
+                <a :href="href" v-on:click="navigate" class="navbar-item" :class="{'is-active': isExactActive}">📜 All tasks</a>
+              </router-link>
             </div>
           </div>
         </div>

frontend/src/Choice.vue

@@ -12,7 +12,7 @@
           {{ default_choice_name }}
         </a>
         <hr class="dropdown-divider">
-        <a class="dropdown-item" v-for="choice in choices" v-on:click="select(choice, $event)" :class="{'is-active': current === choice }">
+        <a class="dropdown-item" v-for="choice in choices" v-on:click="select(choice, $event)" :class="{'is-active': current === choice  || current === choice.value}">
           {{ choice|name }}
         </a>
       </div>
@@ -21,49 +21,49 @@
 </template>
 
 <script>
+import mixins from './mixins.js'
+
 export default {
   props: {
     'name': String,
     'choices': Array
   },
-  data: function () {
+  mixins: [
+    mixins.query
+  ],
+  data () {
     return {
-      current: null
-    }
-  },
-  mounted: function () {
-    let initial = this.$route.query[this.name]
-    if (initial && this.choices) {
-      this.current = isNaN(parseInt(initial)) ? initial : this.choices[initial]
-      this.$emit('new-choice', this.current)
+      choice: null
     }
   },
   methods: {
     select: function (choice, evt) {
       evt.stopPropagation()
 
       // Save new choice
-      this.current = choice
+      this.$set(this, 'choice', choice)
       this.$emit('new-choice', choice)
-
-      // Set value in the url for sharing
-      var query = Object.assign({}, this.$route.query)
-      if (choice !== null) {
-        query[this.name] = typeof choice === 'string' ? choice : this.choices.indexOf(choice)
-      } else if (this.name in query) {
-        delete query[this.name]
-      }
-      this.$router.push({ 'query': query })
     }
   },
   computed: {
+    current () {
+      let current = null
+      let choice = this.choice || this.$route.query[this.name]
+      if (choice && this.choices) {
+        current = this.choices.find(c => c === choice || c.value === choice)
+        if (!current) {
+          current = isNaN(parseInt(choice)) ? choice : this.choices[choice]
+        }
+      }
+      return current
+    },
     default_choice_name: function () {
-      return 'All ' + this.name + 's'
+      return 'Filter by ' + this.name
     }
   },
   filters: {
     name: function (choice) {
-      return typeof choice === 'string' ? choice : choice.name
+      return typeof choice === 'string' ? choice : (choice.slug || choice.name)
     }
   }
 }