| <!-- 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> |
| <aside class="link-topo-aside"> |
| <Radial v-if="radioStatus" :datas="{ nodes: stateTopo.nodes, calls: stateTopo.calls }" /> |
| <svg |
| class="link-topo-aside-btn icon cp lg" |
| @click="showRadial()" |
| :style="`position:absolute;left:580px;${radioStatus ? 'background-color: #357de9;' : ''}`" |
| > |
| <use xlink:href="#issues" /> |
| </svg> |
| <TopoService /> |
| <TopoDetectPoint /> |
| </aside> |
| </template> |
| <script lang="ts"> |
| import { initState } from '@/store/modules/dashboard/dashboard-data-layout'; |
| import { State as topoState } from '@/store/modules/topology'; |
| import { Component, Vue } from 'vue-property-decorator'; |
| import { Action, Getter, Mutation, State } from 'vuex-class'; |
| import Radial from './chart/radial.vue'; |
| import TopoService from './topo-services.vue'; |
| import TopoDetectPoint from './topo-detect-point.vue'; |
| |
| @Component({ |
| components: { |
| TopoService, |
| Radial, |
| TopoDetectPoint, |
| }, |
| }) |
| export default class TopoAside extends Vue { |
| @State('rocketTopo') private stateTopo!: topoState; |
| @Getter('intervalTime') private intervalTime: any; |
| @Getter('durationTime') private durationTime: any; |
| @Action('rocketTopo/CLEAR_TOPO') private CLEAR_TOPO: any; |
| @Action('rocketTopo/CLEAR_TOPO_INFO') private CLEAR_TOPO_INFO: any; |
| @Mutation('SET_COMPS_TREE') private SET_COMPS_TREE: any; |
| @Mutation('rocketTopo/SET_MODE_STATUS') private SET_MODE_STATUS: any; |
| private initState = initState; |
| private radioStatus: boolean = false; |
| |
| private get showServerInfo() { |
| return this.stateTopo.currentNode.name && this.stateTopo.currentNode.isReal; |
| } |
| |
| private created() { |
| this.SET_COMPS_TREE(this.initState.tree); |
| } |
| |
| private beforeDestroy() { |
| this.CLEAR_TOPO_INFO(); |
| this.CLEAR_TOPO(); |
| } |
| |
| get types() { |
| const result: any = {}; |
| this.stateTopo.nodes.forEach((i: any) => { |
| if (result[i.type]) { |
| result[i.type] += 1; |
| } else { |
| result[i.type] = 1; |
| } |
| }); |
| return result; |
| } |
| |
| private showRadial() { |
| this.radioStatus = !this.radioStatus; |
| } |
| } |
| </script> |
| <style lang="scss" scoped> |
| .link-topo-aside { |
| width: 280px; |
| position: absolute; |
| z-index: 2; |
| left: 20px; |
| top: 7px; |
| |
| .to-apm { |
| padding-top: 10px; |
| border-top: 1px solid #d8d8d866; |
| } |
| } |
| .title { |
| padding: 10px; |
| } |
| |
| .link-topo-aside-btn { |
| display: block; |
| background: #252a2f9a; |
| color: #ddd; |
| border-radius: 4px; |
| text-align: center; |
| padding: 10px; |
| z-index: 101; |
| } |
| |
| .link-topo-aside-box { |
| border-radius: 4px; |
| position: absolute; |
| width: 280px; |
| z-index: 101; |
| color: #ddd; |
| background-color: #2b3037; |
| // padding: 15px 20px 10px; |
| |
| .label { |
| display: inline-block; |
| width: 40%; |
| } |
| |
| .content { |
| vertical-align: top; |
| display: inline-block; |
| width: 60%; |
| } |
| |
| .circle { |
| width: 8px; |
| height: 8px; |
| border-radius: 4px; |
| background-color: #ee5b5b; |
| margin-top: 6px; |
| } |
| } |
| |
| .link-topo-aside-box { |
| p { |
| margin-block-start: auto !important; |
| margin-block-end: auto !important; |
| } |
| } |
| |
| .link-topo-aside-box-min { |
| width: 360px; |
| animation: 0.5s linkTopoAsideBoxMin 1 running; |
| } |
| |
| .link-topo-aside-box-max { |
| width: 60%; |
| animation: 0.5s linkTopoAsideBoxMax 1 running; |
| } |
| |
| @keyframes linkTopoAsideBoxMax { |
| from { |
| width: 280px; |
| } |
| to { |
| width: 60%; |
| } |
| } |
| |
| @keyframes linkTopoAsideBoxMin { |
| from { |
| width: 60%; |
| } |
| to { |
| width: 280px; |
| } |
| } |
| </style> |