dashboard utilization

dashboard/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "js-base64": "^2.4.9",
     "vue": "^2.5.2",
     "vue-i18n": "^8.3.2",
     "vue-markdown": "^2.2.4",

dashboard/src/components/CVPM-Git-Import.vue

@@ -0,0 +1,119 @@
+<template>
+  <v-card>
+    <v-card-title>
+      <span class="headline">Import From Git</span>
+    </v-card-title>
+    <v-card-text>
+      <v-text-field label="Git URL*" required v-model="repo" hint="e.g: https://github.com/cvmodel/Face_Utility"></v-text-field>
+    </v-card-text>
+    <v-alert
+      class="cvpm-git-alert"
+      :value="error"
+      type="error"
+    >
+      {{ error }}
+    </v-alert>
+    <v-alert
+      class="cvpm-git-alert"
+      :value="info"
+      type="info"
+    >
+      {{ info }}
+    </v-alert>
+    <v-expansion-panel class="cvpm-git-import-detail">
+      <v-expansion-panel-content v-if="cvpmConfig">
+        <div slot="header">cvpm.toml</div>
+        <v-card class="cvpm-config-text">
+          <pre>{{ cvpmConfig }}</pre>
+        </v-card>
+      </v-expansion-panel-content>
+      <v-expansion-panel-content v-if="readme">
+        <div slot="header">Readme</div>
+        <v-card>
+          <vue-markdown class="cvpm-repo-readme">{{ readme }}</vue-markdown>
+        </v-card>
+      </v-expansion-panel-content>
+      <v-expansion-panel-content v-if="dependency">
+        <div slot="header">Dependency</div>
+        <v-card class="cvpm-config-text">
+          <pre>{{ dependency }}</pre>
+        </v-card>
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+      <v-btn color="indigo darken-1" flat @click="closeDialog()">Close</v-btn>
+      <v-btn color="indigo darken-1" flat @click="fetchMeta()">Fetch Meta</v-btn>
+      <v-btn color="indigo darken-1" flat @click="save()">Install</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import { GithubService } from '@/services/github'
+import VueMarkdown from 'vue-markdown'
+let Base64 = require('js-base64').Base64
+export default {
+  data () {
+    return {
+      repo: '',
+      cvpmConfig: '',
+      dependency: '',
+      readme: '',
+      error: '',
+      info: ''
+    }
+  },
+  components: {
+    'vue-markdown': VueMarkdown
+  },
+  methods: {
+    closeDialog () {
+      this.$emit('closeDialog', true)
+    },
+    fetchMeta () {
+      let self = this
+      const pureRepo = this.repo.split('/')[3] + '/' + this.repo.split('/')[4]
+      let githubService = new GithubService(pureRepo)
+      githubService.fetchCVPMConfig().then(function (res) {
+        self.cvpmConfig = Base64.decode(res.data.content)
+      }).catch(function (err) {
+        self.error = err.response.data.message
+      })
+      githubService.fetchDependency().then(function (res) {
+        self.dependency = Base64.decode(res.data.content)
+      }).catch(function (err) {
+        self.error = err.response.data.message
+      })
+      githubService.fetchReadme().then(function (res) {
+        self.readme = Base64.decode(res.data.content)
+      }).catch(function (err) {
+        self.error = err.response.data.message
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.cvpm-config-text {
+  padding: 2em;
+}
+.cvpm-git-import-detail {
+    width: 95%;
+    margin-left: auto;
+    margin-right: auto;
+}
+pre {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}
+.cvpm-repo-readme {
+    padding: 2em;
+}
+.cvpm-git-alert {
+    width: 95%;
+    margin-left: auto;
+    margin-right: auto;
+}
+</style>

dashboard/src/components/CVPM-News.vue

@@ -35,7 +35,6 @@ export default {
           }
           return each
         })
-        console.log(self.news)
       })
     }
   },

dashboard/src/components/CVPM-Repo-Meta.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-card>
+    <v-card-title>
+        <h2>Meta Info</h2>
+    </v-card-title>
+    <v-expansion-panel class="cvpm-meta-detail">
+      <v-expansion-panel-content v-if="config">
+        <div slot="header">cvpm.toml</div>
+        <v-card class="cvpm-config-text">
+          <pre>{{ config }}</pre>
+        </v-card>
+      </v-expansion-panel-content>
+      <v-expansion-panel-content v-if="readme">
+        <div slot="header">Readme</div>
+        <v-card>
+          <vue-markdown class="cvpm-repo-readme">{{ readme }}</vue-markdown>
+        </v-card>
+      </v-expansion-panel-content>
+      <v-expansion-panel-content v-if="dependency">
+        <div slot="header">Dependency</div>
+        <v-card class="cvpm-config-text">
+          <pre>{{ dependency }}</pre>
+        </v-card>
+      </v-expansion-panel-content>
+      <v-expansion-panel-content v-if="diskSize">
+        <div slot="header">Disk Usage</div>
+        <v-card class="cvpm-config-text">
+          <pre>{{ diskSize }} MB</pre> 
+        </v-card>
+      </v-expansion-panel-content>
+
+    </v-expansion-panel>
+  </v-card>
+</template>
+
+<script>
+import VueMarkdown from 'vue-markdown'
+
+export default {
+  props: ['config', 'dependency', 'diskSize', 'readme'],
+  components: {
+    'vue-markdown': VueMarkdown
+  }
+}
+</script>
+
+<style scoped>
+.cvpm-config-text {
+  padding: 2em;
+}
+pre {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}
+.cvpm-repo-readme {
+    padding: 2em;
+}
+.cvpm-meta-detail {
+    margin-left: auto;
+    margin-right: auto;
+}
+</style>

dashboard/src/components/CVPM-Table.vue

@@ -0,0 +1,47 @@
+<template>
+  <v-card>
+    <v-data-table :items="items" :headers="headers" class="elevation-1" :loading="loading">
+      <v-progress-linear slot="progress" color="indigo" indeterminate></v-progress-linear>
+      <template slot="items" slot-scope="props">
+        <td class="text-xs-left">{{ props.item.Vendor }}</td>
+        <td class="text-xs-left">{{ props.item.Name }}</td>
+        <td class="text-xs-left">{{ props.item.LocalFolder }}</td>
+        <td class="text-xs-left" v-if="hasActions">
+          <v-icon small @click="inspectDetails(props.item)">info</v-icon>
+        </td>
+      </template>
+    </v-data-table>
+  </v-card>
+</template>
+
+<script>
+export default {
+  data () {
+    return {}
+  },
+  props: ['items', 'headers', 'loading'],
+  computed: {
+    hasActions () {
+      if (this.headers.slice(-1)[0].text === 'Actions') {
+        return true
+      } else {
+        return false
+      }
+    }
+  },
+  methods: {
+    inspectDetails (item) {
+      this.$router.push({
+        name: 'Detail',
+        params: { vendor: item.Vendor, name: item.Name }
+      })
+    }
+  },
+  created () {
+    console.log(this.items)
+  }
+}
+</script>
+
+<style>
+</style>

dashboard/src/pages/Detail.vue

@@ -1,13 +1,66 @@
 <template>
-
+  <v-container>
+    <v-layout row wrap>
+      <v-flex xs6 class="cvpm-package-detail-card">
+        <cvpm-repo-meta
+          :config="config"
+          :dependency="dependency"
+          :diskSize="diskSize"
+          :readme="readme"
+        ></cvpm-repo-meta>
+      </v-flex>
+      <v-flex xs5 class="cvpm-package-detail-card">
+        <cvpm-log :title="'Package Log'" :messageList="messageList"></cvpm-log>
+      </v-flex>
+    </v-layout>
+  </v-container>
 </template>
 
 <script>
-export default {
+import cvpmRepoMeta from '@/components/CVPM-Repo-Meta'
+import { systemService } from '@/services/system'
+import Log from '@/components/CVPM-Log'
 
+export default {
+  data () {
+    return {
+      readme: '',
+      config: '',
+      diskSize: '',
+      dependency: '',
+      messageList: []
+    }
+  },
+  components: {
+    'cvpm-repo-meta': cvpmRepoMeta,
+    'cvpm-log': Log
+  },
+  methods: {
+    fetchMeta () {
+      let self = this
+      systemService
+        .getRepoMeta(this.$route.params.vendor, this.$route.params.name)
+        .then(function (res) {
+          self.readme = res.data.Readme
+          self.config = res.data.Config
+          self.diskSize = res.data.DiskSize.toFixed(2)
+          self.dependency = res.data.Dependency
+        })
+    }
+  },
+  created () {
+    this.fetchMeta()
+  },
+  sockets: {
+    package: function (data) {
+      this.messageList.push(data)
+    }
+  }
 }
 </script>
 
-<style>
-
+<style scoped>
+.cvpm-package-detail-card {
+    margin: 1em;
+}
 </style>

dashboard/src/pages/Main.vue

@@ -80,7 +80,7 @@
 </template>
 
 <script>
-import { getMenus } from '@/services/web'
+import { getMenus } from '@/services/menu'
 export default {
   data () {
     return {