xref: /openbmc/webui-vue/src/views/ResourceManagement/Power.vue (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00) 
1<template>
2  <b-container fluid="xl">
3    <page-title :description="$t('pagePower.description')" />
4
5    <b-row>
6      <b-col sm="8" md="6" xl="12">
7        <dl>
8          <dt>{{ $t('pagePower.powerConsumption') }}</dt>
9          <dd>
10            {{
11              powerConsumptionValue
12                ? `${powerConsumptionValue} W`
13                : $t('global.status.notAvailable')
14            }}
15          </dd>
16        </dl>
17      </b-col>
18    </b-row>
19
20    <b-form @submit.prevent="submitForm">
21      <b-form-group :disabled="loading">
22        <b-row class="mb-3">
23          <b-col sm="8" md="6" xl="12">
24            <b-form-group :label="$t('pagePower.powerCapSettingLabel')">
25              <b-form-checkbox
26                v-model="isPowerCapFieldEnabled"
27                data-test-id="power-checkbox-togglePowerCapField"
28                name="power-cap-setting"
29              >
30                {{ $t('pagePower.powerCapSettingData') }}
31              </b-form-checkbox>
32            </b-form-group>
33          </b-col>
34        </b-row>
35
36        <b-row class="mb-3">
37          <b-col sm="8" md="6" xl="3">
38            <b-form-group
39              id="input-group-1"
40              :label="$t('pagePower.powerCapLabel')"
41              label-for="input-1"
42            >
43              <b-form-text id="power-help-text">
44                {{
45                  $t('pagePower.powerCapLabelTextInfo', {
46                    min: 1,
47                    max: 10000,
48                  })
49                }}
50              </b-form-text>
51
52              <b-form-input
53                id="input-1"
54                v-model.number="powerCapValue"
55                :disabled="!isPowerCapFieldEnabled"
56                data-test-id="power-input-powerCapValue"
57                type="number"
58                aria-describedby="power-help-text"
59                :state="getValidationState(v$.powerCapValue)"
60              ></b-form-input>
61
62              <b-form-invalid-feedback id="input-live-feedback" role="alert">
63                <template v-if="v$.powerCapValue.required.$invalid">
64                  {{ $t('global.form.fieldRequired') }}
65                </template>
66                <template v-else-if="v$.powerCapValue.between.$invalid">
67                  {{ $t('global.form.invalidValue') }}
68                </template>
69              </b-form-invalid-feedback>
70            </b-form-group>
71          </b-col>
72        </b-row>
73
74        <b-button
75          variant="primary"
76          type="submit"
77          data-test-id="power-button-savePowerCapValue"
78          class="mt-3"
79        >
80          {{ $t('global.action.save') }}
81        </b-button>
82      </b-form-group>
83    </b-form>
84  </b-container>
85</template>
86
87<script>
88import PageTitle from '@/components/Global/PageTitle';
89import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
90import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
91import { useVuelidate } from '@vuelidate/core';
92
93import BVToastMixin from '@/components/Mixins/BVToastMixin';
94import { requiredIf, between } from '@vuelidate/validators';
95import { mapGetters } from 'vuex';
96import { useI18n } from 'vue-i18n';
97
98export default {
99  name: 'Power',
100  components: { PageTitle },
101  mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin],
102  beforeRouteLeave(to, from, next) {
103    this.hideLoader();
104    next();
105  },
106  setup() {
107    return {
108      v$: useVuelidate(),
109    };
110  },
111  data() {
112    return {
113      $t: useI18n().t,
114      loading,
115    };
116  },
117  computed: {
118    ...mapGetters({
119      powerConsumptionValue: 'powerControl/powerConsumptionValue',
120    }),
121
122    /**
123      Computed property isPowerCapFieldEnabled is used to enable or disable the input field.
124      The input field is enabled when the powercapValue property is not null.
125   **/
126    isPowerCapFieldEnabled: {
127      get() {
128        return this.powerCapValue !== null;
129      },
130      set(value) {
131        this.v$.$reset();
132        let newValue = null;
133        if (value) {
134          if (this.powerCapValue) {
135            newValue = this.powerCapValue;
136          } else {
137            newValue = '';
138          }
139        }
140        this.$store.dispatch('powerControl/setPowerCapUpdatedValue', newValue);
141      },
142    },
143    powerCapValue: {
144      get() {
145        return this.$store.getters['powerControl/powerCapValue'];
146      },
147      set(value) {
148        this.v$.$touch();
149        this.$store.dispatch('powerControl/setPowerCapUpdatedValue', value);
150      },
151    },
152  },
153  created() {
154    this.startLoader();
155    this.$store
156      .dispatch('powerControl/getPowerControl')
157      .finally(() => this.endLoader());
158  },
159  validations: {
160    powerCapValue: {
161      between: between(1, 10000),
162      required: requiredIf(function () {
163        return this.isPowerCapFieldEnabled;
164      }),
165    },
166  },
167  methods: {
168    submitForm() {
169      this.v$.$touch();
170      if (this.v$.$invalid) return;
171      this.startLoader();
172      this.$store
173        .dispatch('powerControl/setPowerControl', this.powerCapValue)
174        .then((message) => this.successToast(message))
175        .catch(({ message }) => this.errorToast(message))
176        .finally(() => this.endLoader());
177    },
178  },
179};
180</script>
181