fix: view logs on trace widget

This commit is contained in:
Fine 2023-12-04 16:06:00 +08:00
parent b2ab93926d
commit 8816f8147f
4 changed files with 25 additions and 7 deletions

View File

@ -25,16 +25,16 @@ limitations under the License. -->
</div> </div>
</el-popover> </el-popover>
<div class="header"> <div class="header">
<Filter :needQuery="needQuery" :data="data" /> <Filter :needQuery="needQuery" :data="data" @get="getService" />
</div> </div>
<div class="trace flex-h"> <div class="trace flex-h">
<TraceList /> <TraceList />
<TraceDetail /> <TraceDetail :serviceId="serviceId" />
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { provide } from "vue"; import { provide, ref } from "vue";
import type { PropType } from "vue"; import type { PropType } 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";
@ -42,7 +42,7 @@ limitations under the License. -->
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
/*global defineProps */ /* global defineProps */
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object as PropType<any>, type: Object as PropType<any>,
@ -52,11 +52,15 @@ limitations under the License. -->
needQuery: { type: Boolean, default: true }, needQuery: { type: Boolean, default: true },
}); });
provide("options", props.data); provide("options", props.data);
const serviceId = ref<string>("");
const { t } = useI18n(); const { t } = useI18n();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
function removeWidget() { function removeWidget() {
dashboardStore.removeControls(props.data); dashboardStore.removeControls(props.data);
} }
function getService(id: string) {
serviceId.value = id;
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.trace-wrapper { .trace-wrapper {

View File

@ -199,7 +199,11 @@ limitations under the License. -->
ElMessage.error(resp.errors); ElMessage.error(resp.errors);
return; return;
} }
state.service = logStore.services[0]; if (props.data.filters && props.data.filters.id) {
state.service = logStore.services.find((item: { id: string }) => item.id === props.data.filters?.id);
} else {
state.service = logStore.services[0];
}
getInstances(state.service.id); getInstances(state.service.id);
getEndpoints(state.service.id); getEndpoints(state.service.id);
} }

View File

@ -102,12 +102,17 @@ limitations under the License. -->
import { dateFormat } from "@/utils/dateFormat"; import { dateFormat } from "@/utils/dateFormat";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
const props = {
serviceId: { type: String, default: "" },
};
export default defineComponent({ export default defineComponent({
name: "TraceDetail", name: "TraceDetail",
components: { components: {
...graphs, ...graphs,
}, },
setup() { props,
setup(props) {
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
/*global Recordable */ /*global Recordable */
const options: Recordable<LayoutConfig> = inject("options") || {}; const options: Recordable<LayoutConfig> = inject("options") || {};
@ -138,6 +143,7 @@ limitations under the License. -->
{ {
sourceId: options?.id || "", sourceId: options?.id || "",
traceId: traceId.value || traceStore.currentTrace.traceIds[0].value, traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
id: props.serviceId || undefined,
}, },
"Log", "Log",
); );

View File

@ -90,7 +90,8 @@ limitations under the License. -->
import { EntityType, QueryOrders, Status } from "../../data"; import { EntityType, QueryOrders, Status } from "../../data";
import type { LayoutConfig } from "@/types/dashboard"; import type { LayoutConfig } from "@/types/dashboard";
/*global defineProps, Recordable */ /*global defineProps, defineEmits, Recordable */
const emits = defineEmits(["get"]);
const props = defineProps({ const props = defineProps({
needQuery: { type: Boolean, default: true }, needQuery: { type: Boolean, default: true },
data: { data: {
@ -150,6 +151,8 @@ limitations under the License. -->
return; return;
} }
state.service = getCurrentNode(traceStore.services) || traceStore.services[0]; state.service = getCurrentNode(traceStore.services) || traceStore.services[0];
emits("get", state.service.id);
getEndpoints(state.service.id); getEndpoints(state.service.id);
getInstances(state.service.id); getInstances(state.service.id);
} }
@ -232,6 +235,7 @@ limitations under the License. -->
if (type === "service") { if (type === "service") {
getEndpoints(state.service.id); getEndpoints(state.service.id);
getInstances(state.service.id); getInstances(state.service.id);
emits("get", state.service.id);
} }
} }
function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) { function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {