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

can toggle trace details when a list item is selected

Browse Source
This commit is contained in:
Peter Olu 2022-05-04 13:10:18 +01:00
parent c910a960ce
commit bff5175674
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/dashboard/controls/Trace.vue
View File

@ -29,17 +29,18 @@ limitations under the License. -->
<span>{{ t("delete") }}</span> <span>{{ t("delete") }}</span>
</div> </div>
</el-popover> </el-popover>
<div class="header">
<!-- filter was here --> <!-- filter was here -->
</div> <!-- <div class="header">
</div> -->
<div class="trace flex-h"> <div class="trace flex-h">
<TraceList /> <TraceList @show:trace="showTraceDetails" v-if="traceListActive" />
<TraceDetail />
<TraceDetail v-if="!traceListActive" />
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from "vue"; import type { PropType, ref } from "vue";
// import Filter from "../related/trace/Filter.vue"; // import Filter from "../related/trace/Filter.vue";
import TraceList from "../related/trace/TraceList.vue"; import TraceList from "../related/trace/TraceList.vue";
import TraceDetail from "../related/trace/Detail.vue"; import TraceDetail from "../related/trace/Detail.vue";
@ -56,9 +57,14 @@ const props = defineProps({
}); });
const { t } = useI18n(); const { t } = useI18n();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const traceListActive = ref<boolean>(true);
function removeWidget() { function removeWidget() {
dashboardStore.removeControls(props.data); dashboardStore.removeControls(props.data);
} }
function showTraceDetails(){
console.log("SHow trace...")
traceListActive.value = false
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.trace-wrapper { .trace-wrapper {

11
src/views/dashboard/related/trace/TraceList.vue
View File

@ -71,7 +71,7 @@ limitations under the License. -->
<script lang="ts" setup> <script lang="ts" setup>
import dayjs from "dayjs"; import dayjs from "dayjs";
import { ref } from "vue"; import { ref, defineEmits } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useTraceStore } from "@/store/modules/trace"; import { useTraceStore } from "@/store/modules/trace";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
@ -88,6 +88,8 @@ const pageCount = ref<number>(5);
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") => const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
dayjs(date).format(pattern); dayjs(date).format(pattern);
const emit = defineEmits(["show:trace"]);
function searchTrace() { function searchTrace() {
loading.value = true; loading.value = true;
queryTraces(); queryTraces();
@ -110,6 +112,7 @@ function changeSort(opt: Option[] | any) {
} }
async function selectTrace(i: Trace) { async function selectTrace(i: Trace) {
emit("show:trace");
traceStore.setCurrentTrace(i); traceStore.setCurrentTrace(i);
selectedKey.value = i.key; selectedKey.value = i.key;
if (i.traceIds.length) { if (i.traceIds.length) {
@ -163,11 +166,13 @@ async function queryTraces() {
} }
.trace-t { .trace-t {
width: 420px; width: 100%;
// width: 420px;
} }
.list { .list {
width: 400px; // width: 400px;
width: 100%;
} }
.trace-tr { .trace-tr {