11 files changed, 338 insertions, 0 deletions
diff --git a/usecaseui-portal/vue/src/App.vue b/usecaseui-portal/vue/src/App.vue
new file mode 100644
index 00000000..1dfe7d8a
--- /dev/null
+++ b/usecaseui-portal/vue/src/App.vue
@@ -0,0 +1,27 @@
+<template>
+  <div id="app">
+    <Menu></Menu>
+    <router-view />
+  </div>
+</template>
+
+<script>
+import Menu from "./components/common/Menu.vue"
+
+export default {
+  name: 'App',
+  components: {
+    Menu
+  }
+}
+</script>
+
+<style lang="scss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+</style>
diff --git a/usecaseui-portal/vue/src/assets/logo.png b/usecaseui-portal/vue/src/assets/logo.png
new file mode 100644
index 00000000..f3d2503f
--- /dev/null
+++ b/usecaseui-portal/vue/src/assets/logo.png
diff --git a/usecaseui-portal/vue/src/components/common/Menu.vue b/usecaseui-portal/vue/src/components/common/Menu.vue
new file mode 100644
index 00000000..089ed3be
--- /dev/null
+++ b/usecaseui-portal/vue/src/components/common/Menu.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="menu">
+    <Menu theme="light" active-name="7" @on-select="seletMenu">
+      <div v-for="(item, index) in menuList" :key="index">
+        <Submenu :name="item.name" v-if="item.children.length!==0">
+          <template slot="title">
+            {{item.title}}
+          </template>
+            <MenuItem v-for="(val, index) in item.children" :key="index" :name="val.name">
+              {{val.title}}
+            </MenuItem>
+        </Submenu>
+        <MenuItem :name="item.name" v-else>{{item.title}}</MenuItem>
+      </div>
+    </Menu>
+    <br>
+  </div>
+</template>
+
+<script>
+import { menu } from "@/const/index.js"
+
+export default {
+  components: {
+  },
+  data () {
+      return {
+        menuList: menu.MENU_ITEM
+      }
+  },
+  created () {
+    console.log(this.menuList)
+  },
+  methods: {
+    seletMenu (name) {
+      let seletedItem = {}
+      for (let item of this.menuList) {
+        if (item.name === name) {
+          seletedItem = item
+        } else{
+          for (let val of item.children) {
+            if (val.name === name) {
+              seletedItem = val
+            }
+          }
+        }
+      }
+      console.log(seletedItem)
+      this.$router.push({path: seletedItem.path})
+    }
+  },
+};
+</script>
+
+<style lang="sass">
+
+</style>
+\ No newline at end of file
diff --git a/usecaseui-portal/vue/src/const/address.js b/usecaseui-portal/vue/src/const/address.js
new file mode 100644
index 00000000..573e8492
--- /dev/null
+++ b/usecaseui-portal/vue/src/const/address.js
@@ -0,0 +1,14 @@
+// addresses of angular and vue in the development environment
+const ADDRESS = {
+  Angular: "http://localhost:4200/",
+  vue: "http://localhost:8089/"
+};
+
+const SELF_SOURCE = "vue";
+const MAIN_SOURCE = "Angular";
+
+export default {
+  ADDRESS,
+  SELF_SOURCE,
+  MAIN_SOURCE
+};
diff --git a/usecaseui-portal/vue/src/const/index.js b/usecaseui-portal/vue/src/const/index.js
new file mode 100644
index 00000000..f9e5ac8a
--- /dev/null
+++ b/usecaseui-portal/vue/src/const/index.js
@@ -0,0 +1,7 @@
+import menu from './menu-item'
+import address from './address'
+
+export {
+    menu,
+    address
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/vue/src/const/menu-item.js b/usecaseui-portal/vue/src/const/menu-item.js
new file mode 100644
index 00000000..7ab00b21
--- /dev/null
+++ b/usecaseui-portal/vue/src/const/menu-item.js
@@ -0,0 +1,90 @@
+// route table
+
+const MENU_ITEM = [
+    {
+        name: '0', // Angular
+        title: 'Home',
+        children: [],
+        path: '/home',
+        source: 'Angular'
+    },
+    {
+        name: '1', // Angular
+        title: 'Customer',
+        children: [],
+        path: '/management',
+        source: 'Angular'
+    },
+    {
+        name: '2', // Angular
+        title: 'Services',
+        children: [
+            {
+                name: '2-0',
+                title: 'Lifecycle Management',
+                path: '/services/services-list',
+                source: 'Angular'
+            }, 
+            {
+                name: '2-1',
+                title: 'SOTN Eline',
+                path: '/services/sotn-management',
+                source: 'Angular'
+            }, 
+            {
+                name: '2-2',
+                title: '5G Sclicing Management',
+                path: '/services/slicing-management',
+                source: 'Angular'
+            }, 
+        ]
+    },
+    {
+        name: '3', // Angular
+        title: 'Package Managemeny',
+        children: [],
+        path: '/onboard-vnf-vm',
+        source: 'Angular'
+    },
+    {
+        name: '4', // Angular
+        title: 'Network Topology',
+        children: [
+            {
+                name: '4-0',
+                title: 'CCVPN network',
+                path: '/network/ccvpn-network',
+                source: 'Angular'
+            },
+            {
+                name: '4-1',
+                title: 'MDONS Network',
+                path: '/network/mdons-network',
+                source: 'Angular'
+            }
+        ]
+    },
+    {
+        name: '5', // Angular
+        title: 'Monitor',
+        children: [
+            {
+                name: '5-0',
+                title: '5G Slicing',
+                path: '/fcaps/5gslicing',
+                source: 'Angular'
+            }
+        ]
+    },
+    {
+        name: '6', // Vue
+        title: 'Test',
+        children: [],
+        path: '/test',
+        source: 'Vue'
+    }
+]
+
+export default {
+    MENU_ITEM
+}
+\ No newline at end of file
diff --git a/usecaseui-portal/vue/src/main.js b/usecaseui-portal/vue/src/main.js
new file mode 100644
index 00000000..14edb791
--- /dev/null
+++ b/usecaseui-portal/vue/src/main.js
@@ -0,0 +1,76 @@
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import "view-design/dist/styles/iview.css";
+import { Menu, Button, MenuItem, MenuGroup, Icon, Submenu } from "view-design";
+import { address, menu } from "@/const/index.js";
+
+Vue.component("Menu", Menu);
+Vue.component("Button", Button);
+Vue.component("MenuGroup", MenuGroup);
+Vue.component("MenuItem", MenuItem);
+Vue.component("Icon", Icon);
+Vue.component("Submenu", Submenu);
+
+Vue.config.productionTip = false;
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount("#app");
+
+// Routing global guard
+// Before each route jump, it needs to judge whether it belongs to this project or not. If not, it will jump to other projects
+router.beforeEach((to, from, next) => {
+  const target = to.path;
+  const route = router.options.routes;
+  const result = route.find(item => {
+    return item.path === target;
+  });
+  if (typeof result === "undefined") {
+    // looking fro the source of this path
+    const menuList = menu.MENU_ITEM;
+    let source = null;
+    for (let item of menuList) {
+      if (item.path === target) {
+        source = item.source;
+      } else {
+        for (let val of item.children) {
+          if (val.path === target) {
+            source = val.source;
+          }
+        }
+      }
+    }
+    if (source === null) {
+      console.log(
+        "The source of the path is not recorded in the routing table"
+      );
+    } else {
+      const targetServer = address.ADDRESS[source];
+      let newUrl = "";
+      if (process.env.NODE_ENV === "development") {
+        // dev
+        console.log(address.MAIN_SOURCE);
+        newUrl = `${targetServer}#${target}`;
+      } else {
+        let baseUrl = window.location.href.split("#")[0];
+        if (source === address.MAIN_SOURCE) {
+          // If the target is the main project
+          baseUrl = `${baseUrl.split(address.SELF_SOURCE)[0]}`;
+          newUrl = `${baseUrl}#${target}`;
+        } else {
+          // If the target is another subproject
+          baseUrl = `${baseUrl.split(address.SELF_SOURCE)[0]}${source}/`;
+          newUrl = `${baseUrl}#${target}`;
+        }
+      }
+      console.log("new", newUrl);
+      window.location.href = newUrl;
+    }
+  } else {
+    next();
+  }
+});
diff --git a/usecaseui-portal/vue/src/router/index.js b/usecaseui-portal/vue/src/router/index.js
new file mode 100644
index 00000000..88e94817
--- /dev/null
+++ b/usecaseui-portal/vue/src/router/index.js
@@ -0,0 +1,30 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import Home from "../views/Home.vue";
+
+Vue.use(VueRouter);
+
+// Different from angular, this route only needs to include the route in this project
+
+const routes = [
+  {
+    path: "/vueHome",
+    name: "vueHome",
+    component: Home
+  },
+  {
+    path: "/test",
+    name: "Test",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/Test.vue")
+  }
+];
+
+const router = new VueRouter({
+  routes
+});
+
+export default router;
diff --git a/usecaseui-portal/vue/src/store/index.js b/usecaseui-portal/vue/src/store/index.js
new file mode 100644
index 00000000..fb6015f4
--- /dev/null
+++ b/usecaseui-portal/vue/src/store/index.js
@@ -0,0 +1,11 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {}
+});
diff --git a/usecaseui-portal/vue/src/views/Home.vue b/usecaseui-portal/vue/src/views/Home.vue
new file mode 100644
index 00000000..2d03556f
--- /dev/null
+++ b/usecaseui-portal/vue/src/views/Home.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="home">
+    vuehome
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+
+export default {
+  name: "Home",
+  components: {
+  }
+};
+</script>
diff --git a/usecaseui-portal/vue/src/views/Test.vue b/usecaseui-portal/vue/src/views/Test.vue
new file mode 100644
index 00000000..3d59b5e3
--- /dev/null
+++ b/usecaseui-portal/vue/src/views/Test.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>Vue test</div>
+</template>
+<script>
+export default {
+    
+}
+</script>
+<style lang="sass">
+
+</style>
+\ No newline at end of file