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

restructurd layout

Browse Source
This commit is contained in:
Peter Olu 2022-05-03 12:44:39 +01:00
parent b1fd8923ca
commit a2bf601158
1 changed files with 92 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,80 +20,72 @@ limitations under the License. -->
<el-button type="secondary"> <el-button type="secondary">
<!-- <Icon size="sm" iconName="duration" /> --> <!-- <Icon size="sm" iconName="duration" /> -->
Duration Duration
</el-button> </el-button>
</div> </div>
<div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value"> <div class="wrap-filters">
<span class="grey mr-5">{{ t("service") }}:</span> <div class="filter my-5" v-if="dashboardStore.entity === EntityType[1].value">
<Selector <span class="grey mr-5">{{ t("service") }}:</span>
<Selector
size="small"
:value="state.service.value"
:options="traceStore.services"
placeholder="Select a service"
@change="changeField('service', $event)"
/>
</div>
<div class="filter my-5" v-if="dashboardStore.entity !== EntityType[3].value">
<span class="grey mr-5">{{ t("instance") }}:</span>
<Selector
size="small"
:value="state.instance.value"
:options="traceStore.instances"
placeholder="Select a instance"
@change="changeField('instance', $event)"
/>
</div>
<div class="filter my-5" v-if="dashboardStore.entity !== EntityType[2].value">
<span class="grey mr-5">{{ t("endpoint") }}:</span>
<Selector
size="small"
:value="state.endpoint.value"
:options="traceStore.endpoints"
placeholder="Select a endpoint"
:isRemote="true"
@change="changeField('endpoint', $event)"
@query="searchEndpoints"
/>
</div>
<div class="filter my-5">
<span class="grey mr-5">{{ t("status") }}:</span>
<Selector
size="small"
:value="state.status.value"
:options="Status"
placeholder="Select a status"
@change="changeField('status', $event)"
/>
</div>
<div class="filter my-5">
<span class="grey mr-5">{{ t("traceID") }}:</span>
<el-input size="small" v-model="traceId" class="traceId" />
</div>
<div class="filter my-5">
<span class="sm b grey mr-5">{{ t("duration") }}:</span>
<el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
<span class="grey mr-5">-</span>
<el-input size="small" class="inputs" v-model="maxTraceDuration" />
</div>
<ConditionTags :type="'TRACE'" @update="updateTags" />
<el-button
class="search-btn"
size="small" size="small"
:value="state.service.value" type="primary"
:options="traceStore.services" @click="searchTraces"
placeholder="Select a service" >
@change="changeField('service', $event)" {{ t("search") }}
/> </el-button>
</div> </div>
<div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
<span class="grey mr-5">{{ t("instance") }}:</span>
<Selector
size="small"
:value="state.instance.value"
:options="traceStore.instances"
placeholder="Select a instance"
@change="changeField('instance', $event)"
/>
</div>
<div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
<span class="grey mr-5">{{ t("endpoint") }}:</span>
<Selector
size="small"
:value="state.endpoint.value"
:options="traceStore.endpoints"
placeholder="Select a endpoint"
:isRemote="true"
@change="changeField('endpoint', $event)"
@query="searchEndpoints"
/>
</div>
<div class="mr-5">
<span class="grey mr-5">{{ t("status") }}:</span>
<Selector
size="small"
:value="state.status.value"
:options="Status"
placeholder="Select a status"
@change="changeField('status', $event)"
/>
</div>
<div class="mr-5">
<span class="grey mr-5">{{ t("traceID") }}:</span>
<el-input size="small" v-model="traceId" class="traceId" />
</div>
</div>
<div class="flex-h">
<!-- <div class="mr-5">
<span class="grey mr-5">{{ t("timeRange") }}:</span>
<TimePicker
:value="dateTime"
position="bottom"
format="YYYY-MM-DD HH:mm"
@input="changeTimeRange"
/>
</div> -->
<div class="mr-5">
<span class="sm b grey mr-5">{{ t("duration") }}:</span>
<el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
<span class="grey mr-5">-</span>
<el-input size="small" class="inputs" v-model="maxTraceDuration" />
</div>
<ConditionTags :type="'TRACE'" @update="updateTags" />
<el-button
class="search-btn"
size="small"
type="primary"
@click="searchTraces"
>
{{ t("search") }}
</el-button>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -113,6 +105,12 @@ const { t } = useI18n();
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const duractionActive = ref<boolean>(false);
const statusActive = ref<boolean>(false);
const instanceActive = ref<boolean>(false);
const tagsActive = ref<boolean>(false);
const traceStore = useTraceStore(); const traceStore = useTraceStore();
const traceId = ref<string>(""); const traceId = ref<string>("");
const minTraceDuration = ref<string>(""); const minTraceDuration = ref<string>("");
@ -268,4 +266,26 @@ watch(
margin-left: 20px; margin-left: 20px;
cursor: pointer; cursor: pointer;
} }
.wrap-filters {
padding: 0 10px;
display: flex;
flex-wrap: wrap;
// flex-direction: column;
align-items: flex-start;
.filter{
margin: 5px 0;
}
}
</style> </style>
//
<div class="flex-h">
// <div class="filter my-5">
// <span class="grey mr-5">{{ t("timeRange") }}:</span>
// <TimePicker
// :value="dateTime"
// position="bottom"
// format="YYYY-MM-DD HH:mm"
// @input="changeTimeRange"
// />
// </div>