Fine0830 commented on a change in pull request #530:
URL:
https://github.com/apache/skywalking-rocketbot-ui/pull/530#discussion_r696244169
##########
File path: src/views/components/dashboard/charts/chart-slow.vue
##########
@@ -22,25 +22,50 @@ limitations under the License. -->
</svg>
<div class="mb-5 ell" v-tooltip:top.ellipsis="i.name || ''">
<span class="calls sm mr-10">{{ i.value }}</span>
- <span class="cp link-hover">{{ i.name + getTraceId(i) }}</span>
+ <span class="cp link-hover" @click="handleLink(i)">{{ i.name +
getTraceId(i) }}</span>
</div>
<RkProgress :precent="(i.value / maxValue) * 100" color="#bf99f8" />
</div>
</div>
+ <rk-modal :show.sync="showModal" :title="$t('modalTitle')">
+ <div>
+ {{ $t('selectRedirectPage').replace('%s', redirectData.name) }}
+ </div>
+ <div class="mt-15">
+ <router-link :to="redirectData.log" class="rk-chart-slow-link
mr-20">{{ $t('log') }}</router-link>
+ <router-link :to="redirectData.trace" class="rk-chart-slow-link
mr-20">{{ $t('trace') }}</router-link>
+ </div>
+ </rk-modal>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import copy from '@/utils/copy';
+ import {MetricsName} from "@/views/components/dashboard/charts/constant";
@Component({})
export default class ChartSlow extends Vue {
@Prop() private data!: any;
@Prop() private item!: any;
@Prop() private type!: any;
@Prop() private intervalTime!: any;
+ private showModal: boolean = false;
+ private redirectData: any = {};
+ private isServiceChart: boolean = false;
+
+ private created() {
+ const serviceMetricNames = [
+ MetricsName.SERVICE_RESP_TIME,
+ MetricsName.SERVICE_SLA,
+ MetricsName.SERVICE_CPM,
+ MetricsName.SERVICE_PERCENTILE,
+ MetricsName.SERVICE_APDEX,
+ ];
+ this.isServiceChart = 'Service' === this.item.entityType &&
serviceMetricNames.includes(this.item.metricName);
Review comment:
I think we should use metric types to set the value for `isServiceChart`.
```suggestion
this.isServiceChart = 'Service' === this.item.entityType &&
this.item.queryMetricType === 'sortMetrics';
```
##########
File path: src/views/components/dashboard/charts/chart-slow.vue
##########
@@ -22,25 +22,50 @@ limitations under the License. -->
</svg>
<div class="mb-5 ell" v-tooltip:top.ellipsis="i.name || ''">
<span class="calls sm mr-10">{{ i.value }}</span>
- <span class="cp link-hover">{{ i.name + getTraceId(i) }}</span>
+ <span class="cp link-hover" @click="handleLink(i)">{{ i.name +
getTraceId(i) }}</span>
Review comment:
Could you please add an icon to bind a event(click) to open the
`modalTitle`, like the `Copy` event? Now this way is not easy to trigger.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
