Port SDK 6

package.json

@@ -28,7 +28,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git://github.com/kuzzleio/kuzzle-backoffice.git"
+    "url": "git://github.com/kuzzleio/kuzzle-admin-console.git"
   },
   "license": "Apache-2.0",
   "dependencies": {
@@ -98,7 +98,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.26",
     "karma-webpack": "^2.0.13",
-    "kuzzle-sdk": "^5.0.11",
+    "kuzzle-sdk": "^6.0.0",
     "lodash": "^4.17.11",
     "lolex": "^1.5.2",
     "materialize-css": "^1.0.0",

src/App.vue

@@ -86,6 +86,10 @@ import ModalDelete from './components/Common/Environments/ModalDelete'
 
 import Toaster from './components/Materialize/Toaster.vue'
 
+import * as types from './vuex/modules/auth/mutation-types'
+import * as kuzzleTypes from './vuex/modules/common/kuzzle/mutation-types'
+import { SET_TOAST } from './vuex/modules/common/toaster/mutation-types'
+
 // @TODO we'll have to import FA from global.scss one day...
 import '@fortawesome/fontawesome-free/css/all.css'
 
@@ -106,6 +110,35 @@ export default {
     Login,
     CreateEnvironmentPage
   },
+  mounted() {
+    this.$kuzzle.removeAllListeners()
+
+    this.$kuzzle.on('queryError', error => {
+      if (error && error.message) {
+        switch (error.message) {
+          case 'Token expired':
+          case 'Invalid token':
+          case 'Json Web Token Error':
+            this.$store.commit(types.SET_TOKEN_VALID, false)
+            this.$kuzzle.connect()
+            break
+        }
+      }
+    })
+    this.$kuzzle.on('networkError', error => {
+      this.$store.commit(kuzzleTypes.SET_ERROR_FROM_KUZZLE, error)
+    })
+    this.$kuzzle.on('connected', () => {
+      this.$store.commit(kuzzleTypes.SET_ERROR_FROM_KUZZLE, null)
+    })
+    this.$kuzzle.on('reconnected', () => {
+      this.$store.commit(kuzzleTypes.SET_ERROR_FROM_KUZZLE, null)
+      this.$store.dispatch(kuzzleTypes.SWITCH_LAST_ENVIRONMENT)
+    })
+    this.$kuzzle.on('discarded', function(data) {
+      this.$store.commit(SET_TOAST, { text: data.message })
+    })
+  },
   data() {
     return {
       environmentId: null,

src/components/Common/Login/Form.vue

@@ -64,7 +64,6 @@ import {
   DO_LOGIN,
   PREPARE_SESSION
 } from '../../../vuex/modules/auth/mutation-types'
-import kuzzle from '../../../services/kuzzle'
 
 export default {
   name: 'LoginForm',
@@ -85,23 +84,22 @@ export default {
     dismissError() {
       this.error = ''
     },
-    login() {
+    async login() {
       this.error = ''
-      this.$store
-        .dispatch(DO_LOGIN, {
-          username: this.username,
-          password: this.password
-        })
-        .then(() => {
-          this.onLogin()
-        })
-        .catch(err => {
-          this.error = err.message
-        })
+      try {
+        await this.$store
+          .dispatch(DO_LOGIN, {
+            username: this.username,
+            password: this.password
+          })
+        this.onLogin()
+      } catch (err) {
+        this.error = err.message
+      }
     },
     loginAsGuest() {
       this.error = ''
-      kuzzle.unsetJwtToken()
+      this.$kuzzle.jwt = null
       this.$store
         .dispatch(PREPARE_SESSION, 'anonymous')
         .then(() => {

src/components/Data/Collections/ModalClear.vue

@@ -22,8 +22,8 @@
                         {{error}}
                     </span>
                     <a @click.prevent="toggleTruncatedError()">
-                        <span v-if="errorTruncated">view more</span>
-                        <span v-if="!errorTruncated">view less</span>
+                        <span v-if="errorTruncated"><a href="#">view more</a></span>
+                        <span v-if="!errorTruncated"><a href="#">view less</a></span>
                     </a>
                 </div>
 
@@ -51,6 +51,8 @@
 
 <style lang="scss" rel="stylesheet/scss" scoped>
 .error {
+  font-size: 1.3rem;
+  line-height: 1.1;
   strong {
     display: block;
   }
@@ -97,34 +99,29 @@ export default {
   },
   methods: {
     refreshSearch() {
-      if (parseInt(this.$route.query.from) === 0) {
-        this.$router.push({ query: null })
-      } else {
-        this.$router.push({ query: { ...this.$route.query, from: 0 } })
-      }
+      this.$router.go()
     },
     toggleTruncatedError() {
       this.errorTruncated = !this.errorTruncated
     },
-    tryClearCollection() {
+    async tryClearCollection() {
       if (!this.index.trim() || !this.collection.trim()) {
         return
       }
 
-      this.$store
-        .dispatch(CLEAR_COLLECTION, {
-          index: this.index,
-          collection: this.collection
-        })
-        .then(() => {
-          this.collectionConfirmation = ''
-          this.error = ''
-          this.close()
-          this.refreshSearch()
-        })
-        .catch(err => {
-          this.error = err.message
-        })
+      try {
+        await this.$store
+          .dispatch(CLEAR_COLLECTION, {
+            index: this.index,
+            collection: this.collection
+          })
+        this.collectionConfirmation = ''
+        this.error = ''
+        this.close()
+        this.refreshSearch()
+      } catch (err) {
+        this.error = err.message
+      }
     }
   },
   data() {

src/components/Data/Collections/Update.vue

@@ -49,41 +49,39 @@ export default {
     }
   },
   methods: {
-    update() {
+    async update() {
       this.error = ''
 
-      return this.$store
-        .dispatch(UPDATE_COLLECTION, { index: this.index })
-        .then(() => {
-          this.$router.push({
-            name: 'DataIndexSummary',
-            params: { index: this.index }
-          })
-        })
-        .catch(e => {
-          this.error = e.message
+      try {
+        await this.$store
+          .dispatch(UPDATE_COLLECTION, { index: this.index })
+        this.$router.push({
+          name: 'DataIndexSummary',
+          params: { index: this.index }
         })
+      } catch (e) {
+        this.error = e.message
+      }
     },
     setError(payload) {
       this.error = payload
     }
   },
-  mounted() {
-    this.$store
-      .dispatch(LIST_INDEXES_AND_COLLECTION)
-      .then(() =>
-        this.$store.dispatch(FETCH_COLLECTION_DETAIL, {
-          index: this.index,
-          collection: this.$route.params.collection
-        })
-      )
-      .catch(e => {
-        this.$store.commit(SET_TOAST, { text: e.message })
-        this.$router.push({
-          name: 'DataIndexSummary',
-          params: { index: this.index }
-        })
+  async mounted() {
+    try {
+      await this.$store
+        .dispatch(LIST_INDEXES_AND_COLLECTION)
+      await this.$store.dispatch(FETCH_COLLECTION_DETAIL, {
+        index: this.index,
+        collection: this.$route.params.collection
       })
+    } catch (e) {
+      this.$store.commit(SET_TOAST, { text: e.message })
+      this.$router.push({
+        name: 'DataIndexSummary',
+        params: { index: this.index }
+      })
+    }
   }
 }
 </script>

src/components/Data/Collections/Watch.vue

@@ -124,7 +124,6 @@ import LastNotification from '../Realtime/LastNotification'
 import SubscriptionControls from '../Realtime/SubscriptionControls'
 import CollectionDropdown from '../Collections/Dropdown'
 import Filters from '../../Common/Filters/Filters'
-import kuzzle from '../../../services/kuzzle'
 import * as filterManager from '../../../services/filterManager'
 import { canSubscribe } from '../../../services/userAuthorization'
 import { SET_TOAST } from '../../../vuex/modules/common/toaster/mutation-types'
@@ -158,16 +157,15 @@ export default {
   created() {
     window.addEventListener('scroll', this.handleScroll)
   },
-  mounted() {
+  async mounted() {
     this.notifications = []
-    getMappingDocument(this.collection, this.index).then(response => {
-      this.collectionMapping = response.mapping
-    })
+    const response = await getMappingDocument(this.collection, this.index)
+    this.collectionMapping = response[this.index].mappings[this.collection].properties
   },
-  destroyed() {
+  async destroyed() {
     this.reset()
     if (this.room) {
-      this.room.unsubscribe()
+      await this.$kuzzle.realtime.unsubscribe(this.room)
     }
     window.removeEventListener('scroll', this.handleScroll)
   },
@@ -224,8 +222,8 @@ export default {
     },
     notificationToMessage(notification) {
       const idText =
-        notification.type === 'document' && notification.document.id
-          ? `(${notification.document.id})`
+        notification.type === 'document' && notification.result._id
+          ? `(${notification.result._id})`
           : ''
       const messageItem = {
         text: '',
@@ -243,22 +241,22 @@ export default {
       }
 
       if (notification.type === 'document') {
-        if (notification.document.id) {
-          messageItem.source.id = notification.document.id
+        if (notification.result._id) {
+          messageItem.source.id = notification.result._id
         }
 
         if (
-          notification.document.meta &&
-          Object.keys(notification.document.meta).length > 0
+          notification.result._meta &&
+          Object.keys(notification.result._meta).length > 0
         ) {
-          messageItem.source.meta = notification.document.meta
+          messageItem.source.meta = notification.result._meta
         }
 
         if (
-          notification.document.content &&
-          Object.keys(notification.document.content).length > 0
+          notification.result._source &&
+          Object.keys(notification.result._source).length > 0
         ) {
-          messageItem.source.body = notification.document.content
+          messageItem.source.body = notification.result._source
         }
       } else {
         messageItem.source.users = notification.user.count
@@ -328,12 +326,7 @@ export default {
         }, 0)
       }
     },
-    handleMessage(error, result) {
-      if (error) {
-        this.warning.message = error.message
-        return
-      }
-
+    handleMessage(result) {
       if (this.notifications.length > this.notificationsLengthLimit) {
         if (this.warning.message === '') {
           this.warning.info = true
@@ -366,30 +359,31 @@ export default {
 
       this.makeAutoScroll()
     },
-    subscribe() {
-      return kuzzle
-        .collection(this.collection, this.index)
-        .subscribe(
-          filterManager.toRealtimeQuery(this.filters),
-          this.subscribeOptions,
-          this.handleMessage
-        )
-        .onDone((err, room) => {
-          if (err) {
-            this.room = null
-            this.subscribed = false
-            this.$store.commit(SET_TOAST, { text: err.message })
-          } else {
-            this.subscribed = true
-            this.room = room
-          }
-        })
+    async subscribe() {
+      try {
+        const room = await this.$kuzzle
+          .realtime
+          .subscribe(
+            this.index,
+            this.collection,
+            filterManager.toRealtimeQuery(this.filters),
+            this.handleMessage,
+            this.subscribeOptions
+          )
+        this.subscribed = true
+        this.room = room
+      } catch (err) {
+        this.room = null
+        this.subscribed = false
+        this.$store.commit(SET_TOAST, { text: err.message })
+      }
     },
-    unsubscribe(room) {
+    async unsubscribe(room) {
       this.warning.message = ''
       this.warning.count = 0
 
-      room.unsubscribe()
+      await this.$kuzzle.realtime.unsubscribe(room)
+      this.room = null
     },
     onReset(newFilters) {
       filterManager.saveToRouter(

src/components/Data/Documents/Common/CreateOrUpdate.vue

@@ -163,6 +163,7 @@
     position: relative;
     padding: 8px 12px;
     margin: 0;
+    color: #ffffff;
   }
   .dismiss-error {
     position: absolute;