| /** |
| * Licensed to the Apache Software Foundation (ASF) under one or more |
| * contributor license agreements. See the NOTICE file distributed with |
| * this work for additional information regarding copyright ownership. |
| * The ASF licenses this file to You under the Apache License, Version 2.0 |
| * (the "License"); you may not use this file except in compliance with |
| * the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| <template> |
| <div class="rk-dashboard-comp"> |
| <nav class="rk-dashboard-comp-nav mb-15"> |
| <a class="rk-dashboard-comp-nav-i b mr-20" v-if="value.length" @click="current = key;configMode = false" :class="{'active': key === current}" v-for="(value, key) in tree" :key="key">{{$t(key.toLowerCase())}}</a> |
| <div class="pt-10 r"> |
| <a class="rk-btn ghost sm" @click="configMode = !configMode">{{$t('templateConfig')}}</a> |
| </div> |
| </nav> |
| <div class="rk-dashboard-comp-wrapper"> |
| <div v-if="configMode" class="mb-15"> |
| <textarea class="long mb-5 sm rk-dashboard-textarea" rows="3" v-model="config"></textarea> |
| <a class="rk-btn ghost sm mr-10" @click="handleCopy(config)">{{$t('copy')}}</a> |
| <a class="rk-btn ghost sm mr-10" @click="handleReset">{{$t('reset')}}</a> |
| <a class="rk-btn ghost sm" @click="handleApply">{{$t('apply')}}</a> |
| </div> |
| <div v-else class="rk-dashboard-comp-i mr-10 mb-10" v-for="(i, index) in tree[current]" :key="index"> |
| <span class="b mr-5 sm">{{$t(i.o.toLowerCase())}}</span> |
| <svg class="icon blue cp lg r" @click="ADD_COMP(i)"> |
| <use xlink:href="#file-addition"></use> |
| </svg> |
| <div class="mr-5">{{i.t}}</div> |
| </div> |
| </div> |
| </div> |
| </template> |
| |
| <script lang="ts"> |
| import { Vue, Component, Watch, Prop } from 'vue-property-decorator'; |
| import { State, Mutation } from 'vuex-class'; |
| import copy from '@/utils/copy'; |
| |
| @Component |
| export default class DashboardComp extends Vue { |
| @Prop() private rocketComps: any; |
| @Prop() private compType: any; |
| @Mutation('ADD_COMP') private ADD_COMP: any; |
| private current: string = 'Global'; |
| private configMode: boolean = false; |
| private config: string = ''; |
| private get tree() { |
| const temp: any = { |
| Global: [], |
| Service: [], |
| ServiceEndpoint: [], |
| ServiceInstance: [], |
| Proxy: [], |
| ProxyEndpoint: [], |
| ProxyInstance: [], |
| Database: [], |
| }; |
| this.rocketComps.data[this.compType].forEach((i: any) => { |
| temp[i.o] && temp[i.o].push(i); |
| }); |
| return temp; |
| } |
| private created() { |
| this.config = JSON.stringify(this.rocketComps.tree); |
| } |
| private handleCopy(i: any) { |
| copy(i); |
| } |
| private handleApply() { |
| const r = confirm(''); |
| if (r === true) { |
| window.localStorage.setItem('dashboard', this.config); |
| this.configMode = false; |
| location.reload(); |
| } |
| } |
| private handleReset() { |
| const r = confirm(''); |
| if (r === true) { |
| window.localStorage.removeItem('dashboard'); |
| this.configMode = false; |
| location.reload(); |
| } |
| } |
| } |
| </script> |
| |
| <style lang="scss" scoped> |
| .rk-dashboard-comp-nav{ |
| padding: 0 15px; |
| } |
| .rk-dashboard-textarea{ |
| resize:none; |
| border: 1px solid #c1c5ca41; |
| outline: none; |
| padding: 0 8px; |
| border-radius: 4px; |
| } |
| .rk-dashboard-comp-nav-i{ |
| display: inline-block; |
| line-height: 30px; |
| border-bottom: 2px; |
| border-bottom-style: solid; |
| color: rgba(61, 68, 79, .6); |
| border-color: rgba(0, 0, 0, 0); |
| will-change: border-color,color; |
| transition: border-color .3s, color .3s; |
| &:hover{ |
| color: #448dfe; |
| } |
| &.active{ |
| color: #448dfe; |
| border-color: #448dfe; |
| } |
| } |
| .rk-dashboard-comp { |
| flex-shrink: 0; |
| border-top: 1px solid #c1c5ca41; |
| color: #515a6e; |
| background-color: rgba(196, 200, 225, 0.2); |
| .title{ |
| padding: 0 15px; |
| } |
| } |
| .rk-dashboard-comp-wrapper{ |
| padding: 0 15px; |
| } |
| .rk-dashboard-comp-i{ |
| padding: 6px 10px; |
| min-width: 100px; |
| display: inline-block; |
| border-radius: 3px; |
| background-color: #fff; |
| box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); |
| } |
| </style> |