mirror of
https://github.com/hanzo-io/cloud.git
synced 2026-10-30 18:57:42 +00:00
SuhailandGitHub
8f003233b7
* refactor: group analytics, jobs, logs and reports * fix: double import and remove unused code * fix: tab highlight on navigating using browser controls * refactor: move inner sidebar to right with fw like design * fix: option to view job from backup * fix: navigation buttons * fix: highlight inner sidebar item for children as well * refactor: add bottom border for inner sidebar items * fix: wrong params while routing * refactor: add padding per page * fix: add childroute for reports * fix: switch type of error from String to Error * fix(SiteActivity): show relevant job on click * fix(SiteActivity): add filters * fix(SiteActivity): filter width * fix(SiteTags): show tags in overview * refactor: separate advanced and basic charts * fix(SiteInsights): mobile view * fix: fetch advanced analytics only once * fix: add schedule backup action * fix: use proper route for site job list * fix: don't allow duplicate tags * fix: remove slow query variable * fix: revert complexity reduction change * fix(Charts): loading state for charts without card * refactor: add tag dialog * refactor: group logs - better heading for charts - link some charts to logs * chore: remove unused code * fix: typo
76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<template>
|
|
<div class="rounded-md border">
|
|
<div class="flex h-12 items-center justify-between border-b px-5">
|
|
<h2 class="text-lg font-medium text-gray-900">Daily Usage</h2>
|
|
<router-link
|
|
class="text-base text-gray-600 hover:text-gray-700"
|
|
:to="{ name: 'Site Analytics' }"
|
|
>
|
|
All analytics →
|
|
</router-link>
|
|
</div>
|
|
<LineChart
|
|
title="Daily Usage"
|
|
type="time"
|
|
:key="dailyUsageData"
|
|
:data="dailyUsageData"
|
|
unit="seconds"
|
|
:chartTheme="[$theme.colors.purple[500]]"
|
|
:loading="$resources.requestCounter.loading"
|
|
:error="$resources.requestCounter.error"
|
|
:showCard="false"
|
|
class="h-[15.55rem] p-2 pb-3"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import dayjs from '../utils/dayjs';
|
|
import LineChart from '@/components/charts/LineChart.vue';
|
|
|
|
export default {
|
|
name: 'CPUUsage',
|
|
props: ['site'],
|
|
components: { LineChart },
|
|
resources: {
|
|
requestCounter() {
|
|
let localTimezone = dayjs.tz.guess();
|
|
return {
|
|
url: 'press.api.analytics.daily_usage',
|
|
params: { name: this.site, timezone: localTimezone },
|
|
auto: true
|
|
};
|
|
}
|
|
},
|
|
computed: {
|
|
dailyUsageData() {
|
|
let dailyUsageData = this.$resources.requestCounter.data?.data;
|
|
if (!dailyUsageData) return;
|
|
let plan_limit = this.$resources.requestCounter.data.plan_limit;
|
|
|
|
return {
|
|
datasets: [
|
|
dailyUsageData.map(d => [+new Date(d.date), d.value / 1000000])
|
|
],
|
|
// daily limit marker
|
|
markLine: {
|
|
data: [
|
|
{
|
|
name: 'Daily Compute Limit',
|
|
yAxis: plan_limit,
|
|
label: {
|
|
formatter: '{b}: {c} seconds',
|
|
position: 'middle'
|
|
},
|
|
lineStyle: {
|
|
color: '#f5222d'
|
|
}
|
|
}
|
|
],
|
|
symbol: ['none', 'none']
|
|
}
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|