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 between traceList and details from store

Browse Source
This commit is contained in:
Peter Olu 2022-05-06 05:11:08 +01:00
parent 2edbebdda3
commit 046448bc48
4 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,12 +39,12 @@ limitations under the License. -->
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType, ref } from "vue"; import type { PropType, ref, computed } from "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";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { useTraceStore } from "@/store/modules/trace";
/*global defineProps */ /*global defineProps */
const props = defineProps({ const props = defineProps({
data: { data: {
@ -55,7 +55,11 @@ const props = defineProps({
}); });
const { t } = useI18n(); const { t } = useI18n();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const traceListActive = ref<boolean>(true); const traceStore = useTraceStore();
// const traceListActive = ref<boolean>(true);
const traceListActive = computed(() => {
return traceStore.currentView === "traceList";
});
function removeWidget() { function removeWidget() {
dashboardStore.removeControls(props.data); dashboardStore.removeControls(props.data);
} }

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

@ -170,8 +170,10 @@ limitations under the License. -->
</div> </div>
</div> </div>
<!-- Trace Details tools here --> <!-- Trace Details tools here -->
<TraceDetailsTools /> <TraceDetailsTools
<Filter v-if="showFilter" /> v-if="showFilter && currentTraceView === 'traceDetails'"
/>
<Filter v-if="showFilter && currentTraceView === 'traceList'" />
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -180,6 +182,7 @@ import { reactive, ref, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import { useTraceStore } from "@/store/modules/trace";
import { import {
EntityType, EntityType,
AllTools, AllTools,
@ -194,18 +197,19 @@ import { useSelectorStore } from "@/store/modules/selectors";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { Option } from "@/types/app"; import { Option } from "@/types/app";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import TraceDetailsTools from './component/TraceDetailsTools' import TraceDetailsTools from "./component/TraceDetailsTools";
const { t } = useI18n(); const { t } = useI18n();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
const traceStore = useTraceStore();
const params = useRoute().params; const params = useRoute().params;
const selectedSelector = ref<string>(""); const selectedSelector = ref<string>("");
const showFilter = computed( const showFilter = computed(
() => dashboardStore.layout[0]?.activedTabIndex === 2 () => dashboardStore.layout[0]?.activedTabIndex === 2
); );
const currentTraceView = computed(() => traceStore.currentView)
const { query } = useRoute(); const { query } = useRoute();
dashboardStore.setViewMode(query["fullview"] === "true"); dashboardStore.setViewMode(query["fullview"] === "true");

2
src/views/dashboard/panel/component/TraceDetailsTools.vue
View File

@ -157,7 +157,7 @@ export default defineComponent({
const showTraceLogs = ref<boolean>(false); const showTraceLogs = ref<boolean>(false);
function showTraceList() { function showTraceList() {
ctx.emit("show:list"); traceStore.setCurrentView("traceList");
} }
function handleClick(ids: string[] | any) { function handleClick(ids: string[] | any) {
let copyValue = null; let copyValue = null;

6
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, defineEmits } from "vue"; import { ref } 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,8 +88,6 @@ 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();
@ -112,7 +110,7 @@ function changeSort(opt: Option[] | any) {
} }
async function selectTrace(i: Trace) { async function selectTrace(i: Trace) {
emit("show:trace"); traceStore.setCurrentView("traceDetails");
traceStore.setCurrentTrace(i); traceStore.setCurrentTrace(i);
selectedKey.value = i.key; selectedKey.value = i.key;
if (i.traceIds.length) { if (i.traceIds.length) {