Merge 84f3cfa0b3 into 9bbd32a8ef

ui/public/locales/en.json

@@ -1952,6 +1952,8 @@
 "label.project": "Project",
 "label.project.invitation": "Project Invitations",
 "label.project.name": "Project name",
+"label.project.description.tooltip": "The description of the project. If not informed, defaults to the project's name.",
+"label.project.user.tooltip": "The account's user that will be set as the project Admin. If not informed, defaults to the current account.",
 "label.project.owner": "Project owner(s)",
 "label.project.role": "Project role",
 "label.project.roles": "Project roles",
@@ -3496,6 +3498,7 @@
 "message.error.password": "Enter your password",
 "message.error.path": "Please enter path",
 "message.error.provide.setting": "Must provide a valid key and value for setting",
+"message.error.required.project.name" : "The project's name is required.",
 "message.error.rados.monitor": "Please enter RADOS monitor",
 "message.error.rados.pool": "Please enter RADOS pool",
 "message.error.rados.secret": "Please enter RADOS secret",
@@ -3952,6 +3955,7 @@
 "message.success.migrating": "Migration completed successfully for",
 "message.success.migration": "Migration completed successfully",
 "message.success.move.acl.order": "Successfully moved ACL rule",
+"message.success.project.creation": "Project created successfully",
 "message.success.recurring.snapshot": "Successfully recurring Snapshots",
 "message.success.register.extension": "Successfully registered Extension",
 "message.success.register.iso": "Successfully registered ISO",

ui/public/locales/pt_BR.json

@@ -1249,7 +1249,9 @@
 "label.profilename": "Perfil",
 "label.project": "Projeto",
 "label.project.invitation": "Convites do projeto",
-"label.project.name": "Nome de projeto",
+"label.project.name": "Nome do projeto",
+"label.project.description.tooltip": "A descri\u00e7\u00e3o do projeto. Se n\u00e3o informada, o nome do projeto \u00e9 utilizado.",
+"label.project.user.tooltip": "O usu\u00e1rio da conta que ser\u00e1 Admin do projeto. Se n\u00e3o informada, a conta atual \u00e9 atribu\u00edda como Admin.",
 "label.project.owner": "Dono(s) do projeto",
 "label.project.role": "Fun\u00e7\u00e3o do projeto",
 "label.project.roles": "Fun\u00e7\u00f5es do projeto",
@@ -2169,6 +2171,7 @@
 "message.error.password": "Insira a sua senha",
 "message.error.path": "Por favor, insira o path",
 "message.error.provide.setting": "Deve fornecer uma chave v\u00e1lida e um valor para a configura\u00e7\u00e3o",
+"message.error.required.project.name": "\u00C9 necess\u00e1rio informar um nome para o projeto.",
 "message.error.rados.monitor": "Por favor, digite o monitor RADOS",
 "message.error.rados.pool": "Por favor, digite o RADOS pool",
 "message.error.rados.secret": "Por favor, digite o RADOS secret",
@@ -2433,6 +2436,7 @@
 "message.success.migrate.volume": "Volume migrado com sucesso",
 "message.success.migrating": "Migra\u00e7\u00e3o conclu\u00edda com sucesso para",
 "message.success.move.acl.order": "Regra de ACL movida com sucesso",
+"message.success.project.creation": "Projeto criado com sucesso",
 "message.success.recurring.snapshot": "Snapshots recorrentes habilitado com sucesso",
 "message.success.register.iso": "ISO registrado com sucesso",
 "message.success.register.keypair": "Par de chaves SSH registrado com sucesso",

ui/src/config/section/project.js

@@ -73,7 +73,8 @@ export default {
       label: 'label.new.project',
       docHelp: 'adminguide/projects.html#creating-a-new-project',
       listView: true,
-      args: ['name', 'displaytext']
+      popup: true,
+      component: shallowRef(defineAsyncComponent(() => import('@/views/project/CreateProject.vue')))
     },
     {
       api: 'updateProjectInvitation',

ui/src/views/compute/wizard/OwnershipSelection.vue

@@ -17,7 +17,7 @@
 
 <template>
   <a-form layout="vertical" >
-    <a-form-item :label="$t('label.owner.type')">
+    <a-form-item :label="$t('label.owner.type')" v-if="$props.showOwnerTypeField === true">
       <a-select
         @change="changeAccountTypeOrDomain"
         v-model:value="selectedAccountType"
@@ -151,6 +151,10 @@ export default {
   props: {
     override: {
       type: Object
+    },
+    showOwnerTypeField: {
+      type: Boolean,
+      default: true
     }
   },
   created () {

ui/src/views/project/CreateProject.vue

@@ -0,0 +1,148 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <a-spin :spinning="loading">
+    <a-form
+      class="form"
+      layout="vertical"
+      :ref="formRef"
+      :model="form"
+      :rules="rules"
+    >
+      <a-form-item ref="name" name="name">
+        <template #label>
+          <tooltip-label :title="$t('label.name')"/>
+        </template>
+        <a-input
+          v-focus="true"
+          v-model:value="form.name"
+          :placeholder="$t('label.project.name')" />
+      </a-form-item>
+      <a-form-item>
+        <template #label>
+          <tooltip-label :title="$t('label.description')" :tooltip="$t('label.project.description.tooltip')"/>
+        </template>
+        <a-input
+          v-model:value="form.displaytext"
+          :placeholder="$t('label.description')"/>
+      </a-form-item>
+      <ownership-selection v-if="isAdminOrDomainAdmin()" @fetch-owner="fetchOwner" :show-owner-type-field="false" />
+      <a-form-item v-if="Object.keys(this.selectedAccount).length !== 0" ref="userid" name="userid">
+        <template #label>
+          <tooltip-label :title="$t('label.user')" :tooltip="$t('label.project.user.tooltip')"/>
+        </template>
+        <a-select
+          v-model:value="form.userid"
+          :loading="loading"
+          showSearch
+          :placeholder="this.$t('label.user')"
+        >
+          <a-select-option v-for="user in selectedAccount.user" :value="user.id" :key="user.id">
+            {{ user.username }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <div :span="24" class="action-button">
+          <a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>
+          <a-button :loading="loading" ref="submit" type="primary" @click="handleSubmit">{{ $t('label.ok') }}</a-button>
+      </div>
+    </a-form>
+  </a-spin>
+</template>
+
+<script>
+
+import { reactive, ref, toRaw } from 'vue'
+import { api } from '@/api'
+import TooltipLabel from '@/components/widgets/TooltipLabel.vue'
+import ResourceIcon from '@/components/view/ResourceIcon.vue'
+import OwnershipSelection from '@/views/compute/wizard/OwnershipSelection.vue'
+import { isAdminOrDomainAdmin } from '@/role'
+
+export default {
+  name: 'CreateProject',
+  components: { OwnershipSelection, ResourceIcon, TooltipLabel },
+  data () {
+    return {
+      loading: false,
+      selectedAccount: {}
+    }
+  },
+  created () {
+    this.initForm()
+  },
+  methods: {
+    initForm () {
+      this.formRef = ref()
+      this.form = reactive({})
+      this.rules = reactive({
+        name: [{ required: true, message: this.$t('message.error.required.project.name') }]
+      })
+    },
+    fetchOwner (ownerData) {
+      if (ownerData.selectedAccountType === 'Account') {
+        if (!ownerData.selectedAccount) {
+          this.selectedAccount = {}
+          return
+        }
+
+        this.selectedAccount = ownerData.accounts.find(acc => acc.name === ownerData.selectedAccount)
+        this.form.account = ownerData.selectedAccount
+        this.form.domainId = ownerData.selectedDomain
+      }
+    },
+    isAdminOrDomainAdmin () {
+      return isAdminOrDomainAdmin()
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      if (this.loading) return
+
+      this.formRef.value.validate().then(() => {
+        this.loading = true
+        const params = toRaw(this.form)
+
+        if (isAdminOrDomainAdmin()) {
+          params.accountid = this.selectedAccount.id
+        }
+
+        api('createProject', {}, 'POST', params).then(() => {
+          this.$message.success(this.$t('message.success.project.creation'))
+          this.closeAction()
+          this.$emit('refresh-data')
+        }).catch(error => {
+          this.$notifyError(error)
+        }).finally(() => {
+          this.loading = false
+        })
+      })
+    },
+    closeAction () {
+      this.$emit('close-action')
+    }
+  }
+}
+
+</script>
+
+<style lang="less" scoped>
+  .form {
+    width: 20vw;
+
+  }
+</style>