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

fix: view span on table

Browse Source
This commit is contained in:
Qiuxia Fan 2022-02-26 21:04:12 +08:00
parent 5a6e996826
commit 83f97c38b9
1 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/views/dashboard/related/trace/components/table/TableItem.vue
View File

@ -49,7 +49,7 @@ limitations under the License. -->
</div> </div>
<div v-else> <div v-else>
<div <div
@click="showSelectSpan" @click="viewSpanDetail"
:class="[ :class="[
'trace-item', 'trace-item',
'level' + (data.level - 1), 'level' + (data.level - 1),
@ -64,14 +64,13 @@ limitations under the License. -->
width: `${method}px`, width: `${method}px`,
}" }"
> >
<svg <Icon
class="icon vm cp trans"
:style="!displayChildren ? 'transform: rotate(-90deg);' : ''" :style="!displayChildren ? 'transform: rotate(-90deg);' : ''"
@click.stop="toggle" @click.stop="toggle"
v-if="data.children && data.children.length" v-if="data.children && data.children.length"
> iconName="arrow-down"
<use xlink:href="#arrow-down"></use> size="sm"
</svg> />
<el-tooltip :content="data.endpointName" placement="bottom"> <el-tooltip :content="data.endpointName" placement="bottom">
<span> <span>
{{ data.endpointName }} {{ data.endpointName }}
@ -108,7 +107,7 @@ limitations under the License. -->
</el-tooltip> </el-tooltip>
</div> </div>
<div class="application" v-show="type === 'profile'"> <div class="application" v-show="type === 'profile'">
<span @click="viewSpanDetail">{{ $t("view") }}</span> <span @click="viewSpanDetail">{{ t("view") }}</span>
</div> </div>
</div> </div>
<div <div
@ -123,12 +122,22 @@ limitations under the License. -->
:type="type" :type="type"
/> />
</div> </div>
<el-dialog
v-model="showDetail"
:destroy-on-close="true"
fullscreen
@closed="showDetail = false"
>
<SpanDetail :currentSpan="data" />
</el-dialog>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import dayjs from "dayjs"; import dayjs from "dayjs";
import { useI18n } from "vue-i18n";
import { ref, watch, computed, defineComponent } from "vue"; import { ref, watch, computed, defineComponent } from "vue";
import type { PropType } from "vue"; import type { PropType } from "vue";
import SpanDetail from "../D3Graph/SpanDetail.vue";
const props = { const props = {
data: { type: Object as PropType<any>, default: () => ({}) }, data: { type: Object as PropType<any>, default: () => ({}) },
@ -139,9 +148,12 @@ export default defineComponent({
name: "TableItem", name: "TableItem",
props, props,
emits: ["select"], emits: ["select"],
components: { SpanDetail },
setup(props, { emit }) { setup(props, { emit }) {
/* global Nullable */ /* global Nullable */
const displayChildren = ref<boolean>(true); const displayChildren = ref<boolean>(true);
const showDetail = ref<boolean>(false);
const { t } = useI18n();
const traceItem = ref<Nullable<HTMLDivElement>>(null); const traceItem = ref<Nullable<HTMLDivElement>>(null);
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);
@ -184,6 +196,7 @@ export default defineComponent({
traceItem.value.style.background = "rgba(0, 0, 0, 0.1)"; traceItem.value.style.background = "rgba(0, 0, 0, 0.1)";
} }
function viewSpanDetail() { function viewSpanDetail() {
showDetail.value = true;
showSelectSpan(); showSelectSpan();
emit("select", props.data); emit("select", props.data);
} }
@ -202,6 +215,8 @@ export default defineComponent({
toggle, toggle,
dateFormat, dateFormat,
showSelectSpan, showSelectSpan,
showDetail,
t,
}; };
}, },
}); });