github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-03 01:25:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

update style

Browse Source
This commit is contained in:
Fine 2022-08-12 11:21:14 +08:00
parent 2a3f91be85
commit bda30d28d0
1 changed files with 100 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
src/views/dashboard/panel/Tool.vue
View File

@ -14,94 +14,98 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="dashboard-tool flex-h"> <div class="dashboard-tool flex-h">
<div class="flex-h"> <div :class="isRelation ? 'flex-v' : 'flex-h'">
<div class="selectors-item" v-if="key !== 10"> <div class="flex-h">
<span class="label">$Service</span> <div class="selectors-item" v-if="key !== 10">
<Selector <span class="label">$Service</span>
v-model="states.currentService" <Selector
:options="selectorStore.services" v-model="states.currentService"
size="small" :options="selectorStore.services"
placeholder="Select a service" size="small"
@change="changeService" placeholder="Select a service"
class="selectors" @change="changeService"
/> class="selectors"
/>
</div>
<div class="selectors-item" v-if="key === 3 || key === 4 || key === 5">
<span class="label">
{{
["EndpointRelation", "Endpoint"].includes(dashboardStore.entity)
? "$Endpoint"
: "$ServiceInstance"
}}
</span>
<Selector
v-model="states.currentPod"
:options="selectorStore.pods"
size="small"
placeholder="Select a data"
@change="changePods"
@query="searchPods"
class="selectorPod"
:isRemote="
['EndpointRelation', 'Endpoint'].includes(dashboardStore.entity)
"
/>
</div>
<div class="selectors-item" v-if="key === 5">
<span class="label"> $Process </span>
<Selector
v-model="states.currentProcess"
:options="selectorStore.processes"
size="small"
placeholder="Select a data"
@change="changeProcess"
class="selectors"
/>
</div>
</div> </div>
<div class="selectors-item" v-if="key === 3 || key === 4 || key === 5"> <div class="flex-h" :class="isRelation ? 'relation' : ''">
<span class="label"> <div class="selectors-item" v-if="key === 2 || key === 4 || key === 5">
{{ <span class="label">$DestinationService</span>
["EndpointRelation", "Endpoint"].includes(dashboardStore.entity) <Selector
? "$Endpoint" v-model="states.currentDestService"
: "$ServiceInstance" :options="selectorStore.destServices"
}} size="small"
</span> placeholder="Select a service"
<Selector @change="changeDestService"
v-model="states.currentPod" class="selectors"
:options="selectorStore.pods" />
size="small" </div>
placeholder="Select a data" <div class="selectors-item" v-if="key === 4 || key === 5">
@change="changePods" <span class="label">
@query="searchPods" {{
class="selectorPod" dashboardStore.entity === "EndpointRelation"
:isRemote=" ? "$DestinationEndpoint"
['EndpointRelation', 'Endpoint'].includes(dashboardStore.entity) : "$DestinationServiceInstance"
" }}
/> </span>
</div> <Selector
<div class="selectors-item" v-if="key === 5"> v-model="states.currentDestPod"
<span class="label"> $Process </span> :options="selectorStore.destPods"
<Selector size="small"
v-model="states.currentProcess" placeholder="Select a data"
:options="selectorStore.processes" @change="changeDestPods"
size="small" class="selectorPod"
placeholder="Select a data" @query="searchDestPods"
@change="changeProcess" :isRemote="dashboardStore.entity === 'EndpointRelation'"
class="selectors" />
/> </div>
</div> <div class="selectors-item" v-if="key === 5">
<div class="selectors-item" v-if="key === 2 || key === 4 || key === 5"> <span class="label"> $DestinationProcess </span>
<span class="label">$DestinationService</span> <Selector
<Selector v-model="states.currentDestProcess"
v-model="states.currentDestService" :options="selectorStore.destProcesses"
:options="selectorStore.destServices" size="small"
size="small" placeholder="Select a data"
placeholder="Select a service" @change="changeDestProcess"
@change="changeDestService" class="selectors"
class="selectors" />
/> </div>
</div>
<div class="selectors-item" v-if="key === 4 || key === 5">
<span class="label">
{{
dashboardStore.entity === "EndpointRelation"
? "$DestinationEndpoint"
: "$DestinationServiceInstance"
}}
</span>
<Selector
v-model="states.currentDestPod"
:options="selectorStore.destPods"
size="small"
placeholder="Select a data"
@change="changeDestPods"
class="selectorPod"
@query="searchDestPods"
:isRemote="dashboardStore.entity === 'EndpointRelation'"
/>
</div>
<div class="selectors-item" v-if="key === 5">
<span class="label"> $DestinationProcess </span>
<Selector
v-model="states.currentDestProcess"
:options="selectorStore.destProcesses"
size="small"
placeholder="Select a data"
@change="changeDestProcess"
class="selectors"
/>
</div> </div>
</div> </div>
<div class="flex-h tools" v-loading="loading" v-if="!appStore.isMobile"> <div class="flex-h tools" v-loading="loading" v-if="!appStore.isMobile">
<div class="tool-icons flex-h" v-if="dashboardStore.editMode"> <div class="tool-icons" v-if="dashboardStore.editMode">
<el-dropdown content="Controls" placement="bottom" :persistent="false"> <el-dropdown content="Controls" placement="bottom" :persistent="false">
<i> <i>
<Icon class="icon-btn" size="sm" iconName="control" /> <Icon class="icon-btn" size="sm" iconName="control" />
@ -198,6 +202,14 @@ const key = computed(() => {
return (type && type.key) || 0; return (type && type.key) || 0;
}); });
const isRelation = computed(() => {
return [
EntityType[7].value,
EntityType[6].value,
EntityType[5].value,
].includes(dashboardStore.entity);
});
setCurrentDashboard(); setCurrentDashboard();
appStore.setEventStack([initSelector]); appStore.setEventStack([initSelector]);
initSelector(); initSelector();
@ -841,4 +853,8 @@ watch(
.selectorPod { .selectorPod {
width: 300px; width: 300px;
} }
.relation {
margin-top: 5px;
}
</style> </style>