Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: extend system load panel #536

Merged
merged 33 commits into from
Mar 13, 2022
Merged

feat: extend system load panel #536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
488da21
feat: add disk usage panel in machine page
meteyou Jan 2, 2022
9539464
refactor: move disk output in system panel
meteyou Jan 4, 2022
9256c8e
Merge branch 'develop' into feat/add-disk-usage-panel
meteyou Jan 13, 2022
d4ad89a
refactor: split SystemPanel.vue in compontents
meteyou Jan 13, 2022
9de0c65
refactor: rework proc_stats notification update
meteyou Jan 13, 2022
97547a3
feat: add network interfaces and cpu usage to system loads > host
meteyou Jan 13, 2022
951c6d1
Merge branch 'develop' into feat/extend-system-panel
meteyou Jan 14, 2022
226d682
Merge branch 'develop' into feat/extend-system-panel
meteyou Mar 3, 2022
e8b2a8e
refactor: fix syntax errors of the branch update
meteyou Mar 4, 2022
420d961
Merge branch 'develop' into feat/extend-system-panel
meteyou Mar 6, 2022
d1f5ccb
Merge branch 'develop' into feat/extend-system-panel
meteyou Mar 6, 2022
428b3d0
Merge branch 'develop' into feat/extend-system-panel
meteyou Mar 6, 2022
1d2c290
feat: add CPU & MEM circle and add netzwork stats
meteyou Mar 6, 2022
473a77c
refactor: delete unused panel
meteyou Mar 6, 2022
de6a1c7
style: fix prettier issues
meteyou Mar 6, 2022
fddfa96
fix: remove DiskPanel from components.d.ts
meteyou Mar 6, 2022
fd9d54a
fix: remove DiskPanel from components.d.ts
meteyou Mar 7, 2022
e952106
Merge branch 'develop' into feat/extend-system-panel
meteyou Mar 7, 2022
ca8add6
refactor: change font size of description
meteyou Mar 7, 2022
c0e92d9
feat: hide not connected network interfaces in system panel
meteyou Mar 7, 2022
b92b5b8
feat: add tooltip with ip-addresses to each interface
meteyou Mar 7, 2022
88931cf
fix: hide distro, if no release file exists
meteyou Mar 12, 2022
bfb628c
refactor: display ip address in network string
meteyou Mar 12, 2022
8a99b9d
locale: add missing values locale in system panel
meteyou Mar 12, 2022
2d2b556
fix: fix wraps between attribute name and value
meteyou Mar 12, 2022
2055999
fix: fix wraps between attribute name and value in mcu panel
meteyou Mar 12, 2022
f81e072
fix: fix wraps between attribute name and value
meteyou Mar 12, 2022
b10a19a
style: fix format in locale file
meteyou Mar 12, 2022
7eaee90
fix: fix line break of memory in system panel
meteyou Mar 12, 2022
0014a91
Merge branch 'develop' into feat/extend-system-panel
meteyou Mar 13, 2022
89b0c20
locale(en): delete unused translation
meteyou Mar 13, 2022
7424caa
locale(de): add de translations
meteyou Mar 13, 2022
eb73999
style: fix issue in de locale file
meteyou Mar 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
262 changes: 21 additions & 241 deletions src/components/panels/Machine/SystemPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,249 +4,40 @@
}
</style>

<template>
<div v-if="klipperReadyForGui">
<panel
:title="$t('Machine.SystemPanel.SystemLoad')"
:icon="mdiMemory"
card-class="machine-systemload-panel"
:collapsible="true">
<v-card-text class="px-0 py-2">
<div v-for="(mcu, index) of mcus" :key="mcu.name">
<v-divider v-if="index" class="my-2"></v-divider>
<v-row class="py-0">
<v-col class="pl-6">
<strong style="cursor: pointer" @click="openMcuDetails(mcu)">{{ mcu.name }}</strong>
<small v-if="mcu.chip" class="ml-2">({{ mcu.chip }})</small>
<br />
{{ $t('Machine.SystemPanel.Version') }}: {{ mcu.version }}
<br />
{{ $t('Machine.SystemPanel.Load') }}: {{ mcu.load }}, {{ $t('Machine.SystemPanel.Awake') }}:
{{ mcu.awake }}
<span v-if="mcu.freq !== null">
, {{ $t('Machine.SystemPanel.Frequency') }}: {{ mcu.freqFormat }}
</span>
<template v-if="mcu.tempSensor">
<span>,</span>
<template
v-if="
mcu.tempSensor.measured_min_temp !== null &&
mcu.tempSensor.measured_max_temp !== null
">
<v-tooltip top>
<template #activator="{ on, attrs }">
<span v-bind="attrs" v-on="on">
Temp: {{ mcu.tempSensor.temperature + '°C' }}
</span>
</template>
<span>
max: {{ mcu.tempSensor.measured_max_temp }}°C
<br />
min: {{ mcu.tempSensor.measured_min_temp }}°C
</span>
</v-tooltip>
</template>
<template v-else>Temp: {{ mcu.tempSensor.temperature + '°C' }}</template>
</template>
</v-col>
<v-col class="px-6 col-auto d-flex justify-end align-center">
<v-progress-circular
:rotate="-90"
:size="55"
:width="7"
:value="mcu.loadPercent"
:color="mcu.loadProgressColor">
{{ mcu.loadPercent }}
</v-progress-circular>
</v-col>
</v-row>
</div>
<div v-if="hostStats">
<v-divider v-if="mcus.length" class="my-2"></v-divider>
<v-row class="py-0">
<v-col class="pl-6">
<strong style="cursor: pointer" @click="hostDetailsDialog.bool = true">Host</strong>
<v-tooltip top>
<template #activator="{ on, attrs }">
<small v-if="hostStats.cpuName" class="ml-2" v-bind="attrs" v-on="on">
({{ hostStats.cpuName }})
</small>
</template>
<span v-if="hostStats.cpuDesc">{{ hostStats.cpuDesc }}</span>
</v-tooltip>
<br />
<span v-if="hostStats.version">
{{ $t('Machine.SystemPanel.Version') }}: {{ hostStats.version }}
<br />
</span>
<span v-if="hostStats.os">
{{ $t('Machine.SystemPanel.Os') }}: {{ hostStats.os }}
<br />
</span>
<span v-if="hostStats.release_info && hostStats.release_info.name !== '0.'">
{{ $t('Machine.SystemPanel.Distro') }}: {{ hostStats.release_info.name }}
{{ hostStats.release_info.version_id }}
<span v-if="hostStats.release_info.codename">
({{ hostStats.release_info.codename }})
</span>
<br />
</span>
<span>{{ $t('Machine.SystemPanel.Load') }}: {{ hostStats.load }}</span>
<span v-if="hostStats.memoryFormat">
, {{ $t('Machine.SystemPanel.Memory') }}: {{ hostStats.memoryFormat }}
</span>
<template v-if="hostStats.tempSensor">
<span>,</span>
<template
v-if="
hostStats.tempSensor.measured_min_temp !== null &&
hostStats.tempSensor.measured_max_temp !== null
">
<v-tooltip top>
<template #activator="{ on, attrs }">
<span v-bind="attrs" v-on="on">
Temp: {{ hostStats.tempSensor.temperature + '°C' }}
</span>
</template>
<span>
max: {{ hostStats.tempSensor.measured_max_temp }}°C
<br />
min: {{ hostStats.tempSensor.measured_min_temp }}°C
</span>
</v-tooltip>
</template>
<template v-else>Temp: {{ hostStats.tempSensor.temperature + '°C' }}</template>
</template>
</v-col>
<v-col class="px-6 col-auto d-flex justify-end align-center">
<v-progress-circular
:rotate="-90"
:size="55"
:width="7"
:value="hostStats.loadPercent"
:color="hostStats.loadProgressColor">
{{ hostStats.loadPercent }}
</v-progress-circular>
</v-col>
</v-row>
</div>
</v-card-text>
</panel>
<v-dialog v-model="mcuDetailsDialog.bool" :max-width="400" :max-height="500" scrollable>
<panel
:title="mcuDetailsDialog.headline"
:icon="mdiTextBoxSearchOutline"
card-class="machine-systemload-mcu-details-dialog"
:margin-bottom="false">
<template #buttons>
<v-btn icon tile @click="mcuDetailsDialog.bool = false">
<v-icon>{{ mdiCloseThick }}</v-icon>
</v-btn>
</template>
<v-card-text class="pt-5 px-0">
<overlay-scrollbars style="height: 350px" class="px-6">
<template v-if="mcuDetailsDialog.mcu.mcu_constants">
<v-row>
<v-col>
<span class="headline">{{ $t('Machine.SystemPanel.Constants') }}</span>
</v-col>
</v-row>
<div v-for="(value, key, index) in mcuDetailsDialog.mcu.mcu_constants" :key="key">
<v-divider v-if="index" class="my-3"></v-divider>
<v-row>
<v-col>{{ key }}</v-col>
<v-col class="text-right">{{ value }}</v-col>
</v-row>
</div>
</template>
<template v-if="mcuDetailsDialog.mcu.last_stats">
<v-row class="mt-5">
<v-col>
<span class="headline">{{ $t('Machine.SystemPanel.LastStats') }}</span>
</v-col>
</v-row>
<div v-for="(value, key, index) in mcuDetailsDialog.mcu.last_stats" :key="key">
<v-divider v-if="index" class="my-3"></v-divider>
<v-row>
<v-col>{{ key }}</v-col>
<v-col class="text-right">{{ value }}</v-col>
</v-row>
</div>
</template>
</overlay-scrollbars>
</v-card-text>
</panel>
</v-dialog>
<v-dialog v-model="hostDetailsDialog.bool" :max-width="600" :max-height="500" scrollable>
<panel
:title="$t('Machine.SystemPanel.HostDetails')"
:icon="mdiTextBoxSearchOutline"
card-class="machine-systemload-host-details-dialog"
:margin-bottom="false">
<template #buttons>
<v-btn icon tile @click="hostDetailsDialog.bool = false">
<v-icon>{{ mdiCloseThick }}</v-icon>
</v-btn>
</template>
<v-card-text class="pt-5 px-0">
<overlay-scrollbars style="height: 350px" class="px-6">
<template v-if="Object.keys(systemInfo).length">
<div v-for="(infoGroup, groupKey, groupIndex) of systemInfo" :key="groupKey">
<template v-if="groupKey !== 'available_services'">
<v-row :class="groupIndex ? 'mt-5' : ''">
<v-col>
<span class="headline">{{ groupKey }}</span>
</v-col>
</v-row>
<div v-for="(value, key, index) in infoGroup" :key="key">
<v-divider v-if="index" class="my-3"></v-divider>
<v-row>
<v-col>{{ key }}</v-col>
<v-col class="text-right">{{ value }}</v-col>
</v-row>
</div>
</template>
</div>
</template>
<template v-else>
<v-row class="mt-5">
<v-col><p>No more Infos</p></v-col>
</v-row>
</template>
</overlay-scrollbars>
</v-card-text>
</panel>
</v-dialog>
</div>
<template v-if="klipperReadyForGui">
<panel
:title="$t('Machine.SystemPanel.SystemLoad')"
:icon="mdiMemory"
card-class="machine-systemload-panel"
:collapsible="true">
<v-card-text class="px-0 py-2">
<div v-for="(mcu, index) of mcus" :key="mcu.name">
<v-divider v-if="index" class="my-2"></v-divider>
<system-panel-mcu :mcu="mcu"></system-panel-mcu>
</div>
<div v-if="hostStats">
<v-divider v-if="mcus.length" class="my-2"></v-divider>
<system-panel-host></system-panel-host>
</div>
</v-card-text>
</panel>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import BaseMixin from '../../mixins/base'
import Panel from '@/components/ui/Panel.vue'
import { caseInsensitiveSort } from '@/plugins/helpers'
import { mdiCloseThick, mdiMemory, mdiTextBoxSearchOutline } from '@mdi/js'
import { mdiCloseThick, mdiMemory } from '@mdi/js'
import SystemPanelHost from '@/components/panels/Machine/SystemPanelHost.vue'
import SystemPanelMcu from '@/components/panels/Machine/SystemPanelMcu.vue'
@Component({
components: { Panel },
components: { SystemPanelMcu, SystemPanelHost, Panel },
})
export default class SystemPanel extends Mixins(BaseMixin) {
mdiTextBoxSearchOutline = mdiTextBoxSearchOutline
mdiCloseThick = mdiCloseThick
mdiMemory = mdiMemory

private mcuDetailsDialog: { bool: boolean; headline: string; mcu: any } = {
bool: false,
headline: '',
mcu: {
mcu_constants: null,
last_stats: null,
},
}

private hostDetailsDialog: { bool: boolean } = {
bool: false,
}

get mcus() {
const mcus = this.$store.getters['printer/getMcus'] ?? []

Expand All @@ -256,16 +47,5 @@ export default class SystemPanel extends Mixins(BaseMixin) {
get hostStats() {
return this.$store.getters['server/getHostStats'] ?? null
}

get systemInfo() {
return this.$store.state.server?.system_info ?? {}
}

openMcuDetails(mcu: any) {
this.mcuDetailsDialog.headline = mcu.name
this.mcuDetailsDialog.mcu.mcu_constants = { ...mcu.mcu_constants }
this.mcuDetailsDialog.mcu.last_stats = { ...mcu.last_stats }
this.mcuDetailsDialog.bool = true
}
}
</script>
Loading