diff options
21 files changed, 1563 insertions, 9 deletions
diff --git a/src/assets/images/_sila/collapsed/current.svg b/src/assets/images/_sila/collapsed/current.svg new file mode 100644 index 00000000..299777ff --- /dev/null +++ b/src/assets/images/_sila/collapsed/current.svg @@ -0,0 +1,3 @@ +<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M2.78183 7.57895H5.48287L2.70925 13.1779L9.21817 8.42106H6.6L9.29075 2.82209L2.78183 7.57895ZM11.7614 0L11.1557 1.39631L8.19869 7.57895H12L0.238644 16L0.844344 14.6037L3.88418 8.42106H0L11.7614 0Z" fill="#E11717"/> +</svg> diff --git a/src/assets/images/_sila/collapsed/voltage.svg b/src/assets/images/_sila/collapsed/voltage.svg new file mode 100644 index 00000000..dce7dae8 --- /dev/null +++ b/src/assets/images/_sila/collapsed/voltage.svg @@ -0,0 +1,3 @@ +<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M10.4778 0L8.95907 8.62681C8.72378 10.0579 7.46177 11.0974 5.8789 11.0974C4.3103 11.0974 3.41904 10.0579 3.65434 8.62681L5.17303 0H1.64367L0.0821938 8.91707C-0.452558 12.0087 1.65793 14 5.36554 14C9.05176 14 11.9038 12.0087 12.4385 8.91707L14 0H10.4778Z" fill="#E11717"/> +</svg> diff --git a/src/components/_sila/Global/Chart.vue b/src/components/_sila/Global/Chart.vue index 4da58798..0b639252 100644 --- a/src/components/_sila/Global/Chart.vue +++ b/src/components/_sila/Global/Chart.vue @@ -42,6 +42,10 @@ export default { type: Number, default: null, }, + float: { + type: Boolean, + default: false, + }, }, data() { return { @@ -90,7 +94,7 @@ export default { return { ...metric, Timestamp: time, - Value: Math.round(metric.Value), + Value: this.float ? metric.Value : Math.round(metric.Value), }; }); @@ -290,6 +294,75 @@ export default { }, }); break; + case 'voltage-input': + this.categories = this.setCategories(251, 'В'); + this.yMax = 250; + this.minTickInterval = 25; + this.plotLines.push({ + color: '#1A3E5B', + dashStyle: 'solid', + value: this.shutdown, + width: 2, + label: { + text: this.$t('chart.thresholdFailure'), + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }); + break; + case 'voltage-output': + this.categories = this.setCategories(101, 'В'); + this.yMax = 100; + this.minTickInterval = 25; + this.plotLines.push({ + color: '#1A3E5B', + dashStyle: 'solid', + value: this.shutdown, + width: 2, + label: { + text: this.$t('chart.thresholdFailure'), + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }); + break; + case 'current': + this.categories = this.setCategories(11, 'A'); + this.yMax = 10; + this.minTickInterval = 2; + this.plotLines.push({ + color: '#1A3E5B', + dashStyle: 'solid', + value: this.shutdown, + width: 2, + label: { + text: this.$t('chart.thresholdFailure'), + align: 'right', + style: { + fontFamily: 'Inter', + fontSize: '12px', + fontStyle: 'normal', + fontWeight: '400', + lineHeight: '16px', + color: '#0C1C2999', + }, + }, + }); + break; } }, setCategories(count, desc) { diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue index f004c955..da2b74c8 100644 --- a/src/components/_sila/Global/Collapse.vue +++ b/src/components/_sila/Global/Collapse.vue @@ -10,7 +10,7 @@ {{ title }} <component :is="iconChevronUp" class="icon-expand" /> </b-button> - <b-collapse :id="id"> + <b-collapse :id="id" :visible="defaultOpen"> <slot></slot> </b-collapse> </div> @@ -29,6 +29,10 @@ export default { type: String, default: null, }, + defaultOpen: { + type: Boolean, + default: false, + }, }, data() { return { diff --git a/src/env/components/AppNavigation/sila.js b/src/env/components/AppNavigation/sila.js index ea251dcc..50aaf996 100644 --- a/src/env/components/AppNavigation/sila.js +++ b/src/env/components/AppNavigation/sila.js @@ -165,6 +165,11 @@ const AppNavigationMixin = { label: this.$t('appNavigation.staticInfo'), route: '/power/static', }, + { + id: 'power/dynamic', + label: this.$t('appNavigation.dynamicInformation'), + route: '/power/dynamic', + }, ], }, { diff --git a/src/env/router/sila.js b/src/env/router/sila.js index a5495638..e9d238b0 100644 --- a/src/env/router/sila.js +++ b/src/env/router/sila.js @@ -35,6 +35,7 @@ import MemoryDynamic from '@/views/_sila/Memory/Dynamic'; import FansDynamic from '@/views/_sila/Fans/Dynamic'; import MotherboardDynamic from '@/views/_sila/Motherboard/Dynamic'; import PowerStatic from '@/views/_sila/Power/Static'; +import PowerDynamic from '@/views/_sila/Power/Dynamic'; import i18n from '@/i18n'; const routes = [ @@ -206,6 +207,14 @@ const routes = [ }, }, { + path: 'power/dynamic', + name: 'power-dynamic', + component: PowerDynamic, + meta: { + title: i18n.t('appPageTitle.powerSup'), + }, + }, + { path: '/security-and-access/sessions', name: 'sessions', component: Sessions, diff --git a/src/locales/en-US.json b/src/locales/en-US.json index dfee7375..a3302c07 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -150,7 +150,6 @@ "staticInfo": "Static Information", "fans": "@:appPageTitle.fans", "processors": "@:appPageTitle.processors", - "dynamicInformation": "@:appPageTitle.dynamicInformation", "memory": "@:appPageTitle.memory", "motherboard": "@:appPageTitle.motherboard" }, @@ -243,6 +242,7 @@ "delaySaveDateTime": "Update the page after 10 seconds to apply the changes." } }, + "pageDumps": { "dumpsAvailableOnBmc": "Dumps available on BMC", "initiateDump": "Initiate dump", @@ -919,6 +919,19 @@ }, "pagePowerSup": { "supplies": "Installed power supplies", + "temperature": "Temperature Display", + "InputPower": "Input Power", + "OutputPower": "Output Power", + "InputVolt": "Input Voltage", + "OutputVolt": "Output Voltage", + "InputCurrent": "Input Current", + "OutputCurrent": "Output Current", + "labels": { + "notNormal": "Not regular mode", + "critical": "Critical mode", + "warning": "Meaning of the warning", + "shutdown": "Shutdown" + }, "table": { "param": "Parameter", "value": "Значение", @@ -929,7 +942,23 @@ "manufacturer": "Manufacturer", "model": "Model", "efficiencyPercent": "Efficiency percentage", - "powerInputWatts": "Output power, W" + "powerInputWatts": "Output power, W", + "nameModule": "Name", + "currentTemperature": "Current, С°", + "middleTemperature": "Middle, С°", + "minTemperature": "Minimum, С°", + "minDate": "Date of minimum", + "maxTemperature": "Maximum, С°", + "maxDate": "Date of maximum", + "currentPower": "Current, W", + "minPower": "Minimum, W", + "maxPower": "Maximum, W", + "currentVolt": "Current, V", + "minVolt": "Minimum, V", + "maxVolt": "Maximum, V", + "currentCurrent": "Current, A", + "minCurrent": "Minimum, A", + "maxCurrent": "Maximum, A" } }, "pageSerialOverLan": { diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json index f540cf4e..574cf0ee 100644 --- a/src/locales/ru-RU.json +++ b/src/locales/ru-RU.json @@ -919,6 +919,19 @@ }, "pagePowerSup": { "supplies": "Установленые источники питания", + "temperature": "Показатели температуры", + "InputPower": "Входная мощность", + "OutputPower": "Выходная мощность", + "InputVolt": "Входное напряжение", + "OutputVolt": "Выходное напряжение", + "InputCurrent": "Входная сила тока", + "OutputCurrent": "Выходная сила тока", + "labels": { + "notNormal": "Не штатный режим", + "critical": "Критический режим", + "warning": "Значение предупреждения", + "shutdown": "Значение отказа" + }, "table": { "param": "Параметр", "value": "Значение", @@ -929,7 +942,23 @@ "manufacturer": "Производитель", "model": "Модель", "efficiencyPercent": "Процент эффективности", - "powerInputWatts": "Выходная мощность, Вт" + "powerInputWatts": "Выходная мощность, Вт", + "nameModule": "Имя модуля", + "currentTemperature": "Текущее, С°", + "middleTemperature": "Среднее, С°", + "minTemperature": "Минимальное, С°", + "minDate": "Дата минимального", + "maxTemperature": "Максимальное, С°", + "maxDate": "Дата максимального", + "currentPower": "Текущее, Вт", + "minPower": "Минимальное, Вт", + "maxPower": "Максимальное, Вт", + "currentVolt": "Текущее, В", + "minVolt": "Минимальное, В", + "maxVolt": "Максимальное, В", + "currentCurrent": "Текущее, A", + "minCurrent": "Минимальное, A", + "maxCurrent": "Максимальное, A" } }, "pageSerialOverLan": { diff --git a/src/store/modules/HardwareStatus/PowerSupplyStore.js b/src/store/modules/HardwareStatus/PowerSupplyStore.js index dc7691da..775e86e8 100644 --- a/src/store/modules/HardwareStatus/PowerSupplyStore.js +++ b/src/store/modules/HardwareStatus/PowerSupplyStore.js @@ -3,10 +3,26 @@ import api from '@/store/api'; const PowerSupplyStore = { namespaced: true, state: { + psuTemp: [], + psuTempLastHour: [], + psuPower: [], + psuPowerLastHour: [], + psuVoltage: [], + psuVoltageLastHour: [], + psuCurrent: [], + psuCurrentLastHour: [], powerSupplies: [], }, getters: { powerSupplies: (state) => state.powerSupplies, + psuTemp: (state) => state.psuTemp, + psuTempLastHour: (state) => state.psuTempLastHour, + psuPower: (state) => state.psuPower, + psuPowerLastHour: (state) => state.psuPowerLastHour, + psuVoltage: (state) => state.psuVoltage, + psuVoltageLastHour: (state) => state.psuVoltageLastHour, + psuCurrent: (state) => state.psuCurrent, + psuCurrentLastHour: (state) => state.psuCurrentLastHour, }, mutations: { setPowerSupply: (state, data) => { @@ -44,8 +60,50 @@ const PowerSupplyStore = { }; }); }, + setpsu_temp: (state, data) => { + state.psuTemp = data; + }, + setpsu_tempLastHour: (state, data) => { + state.psuTempLastHour = data; + }, + setpsu_voltage: (state, data) => { + state.psuVoltage = data; + }, + setpsu_voltageLastHour: (state, data) => { + state.psuVoltageLastHour = data; + }, + setpsu_power: (state, data) => { + state.psuPower = data; + }, + setpsu_powerLastHour: (state, data) => { + state.psuPowerLastHour = data; + }, + setpsu_current: (state, data) => { + state.psuCurrent = data; + }, + setpsu_currentLastHour: (state, data) => { + state.psuCurrentLastHour = data; + }, }, actions: { + async getPsu({ commit }, { lastHour, metricsName }) { + let url = null; + if (lastHour) { + url = `/redfish/v1/TelemetryService/MetricReports/${metricsName}&period=last_hour`; + } else { + url = `/redfish/v1/TelemetryService/MetricReports/${metricsName}`; + } + return await api + .get(url) + .then(({ data: { MetricValues = [] } }) => { + if (lastHour) { + commit(`set${metricsName}LastHour`, MetricValues); + } else { + commit(`set${metricsName}`, MetricValues); + } + }) + .catch((error) => console.log(error)); + }, async getChassisCollection() { return await api .get('/redfish/v1/Chassis') diff --git a/src/utilities/_sila/metricProperties.js b/src/utilities/_sila/metricProperties.js index 389c4683..edc701d6 100644 --- a/src/utilities/_sila/metricProperties.js +++ b/src/utilities/_sila/metricProperties.js @@ -1,4 +1,4 @@ -export function getItems(data) { +export function getItems(data, float = false) { let filteredData = data.filter((metric) => { return metric.Value !== 'nan'; }); @@ -12,7 +12,7 @@ export function getItems(data) { date.getHours() + ':' + String(date.getMinutes()).padStart(2, '0'), date: formatDate(date), }, - Value: Math.round(metric.Value), + Value: float ? metric.Value : Math.round(metric.Value), }; }); @@ -20,7 +20,6 @@ export function getItems(data) { (rv[x['Sensor']] = rv[x['Sensor']] || []).push(x); return rv; }, {}); - return Object.keys(group).map((metric) => { return { name: metric, diff --git a/src/utilities/_sila/psuFilter.js b/src/utilities/_sila/psuFilter.js new file mode 100644 index 00000000..c75a7b02 --- /dev/null +++ b/src/utilities/_sila/psuFilter.js @@ -0,0 +1,6 @@ +export function psuFilter(items, type) { + if (!items || !items.length) return []; + return items.filter(function (el) { + return el.Sensor.toLowerCase().indexOf(type.toLowerCase()) > -1; + }); +} diff --git a/src/views/_sila/Overview/Inventory/Inventory.vue b/src/views/_sila/Overview/Inventory/Inventory.vue index a8db953d..3bf9433f 100644 --- a/src/views/_sila/Overview/Inventory/Inventory.vue +++ b/src/views/_sila/Overview/Inventory/Inventory.vue @@ -146,7 +146,6 @@ export default { }, }, created() { - console.log(123456, process.env.VUE_APP_ENV_NAME); this.startLoader(); const bmcManagerTablePromise = new Promise((resolve) => { this.$root.$on('hardware-status-bmc-manager-complete', () => resolve()); diff --git a/src/views/_sila/Power/Dynamic/CurrentInput.vue b/src/views/_sila/Power/Dynamic/CurrentInput.vue new file mode 100644 index 00000000..ad1a1608 --- /dev/null +++ b/src/views/_sila/Power/Dynamic/CurrentInput.vue @@ -0,0 +1,185 @@ +<template> + <collapse + id="collapse_InputCur" + default-open + :title="$t('pagePowerSup.InputCurrent')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/current.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input + v-model="warning" + type="number" + :min="0" + :max="shutdown" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.shutdown')"> + <b-form-input + v-model="shutdown" + type="number" + :min="warning" + :max="10" + > + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="current" + :time-scale="timeScale" + :data="filteredItems" + float + :colors="colors" + :warning="+warning" + :shutdown="+shutdown" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; +import { psuFilter } from '@/utilities/_sila/psuFilter'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 5, + shutdown: 6, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentCurrent'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minCurrent'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxCurrent'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + computed: { + items() { + return getItems(this.filteredItems, 3); + }, + + filteredItems() { + return psuFilter(this.allSensors, 'Input'); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuCurrentLastHour'] + : this.$store.getters['powerSupply/psuCurrent']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + timeScale() { + this.loadData(); + }, + }, + created() { + this.loadData(); + }, + methods: { + loadData() { + let payload = { metricsName: 'psu_current', lastHour: false }; + if (this.timeScale === 'hour') { + payload.lastHour = true; + } + + this.$store.dispatch('powerSupply/getPsu', payload).finally(() => { + this.$root.$emit('psu-current'); + this.isBusy = false; + }); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/CurrentOutput.vue b/src/views/_sila/Power/Dynamic/CurrentOutput.vue new file mode 100644 index 00000000..a27a5a57 --- /dev/null +++ b/src/views/_sila/Power/Dynamic/CurrentOutput.vue @@ -0,0 +1,170 @@ +<template> + <collapse + id="collapse_OutputCur" + default-open + :title="$t('pagePowerSup.OutputCurrent')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/current.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input + v-model="warning" + type="number" + :min="0" + :max="shutdown" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.shutdown')"> + <b-form-input + v-model="shutdown" + type="number" + :min="warning" + :max="10" + > + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="current" + :time-scale="timeScale" + :data="filteredItems" + float + :colors="colors" + :warning="+warning" + :shutdown="+shutdown" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; +import { psuFilter } from '@/utilities/_sila/psuFilter'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 7, + shutdown: 8, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentCurrent'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minCurrent'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxCurrent'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + + computed: { + items() { + return getItems(this.filteredItems); + }, + + filteredItems() { + return psuFilter(this.allSensors, 'Output'); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuCurrentLastHour'] + : this.$store.getters['powerSupply/psuCurrent']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + items() { + this.items.length ? (this.isBusy = false) : (this.isBusy = true); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue b/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue new file mode 100644 index 00000000..45e7eaf9 --- /dev/null +++ b/src/views/_sila/Power/Dynamic/PowerDynamicPage.vue @@ -0,0 +1,87 @@ +<template> + <b-container fluid="xl"> + <page-title :description="$t('appPageTitle.dynamicInformation')" /> + <table-date-picker :time-scale="timeScale" @changePeriod="onChangePeriod" /> + <power-temp :time-scale="timeScale"></power-temp> + <volt-input :time-scale="timeScale"></volt-input> + <volt-output :time-scale="timeScale"></volt-output> + <power-input :time-scale="timeScale"></power-input> + <power-output :time-scale="timeScale"></power-output> + <current-input :time-scale="timeScale"></current-input> + <current-output :time-scale="timeScale"></current-output> + </b-container> +</template> +<script> +import PageTitle from '@/components/_sila/Global/PageTitle'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import TableDatePicker from '@/components/_sila/Global/TableDatePicker'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; + +import PowerTemp from './PowerTemp'; +import VoltInput from './VoltInput'; +import VoltOutput from './VoltOutput'; +import PowerInput from './PowerInput'; +import PowerOutput from './PowerOutput'; +import CurrentInput from './CurrentInput'; +import CurrentOutput from './CurrentOutput'; + +export default { + components: { + PowerTemp, + VoltInput, + VoltOutput, + PowerInput, + PowerOutput, + CurrentInput, + CurrentOutput, + PageTitle, + TableDatePicker, + }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + data() { + return { + timeScale: 'hour', + }; + }, + + created() { + this.startProgress(); + }, + methods: { + resetZoom() { + const resetButton = document.querySelector('.highcharts-reset-zoom'); + if (!resetButton) { + return; + } + resetButton.dispatchEvent(new Event('click')); + }, + + onChangePeriod(period) { + this.timeScale = period; + this.startProgress(); + this.resetZoom(); + }, + startProgress() { + this.startLoader(); + const psuTemp = new Promise((resolve) => { + this.$root.$on('psu-temp', () => resolve()); + }); + const psuVolt = new Promise((resolve) => { + this.$root.$on('psu-volt', () => resolve()); + }); + const psuPower = new Promise((resolve) => { + this.$root.$on('psu-power', () => resolve()); + }); + const psuCurrent = new Promise((resolve) => { + this.$root.$on('psu-current', () => resolve()); + }); + + Promise.all([psuTemp, psuVolt, psuPower, psuCurrent]).finally(() => + this.endLoader() + ); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/PowerInput.vue b/src/views/_sila/Power/Dynamic/PowerInput.vue new file mode 100644 index 00000000..1b633ecb --- /dev/null +++ b/src/views/_sila/Power/Dynamic/PowerInput.vue @@ -0,0 +1,185 @@ +<template> + <collapse + id="collapse_InputPower" + default-open + :title="$t('pagePowerSup.InputPower')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/power.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input + v-model="warning" + type="number" + :min="0" + :max="shutdown" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.shutdown')"> + <b-form-input + v-model="shutdown" + type="number" + :min="warning" + :max="100" + > + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="power" + :time-scale="timeScale" + :data="filteredItems" + :colors="colors" + :warning="+warning" + :shutdown="+shutdown" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; +import { psuFilter } from '@/utilities/_sila/psuFilter'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 72, + shutdown: 95, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentPower'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minPower'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxPower'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + + computed: { + items() { + return getItems(this.filteredItems); + }, + + filteredItems() { + return psuFilter(this.allSensors, 'Input'); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuPowerLastHour'] + : this.$store.getters['powerSupply/psuPower']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + timeScale() { + this.loadData(); + }, + }, + created() { + this.loadData(); + }, + methods: { + loadData() { + let payload = { metricsName: 'psu_power', lastHour: false }; + if (this.timeScale === 'hour') { + payload.lastHour = true; + } + + this.$store.dispatch('powerSupply/getPsu', payload).finally(() => { + this.$root.$emit('psu-power'); + this.isBusy = false; + }); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/PowerOutput.vue b/src/views/_sila/Power/Dynamic/PowerOutput.vue new file mode 100644 index 00000000..6402801e --- /dev/null +++ b/src/views/_sila/Power/Dynamic/PowerOutput.vue @@ -0,0 +1,169 @@ +<template> + <collapse + id="collapse_OutputPower" + default-open + :title="$t('pagePowerSup.OutputPower')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/power.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input + v-model="warning" + type="number" + :min="0" + :max="shutdown" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.shutdown')"> + <b-form-input + v-model="shutdown" + type="number" + :min="warning" + :max="100" + > + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="power" + :time-scale="timeScale" + :data="filteredItems" + :colors="colors" + :warning="+warning" + :shutdown="+shutdown" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; +import { psuFilter } from '@/utilities/_sila/psuFilter'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 72, + shutdown: 95, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentPower'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minPower'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxPower'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + + computed: { + items() { + return getItems(this.filteredItems); + }, + + filteredItems() { + return psuFilter(this.allSensors, 'Output'); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuPowerLastHour'] + : this.$store.getters['powerSupply/psuPower']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + items() { + this.items.length ? (this.isBusy = false) : (this.isBusy = true); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/PowerTemp.vue b/src/views/_sila/Power/Dynamic/PowerTemp.vue new file mode 100644 index 00000000..8ad31451 --- /dev/null +++ b/src/views/_sila/Power/Dynamic/PowerTemp.vue @@ -0,0 +1,186 @@ +<template> + <collapse + id="collapse_psuTempp" + default-open + :title="$t('pagePowerSup.temperature')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/temperature.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.notNormal')"> + <b-form-input + v-model="notNormal" + type="number" + :min="0" + :max="100" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.critical')"> + <b-form-input v-model="critical" type="number" :min="0" :max="100"> + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input v-model="warning" type="number" :min="0" :max="100"> + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="processors" + :time-scale="timeScale" + :data="allSensors" + :colors="colors" + :warning="+warning" + :not-normal="+notNormal" + :critical="+critical" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 72, + notNormal: 44, + critical: 55, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentTemperature'), + }, + { + key: 'middle', + label: this.$t('pagePowerSup.table.middleTemperature'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minTemperature'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxTemperature'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + + computed: { + items() { + return getItems(this.allSensors); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuTempLastHour'] + : this.$store.getters['powerSupply/psuTemp']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + timeScale() { + this.loadData(); + }, + }, + created() { + this.loadData(); + }, + methods: { + loadData() { + let payload = { metricsName: 'psu_temp', lastHour: false }; + if (this.timeScale === 'hour') { + payload.lastHour = true; + } + + this.$store.dispatch('powerSupply/getPsu', payload).finally(() => { + this.$root.$emit('psu-temp'); + this.isBusy = false; + }); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/VoltInput.vue b/src/views/_sila/Power/Dynamic/VoltInput.vue new file mode 100644 index 00000000..5c39a889 --- /dev/null +++ b/src/views/_sila/Power/Dynamic/VoltInput.vue @@ -0,0 +1,184 @@ +<template> + <collapse + id="collapse_InputVolt" + default-open + :title="$t('pagePowerSup.InputVolt')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/voltage.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input + v-model="warning" + type="number" + :min="0" + :max="shutdown" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.shutdown')"> + <b-form-input + v-model="shutdown" + type="number" + :min="warning" + :max="250" + > + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="voltage-input" + :time-scale="timeScale" + :data="filteredItems" + :colors="colors" + :warning="+warning" + :shutdown="+shutdown" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; +import { psuFilter } from '@/utilities/_sila/psuFilter'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 235, + shutdown: 245, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentVolt'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minVolt'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxVolt'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + computed: { + items() { + return getItems(this.filteredItems); + }, + + filteredItems() { + return psuFilter(this.allSensors, 'Input'); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuVoltageLastHour'] + : this.$store.getters['powerSupply/psuVoltage']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + timeScale() { + this.loadData(); + }, + }, + created() { + this.loadData(); + }, + methods: { + loadData() { + let payload = { metricsName: 'psu_voltage', lastHour: false }; + if (this.timeScale === 'hour') { + payload.lastHour = true; + } + + this.$store.dispatch('powerSupply/getPsu', payload).finally(() => { + this.$root.$emit('psu-volt'); + this.isBusy = false; + }); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/VoltOutput.vue b/src/views/_sila/Power/Dynamic/VoltOutput.vue new file mode 100644 index 00000000..191e29fd --- /dev/null +++ b/src/views/_sila/Power/Dynamic/VoltOutput.vue @@ -0,0 +1,169 @@ +<template> + <collapse + id="collapse_OutputVolt" + default-open + :title="$t('pagePowerSup.OutputVolt')" + > + <template #image> + <img src="@/assets/images/_sila/collapsed/voltage.svg" /> + </template> + <page-section> + <b-row class="align-items-end p-2"> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.warning')"> + <b-form-input + v-model="warning" + type="number" + :min="0" + :max="shutdown" + ></b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="4" class="pt-2"> + <b-form-group :label="$t('pagePowerSup.labels.shutdown')"> + <b-form-input + v-model="shutdown" + type="number" + :min="warning" + :max="100" + > + </b-form-input> + </b-form-group> + </b-col> + <b-col xs="12" md="6" lg="3" class="pt-2"> + <b-button variant="primary" style="height: 35px"> + {{ $t('global.action.save') }} + </b-button> + </b-col> + </b-row> + <chart + type="voltage-output" + :time-scale="timeScale" + :data="filteredItems" + :colors="colors" + :warning="+warning" + :shutdown="+shutdown" + ></chart> + <b-table + responsive="md" + show-empty + table-variant="accessory" + hover + :items="items" + :fields="fields" + :empty-text="$t('global.table.emptyMessage')" + :busy="isBusy" + > + <template #cell(name)="{ value, index }"> + <div + class="item-color" + :style="`background-color: ${colors[index]}`" + ></div> + {{ value }} + </template> + <template #cell(minDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + <template #cell(maxDate)="{ value }"> + <span style="color: rgb(12, 28, 41)"> + {{ value.time }} + </span> + <span> + {{ value.date }} + </span> + </template> + </b-table> + </page-section> + </collapse> +</template> +<script> +import Chart from '@/components/_sila/Global/Chart'; +import PageSection from '@/components/Global/PageSection'; + +import DataFormatterMixin from '@/components/_sila/Mixins/DataFormatterMixin'; +import LoadingBarMixin from '@/components/_sila/Mixins/LoadingBarMixin'; +import TableFilterMixin from '@/components/_sila/Mixins/TableFilterMixin'; +import Collapse from '@/components/_sila/Global/Collapse'; + +import { getItems } from '@/utilities/_sila/metricProperties'; +import { psuFilter } from '@/utilities/_sila/psuFilter'; + +export default { + components: { PageSection, Chart, Collapse }, + mixins: [DataFormatterMixin, LoadingBarMixin, TableFilterMixin], + props: { + timeScale: { + type: String, + default: 'hour', + }, + }, + data() { + return { + warning: 72, + shutdown: 95, + isBusy: true, + fields: [ + { + key: 'name', + label: this.$t('pagePowerSup.table.nameModule'), + thStyle: { width: '25%' }, + }, + { + key: 'current', + label: this.$t('pagePowerSup.table.currentVolt'), + }, + { + key: 'min', + label: this.$t('pagePowerSup.table.minVolt'), + }, + { + key: 'minDate', + label: this.$t('pagePowerSup.table.minDate'), + }, + { + key: 'max', + label: this.$t('pagePowerSup.table.maxVolt'), + }, + { + key: 'maxDate', + label: this.$t('pagePowerSup.table.maxDate'), + }, + ], + }; + }, + + computed: { + items() { + return getItems(this.filteredItems); + }, + + filteredItems() { + return psuFilter(this.allSensors, 'Output'); + }, + + allSensors() { + return this.timeScale === 'hour' + ? this.$store.getters['powerSupply/psuVoltageLastHour'] + : this.$store.getters['powerSupply/psuVoltage']; + }, + + colors() { + return this.$randomColor({ + count: this.items?.length, + hue: 'random', + luminosity: 'random', + }); + }, + }, + watch: { + items() { + this.items.length ? (this.isBusy = false) : (this.isBusy = true); + }, + }, +}; +</script> diff --git a/src/views/_sila/Power/Dynamic/index.js b/src/views/_sila/Power/Dynamic/index.js new file mode 100644 index 00000000..c45d5c89 --- /dev/null +++ b/src/views/_sila/Power/Dynamic/index.js @@ -0,0 +1,2 @@ +import PowerDynamicPage from './PowerDynamicPage.vue'; +export default PowerDynamicPage; |
