Migrations view. Select code version

baking-bad · Apr 3, 2020 · 090cecb · 090cecb
1 parent d213020
commit 090cecb
Show file tree

Hide file tree

Showing 6 changed files with 262 additions and 48 deletions.
diff --git a/src/api/index.js b/src/api/index.js
@@ -110,7 +110,9 @@ export function getContractOperations(network, address, last_id = "", from = 0,
 }
 
 export function getContractCode(network, address, level = 0) {
-    return getCancellable(api, `/contract/${network}/${address}/code?level=${level}`, {})
+    return getCancellable(api, `/contract/${network}/${address}/code`, {
+        level: level
+    })
         .then((res) => {
             if (res.status != 200) {
                 throw new RequestFailedError(res);
@@ -119,9 +121,20 @@ export function getContractCode(network, address, level = 0) {
         })
 }
 
+export function getContractMigration(network, address, protocol) {
+    return getCancellable(api, `/contract/${network}/${address}/migration`, {
+        protocol: protocol
+    })
+        .then((res) => {
+            if (res.status != 200) {
+                throw new RequestFailedError(res);
+            }
+            return res.data
+        })
+}
 
-export function getContractMigration(network, address) {
-    return getCancellable(api, `/contract/${network}/${address}/migration`, {})
+export function getContractMigrations(network, address) {
+    return getCancellable(api, `/contract/${network}/${address}/migrations`, {})
         .then((res) => {
             if (!res) { return res; }
             if (res.status != 200) {

diff --git a/src/router/index.js b/src/router/index.js
@@ -15,13 +15,14 @@ import OperationsTab from '@/views/project/OperationsTab.vue'
 import CodeTab from '@/views/project/CodeTab.vue'
 import EntrypointsTab from '@/views/project/EntrypointsTab.vue'
 import StorageTab from '@/views/project/StorageTab.vue'
-import MigrationTab from '@/views/project/MigrationTab.vue'
+import MigrationsTab from '@/views/project/MigrationsTab.vue'
 
 import Dashboard from '@/views/dashboard/Dashboard.vue'
 import SubscriptionsTab from '@/views/dashboard/SubscriptionsTab.vue'
 import TimelineTab from '@/views/dashboard/TimelineTab.vue'
 
 import Diff from '@/views/Diff.vue'
+import Migration from '@/views/Migration.vue'
 import BigMapViewer from '@/views/BigMapViewer.vue'
 import Projects from '@/views/Projects.vue'
 import OPG from '@/views/OPG.vue'
@@ -73,6 +74,14 @@ const router = new Router({
             },
             name: 'diff'
         },
+        {
+            path: '/migration/:network(mainnet|babylonnet|zeronet|carthagenet)/:address(KT[0-9A-z]{34})/:protocol',
+            components: {
+                default: Migration,
+                nav: Nav
+            },
+            name: 'migration'
+        },
         {
             path: '/projects',
             components: {
@@ -122,9 +131,9 @@ const router = new Router({
                     component: StorageTab
                 },
                 {
-                    path: 'migration',
-                    name: 'migration',
-                    component: MigrationTab
+                    path: 'migrations',
+                    name: 'migrations',
+                    component: MigrationsTab
                 }
             ]
         },

diff --git a/src/views/project/MigrationTab.vue → src/views/Migration.vue b/src/views/project/MigrationTab.vue → src/views/Migration.vue
@@ -1,15 +1,17 @@
 <template>
   <v-container fluid>
-    <DiffViewer
-      v-if="!loading"
-      :left="contract.migration.left"
-      :right="contract.migration.right"
-      :nameRight="contract.migration.name_right"
-      :nameLeft="contract.migration.name_left"
-      :added="contract.migration.added"
-      :removed="contract.migration.removed"
-    />
-    <v-skeleton-loader v-else height="400" type="image" class="ma-3"></v-skeleton-loader>
+    <v-skeleton-loader :loading="loading" height="400" type="image" class="ma-3">
+      <DiffViewer
+        v-if="diff != null"
+        :left="diff.left"
+        :right="diff.right"
+        :nameRight="diff.name_right"
+        :nameLeft="diff.name_left"
+        :added="diff.added"
+        :removed="diff.removed"
+      />
+      <ErrorState v-else />
+    </v-skeleton-loader>
   </v-container>
 </template>
 
@@ -18,37 +20,33 @@ import { mapActions } from "vuex";
 import { getContractMigration } from "@/api/index.js";
 
 import DiffViewer from "@/components/DiffViewer.vue";
+import ErrorState from "@/components/ErrorState.vue";
 
 export default {
-  name: "MigrationTab",
-  props: {
-    contract: Object
-  },
+  name: "Migration",
   components: {
-    DiffViewer
+    DiffViewer,
+    ErrorState
   },
   created() {
     this.getMigration();
   },
   data: () => ({
-    loading: true
+    loading: true,
+    diff: null
   }),
   methods: {
     ...mapActions(["showError"]),
     getMigration() {
-      if (this.contract == null) return;
-      if (this.contract.migration !== undefined) {
-        this.loading = false;
-        return;
-      }
       this.loading = true;
       getContractMigration(
         this.$route.params.network,
-        this.$route.params.address
+        this.$route.params.address,
+        this.$route.params.protocol
       )
         .then(res => {
           if (!res) return;
-          this.contract.migration = res;
+           this.diff = res;
         })
         .catch(err => {
           console.log(err);

diff --git a/src/views/project/CodeTab.vue b/src/views/project/CodeTab.vue
@@ -11,22 +11,42 @@
           <v-icon class="mr-1" small>mdi-play-circle-outline</v-icon>
           <span class="overline">Run in sandbox</span>
         </v-btn>
-        <v-btn v-if="contract.language === 'smartpy'" small depressed class="toolbar-btn"
-               :href="getSmartPyLink()" rel="nofollow noopener" target="_blank">
+        <v-btn
+          v-if="contract.language === 'smartpy'"
+          small
+          depressed
+          class="toolbar-btn"
+          :href="getSmartPyLink()"
+          rel="nofollow noopener"
+          target="_blank"
+        >
           <v-icon class="mr-1" small>mdi-link</v-icon>
           <span class="overline">View on SmartPy.io</span>
         </v-btn>
+        <v-spacer></v-spacer>
+        <v-select
+          v-model="selectedLevel"
+          v-if="contract.code.versions.length > 1"
+          :items="contract.code.versions"
+          item-text="name"
+          item-value="level"
+          label="Version"
+          style="max-width: 150px;"
+          dense
+          outlined
+          hide-details
+        ></v-select>
       </v-toolbar>
       <v-card tile>
-        <Michelson :code="contract.code"></Michelson>
+        <Michelson :code="contract.code.code"></Michelson>
       </v-card>
     </div>
     <ErrorState v-else />
   </v-container>
 </template>
 
 <script>
-import Michelson from "@/components/Michelson.vue"
+import Michelson from "@/components/Michelson.vue";
 import { mapActions } from "vuex";
 import { getContractCode, getContractStorageRaw } from "@/api/index.js";
 import ErrorState from "@/components/ErrorState.vue";
@@ -41,9 +61,13 @@ export default {
     Michelson
   },
   data: () => ({
-    loading: true
+    loading: true,
+    selectedLevel: 0
   }),
   created() {
+    if (this.$route.query.level && this.$route.query.level > 0) {
+      this.selectedLevel = this.$route.query.level;
+    }
     this.getCode();
   },
   methods: {
@@ -55,7 +79,11 @@ export default {
         this.loading = false;
         return;
       }
-      getContractCode(this.contract.network, this.contract.address)
+      getContractCode(
+        this.contract.network,
+        this.contract.address,
+        this.selectedLevel
+      )
         .then(res => {
           if (!res) return;
           this.contract.code = res;
@@ -72,7 +100,8 @@ export default {
       var element = document.createElement("a");
       element.setAttribute(
         "href",
-        "data:text/plain;charset=utf-8," + encodeURIComponent(this.contract.code)
+        "data:text/plain;charset=utf-8," +
+          encodeURIComponent(this.contract.code.code)
       );
       element.setAttribute("download", this.contract.address + ".tz");
 
@@ -84,8 +113,8 @@ export default {
       document.body.removeChild(element);
     },
     getSmartPyLink() {
-      if (this.contract.language === 'smartpy')
-        return `https://smartpy.io/dev/explore.html?address=${this.contract.address}`
+      if (this.contract.language === "smartpy")
+        return `https://smartpy.io/dev/explore.html?address=${this.contract.address}`;
     },
     openTryMichelson() {
       if (this.contract.raw_storage === undefined) {
@@ -98,7 +127,7 @@ export default {
           this.showError(err);
         })
       }
-      let query = `source=${this.contract.code}`
+      let query = `source=${this.contract.code.code}`
       if (this.contract.raw_storage !== undefined) {
         let storage = this.contract.raw_storage.replace(/\n|\s+/gm, ' ');
         query += `&storage=${storage}`
@@ -112,7 +141,25 @@ export default {
     }
   },
   watch: {
-    contract: "getCode"
+    contract: "getCode",
+    selectedLevel: function(newValue) {
+      this.loading = true;
+      getContractCode(
+        this.contract.network,
+        this.contract.address,
+        newValue
+      )
+        .then(res => {
+          this.contract.code = res;
+        })
+        .catch(err => {
+          console.log(err);
+          this.showError(err);
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    }
   }
 };
 </script>