diff options
author | Sandeepa Singh <sandeepa.singh@ibm.com> | 2021-07-28 12:55:14 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2021-08-10 22:20:42 +0300 |
commit | 6dba4be6125c10210bafa030ac17737d3a9b28b8 (patch) | |
tree | 5256287eacb4b4d599b38a104e44d88dfeb89ced /src/views/Operations | |
parent | b440616c23b61166ae6d87839a70eec31bdca235 (diff) | |
download | webui-vue-6dba4be6125c10210bafa030ac17737d3a9b28b8.tar.xz |
IA update: Add resource management section
This is the sixth commit for information architecture changes and has
the following changes:
- Resource management section has been added
- Carbon icon used for resource management section is data--base--alt
- Manage power usage page from operations has been moved to
resource management
- Manage power usage page has been updated to power page
Signed-off-by: Sandeepa Singh <sandeepa.singh@ibm.com>
Change-Id: If3feb994dbad19dd6cfb1507d976d09643c8e4d6
Diffstat (limited to 'src/views/Operations')
-rw-r--r-- | src/views/Operations/ManagePowerUsage/ManagePowerUsage.vue | 165 | ||||
-rw-r--r-- | src/views/Operations/ManagePowerUsage/index.js | 2 |
2 files changed, 0 insertions, 167 deletions
diff --git a/src/views/Operations/ManagePowerUsage/ManagePowerUsage.vue b/src/views/Operations/ManagePowerUsage/ManagePowerUsage.vue deleted file mode 100644 index 38dbf0b8..00000000 --- a/src/views/Operations/ManagePowerUsage/ManagePowerUsage.vue +++ /dev/null @@ -1,165 +0,0 @@ -<template> - <b-container fluid="xl"> - <page-title :description="$t('pageManagePowerUsage.description')" /> - - <b-row> - <b-col sm="8" md="6" xl="12"> - <dl> - <dt>{{ $t('pageManagePowerUsage.powerConsumption') }}</dt> - <dd> - {{ - powerConsumptionValue - ? `${powerConsumptionValue} W` - : $t('global.status.notAvailable') - }} - </dd> - </dl> - </b-col> - </b-row> - - <b-form @submit.prevent="submitForm"> - <b-form-group :disabled="loading"> - <b-row> - <b-col sm="8" md="6" xl="12"> - <b-form-group - :label="$t('pageManagePowerUsage.powerCapSettingLabel')" - > - <b-form-checkbox - v-model="isPowerCapFieldEnabled" - data-test-id="managePowerUsage-checkbox-togglePowerCapField" - name="power-cap-setting" - > - {{ $t('pageManagePowerUsage.powerCapSettingData') }} - </b-form-checkbox> - </b-form-group> - </b-col> - </b-row> - - <b-row> - <b-col sm="8" md="6" xl="3"> - <b-form-group - id="input-group-1" - :label="$t('pageManagePowerUsage.powerCapLabel')" - label-for="input-1" - > - <b-form-text id="power-help-text"> - {{ - $t('pageManagePowerUsage.powerCapLabelTextInfo', { - min: 1, - max: 10000, - }) - }} - </b-form-text> - - <b-form-input - id="input-1" - v-model.number="powerCapValue" - :disabled="!isPowerCapFieldEnabled" - data-test-id="managePowerUsage-input-powerCapValue" - type="number" - aria-describedby="power-help-text" - :state="getValidationState($v.powerCapValue)" - ></b-form-input> - - <b-form-invalid-feedback id="input-live-feedback" role="alert"> - <template v-if="!$v.powerCapValue.required"> - {{ $t('global.form.fieldRequired') }} - </template> - <template v-else-if="!$v.powerCapValue.between"> - {{ $t('global.form.invalidValue') }} - </template> - </b-form-invalid-feedback> - </b-form-group> - </b-col> - </b-row> - - <b-button - variant="primary" - type="submit" - data-test-id="managePowerUsage-button-savePowerCapValue" - > - {{ $t('global.action.save') }} - </b-button> - </b-form-group> - </b-form> - </b-container> -</template> - -<script> -import PageTitle from '@/components/Global/PageTitle'; -import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin'; -import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; -import BVToastMixin from '@/components/Mixins/BVToastMixin'; -import { requiredIf, between } from 'vuelidate/lib/validators'; -import { mapGetters } from 'vuex'; - -export default { - name: 'ManagePowerUsage', - components: { PageTitle }, - mixins: [VuelidateMixin, BVToastMixin, LoadingBarMixin], - beforeRouteLeave(to, from, next) { - this.hideLoader(); - next(); - }, - data() { - return { - loading, - }; - }, - computed: { - ...mapGetters({ - powerConsumptionValue: 'powerControl/powerConsumptionValue', - }), - - /** - Computed property isPowerCapFieldEnabled is used to enable or disable the input field. - The input field is enabled when the powercapValue property is not null. - **/ - isPowerCapFieldEnabled: { - get() { - return this.powerCapValue !== null; - }, - set(value) { - let newValue = value ? '' : null; - this.$v.$reset(); - this.$store.dispatch('powerControl/setPowerCapUpdatedValue', newValue); - }, - }, - powerCapValue: { - get() { - return this.$store.getters['powerControl/powerCapValue']; - }, - set(value) { - this.$v.$touch(); - this.$store.dispatch('powerControl/setPowerCapUpdatedValue', value); - }, - }, - }, - created() { - this.startLoader(); - this.$store - .dispatch('powerControl/getPowerControl') - .finally(() => this.endLoader()); - }, - validations: { - powerCapValue: { - between: between(1, 10000), - required: requiredIf(function () { - return this.isPowerCapFieldEnabled; - }), - }, - }, - methods: { - submitForm() { - this.$v.$touch(); - if (this.$v.$invalid) return; - this.startLoader(); - this.$store - .dispatch('powerControl/setPowerControl', this.powerCapValue) - .then((message) => this.successToast(message)) - .catch(({ message }) => this.errorToast(message)) - .finally(() => this.endLoader()); - }, - }, -}; -</script> diff --git a/src/views/Operations/ManagePowerUsage/index.js b/src/views/Operations/ManagePowerUsage/index.js deleted file mode 100644 index f3e95ac1..00000000 --- a/src/views/Operations/ManagePowerUsage/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import ManagePowerUsage from './ManagePowerUsage.vue'; -export default ManagePowerUsage; |