xref: /openbmc/webui-vue/src/views/ResourceManagement/Power.vue (revision 7d6b44cb263da09e575c7cb28cab88c1eb339c7b) 
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>
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>
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">
64                  {{ $t('global.form.fieldRequired') }}
65                </template>
66                <template v-else-if="!$v.powerCapValue.between">
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        >
79          {{ $t('global.action.save') }}
80        </b-button>
81      </b-form-group>
82    </b-form>
83  </b-container>
84</template>
85
86<script>
87import PageTitle from '@/components/Global/PageTitle';
88import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
89import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
90import { useVuelidate } from '@vuelidate/core';
91
92import BVToastMixin from '@/components/Mixins/BVToastMixin';
93import { requiredIf, between } from '@vuelidate/validators';
94import { mapGetters } from 'vuex';
95
96export default {
97  name: 'Power',
98  components: { PageTitle },
99  mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin],
100  beforeRouteLeave(to, from, next) {
101    this.hideLoader();
102    next();
103  },
104  setup() {
105    return {
106      v$: useVuelidate(),
107    };
108  },
109  data() {
110    return {
111      loading,
112    };
113  },
114  computed: {
115    ...mapGetters({
116      powerConsumptionValue: 'powerControl/powerConsumptionValue',
117    }),
118
119    /**
120      Computed property isPowerCapFieldEnabled is used to enable or disable the input field.
121      The input field is enabled when the powercapValue property is not null.
122   **/
123    isPowerCapFieldEnabled: {
124      get() {
125        return this.powerCapValue !== null;
126      },
127      set(value) {
128        this.$v.$reset();
129        let newValue = null;
130        if (value) {
131          if (this.powerCapValue) {
132            newValue = this.powerCapValue;
133          } else {
134            newValue = '';
135          }
136        }
137        this.$store.dispatch('powerControl/setPowerCapUpdatedValue', newValue);
138      },
139    },
140    powerCapValue: {
141      get() {
142        return this.$store.getters['powerControl/powerCapValue'];
143      },
144      set(value) {
145        this.$v.$touch();
146        this.$store.dispatch('powerControl/setPowerCapUpdatedValue', value);
147      },
148    },
149  },
150  created() {
151    this.startLoader();
152    this.$store
153      .dispatch('powerControl/getPowerControl')
154      .finally(() => this.endLoader());
155  },
156  validations: {
157    powerCapValue: {
158      between: between(1, 10000),
159      required: requiredIf(function () {
160        return this.isPowerCapFieldEnabled;
161      }),
162    },
163  },
164  methods: {
165    submitForm() {
166      this.$v.$touch();
167      if (this.$v.$invalid) return;
168      this.startLoader();
169      this.$store
170        .dispatch('powerControl/setPowerControl', this.powerCapValue)
171        .then((message) => this.successToast(message))
172        .catch(({ message }) => this.errorToast(message))
173        .finally(() => this.endLoader());
174    },
175  },
176};
177</script>
178