github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix style

Browse Source
This commit is contained in:
Fine 2025-02-20 13:25:53 +08:00
parent 1a82560fb6
commit f891f7871b
7 changed files with 51 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/Settings.vue
View File

@ -22,7 +22,7 @@ limitations under the License. -->
placeholder="Select a language" placeholder="Select a language"
@change="setLang" @change="setLang"
size="small" size="small"
style="font-size: 14px" style="font-size: 14px; width: 180px"
/> />
</div> </div>
<div class="flex-h item"> <div class="flex-h item">

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

@ -731,7 +731,7 @@ limitations under the License. -->
.hierarchy-btn { .hierarchy-btn {
display: inline-block; display: inline-block;
padding: 0 2px 2px; padding: 0 3px;
border: 1px solid #666; border: 1px solid #666;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;

2
src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
View File

@ -190,7 +190,7 @@ limitations under the License. -->
.profile-t-tool { .profile-t-tool {
padding: 10px 5px 10px 10px; padding: 10px 5px 10px 10px;
border-bottom: 1px solid rgb(0 0 0 / 7%); border-right: 1px solid rgb(0 0 0 / 7%);
background-color: var(--sw-table-header); background-color: var(--sw-table-header);
width: 100%; width: 100%;
font-weight: bold; font-weight: bold;

24
src/views/dashboard/related/demand-log/Header.vue
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="flex-h row"> <div class="flex-h row">
<div class="mr-5 mb-5" v-if="dashboardStore.entity !== EntityType[3].value"> <div class="mr-10 mb-5" v-if="dashboardStore.entity !== EntityType[3].value">
<span class="grey mr-5"> {{ t("instance") }}: </span> <span class="grey mr-5"> {{ t("instance") }}: </span>
<Selector <Selector
size="small" size="small"
@ -25,7 +25,7 @@ limitations under the License. -->
class="selectors" class="selectors"
/> />
</div> </div>
<div class="mr-5 mb-5" v-if="state.container"> <div class="mr-10 mb-5" v-if="state.container">
<span class="grey mr-5">{{ t("container") }}:</span> <span class="grey mr-5">{{ t("container") }}:</span>
<Selector <Selector
size="small" size="small"
@ -36,18 +36,7 @@ limitations under the License. -->
class="selectors" class="selectors"
/> />
</div> </div>
<!-- <div class="mr-5"> <div class="mr-10">
<span class="grey mr-5">{{ t("limit") }}:</span>
<el-input-number
v-model="limit"
:min="1"
:max="1000"
size="small"
controls-position="right"
@change="changeField('limit', $event)"
/>
</div> -->
<div class="mr-5">
<span class="grey mr-5">{{ t("duration") }}:</span> <span class="grey mr-5">{{ t("duration") }}:</span>
<Selector <Selector
size="small" size="small"
@ -58,18 +47,19 @@ limitations under the License. -->
class="duration-range" class="duration-range"
/> />
</div> </div>
<div class="mr-5"> <div class="mr-10">
<span class="grey mr-5">{{ t("interval") }}:</span> <span class="grey mr-5">{{ t("interval") }}:</span>
<Selector <Selector
size="small" size="small"
:value="state.interval.value" :value="state.interval.value"
:options="IntervalOpts" :options="IntervalOpts"
@change="changeField('interval', $event)" @change="changeField('interval', $event)"
class="selectors"
/> />
</div> </div>
</div> </div>
<div class="flex-h row"> <div class="flex-h row">
<div class="mr-5"> <div class="mr-10">
<span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span> <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
<span class="log-tags"> <span class="log-tags">
<span class="selected" v-for="(item, index) in keywordsOfContent" :key="`keywordsOfContent${index}`"> <span class="selected" v-for="(item, index) in keywordsOfContent" :key="`keywordsOfContent${index}`">
@ -85,7 +75,7 @@ limitations under the License. -->
@change="addLabels('keywordsOfContent')" @change="addLabels('keywordsOfContent')"
/> />
</div> </div>
<div class="mr-5"> <div class="mr-10">
<span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span> <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
<span class="log-tags"> <span class="log-tags">
<span <span

32
src/views/dashboard/related/log/Header.vue
View File

@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="flex-h row"> <div class="flex-h row">
<div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value"> <div class="mr-10 flex-h" v-if="dashboardStore.entity === EntityType[1].value">
<span class="grey mr-5">{{ t("service") }}:</span> <span class="grey mr-5 label">{{ t("service") }}:</span>
<Selector <Selector
size="small" size="small"
:value="state.service.value" :value="state.service.value"
@ -24,8 +24,8 @@ limitations under the License. -->
@change="changeField('service', $event)" @change="changeField('service', $event)"
/> />
</div> </div>
<div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value"> <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[3].value">
<span class="grey mr-5"> {{ isBrowser ? t("version") : t("instance") }}: </span> <span class="grey mr-5 label"> {{ isBrowser ? t("version") : t("instance") }}: </span>
<Selector <Selector
size="small" size="small"
:value="state.instance.value" :value="state.instance.value"
@ -34,8 +34,8 @@ limitations under the License. -->
@change="changeField('instance', $event)" @change="changeField('instance', $event)"
/> />
</div> </div>
<div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value"> <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[2].value">
<span class="grey mr-5"> {{ isBrowser ? t("page") : t("endpoint") }}: </span> <span class="grey mr-5 label"> {{ isBrowser ? t("page") : t("endpoint") }}: </span>
<Selector <Selector
size="small" size="small"
:value="state.endpoint.value" :value="state.endpoint.value"
@ -46,8 +46,8 @@ limitations under the License. -->
@query="searchEndpoints" @query="searchEndpoints"
/> />
</div> </div>
<div class="mr-5" v-if="isBrowser"> <div class="mr-10 flex-h" v-if="isBrowser">
<span class="grey mr-5"> {{ t("category") }}: </span> <span class="grey mr-5 label"> {{ t("category") }}: </span>
<Selector <Selector
size="small" size="small"
:value="state.category.value" :value="state.category.value"
@ -61,8 +61,8 @@ limitations under the License. -->
</el-button> </el-button>
</div> </div>
<div class="flex-h row" v-show="!isBrowser"> <div class="flex-h row" v-show="!isBrowser">
<div class="mr-5 traceId"> <div class="mr-10 traceId">
<span class="grey mr-5">{{ t("traceID") }}:</span> <span class="grey mr-5 label">{{ t("traceID") }}:</span>
<el-input v-model="traceId" class="inputs-max" size="small" /> <el-input v-model="traceId" class="inputs-max" size="small" />
</div> </div>
<ConditionTags :type="'LOG'" @update="updateTags" /> <ConditionTags :type="'LOG'" @update="updateTags" />
@ -78,8 +78,8 @@ limitations under the License. -->
</div> </div>
<div v-show="logStore.supportQueryLogsByKeywords"> <div v-show="logStore.supportQueryLogsByKeywords">
<div class="flex-h"> <div class="flex-h">
<div class="mr-5"> <div class="mr-10">
<span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span> <span class="mr-5 grey label">{{ t("keywordsOfContent") }}:</span>
<span class="log-tags"> <span class="log-tags">
<span class="selected" v-for="(item, index) in keywordsOfContent" :key="`keywordsOfContent${index}`"> <span class="selected" v-for="(item, index) in keywordsOfContent" :key="`keywordsOfContent${index}`">
<span>{{ item }}</span> <span>{{ item }}</span>
@ -94,8 +94,8 @@ limitations under the License. -->
@change="addLabels('keywordsOfContent')" @change="addLabels('keywordsOfContent')"
/> />
</div> </div>
<div class="mr-5"> <div class="mr-10">
<span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span> <span class="grey mr-5 label"> {{ t("excludingKeywordsOfContent") }}: </span>
<span class="log-tags"> <span class="log-tags">
<span <span
class="selected" class="selected"
@ -437,4 +437,8 @@ limitations under the License. -->
margin-left: 3px; margin-left: 3px;
cursor: pointer; cursor: pointer;
} }
.label {
line-height: 24px;
}
</style> </style>

12
src/views/dashboard/related/profile/components/SpanTree.vue
View File

@ -14,16 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="profile-trace-dashboard" v-if="profileStore.currentSegment"> <div class="profile-trace-dashboard" v-if="profileStore.currentSegment">
<div class="profile-trace-detail-wrapper"> <div class="flex-h profile-trace-detail-wrapper">
<div>
<label>Trace ID</label> <label>Trace ID</label>
<el-input class="input mr-10 ml-5" readonly :value="profileStore.currentSegment.traceId" size="small" /> <el-input class="input mr-10 ml-5" readonly :value="profileStore.currentSegment.traceId" size="small" />
</div>
<Selector <Selector
size="small" size="small"
:value="dataMode" :value="dataMode"
:options="ProfileDataMode" :options="ProfileDataMode"
placeholder="Please select a profile data mode" placeholder="Please select a profile data mode"
@change="spanModeChange" @change="spanModeChange"
class="mr-10" class="mr-10 fliter"
/> />
<Selector <Selector
size="small" size="small"
@ -31,7 +33,7 @@ limitations under the License. -->
:options="ProfileDisplayMode" :options="ProfileDisplayMode"
placeholder="Please select a profile display mode" placeholder="Please select a profile display mode"
@change="selectDisplayMode" @change="selectDisplayMode"
class="mr-10" class="mr-10 fliter"
/> />
<el-button type="primary" size="small" :disabled="!profileStore.currentSpan.profiled" @click="analyzeProfile()"> <el-button type="primary" size="small" :disabled="!profileStore.currentSpan.profiled" @click="analyzeProfile()">
{{ t("analyze") }} {{ t("analyze") }}
@ -183,4 +185,8 @@ limitations under the License. -->
.input { .input {
width: 250px; width: 250px;
} }
.fliter {
width: 140px;
}
</style> </style>

20
src/views/dashboard/related/trace/Filter.vue
View File

@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="flex-h row"> <div class="flex-h row">
<div class="mr-10" v-if="dashboardStore.entity === EntityType[1].value"> <div class="mr-10 flex-h" v-if="dashboardStore.entity === EntityType[1].value">
<span class="grey mr-5">{{ t("service") }}:</span> <span class="grey mr-5 label">{{ t("service") }}:</span>
<Selector <Selector
size="small" size="small"
:value="state.service.value" :value="state.service.value"
@ -24,8 +24,8 @@ limitations under the License. -->
@change="changeField('service', $event)" @change="changeField('service', $event)"
/> />
</div> </div>
<div class="mr-10" v-if="dashboardStore.entity !== EntityType[3].value"> <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[3].value">
<span class="grey mr-5">{{ t("instance") }}:</span> <span class="grey mr-5 label">{{ t("instance") }}:</span>
<Selector <Selector
size="small" size="small"
:value="state.instance.value" :value="state.instance.value"
@ -34,8 +34,8 @@ limitations under the License. -->
@change="changeField('instance', $event)" @change="changeField('instance', $event)"
/> />
</div> </div>
<div class="mr-10" v-if="dashboardStore.entity !== EntityType[2].value"> <div class="mr-10 flex-h" v-if="dashboardStore.entity !== EntityType[2].value">
<span class="grey mr-5">{{ t("endpoint") }}:</span> <span class="grey mr-5 label">{{ t("endpoint") }}:</span>
<Selector <Selector
size="small" size="small"
:value="state.endpoint.value" :value="state.endpoint.value"
@ -46,8 +46,8 @@ limitations under the License. -->
@query="searchEndpoints" @query="searchEndpoints"
/> />
</div> </div>
<div class="mr-10"> <div class="mr-10 flex-h">
<span class="grey mr-5">{{ t("status") }}:</span> <span class="grey mr-5 label">{{ t("status") }}:</span>
<Selector <Selector
size="small" size="small"
:value="state.status.value" :value="state.status.value"
@ -325,4 +325,8 @@ limitations under the License. -->
top: 0; top: 0;
right: 10px; right: 10px;
} }
.label {
line-height: 24px;
}
</style> </style>