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

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

@ -22,7 +22,8 @@ limitations under the License. -->
Duration Duration
</el-button> </el-button>
</div> </div>
<div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value"> <div class="wrap-filters">
<div class="filter my-5" v-if="dashboardStore.entity === EntityType[1].value">
<span class="grey mr-5">{{ t("service") }}:</span> <span class="grey mr-5">{{ t("service") }}:</span>
<Selector <Selector
size="small" size="small"
@ -32,7 +33,7 @@ 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="filter my-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"
@ -42,7 +43,7 @@ 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="filter my-5" v-if="dashboardStore.entity !== EntityType[2].value">
<span class="grey mr-5">{{ t("endpoint") }}:</span> <span class="grey mr-5">{{ t("endpoint") }}:</span>
<Selector <Selector
size="small" size="small"
@ -54,7 +55,7 @@ limitations under the License. -->
@query="searchEndpoints" @query="searchEndpoints"
/> />
</div> </div>
<div class="mr-5"> <div class="filter my-5">
<span class="grey mr-5">{{ t("status") }}:</span> <span class="grey mr-5">{{ t("status") }}:</span>
<Selector <Selector
size="small" size="small"
@ -64,22 +65,12 @@ limitations under the License. -->
@change="changeField('status', $event)" @change="changeField('status', $event)"
/> />
</div> </div>
<div class="mr-5"> <div class="filter my-5">
<span class="grey mr-5">{{ t("traceID") }}:</span> <span class="grey mr-5">{{ t("traceID") }}:</span>
<el-input size="small" v-model="traceId" class="traceId" /> <el-input size="small" v-model="traceId" class="traceId" />
</div> </div>
</div>
<div class="flex-h"> <div class="filter my-5">
<!-- <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> <span class="sm b grey mr-5">{{ t("duration") }}:</span>
<el-input size="small" class="inputs mr-5" v-model="minTraceDuration" /> <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
<span class="grey mr-5">-</span> <span class="grey mr-5">-</span>
@ -95,6 +86,7 @@ limitations under the License. -->
{{ t("search") }} {{ t("search") }}
</el-button> </el-button>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, watch } from "vue"; import { ref, reactive, watch } from "vue";
@ -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>