fix component name (#153)

* fix component name

* fix component class name
diff --git a/src/views/components/alarm/alarm-select.vue b/src/views/components/alarm/alarm-select.vue
index 39eb0bc..b0d4c03 100644
--- a/src/views/components/alarm/alarm-select.vue
+++ b/src/views/components/alarm/alarm-select.vue
@@ -16,7 +16,7 @@
  */
 
 <template>
-  <div class="rk-alarm-bar-select cp flex-h" v-clickout="() => { visible = false;search = '';}" :class="{'active':visible}">
+  <div class="rk-alarm-select cp flex-h" v-clickout="() => { visible = false;search = '';}" :class="{'active':visible}">
     <div class="rk-alarm-bar-i flex-h" @click="visible = !visible">
       <div class="mr-15 rk-alarm-bar-i-text">
         <div class="sm grey">{{title}}</div>
@@ -43,7 +43,7 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
 @Component
-export default class ToolBarSelect extends Vue {
+export default class AlarmSelect extends Vue {
   @Prop() public data!: any;
   @Prop() public value!: any;
   @Prop() public title!: string;
@@ -64,7 +64,7 @@
 </script>
 
 <style lang="scss" scoped>
- .rk-alarm-bar-select{
+ .rk-alarm-select{
   position: relative;
   z-index: 1;
   height: 100%;
diff --git a/src/views/components/dashboard/charts/chart-bar.vue b/src/views/components/dashboard/charts/chart-bar.vue
index 7d6a8f5..ad3d441 100644
--- a/src/views/components/dashboard/charts/chart-bar.vue
+++ b/src/views/components/dashboard/charts/chart-bar.vue
@@ -22,7 +22,7 @@
 import { Vue, Component, Prop } from 'vue-property-decorator';
 
 @Component
-export default class Request extends Vue {
+export default class ChartBar extends Vue {
     @Prop() private data!: any;
     @Prop() private intervalTime!: any;
     public resize() {
diff --git a/src/views/components/dashboard/charts/chart-brief.vue b/src/views/components/dashboard/charts/chart-brief.vue
index a9766c8..0b2e772 100755
--- a/src/views/components/dashboard/charts/chart-brief.vue
+++ b/src/views/components/dashboard/charts/chart-brief.vue
@@ -62,7 +62,7 @@
 import { Component, Prop } from 'vue-property-decorator';
 import moment from 'dayjs';
 @Component
-export default class Brief extends Vue {
+export default class ChartBrief extends Vue {
   @Prop() private data!: any;
   @Prop() private intervalTime!: any;
 }
diff --git a/src/views/components/dashboard/charts/chart-count.vue b/src/views/components/dashboard/charts/chart-count.vue
index d4bf268..943faa7 100644
--- a/src/views/components/dashboard/charts/chart-count.vue
+++ b/src/views/components/dashboard/charts/chart-count.vue
@@ -31,7 +31,7 @@
 import { Component, Prop } from 'vue-property-decorator';
 
 @Component
-export default class Nonheap extends Vue {
+export default class ChartCount extends Vue {
   @Prop() private title!: string;
   @Prop() private data!: any;
   @Prop() private intervalTime!: any;
diff --git a/src/views/components/dashboard/charts/chart-edit.vue b/src/views/components/dashboard/charts/chart-edit.vue
index e869a51..687dfa7 100755
--- a/src/views/components/dashboard/charts/chart-edit.vue
+++ b/src/views/components/dashboard/charts/chart-edit.vue
@@ -40,7 +40,7 @@
 import { Component, Prop } from 'vue-property-decorator';
 
 @Component
-export default class Response extends Vue {
+export default class ChartEdit extends Vue {
   @Mutation('EDIT_COMP') private EDIT_COMP: any;
   @Prop() private i!: any;
   @Prop() private index!: number;
diff --git a/src/views/components/dashboard/charts/chart-heap.vue b/src/views/components/dashboard/charts/chart-heap.vue
index 5fa7712..b460577 100644
--- a/src/views/components/dashboard/charts/chart-heap.vue
+++ b/src/views/components/dashboard/charts/chart-heap.vue
@@ -26,7 +26,7 @@
 import { Component, Prop } from 'vue-property-decorator';
 
 @Component
-export default class Response extends Vue {
+export default class ChartHeap extends Vue {
   @Prop() private title!: string;
   @Prop() private stateDashboard!: any;
   @Prop() private intervalTime!: any;
diff --git a/src/views/components/dashboard/charts/chart-heatmap.vue b/src/views/components/dashboard/charts/chart-heatmap.vue
index 89fbf68..ea525f1 100644
--- a/src/views/components/dashboard/charts/chart-heatmap.vue
+++ b/src/views/components/dashboard/charts/chart-heatmap.vue
@@ -25,7 +25,7 @@
 import 'echarts/lib/component/visualMap';
 import moment from 'dayjs';
 @Component
-export default class Heatmap extends Vue {
+export default class ChartHeatmap extends Vue {
   @Prop() private title!: string;
   @Prop() private type!: string;
   @Prop() private data!: any;
diff --git a/src/views/components/dashboard/charts/chart-instance.vue b/src/views/components/dashboard/charts/chart-instance.vue
index 4561c42..99f6901 100755
--- a/src/views/components/dashboard/charts/chart-instance.vue
+++ b/src/views/components/dashboard/charts/chart-instance.vue
@@ -37,7 +37,7 @@
 import moment from 'dayjs';
 import { State } from 'vuex-class';
 @Component
-export default class Response extends Vue {
+export default class ChartInstance extends Vue {
   @State('rocketOption') private rocketOption!: any;
   @Prop() private intervalTime!: any;
 }
diff --git a/src/views/components/dashboard/charts/chart-line.vue b/src/views/components/dashboard/charts/chart-line.vue
index aec54e1..c9c85f0 100644
--- a/src/views/components/dashboard/charts/chart-line.vue
+++ b/src/views/components/dashboard/charts/chart-line.vue
@@ -22,7 +22,7 @@
 import { Vue, Component, Prop } from 'vue-property-decorator';
 
 @Component
-export default class Request extends Vue {
+export default class ChartLine extends Vue {
     @Prop() private data!: any;
     @Prop() private intervalTime!: any;
     public resize() {
diff --git a/src/views/components/dashboard/charts/chart-num.vue b/src/views/components/dashboard/charts/chart-num.vue
index 87a79d5..6a82961 100644
--- a/src/views/components/dashboard/charts/chart-num.vue
+++ b/src/views/components/dashboard/charts/chart-num.vue
@@ -25,7 +25,7 @@
 import { Vue, Component, Prop } from 'vue-property-decorator';
 
 @Component
-export default class Request extends Vue {
+export default class ChartNum extends Vue {
   @Prop() private data!: any;
   @Prop() private i!: any;
   @Prop() private intervalTime!: any;
diff --git a/src/views/components/dashboard/charts/chart-sankey.vue b/src/views/components/dashboard/charts/chart-sankey.vue
index a661473..df099cc 100644
--- a/src/views/components/dashboard/charts/chart-sankey.vue
+++ b/src/views/components/dashboard/charts/chart-sankey.vue
@@ -24,7 +24,7 @@
 import { Component, Prop } from 'vue-property-decorator';
 
 @Component
-export default class Nonheap extends Vue {
+export default class ChartSankey extends Vue {
   @Prop() private title!: string;
   @Prop() private data!: any;
   @Prop() private intervalTime!: any;
diff --git a/src/views/components/dashboard/charts/chart-slow.vue b/src/views/components/dashboard/charts/chart-slow.vue
index 8a947e6..8339930 100644
--- a/src/views/components/dashboard/charts/chart-slow.vue
+++ b/src/views/components/dashboard/charts/chart-slow.vue
@@ -39,7 +39,7 @@
 
 
 @Component({})
-export default class RkTopSlow extends Vue {
+export default class ChartSlow extends Vue {
   @Prop() private data!: any;
   @Prop() private intervalTime!: any;
   private appChange(i: any) {
diff --git a/src/views/components/dashboard/charts/chart-trace.vue b/src/views/components/dashboard/charts/chart-trace.vue
index 60183ac..ba93ff1 100644
--- a/src/views/components/dashboard/charts/chart-trace.vue
+++ b/src/views/components/dashboard/charts/chart-trace.vue
@@ -38,7 +38,7 @@
 import copy from '@/utils/copy';
 
 @Component({})
-export default class RkTopSlow extends Vue {
+export default class ChartTrace extends Vue {
   @Prop() private intervalTime!: any;
   @Prop() private data!: any;
   private appChange(i: any) {
diff --git a/src/views/components/dashboard/dashboard-comp.vue b/src/views/components/dashboard/dashboard-comp.vue
index 1e45818..2c777b3 100644
--- a/src/views/components/dashboard/dashboard-comp.vue
+++ b/src/views/components/dashboard/dashboard-comp.vue
@@ -47,7 +47,7 @@
 import copy from '@/utils/copy';
 
 @Component
-export default class Comps extends Vue {
+export default class DashboardComp extends Vue {
   @Prop() private rocketComps: any;
   @Prop() private compType: any;
   @Mutation('ADD_COMP') private ADD_COMP: any;
diff --git a/src/views/components/dashboard/dashboard-item.vue b/src/views/components/dashboard/dashboard-item.vue
index f1ffbcf..adbd71e 100644
--- a/src/views/components/dashboard/dashboard-item.vue
+++ b/src/views/components/dashboard/dashboard-item.vue
@@ -16,15 +16,15 @@
  */
 
  <template>
-  <div class="dashboard-item" :class="`g-sm-${i.w}`" :style="`height:${i.h}px;`"
-    draggable="true" @dragstart="$emit('dragStart', index)" @dragover="$event.preventDefault();" @drop="drop">
-    <div class="dashboard-item-title ell">
+  <div class="rk-dashboard-item" :class="`g-sm-${i.w}`" :style="`height:${i.h}px;`"
+       draggable="true" @dragstart="$emit('dragStart', index)" @dragover="$event.preventDefault();" @drop="drop">
+    <div class="rk-dashboard-item-title ell">
         <svg class="icon cp red r" v-if="rocketGlobal.edit" @click="DELETE_COMP(index)">
           <use xlink:href="#file-deletion"></use>
         </svg>
         <span>{{i.t}}</span>
     </div>
-    <div class="dashboard-item-body">
+    <div class="rk-dashboard-item-body">
       <div style="height:100%;">
         <component :is="rocketGlobal.edit ? 'ChartEdit' : i.c" ref="chart" :i="i" :index="index" :intervalTime="intervalTime" :data="rocketDashboard[i.d]"></component>
       </div>
@@ -56,7 +56,7 @@
 
 </script>
 <style lang="scss">
-.dashboard-item{
+.rk-dashboard-item{
   display: flex;
   height: 100%;
   flex-direction: column;
@@ -69,7 +69,7 @@
   border: 1px solid #448dfec0;
   border-radius: 4px;
 }
-.dashboard-item-title{
+.rk-dashboard-item-title{
   flex-shrink: 0;
   user-select: none;
   line-height: 16px;
@@ -98,7 +98,7 @@
   bottom: 0;
   cursor: se-resize;
 }
-.dashboard-item-body{
+.rk-dashboard-item-body{
   padding: 7px 10px;
   flex-grow:1;
   // height:100%;
diff --git a/src/views/components/dashboard/tool-bar-select-endpoint-opt.vue b/src/views/components/dashboard/tool-bar-endpoint-select-opt.vue
similarity index 94%
rename from src/views/components/dashboard/tool-bar-select-endpoint-opt.vue
rename to src/views/components/dashboard/tool-bar-endpoint-select-opt.vue
index 25b6aed..656e70b 100644
--- a/src/views/components/dashboard/tool-bar-select-endpoint-opt.vue
+++ b/src/views/components/dashboard/tool-bar-endpoint-select-opt.vue
@@ -26,9 +26,8 @@
 
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
-import { Action } from 'vuex-class';
 @Component
-export default class ToolBarSelectOpt extends Vue {
+export default class ToolBarEndpointSelectOpt extends Vue {
   @Prop() public data!: any;
   private show: boolean = false;
 }
diff --git a/src/views/components/dashboard/tool-bar-select-endpoint.vue b/src/views/components/dashboard/tool-bar-endpoint-select.vue
similarity index 96%
rename from src/views/components/dashboard/tool-bar-select-endpoint.vue
rename to src/views/components/dashboard/tool-bar-endpoint-select.vue
index 0a03c6c..105ac82 100644
--- a/src/views/components/dashboard/tool-bar-select-endpoint.vue
+++ b/src/views/components/dashboard/tool-bar-endpoint-select.vue
@@ -46,9 +46,9 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import { Action } from 'vuex-class';
-import EndpointOpt from './tool-bar-select-endpoint-opt.vue';
+import EndpointOpt from './tool-bar-endpoint-select-opt.vue';
 @Component({components: {EndpointOpt}})
-export default class ToolBarSelect extends Vue {
+export default class ToolBarEndpointSelect extends Vue {
   @Action('SEARCH_ENDPOINTS') public SEARCH_ENDPOINTS: any;
   @Prop() public data!: any;
   @Prop() public current!: any;
diff --git a/src/views/components/dashboard/tool-bar.vue b/src/views/components/dashboard/tool-bar.vue
index 330c36a..230efc3 100644
--- a/src/views/components/dashboard/tool-bar.vue
+++ b/src/views/components/dashboard/tool-bar.vue
@@ -51,7 +51,7 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
 import ToolBarSelect from './tool-bar-select.vue';
-import ToolBarEndpointSelect from './tool-bar-select-endpoint.vue';
+import ToolBarEndpointSelect from './tool-bar-endpoint-select.vue';
 import { State, Action, Mutation } from 'vuex-class';
 @Component({components: {ToolBarSelect, ToolBarEndpointSelect}})
 export default class ToolBar extends Vue {
diff --git a/src/views/components/topology/topo-aside.vue b/src/views/components/topology/topo-aside.vue
index 5d33810..acdf100 100644
--- a/src/views/components/topology/topo-aside.vue
+++ b/src/views/components/topology/topo-aside.vue
@@ -82,7 +82,7 @@
 import Radial from './radial.vue';
 
 @Component({components: {TopoChart, TopoService, ChartResponse, Radial}})
-export default class Topology extends Vue {
+export default class TopoAside extends Vue {
   @State('rocketTopo') public stateTopo!: topoState;
   @Getter('intervalTime') public intervalTime: any;
   @Mutation('rocketTopo/SET_MODE_STATUS') public SET_MODE_STATUS: any;
@@ -162,4 +162,4 @@
     margin-top: 6px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/components/topology/topo-response.vue b/src/views/components/topology/topo-response.vue
index 49c5fca..8574a6a 100644
--- a/src/views/components/topology/topo-response.vue
+++ b/src/views/components/topology/topo-response.vue
@@ -27,7 +27,7 @@
 import { Component, Prop } from 'vue-property-decorator';
 
 @Component
-export default class Response extends Vue {
+export default class TopoResponse extends Vue {
   @Prop() private title!: string;
   @Prop() private data!: any;
   @Prop() private intervalTime!: any;
@@ -167,4 +167,4 @@
     };
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/components/topology/topo-select.vue b/src/views/components/topology/topo-select.vue
index 8547e89..df2e417 100644
--- a/src/views/components/topology/topo-select.vue
+++ b/src/views/components/topology/topo-select.vue
@@ -43,7 +43,7 @@
 <script lang="ts">
 import { Vue, Component, Prop } from 'vue-property-decorator';
 @Component
-export default class ToolBarSelect extends Vue {
+export default class TopoSelect extends Vue {
   @Prop() public data!: any;
   @Prop() public current!: any;
   @Prop() public title!: string;
diff --git a/src/views/components/topology/topo-services.vue b/src/views/components/topology/topo-services.vue
index 7689ea4..ea8b3e1 100644
--- a/src/views/components/topology/topo-services.vue
+++ b/src/views/components/topology/topo-services.vue
@@ -32,7 +32,7 @@
   import TopoSelect from './topo-select.vue';
 
   @Component({components: {TopoSelect}})
-  export default class TopologyServices extends Vue {
+  export default class TopoServices extends Vue {
     @Getter('durationTime') public durationTime: any;
     @Action('rocketTopo/GET_TOPO') public GET_TOPO: any;
     private services = [{key: 0, label: 'All services'}];
diff --git a/src/views/components/trace/trace-detail.vue b/src/views/components/trace/trace-detail.vue
index b562813..d6fe194 100644
--- a/src/views/components/trace/trace-detail.vue
+++ b/src/views/components/trace/trace-detail.vue
@@ -76,7 +76,7 @@
 import copy from '@/utils/copy';
 
 @Component({ components: { TraceDetailChartList, TraceDetailChartTree, TraceDetailChartTable } })
-export default class Header extends Vue {
+export default class TraceDetail extends Vue {
   @State('rocketbot') private rocketbot: any;
   @Action('rocketTrace/GET_TRACE_SPANS') private GET_TRACE_SPANS: any;
   @Prop() private spans!: Span[];
diff --git a/src/views/components/trace/trace-search.vue b/src/views/components/trace/trace-search.vue
index 7b5d8eb..64ff4b9 100644
--- a/src/views/components/trace/trace-search.vue
+++ b/src/views/components/trace/trace-search.vue
@@ -76,7 +76,7 @@
   import TraceSelect from './trace-select.vue';
 
   @Component({components: {TraceSelect}})
-  export default class TraceTool extends Vue {
+  export default class TraceSearch extends Vue {
     @State('rocketbot') private rocketbotGlobal: any;
     @State('rocketTrace') private rocketTrace: any;
     @Getter('durationTime') private durationTime: any;
diff --git a/src/views/components/trace/trace-table.vue b/src/views/components/trace/trace-table.vue
index 8aca084..4ac66f3 100644
--- a/src/views/components/trace/trace-table.vue
+++ b/src/views/components/trace/trace-table.vue
@@ -53,7 +53,7 @@
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 import { Action, Getter, Mutation, State } from 'vuex-class';
 @Component
-export default class Home extends Vue {
+export default class TraceTable extends Vue {
   @State('rocketTrace') private rocketTrace: any;
   @State('rocketbot') private rocketbot: any;
   @Mutation('rocketTrace/SET_TRACE_FORM_ITEM') private SET_TRACE_FORM_ITEM: any;