Create basic application using vue

-  Create vue app
-  Add AppHeader and AppNavigation
-  Set up routes for server overview and local user management
-  Add themes and set to gray-10 theme
-  Add active class for current navigation
- Add a prototype method named $http to vue prototype
- The UI uses console logs in production to communicate to users
- Add boostrap vue component library

Change-Id: Ib6618e6357ca01bdac6de4ed031a15c8552226f3
Signed-off-by: Derick Montague <derick.montague@ibm.com>

13 files changed, 224 insertions, 0 deletions

diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 00000000..d21ef4f6
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,25 @@
+<template>
+  <div id="app">
+    <AppHeader />
+    <AppNavigation />
+    <main id="#main-content">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style lang="scss">
+@import "@/assets/styles/_obmc-custom";
+</style>
+
+<script>
+import AppHeader from "@/components/AppHeader";
+import AppNavigation from "@/components/AppNavigation";
+export default {
+  name: "App",
+  components: {
+    AppHeader,
+    AppNavigation
+  }
+};
+</script>
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
new file mode 100644
index 00000000..b128c0f1
--- /dev/null
+++ b/src/assets/styles/_obmc-custom.scss
@@ -0,0 +1,15 @@
+// Custom Bootstrap variable overrides
+
+// Major Breakpoints
+$grid-breakpoints: (
+  xs: 0,
+  sm: 480px,
+  md: 640px,
+  lg: 992px,
+  xl: 1300px
+);
+// $enable-rounded: false;
+
+// Include any custom overrides above
+@import "bootstrap/scss/bootstrap.scss";
+@import "bootstrap-vue/src/index.scss";
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
new file mode 100644
index 00000000..b28927ee
--- /dev/null
+++ b/src/components/AppHeader/AppHeader.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <a href="#main-content">Skip to main content</a>
+    <header>
+      <b-navbar toggleable="lg" type="dark" variant="primary">
+        <div>
+          <router-link to="/">{{ orgName }} System Management</router-link>
+        </div>
+        <div>
+          <span>{{ serverName }}</span>
+          <span>{{ ipAddress }}</span>
+        </div>
+        <div>
+          <b-button variant="link">
+            <Renew20 />
+            Refresh Data
+          </b-button>
+          <b-button variant="link">
+            <user-avatar-20 />
+            User Avatar
+          </b-button>
+        </div>
+      </b-navbar>
+    </header>
+  </div>
+</template>
+
+<script>
+import UserAvatar20 from "@carbon/icons-vue/es/user--avatar/20";
+import Renew20 from "@carbon/icons-vue/es/renew/20";
+export default {
+  name: "AppHeader",
+  components: { Renew20, UserAvatar20 },
+  data() {
+    return {
+      orgName: "OpenBMC",
+      serverName: "Server Name",
+      ipAddress: "127.0.0.0"
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/AppHeader/index.js b/src/components/AppHeader/index.js
new file mode 100644
index 00000000..b8f3ab3c
--- /dev/null
+++ b/src/components/AppHeader/index.js
@@ -0,0 +1,2 @@
+import AppHeader from "./AppHeader";
+export default AppHeader;
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
new file mode 100644
index 00000000..e5a1eeeb
--- /dev/null
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -0,0 +1,31 @@
+<template>
+  <nav>
+    <ul>
+      <li><router-link to="/">Overview</router-link></li>
+      <li>
+        <router-link to="/access-control/local-user-management"
+          >Local User Management</router-link
+        >
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+// import Analytics16 from "@carbon/icons-vue/es/analytics/16";
+// import DataCheck16 from "@carbon/icons-vue/es/data--check/16";
+// import SettingsAdjust16 from "@carbon/icons-vue/es/settings--adjust/16";
+// import Settings16 from "@carbon/icons-vue/es/settings/16";
+// import Password16 from "@carbon/icons-vue/es/password/16";
+
+export default {
+  name: "AppNavigation"
+  // components: {
+  //   Analytics16,
+  //   DataCheck16,
+  //   SettingsAdjust16,
+  //   Settings16,
+  //   Password16
+  // }
+};
+</script>
diff --git a/src/components/AppNavigation/index.js b/src/components/AppNavigation/index.js
new file mode 100644
index 00000000..8046f702
--- /dev/null
+++ b/src/components/AppNavigation/index.js
@@ -0,0 +1,2 @@
+import AppNavigation from "./AppNavigation";
+export default AppNavigation;
diff --git a/src/components/AppOverview/AppOverview.vue b/src/components/AppOverview/AppOverview.vue
new file mode 100644
index 00000000..055c9111
--- /dev/null
+++ b/src/components/AppOverview/AppOverview.vue
@@ -0,0 +1,12 @@
+<template>
+  <h1>Overview</h1>
+</template>
+
+<script>
+export default {
+  name: "AppOverview",
+  data() {
+    return {};
+  }
+};
+</script>
diff --git a/src/components/AppOverview/index.js b/src/components/AppOverview/index.js
new file mode 100644
index 00000000..3f1a43b2
--- /dev/null
+++ b/src/components/AppOverview/index.js
@@ -0,0 +1,2 @@
+import AppOverview from "./AppOverview";
+export default AppOverview;
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 00000000..16687c5c
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,26 @@
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import Axios from "axios";
+import {
+  ButtonPlugin,
+  NavPlugin,
+  CollapsePlugin,
+  LinkPlugin,
+  NavbarPlugin
+} from "bootstrap-vue";
+
+Vue.use(ButtonPlugin);
+Vue.use(NavPlugin);
+Vue.use(CollapsePlugin);
+Vue.use(LinkPlugin);
+Vue.use(NavbarPlugin);
+
+Vue.prototype.$http = Axios;
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount("#app");
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 00000000..dfa1e58b
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,36 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import Home from "../views/Home.vue";
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "home",
+    component: Home
+  },
+  {
+    path: "/access-control/local-user-management",
+    name: "local-users",
+    component: () => import("@/views/AccessControl/LocalUserManagement.vue")
+  }
+  // {
+  //   path: "/about",
+  //   name: "about",
+  //   // 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/About.vue")
+  // }
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+  linkExactActiveClass: "nav__link--current"
+});
+
+export default router;
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 00000000..fb6015f4
--- /dev/null
+++ b/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/src/views/AccessControl/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement.vue
new file mode 100644
index 00000000..3233aeca
--- /dev/null
+++ b/src/views/AccessControl/LocalUserManagement.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>Local user management</h1>
+</template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 00000000..f6cbd4eb
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,15 @@
+<template>
+  <AppOverview />
+</template>
+
+<script>
+// @ is an alias to /src
+import AppOverview from "@/components/AppOverview";
+
+export default {
+  name: "app-overview",
+  components: {
+    AppOverview
+  }
+};
+</script>