Skip to content

Commit 628e068

Browse files
butschsterbutschster
authored
Merge pull request #32 from buggregator/issue/#28-xhprof-sidebar-sorting
Issue/#28 xhprof sidebar sorting
2 parents 739ec78 + a7d8e79 commit 628e068

File tree

6 files changed

+215
-9
lines changed

6 files changed

+215
-9
lines changed

‎components/ProfilerPage/ProfilerPage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ export default defineComponent({
159159
}
160160
161161
.profiler-page__callstack {
162-
@apply w-full md:w-1/5 border-r border-gray-300 dark:border-gray-500;
162+
@apply w-full md:w-[250px] border-r border-gray-300 dark:border-gray-500;
163163
}
164164
165165
.profiler-page__stat {

‎components/ProfilerPageCallStack/ProfilerPageCallStack.vue‎

Lines changed: 70 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
<template>
22
<div class="profiler-page-callstack">
33
<header class="profiler-page-callstack__header">
4-
<div class="profiler-page-callstack__header-cpu">CPU / Memory</div>
5-
<div class="profiler-page-callstack__header-calls">Calls</div>
4+
<div class="profiler-page-callstack__header-cpu">
5+
<SortWrap :sort="sortCPU" @changeSort="changeCPUOrder"> CPU </SortWrap>
6+
/
7+
<SortWrap :sort="sortMemory" @changeSort="changeMemoryOrder">
8+
Memory
9+
</SortWrap>
10+
</div>
11+
12+
<div class="profiler-page-callstack__header-calls">
13+
<SortWrap :sort="sortCalls" @changeSort="changeCallsOrder">
14+
Calls
15+
</SortWrap>
16+
</div>
617
</header>
718

819
<div class="profiler-page-callstack__calls">
@@ -21,23 +32,75 @@
2132
import { defineComponent, PropType } from "vue";
2233
import { Profiler } from "~/config/types";
2334
import ProfilerPageCallStackRow from "~/components/ProfilerPageCallStackRow/ProfilerPageCallStackRow.vue";
35+
import SortWrap from "~/components/SortWrap/SortWrap.vue";
36+
import { SORT_ORDER } from "~/config/constants";
2437
2538
export default defineComponent({
26-
components: { ProfilerPageCallStackRow },
39+
components: {
40+
ProfilerPageCallStackRow,
41+
SortWrap,
42+
},
2743
props: {
2844
event: {
2945
type: Object as PropType<Profiler>,
3046
required: true,
3147
},
3248
},
3349
emits: ["hover", "hide"],
50+
data() {
51+
return {
52+
sortCPU: SORT_ORDER.ASC,
53+
sortMemory: SORT_ORDER.DEFAULT,
54+
sortCalls: SORT_ORDER.DEFAULT,
55+
};
56+
},
3457
computed: {
3558
sortedEdges() {
59+
const sortEdgesEntries = ([, a], [, b]) => {
60+
if (this.sortCPU === SORT_ORDER.ASC) {
61+
return b.cost.p_cpu - a.cost.p_cpu;
62+
}
63+
if (this.sortCPU === SORT_ORDER.DESC) {
64+
return a.cost.p_cpu - b.cost.p_cpu;
65+
}
66+
if (this.sortMemory === SORT_ORDER.ASC) {
67+
return b.cost.p_mu - a.cost.p_mu;
68+
}
69+
if (this.sortMemory === SORT_ORDER.DESC) {
70+
return a.cost.p_mu - b.cost.p_mu;
71+
}
72+
if (this.sortCalls === SORT_ORDER.ASC) {
73+
return b.cost.ct - a.cost.ct;
74+
}
75+
if (this.sortCalls === SORT_ORDER.DESC) {
76+
return a.cost.ct - b.cost.ct;
77+
}
78+
79+
return 0;
80+
};
81+
3682
return Object.entries(this.event.edges)
37-
.sort(([, a], [, b]) => b.cost.p_cpu - a.cost.p_cpu)
83+
.sort(sortEdgesEntries)
3884
.reduce((r, [k, v]) => ({ ...r, [k]: v }), {});
3985
},
4086
},
87+
methods: {
88+
changeCPUOrder(sortValue: SORT_ORDER) {
89+
this.sortCPU = sortValue;
90+
this.sortMemory = SORT_ORDER.DEFAULT;
91+
this.sortCalls = SORT_ORDER.DEFAULT;
92+
},
93+
changeMemoryOrder(sortValue: SORT_ORDER) {
94+
this.sortCPU = SORT_ORDER.DEFAULT;
95+
this.sortMemory = sortValue;
96+
this.sortCalls = SORT_ORDER.DEFAULT;
97+
},
98+
changeCallsOrder(sortValue: SORT_ORDER) {
99+
this.sortCPU = SORT_ORDER.DEFAULT;
100+
this.sortMemory = SORT_ORDER.DEFAULT;
101+
this.sortCalls = sortValue;
102+
},
103+
},
41104
});
42105
</script>
43106

@@ -46,15 +109,15 @@ export default defineComponent({
46109
}
47110
48111
.profiler-page-callstack__header {
49-
@apply flex items-stretch bg-gray-600 text-xs text-white text-center font-bold uppercase py-2;
112+
@apply flex items-stretch bg-gray-400 dark:bg-gray-600 text-xs dark:text-white text-gray-800 text-center font-bold uppercase py-2;
50113
}
51114
52115
.profiler-page-callstack__header-cpu {
53-
@apply flex-1 text-white;
116+
@apply flex-1 dark:text-white text-gray-800;
54117
}
55118
56119
.profiler-page-callstack__header-calls {
57-
@apply w-12;
120+
@apply w-16;
58121
}
59122
60123
.profiler-page-callstack__calls {

‎components/ProfilerPageCallStackRow/ProfilerPageCallStackRow.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export default defineComponent({
6262
}
6363
6464
.profiler-page-call-stack-row__calls {
65-
@apply w-12 text-center text-xs py-1;
65+
@apply w-16 text-center text-xs py-1;
6666
}
6767
6868
.profiler-page-call-stack-row__usage {

‎components/SortWrap/SortWrap.stories.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Meta, Story } from "@storybook/vue3";
2+
import SortWrap from "~/components/SortWrap/SortWrap.vue";
3+
import { SORT_ORDER } from "~/config/constants";
4+
import { action } from "@storybook/addon-actions";
5+
6+
export default {
7+
title: "Components/SortWrap",
8+
component: SortWrap,
9+
} as Meta<typeof SortWrap>;
10+
11+
const Template: Story = (args) => ({
12+
components: { SortWrap },
13+
methods: {
14+
action
15+
},
16+
setup() {
17+
return {
18+
args,
19+
SORT_ORDER,
20+
};
21+
},
22+
23+
template: `
24+
<div>
25+
<div>
26+
<sort-wrap
27+
@changeSort="(a) => action('Change Sort')(a)"
28+
>
29+
Default sort
30+
</sort-wrap>
31+
</div>
32+
<br>
33+
<div>
34+
<sort-wrap
35+
@changeSort="(a) => action('Change Sort')(a)"
36+
:sort="SORT_ORDER.ASC"
37+
>
38+
ASC sort
39+
</sort-wrap>
40+
</div>
41+
<br>
42+
<div>
43+
<sort-wrap
44+
@changeSort="(a) => action('Change Sort')(a)"
45+
:sort="SORT_ORDER.DESC"
46+
>
47+
DESC sort
48+
</sort-wrap>
49+
</div>
50+
</div>`,
51+
});
52+
53+
export const Default = Template.bind({});
54+
Default.args = {
55+
};

‎components/SortWrap/SortWrap.vue‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<span class="sort-wrap" @click="changeSortOrder">
3+
<slot />
4+
5+
<span class="sort-wrap__markers">
6+
<span
7+
class="sort-wrap__marker sort-wrap__marker--asc"
8+
:class="{ 'sort-wrap__marker--active': sort === sortOrder.ASC }"
9+
></span>
10+
<span
11+
class="sort-wrap__marker sort-wrap__marker--desc"
12+
:class="{ 'sort-wrap__marker--active': sort === sortOrder.DESC }"
13+
></span>
14+
</span>
15+
</span>
16+
</template>
17+
18+
<script lang="ts">
19+
import { defineComponent } from "vue";
20+
import { SORT_ORDER } from "~/config/constants";
21+
22+
export default defineComponent({
23+
components: {},
24+
props: {
25+
sort: {
26+
type: String,
27+
default: SORT_ORDER.DEFAULT,
28+
},
29+
},
30+
emits: ["changeSort"],
31+
computed: {
32+
sortOrder() {
33+
return SORT_ORDER;
34+
},
35+
},
36+
methods: {
37+
changeSortOrder() {
38+
const sortOrderList = [
39+
SORT_ORDER.ASC,
40+
SORT_ORDER.DESC,
41+
SORT_ORDER.DEFAULT,
42+
];
43+
44+
const nextSortOrderIndex = sortOrderList.findIndex(
45+
(sortOrder) => sortOrder === this.sort
46+
);
47+
48+
const nextSortOrder =
49+
sortOrderList[nextSortOrderIndex + 1] || sortOrderList[0];
50+
51+
this.$emit("changeSort", nextSortOrder);
52+
},
53+
},
54+
});
55+
</script>
56+
57+
<style lang="scss" scoped>
58+
.sort-wrap {
59+
@apply cursor-pointer relative bg-transparent inline-flex items-center;
60+
}
61+
62+
.sort-wrap__markers {
63+
@apply flex items-center h-full flex-col text-gray-400 dark:text-gray-600 gap-y-1 ml-1;
64+
}
65+
66+
.sort-wrap__marker {
67+
@apply opacity-40 hover:opacity-100 w-0 h-0 border-l-[4px] border-l-transparent border-t-[6px] border-t-gray-500 border-r-[4px] border-r-transparent border-b-[6px] border-b-transparent;
68+
}
69+
70+
.sort-wrap__marker--asc {
71+
@apply border-b-[6px] border-b-gray-600 dark:border-b-white border-t-[0px];
72+
}
73+
74+
.sort-wrap__marker--desc {
75+
@apply border-t-[6px] border-t-gray-600 dark:border-t-white border-b-[0px];
76+
}
77+
78+
.sort-wrap__marker--active {
79+
@apply opacity-100;
80+
}
81+
</style>

‎config/constants.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,10 @@ export const LOCAL_STORAGE_KEYS = {
5151
CACHED_EVENTS: "cached_events",
5252
THEME: "theme",
5353
};
54+
55+
56+
export enum SORT_ORDER {
57+
ASC = 'asc',
58+
DESC = 'desc',
59+
DEFAULT = 'default',
60+
}

0 commit comments

Comments
 (0)