Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/assets/css/app.scss
#	src/components/menu.vue
#	src/router/index.js
#	src/views/FRUInfo.vue
#	src/views/index.vue

src/assets/css/app.scss

@@ -9,7 +9,7 @@
     margin: 0 auto;
     width: 1180px;
     min-height: 968px;
-   
+
 }
 input:-ms-input-placeholder, textarea:-ms-input-placeholder {
     color: #999 !important;
@@ -36,11 +36,13 @@ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fiel
 body {
     position: relative;
     outline: 0;
-    background-color: #F5F5F5 !important;
+    background-color: #022B7D !important;
     line-height: 1 !important;
     // min-width: 1180px;
-    background: url(../stor/bg1.png) no-repeat center;
-    background-size: 100% 100%;
+    background-image: url(../stor/bg1.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
 }
 h1, h2, h3, h4, h5, h6 {
     font-weight: 400;
@@ -596,6 +598,30 @@ p.error {
         white-space:normal;
     }
 }
+.configuration-title {
+    color: #fff;
+    font-size: 18px;
+    font-weight: 600;
+    padding: 20px 0 15px 0;
+    border-bottom: 1px solid #000;
+}
+.configuration-btn-right {
+    text-align: right;
+    padding: 15px 0;
+}
+.configuration-text{
+    color: #e2e1e1;
+    font-size: 13px;
+    line-height: 18px;
+    margin-top: 15px;
+}
+.configuration-table {
+    margin-top: 30px;
+}
+.configuration-subtitle {
+    color: #fff;
+    margin: 20px 0;
+}
 
 .dashboard_box{
   -webkit-box-sizing: border-box!important;

src/assets/css/iview_style_reset.scss

@@ -1,7 +1,7 @@
 // 对iview组件样式重写
 
 /* --- Select --- */
-// 
+//
 .formLogin > .ivu-form-item > .ivu-form-item-label{
   color:#fff;
 }
@@ -9,7 +9,6 @@
   content: '';
 }
 
-
 .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu {
     height: inherit;
     line-height: inherit;
@@ -37,7 +36,7 @@
     bottom: 0;
     left: 0;
 }
-.ivu-menu li.ivu-menu-item-active:after{
+.ivu-menu li.ivu-menu-child-item-active:after{
     content: '';
     position: absolute;
     bottom: 0;
@@ -50,22 +49,24 @@
     background-size: 100%;
 }
 
-.ivu-menu a.ivu-menu-item-active:after{
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    top: 57px;
-    z-index:9;
-    width: 100%;
-    height: 3px;
-    background: url(../stor/active.png) no-repeat center;
-    background-size: 100%;
-}
-
-
-.ivu-select-dropdown{
-    background: #1873FF;
+//.ivu-menu a.ivu-menu-item-active:after{
+//    content: '';
+//    position: absolute;
+//    bottom: 0;
+//    left: 0;
+//    top: 57px;
+//    z-index:9;
+//    width: 100%;
+//    height: 3px;
+//    background: url(../stor/active.png) no-repeat center;
+//    background-size: 100%;
+//}
+
+.menu-contente{
+    .ivu-select-dropdown{
+        background: #1873FF;
+        color: #fff;
+    }
 }
 
 .ivu-select-dropdown li.ivu-menu-item-active:after{
@@ -73,11 +74,11 @@
 }
 
 .ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item {
-    color: #77ADFF;
+    color: #fff;
 }
 
 .ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item-selected, .ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item-selected:hover{
-    color: #fff;
+    background: #0364F7;
 }
 
 // #1873FF
@@ -87,10 +88,77 @@
 // .ivu-menu-item-selected{
 //     color: #fff;
 // }
-
-
-
-
+.ivu-btn-primary{
+    background-color: #1873FF;
+    border-color: #1873FF;
+    &:hover {
+        background-color: #0364F7;
+        border-color: #0364F7;
+    }
+}
+.configuration-table {
+    .ivu-table-header thead tr th {
+        padding: 18px 0;
+    }
+    .ivu-table-cell {
+        color: #fff;
+    }
+    .ivu-table {
+        background-color: transparent;
+        th, td {
+            background-color: transparent;
+            border-bottom: 1px solid #ccc;
+        }
+        &:before {
+            background-color: #ccc;
+        }
+    }
+    .ivu-table-small td {
+        height: auto;
+        padding: 18px 0;
+    }
+    .ivu-table-body {
+        table {
+            border-bottom: 1px solid #ccc;
+        }
+    }
+}
+.dns {
+    .ivu-form-item-label{
+        color: #fff;
+    }
+}
+.ivu-form-item-content {
+    color: #fff;
+}
+.images-card > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
+    border-radius: 0;
+    background: #fff;
+}
+.images-card > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
+    background: #1873FF;
+    color: #fff;
+    border-color: #1873FF;
+}
+.images-card {
+    .ivu-tabs-bar {
+        margin-bottom: 0;
+        border-bottom: none;
+    }
+    .ivu-tabs-content {
+        padding: 15px;
+        border: 1px solid #555;
+    }
+}
+.ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item:hover {
+    background: #0364F7;
+}
+.ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item:hover {
+    color: #fff;
+}
+.event-log-form .ivu-form-item-label {
+    color: #fff;
+}
 
 
 

src/views/configuration/ActiveDirectory.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="active-directory">
+        <div class="configuration-title">Active Directory Settings</div>
+        <div  class="configuration-btn-right">
+            <Button type="primary" @click="modalSettings = true">Advanced Settings</Button>
+        </div>
+        <div class="configuration-text">The list below shows the current list of configured Role Groups. If you would like to delete or modify a role group, select the name in the list and click Delete Role Group or Modify Role Group. To add a new Role Group, select an unconfigured slot and click Add Role Group.</div>
+        <div class="configuration-table">
+            <Table :columns="columnsDirectory" :data="dataDirectory" size="small" ref="table"></Table>
+        </div>
+        <div class="configuration-btn-right">
+            <Button type="primary" style="margin-right: 10px;">Add Role Group</Button>
+            <Button type="primary" style="margin-right: 10px;">Modify Role Group</Button>
+            <Button type="primary">Delete Role Group</Button>
+        </div>
+        <Modal
+                v-model="modalSettings"
+                title="Advanced Settings"
+                width="660"
+                :loading="loading"
+                @on-ok="save"
+                @on-cancel="cancel">
+            <Form :model="formSettings" label-position="left" :label-width="260">
+                <FormItem label="Active Directory Authentication">
+                    <Checkbox v-model="formSettings.authentication">Enable</Checkbox>
+                </FormItem>
+                <FormItem label="Secret Username">
+                    <Input v-model="formSettings.userName" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Secret Password">
+                    <Input v-model="formSettings.password" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="User Domain Name">
+                    <Input v-model="formSettings.domainName" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Domain Controller Server Address1">
+                    <Input v-model="formSettings.address1" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Domain Controller Server Address2">
+                    <Input v-model="formSettings.address2" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Domain Controller Server Address3">
+                    <Input v-model="formSettings.address3" style="width: 300px;"/>
+                </FormItem>
+            </Form>
+        </Modal>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "ActiveDirectory",
+        data () {
+            return {
+                columnsDirectory: [
+                    {
+                        "title": "Role Group ID",
+                        "key": "ID",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Group Name",
+                        "key": "Name",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Group Domain",
+                        "key": "Domain",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Group Privilege",
+                        "key": "Privilege",
+                        "sortable": true
+                    }
+                ],
+                dataDirectory: [
+                    {
+                        ID: 1,
+                        Name: 'Group Name',
+                        Domain: 'Group Domain',
+                        Privilege: 'Group Privilege'
+                    },
+                    {
+                        ID: 2,
+                        Name: 'Group Name',
+                        Domain: 'Group Domain',
+                        Privilege: 'Group Privilege'
+                    }
+                ],
+                modalSettings: false,
+                loading: true,
+                formSettings: {
+                    authentication: true,
+                    userName: '',
+                    password:  '',
+                    domainName: '',
+                    address1: '',
+                    address2: '',
+                    address3: ''
+                }
+            }
+        },
+        methods: {
+            save() {
+                setTimeout(() => {
+                    this.modalSettings = false;
+                }, 2000);
+            },
+            cancel() {
+
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/configuration/DNS.vue

@@ -0,0 +1,134 @@
+<template>
+    <div class="dns">
+        <div class="configuration-title">DNS Server Settings</div>
+        <div class="configuration-text">Manage DNS settings of the device.</div>
+        <Form :model="formServerSettings" label-position="left" :label-width="200">
+            <div class="configuration-subtitle">Host Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="Host Settings">
+                    <Select v-model="formServerSettings.hostSettings" style="width: 300px;">
+                        <Option value="0">Manual</Option>
+                        <Option value="1">Automatic</Option>
+                    </Select>
+                </FormItem>
+                <FormItem label="Host Name">
+                    <Input v-model="formServerSettings.hostName" style="width: 300px;"/>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">Register BMC</div>
+            <div class="configuration-form-item">
+                <FormItem label="eth0">
+                    <div>
+                        <Checkbox v-model="formServerSettings.registerBMCEth0">Register BMC</Checkbox>
+                    </div>
+                    <div>
+                        <RadioGroup v-model="formServerSettings.radioEth0">
+                            <Radio label="0">Direct Dynamic DNS</Radio>
+                            <Radio label="1">DHCP Client FQDN</Radio>
+                        </RadioGroup>
+                    </div>
+                </FormItem>
+                <FormItem label="eth1">
+                    <div>
+                        <Checkbox v-model="formServerSettings.registerBMCEth1">Register BMC</Checkbox>
+                    </div>
+                    <div>
+                        <RadioGroup v-model="formServerSettings.radioEth1">
+                            <Radio label="0">Direct Dynamic DNS</Radio>
+                            <Radio label="1">DHCP Client FQDN</Radio>
+                        </RadioGroup>
+                    </div>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">TSIG Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="TSIG Authentication">
+                    <Checkbox v-model="formServerSettings.TSIGAuthentication">Enable</Checkbox>
+                </FormItem>
+                <FormItem label="Current TSIG Private File">
+                    <Input v-model="formServerSettings.currentFile" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="New TSIG Private File">
+                    <Upload action="//jsonplaceholder.typicode.com/posts/">
+                        <Button icon="ios-cloud-upload-outline">Upload files</Button>
+                    </Upload>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">Domain Name Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="Domain Settings">
+                    <Select v-model="formServerSettings.domainSettings" style="width: 300px;">
+                        <Option value="Manual">Manual</Option>
+                        <Option value="eth1_v6">eth1_v6</Option>
+                    </Select>
+                </FormItem>
+                <FormItem label="Domain Name">
+                    <Input v-model="formServerSettings.domainName" style="width: 300px;"/>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">Domain Name Server Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="DNS Server Settings">
+                    <Select v-model="formServerSettings.serverSettings" style="width: 300px;">
+                        <Option value="0">Manual</Option>
+                    </Select>
+                </FormItem>
+                <FormItem label="IP Priority">
+                    <RadioGroup v-model="formServerSettings.iPPriority">
+                        <Radio label="0">IPv4</Radio>
+                        <Radio label="1">IPv6</Radio>
+                    </RadioGroup>
+                </FormItem>
+                <FormItem label="DNS Server1">
+                    <Input v-model="formServerSettings.DNSServer1" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="DNS Server2">
+                    <Input v-model="formServerSettings.DNSServer2" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="DNS Server3">
+                    <Input v-model="formServerSettings.DNSServer3" style="width: 300px;"/>
+                </FormItem>
+            </div>
+        </Form>
+        <div class="configuration-btn-right">
+            <Button type="primary" style="margin-right: 10px;">Save</Button>
+            <Button type="primary">Reset</Button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DNS",
+        data() {
+            return {
+                formServerSettings: {
+                    hostSettings: '',
+                    hostName: '',
+                    registerBMCEth0: false,
+                    registerBMCEth1: false,
+                    radioEth0: '',
+                    radioEth1: '',
+                    TSIGAuthentication: false,
+                    currentFile: '',
+                    domainSettings: '',
+                    domainName: '',
+                    serverSettings: '',
+                    iPPriority: '',
+                    DNSServer1: '',
+                    DNSServer2: '',
+                    DNSServer3: ''
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .configuration-btn-right {
+        border-top: 1px solid #000;
+    }
+    .configuration-form-item  {
+        padding-left: 40px;
+    }
+</style>

src/views/configuration/EventLog.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="event-log">
+        <div class="configuration-title">System Event Log</div>
+        <div class="configuration-text">This page is used to configure the System Event log information .</div>
+        <div class="event-log-form">
+            <Form :model="formEventLog" label-position="left" :label-width="0">
+                <div class="configuration-subtitle">Current Event Log Policy:</div>
+                <FormItem>
+                    <RadioGroup v-model="formEventLog.radioPolicy" vertical>
+                        <Radio label="0">Enable Linear Event Log Policy</Radio>
+                        <Radio label="1">Enable Circular Event Log Policy</Radio>
+                    </RadioGroup>
+                </FormItem>
+            </Form>
+        </div>
+        <div class="configuration-btn-right">
+            <Button type="primary" style="margin-right: 10px;">Save</Button>
+            <Button type="primary">Reset</Button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "EventLog",
+        data() {
+            return {
+                formEventLog: {
+                    radioPolicy: ''
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .event-log-form {
+        padding-left: 30px;
+        .configuration-subtitle {
+            font-size: 14px;
+            margin-bottom: 10px;
+        }
+    }
+    .configuration-btn-right {
+        border-top: 1px solid #000;
+    }
+</style>

src/views/configuration/ImagesRedirection.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="images-redirection">
+        <div class="configuration-title">Images Redirection</div>
+        <div  class="configuration-btn-right">
+            <Button type="primary">Advanced Settings</Button>
+        </div>
+        <div class="images-card">
+            <Tabs type="card" :animated="false">
+                <TabPane label="Local Media">
+                    <div class="configuration-table">
+                        <Table :columns="columnsLocal" :data="dataLocal" size="small" ref="table"></Table>
+                    </div>
+                </TabPane>
+                <TabPane label="Remote Media">
+                    <div class="configuration-table">
+                        <Table :columns="columnsRemote" :data="dataRemote" size="small" ref="table"></Table>
+                    </div>
+                </TabPane>
+                <div class="configuration-btn-right">
+                    <Button type="primary" style="margin-right: 10px;">Start Redirection</Button>
+                    <Button type="primary" style="margin-right: 10px;">Add Image</Button>
+                    <Button type="primary" style="margin-right: 10px;">Replace Image</Button>
+                    <Button type="primary">Delete Image</Button>
+                </div>
+            </Tabs>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "ImagesRedirection",
+        data() {
+            return {
+                columnsLocal: [
+                    {
+                        "title": "#",
+                        "key": "ID",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Image Type",
+                        "key": "Name",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Image Name",
+                        "key": "Domain",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Image Information ",
+                        "key": "Privilege",
+                        "sortable": true
+                    }
+                ],
+                dataRemote: [
+                    {
+                        ID: 1,
+                        Name: 'Group Name',
+                        Domain: 'Group Domain',
+                        Privilege: 'Group Privilege'
+                    },
+                    {
+                        ID: 2,
+                        Name: 'Group Name',
+                        Domain: 'Group Domain',
+                        Privilege: 'Group Privilege'
+                    }
+                ],
+                columnsRemote: [
+                    {
+                        "title": "#",
+                        "key": "ID",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Image Type",
+                        "key": "Name",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Image Name",
+                        "key": "Domain",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Redirection Status",
+                        "key": "Privilege",
+                        "sortable": true
+                    }
+                ],
+                dataLocal: [
+                    {
+                        ID: 1,
+                        Name: 'Group Name',
+                        Domain: 'Group Domain',
+                        Privilege: 'Group Privilege'
+                    },
+                    {
+                        ID: 2,
+                        Name: 'Group Name',
+                        Domain: 'Group Domain',
+                        Privilege: 'Group Privilege'
+                    }
+                ]
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/configuration/LDAP.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="active-directory">
+        <div class="configuration-title">LDAP/E-Directory Settings</div>
+        <div  class="configuration-btn-right">
+            <Button type="primary" @click="modalSettings = true">Advanced Settings</Button>
+        </div>
+        <div class="configuration-text">The list below shows the current list of configured Role Groups. If you would like to delete or modify a role group, select the name in the list and click Delete Role Group or Modify Role Group. To add a new Role Group, select an unconfigured slot and click Add Role Group.</div>
+        <div class="configuration-table">
+            <Table :columns="columnsDirectory" :data="dataDirectory" size="small" ref="table"></Table>
+        </div>
+        <div class="configuration-btn-right">
+            <Button type="primary" style="margin-right: 10px;">Add Role Group</Button>
+            <Button type="primary" style="margin-right: 10px;">Modify Role Group</Button>
+            <Button type="primary">Delete Role Group</Button>
+        </div>
+        <Modal
+                v-model="modalSettings"
+                title="Advanced Settings"
+                width="660"
+                :loading="loading"
+                @on-ok="save"
+                @on-cancel="cancel">
+            <Form :model="formSettings" label-position="left" :label-width="260">
+                <FormItem label="LDAP/E-Directory Authentication">
+                    <Checkbox v-model="formSettings.authentication">Enable</Checkbox>
+                </FormItem>
+                <FormItem label="Server Address">
+                    <Input v-model="formSettings.address" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Port">
+                    <Input v-model="formSettings.port" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Bind DN">
+                    <Input v-model="formSettings.bindDn" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Password">
+                    <Input v-model="formSettings.password" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Search Base">
+                    <Input v-model="formSettings.searchBase" style="width: 300px;"/>
+                </FormItem>
+            </Form>
+        </Modal>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "LDAP",
+        data () {
+            return {
+                columnsDirectory: [
+                    {
+                        "title": "Role Group ID",
+                        "key": "ID",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Group Name",
+                        "key": "Name",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Group Search Base",
+                        "key": "Base",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Group Privilege",
+                        "key": "Privilege",
+                        "sortable": true
+                    }
+                ],
+                dataDirectory: [
+                    {
+                        ID: 1,
+                        Name: 'Group Name',
+                        Base: 'Group Search Base',
+                        Privilege: 'Group Privilege'
+                    },
+                    {
+                        ID: 2,
+                        Name: 'Group Name',
+                        Base: 'Group Search Base',
+                        Privilege: 'Group Privilege'
+                    }
+                ],
+                modalSettings: false,
+                loading: true,
+                formSettings: {
+                    authentication: true,
+                    address: '',
+                    password:  '',
+                    port: '',
+                    bindDn: '',
+                    searchBase: '',
+                }
+            }
+        },
+        methods: {
+            save() {
+                setTimeout(() => {
+                    this.modalSettings = false;
+                }, 2000);
+            },
+            cancel() {
+
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
+

src/views/configuration/License.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="active-directory">
+        <div class="configuration-title">License</div>
+        <div class="configuration-text">
+            Below is a list of available Features and it's License validity. Click the "Upload License Key" button to upload a new Key to activate the particular feature.</div>
+        <div class="configuration-table">
+            <Table :columns="columnsDirectory" :data="dataDirectory" size="small" ref="table"></Table>
+        </div>
+        <div class="configuration-btn-right">
+            <Button type="primary" @click="modalSettings = true">Upload License Key</Button>
+        </div>
+        <Modal
+                v-model="modalSettings"
+                title="Advanced Settings"
+                width="660"
+                :loading="loading"
+                @on-ok="save"
+                @on-cancel="cancel">
+            <Form :model="formSettings" label-position="left" :label-width="260">
+                <FormItem label="License Key">
+                    <Input v-model="formSettings.key" style="width: 300px;"/>
+                </FormItem>
+            </Form>
+        </Modal>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "License",
+        data () {
+            return {
+                columnsDirectory: [
+                    {
+                        "title": "#",
+                        "key": "ID",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Feature Name",
+                        "key": "Name",
+                        "sortable": true
+                    },
+                    {
+                        "title": "Validity",
+                        "key": "Validity",
+                        "sortable": true
+                    }
+                ],
+                dataDirectory: [
+                    {
+                        ID: 1,
+                        Name: 'Group Name',
+                        Validity: 'Validity',
+                    },
+                    {
+                        ID: 2,
+                        Name: 'Group Name',
+                        Validity: 'Validity',
+                    }
+                ],
+                modalSettings: false,
+                loading: true,
+                formSettings: {
+                    key: '',
+                }
+            }
+        },
+        methods: {
+            save() {
+                setTimeout(() => {
+                    this.modalSettings = false;
+                }, 2000);
+            },
+            cancel() {
+
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
+
+

src/views/configuration/MouseMode.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="event-log">
+        <div class="configuration-title">Mouse Mode Settings</div>
+        <div class="configuration-text">Redirection console mouse mode settings can be modified here.</div>
+        <div class="event-log-form">
+            <Form :model="formEventLog" label-position="left" :label-width="0">
+                <div class="configuration-subtitle">Current Mouse Mode:</div>
+                <FormItem>
+                    <RadioGroup v-model="formEventLog.radioPolicy" vertical>
+                        <Radio label="0">Set Mode to Relative (Recommended when server OS is Linux)</Radio>
+                        <Radio label="1">Set Mode to Absolute (Recommended when server OS is Windows)</Radio>
+                        <Radio label="2">Set Mode to Other Mode (Recommended for SLES-11 OS Installation)</Radio>
+                    </RadioGroup>
+                </FormItem>
+            </Form>
+        </div>
+        <div class="configuration-btn-right">
+            <Button type="primary" style="margin-right: 10px;">Save</Button>
+            <Button type="primary">Reset</Button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "MouseMode",
+        data() {
+            return {
+                formEventLog: {
+                    radioPolicy: ''
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .event-log-form {
+        padding-left: 30px;
+        .configuration-subtitle {
+            font-size: 14px;
+            margin-bottom: 10px;
+        }
+    }
+    .configuration-btn-right {
+        border-top: 1px solid #000;
+    }
+</style>
+

src/views/configuration/NCSI.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="event-log">
+        <div class="configuration-title">NCSI Settings</div>
+        <div class="configuration-text">The following options are for configuring the channel number and package ID information for the NCSI interface.</div>
+        <div class="event-log-form">
+            <Form :model="formEventLog" label-position="left" :label-width="0">
+                <div class="configuration-subtitle">Current NCSI Mode:</div>
+                <FormItem>
+                    <RadioGroup v-model="formEventLog.radioPolicy" vertical>
+                        <Radio label="0">Set NCSI Mode to Auto Failover Mode</Radio>
+                        <Radio label="1">Set NCSI Mode to Manual Switch Mode</Radio>
+                    </RadioGroup>
+                </FormItem>
+                <FormItem label="NCSI Interface" :label-width="120">
+                    <Select v-model="formEventLog.interface" style="width: 200px;">
+                    </Select>
+                </FormItem>
+                <FormItem label="Channel Number" :label-width="120">
+                    <Select v-model="formEventLog.channelNumber" style="width: 200px;">
+                        <Option value="0">0</Option>
+                        <Option value="1">1</Option>
+                    </Select>
+                </FormItem>
+                <FormItem label="Package ID" :label-width="120">
+                    <Select v-model="formEventLog.packageID" style="width: 200px;">
+                        <Option value="0">0</Option>
+                        <Option value="1">1</Option>
+                    </Select>
+                </FormItem>
+            </Form>
+        </div>
+        <div class="configuration-btn-right">
+            <Button type="primary" style="margin-right: 10px;">Save</Button>
+            <Button type="primary">Reset</Button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "NCSI",
+        data() {
+            return {
+                formEventLog: {
+                    radioPolicy: '',
+                    interface: '',
+                    channelNumber: '',
+                    packageID: ''
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .event-log-form {
+        padding-left: 30px;
+        .configuration-subtitle {
+            font-size: 14px;
+            margin-bottom: 10px;
+        }
+    }
+    .configuration-btn-right {
+        border-top: 1px solid #000;
+    }
+</style>
+
+

src/views/configuration/Network.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="dns">
+        <div class="configuration-title">Network Settings</div>
+        <div class="configuration-text">Manage network settings of the device.</div>
+        <Form :model="formServerSettings" label-position="left" :label-width="280">
+            <div class="configuration-subtitle"></div>
+            <div class="configuration-form-item">
+                <FormItem label="LAN Interface">
+                    <Select v-model="formServerSettings.LANInterface" style="width: 300px;">
+                        <Option value="0">eth0</Option>
+                        <Option value="1">eth1</Option>
+                    </Select>
+                </FormItem>
+                <FormItem label="LAN Settings">
+                    <Checkbox v-model="formServerSettings.LANSettings">Enable</Checkbox>
+                </FormItem>
+                <FormItem label="MAC Address">
+                    <Input v-model="formServerSettings.MACAddress" style="width: 300px;"/>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">IPv4 Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="Obtain an IP address automatically">
+                    <Checkbox v-model="formServerSettings.UseDHCP1">Use DHCP</Checkbox>
+                </FormItem>
+                <FormItem label="IPv4 Address">
+                    <Input v-model="formServerSettings.IPv4Address" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Subnet Mask">
+                    <Input v-model="formServerSettings.SubnetMask" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Default Gateway">
+                    <Input v-model="formServerSettings.DefaultGateway1" style="width: 300px;"/>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">IPv6 Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="IPv6 Settings">
+                    <Checkbox v-model="formServerSettings.IPv6Settings">Enable</Checkbox>
+                </FormItem>
+                <FormItem label="Obtain an IP address automatically">
+                    <Checkbox v-model="formServerSettings.UseDHCP2">Use DHCP</Checkbox>
+                </FormItem>
+                <FormItem label="IPv6 Address">
+                    <Input v-model="formServerSettings.IPv6Address" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Subnet Prefix length">
+                    <Input v-model="formServerSettings.SubnetPrefixLength" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Default Gateway">
+                    <Input v-model="formServerSettings.DefaultGateway2" style="width: 300px;"/>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">VLAN Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="VLAN Settings">
+                    <Checkbox v-model="formServerSettings.VLANSettings">Enable</Checkbox>
+                </FormItem>
+                <FormItem label="VLAN ID">
+                    <Input v-model="formServerSettings.VLANID" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="VLAN Priority">
+                    <Input v-model="formServerSettings.VLANPriority" style="width: 300px;"/>
+                </FormItem>
+            </div>
+        </Form>
+        <div class="configuration-btn-right">
+            <Button type="primary" style="margin-right: 10px;">Save</Button>
+            <Button type="primary">Reset</Button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Network",
+        data() {
+            return {
+                formServerSettings: {
+                    LANInterface: '0',
+                    LANSettings: true,
+                    MACAddress: '02:04:06:08:0A:8E',
+                    UseDHCP1: false,
+                    IPv4Address: '192.168.0.203',
+                    SubnetMask: '255.255.255.0',
+                    DefaultGateway1: '192.168.0.1',
+                    IPv6Settings: true,
+                    UseDHCP2: false,
+                    IPv6Address: '',
+                    SubnetPrefixLength: 0,
+                    DefaultGateway2: '',
+                    VLANSettings: false,
+                    VLANID: 0,
+                    VLANPriority: 0,
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .configuration-btn-right {
+        border-top: 1px solid #000;
+    }
+    .configuration-form-item  {
+        padding-left: 40px;
+    }
+</style>
+

src/views/configuration/NetworkBond.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="event-log">
+        <div class="configuration-title">Network Bonding Configuration</div>
+        <div class="configuration-text">The following options are for configuring the networking bonding for the device.</div>
+        <div class="event-log-form">
+            <Form :model="formEventLog" label-position="left" :label-width="150">
+                <div class="configuration-subtitle"></div>
+                <FormItem label="Network Bonding">
+                    <Checkbox v-model="formEventLog.NetworkBonding">Enable</Checkbox>
+                </FormItem>
+                <FormItem label="Bonding Mode">
+                    <Input v-model="formEventLog.BondingMode" style="width: 200px;"/>
+                </FormItem>
+                <FormItem label="Default Interfaces">
+                    <Select v-model="formEventLog.DefaultInterfaces" style="width: 200px;">
+                    </Select>
+                </FormItem>
+                <FormItem label="Auto Configuration" >
+                    <Checkbox v-model="formEventLog.AutoConfiguration">Enable</Checkbox>
+                </FormItem>
+            </Form>
+        </div>
+        <div class="configuration-btn-right">
+            <Button type="primary" style="margin-right: 10px;">Save</Button>
+            <Button type="primary">Reset</Button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "NetworkBond",
+        data() {
+            return {
+                formEventLog: {
+                    NetworkBonding: false,
+                    BondingMode: '',
+                    DefaultInterfaces: '',
+                    AutoConfiguration: true,
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .event-log-form {
+        padding-left: 30px;
+        .configuration-subtitle {
+            font-size: 14px;
+            margin-bottom: 10px;
+        }
+    }
+    .configuration-btn-right {
+        border-top: 1px solid #000;
+    }
+</style>
+
+
+

src/views/configuration/NetworkLink.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="event-log">
+        <div class="configuration-title">Network Link Configuration</div>
+        <div class="configuration-text">Manage network link settings of the device.</div>
+        <div class="event-log-form">
+            <Form :model="formEventLog" label-position="left" :label-width="150">
+                <div class="configuration-subtitle"></div>
+                <FormItem label="LAN Interface">
+                    <Select v-model="formEventLog.LANInterface" style="width: 200px;">
+                    </Select>
+                </FormItem>
+                <FormItem label="Auto Negotiation">
+                    <RadioGroup v-model="formEventLog.AutoNegotiation">
+                        <Radio label="0">ON</Radio>
+                        <Radio label="1">OFF</Radio>
+                    </RadioGroup>
+                </FormItem>
+                <FormItem label="Link Speed">
+                    <Select v-model="formEventLog.LinkSpeed" style="width: 200px;">
+                    </Select>
+                </FormItem>
+                <FormItem label="Duplex Mode" >
+                    <Select v-model="formEventLog.DuplexMode" style="width: 200px;">
+                    </Select>
+                </FormItem>
+            </Form>
+        </div>
+        <div class="configuration-btn-right">
+            <Button type="primary" style="margin-right: 10px;">Save</Button>
+            <Button type="primary">Reset</Button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "NetworkLink",
+        data() {
+            return {
+                formEventLog: {
+                    LANInterface: '',
+                    AutoNegotiation: '0',
+                    LinkSpeed: '',
+                    DuplexMode: '',
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .event-log-form {
+        padding-left: 30px;
+        .configuration-subtitle {
+            font-size: 14px;
+            margin-bottom: 10px;
+        }
+    }
+    .configuration-btn-right {
+        border-top: 1px solid #000;
+    }
+</style>
+
+
+
+