Add select box

Add select box so that user can select resources
without specifying a UUID manually.

Change-Id: I672c38d9cacb5b4b463740a2bc71045abd275df7

meteos_ui/static/dashboard/machine_learning/datasets/create/info/info.html

@@ -22,10 +22,11 @@
           <translate>Experiment</translate>
           <span class="hz-icon-required fa fa-asterisk"></span>
         </label>
-        <input name="dataset-experiment-id" type="text" class="form-control" id="dataset-experiment-id"
+        <select class="form-control"
-               ng-model="model.newDatasetSpec.experiment_id"
+                ng-model="model.newDatasetSpec.experiment_id"
-               ng-required="true"
+                ng-required="true"
-               placeholder="{$ 'UUID of the experiment.'|translate $}">
+                ng-options="experiment.id as experiment.name + ':' + experiment.id for experiment in ctrl.experiments">
+        </select>
       </div>
     </div>
   </div>

meteos_ui/static/dashboard/machine_learning/datasets/create/info/template.info.controller.js

@@ -27,8 +27,23 @@
     .controller('createDatasetInfoController', createDatasetInfoController);
 
   createDatasetInfoController.$inject = [
+    'horizon.app.core.openstack-service-api.meteos'
   ];
 
-  function createDatasetInfoController() {
+  function createDatasetInfoController(meteos) {
+
+    var ctrl = this;
+    ctrl.experiments = [];
+
+    init();
+
+    function init() {
+      meteos.getExperiments().success(onGetExperiments);
+    }
+
+    function onGetExperiments(response) {
+      ctrl.experiments = response.items;
+    }
+
   }
 })();

meteos_ui/static/dashboard/machine_learning/experiments/create/info/info.html

@@ -22,10 +22,11 @@
           <translate>Template</translate>
           <span class="hz-icon-required fa fa-asterisk"></span>
         </label>
-        <input name="experiment-template-id" type="text" class="form-control" id="experiment-template-id"
+        <select class="form-control"
-               ng-model="model.newExperimentSpec.template_id"
+                ng-model="model.newExperimentSpec.template_id"
-               ng-required="true"
+                ng-required="true"
-               placeholder="{$ 'Name or ID of the template.'|translate $}">
+                ng-options="template.id as template.name + ':' + template.id for template in ctrl.templates">
+        </select>
       </div>
     </div>
   </div>

meteos_ui/static/dashboard/machine_learning/experiments/create/info/template.info.controller.js

@@ -27,8 +27,22 @@
     .controller('createExperimentInfoController', createExperimentInfoController);
 
   createExperimentInfoController.$inject = [
+    'horizon.app.core.openstack-service-api.meteos'
   ];
 
-  function createExperimentInfoController() {
+  function createExperimentInfoController(meteos) {
+
+    var ctrl = this;
+    ctrl.templates = [];
+    init();
+
+    function init() {
+      meteos.getTemplates().success(onGetTemplates);
+    }
+
+    function onGetTemplates(response) {
+      ctrl.templates = response.items;
+    }
+
   }
 })();

meteos_ui/static/dashboard/machine_learning/experiments/create/spec/spec.html

@@ -18,10 +18,11 @@
           <translate>Neutron Management Network</translate>
           <span class="hz-icon-required fa fa-asterisk"></span>
         </label>
-        <input name="experiment-neutron-management-network" type="text" class="form-control" id="experiment-neutron-management-network"
+        <select class="form-control"
-               ng-model="model.newExperimentSpec.neutron_management_network"
+                ng-model="model.newExperimentSpec.neutron_management_network"
-               ng-required="true"
+                ng-required="true"
-               placeholder="{$ 'The UUID of Neutron Management Network.'|translate $}">
+                ng-options="network.id as network.name + ':' + network.id for network in ctrl.networks">
+        </select>
       </div>
     </div>
   </div>

meteos_ui/static/dashboard/machine_learning/experiments/create/spec/template.spec.controller.js

@@ -27,10 +27,23 @@
     .controller('createExperimentSpecController', createExperimentSpecController);
 
   createExperimentSpecController.$inject = [
-    '$scope',
+    'horizon.app.core.openstack-service-api.neutron'
-    'horizon.framework.util.i18n.gettext'
   ];
 
-  function createExperimentSpecController($scope, gettext) {
+  function createExperimentSpecController(neutron) {
+
+    var ctrl = this;
+    ctrl.networks = [];
+
+    init();
+
+    function init() {
+      neutron.getNetworks().success(onGetNetworks);
+    }
+
+    function onGetNetworks(response) {
+      ctrl.networks = response.items;
+    }
+
   }
 })();

meteos_ui/static/dashboard/machine_learning/learnings/create/info/info.html

@@ -22,10 +22,11 @@
           <translate>Model</translate>
           <span class="hz-icon-required fa fa-asterisk"></span>
         </label>
-        <input name="learning-model-id" type="text" class="form-control" id="learning-model-id"
+        <select class="form-control"
-               ng-model="model.newLearningSpec.model_id"
+                ng-model="model.newLearningSpec.model_id"
-               ng-required="true"
+                ng-required="true"
-               placeholder="{$ 'UUID of prediction model which you want to predict.'|translate $}">
+                ng-options="model.id as model.name + ':' + model.id for model in ctrl.models">
+        </select>
       </div>
     </div>
   </div>

meteos_ui/static/dashboard/machine_learning/learnings/create/info/template.info.controller.js

@@ -27,8 +27,23 @@
     .controller('createLearningInfoController', createLearningInfoController);
 
   createLearningInfoController.$inject = [
+    'horizon.app.core.openstack-service-api.meteos'
   ];
 
-  function createLearningInfoController() {
+  function createLearningInfoController(meteos) {
+
+    var ctrl = this;
+    ctrl.models = [];
+
+    init();
+
+    function init() {
+      meteos.getModels().success(onGetModels);
+    }
+
+    function onGetModels(response) {
+      ctrl.models = response.items;
+    }
+
   }
 })();

meteos_ui/static/dashboard/machine_learning/model_evaluations/create/info/info.html

@@ -14,10 +14,11 @@
           <translate>Model</translate>
           <span class="hz-icon-required fa fa-asterisk"></span>
         </label>
-        <input name="model_evaluation-model-id" type="text" class="form-control" id="model_evaluation-model-id"
+        <select class="form-control"
-               ng-model="model.newModelEvaluationSpec.model_id"
+                ng-model="model.newModelEvaluationSpec.model_id"
-               ng-required="true"
+                ng-required="true"
-               placeholder="{$ 'UUID of Prediction Model which you want to evaluate.'|translate $}">
+                ng-options="model.id as model.name + ':' + model.id for model in ctrl.models">
+        </select>
       </div>
     </div>
   </div>

meteos_ui/static/dashboard/machine_learning/model_evaluations/create/info/template.info.controller.js

@@ -27,8 +27,23 @@
     .controller('createModelEvaluationInfoController', createModelEvaluationInfoController);
 
   createModelEvaluationInfoController.$inject = [
+    'horizon.app.core.openstack-service-api.meteos'
   ];
 
-  function createModelEvaluationInfoController() {
+  function createModelEvaluationInfoController(meteos) {
+
+    var ctrl = this;
+    ctrl.models = [];
+
+    init();
+
+    function init() {
+      meteos.getModels().success(onGetModels);
+    }
+
+    function onGetModels(response) {
+      ctrl.models = response.items;
+    }
+
   }
 })();

meteos_ui/static/dashboard/machine_learning/models/create/info/info.html

@@ -22,10 +22,11 @@
           <translate>Experiment</translate>
           <span class="hz-icon-required fa fa-asterisk"></span>
         </label>
-        <input name="model-experiment-id" type="text" class="form-control" id="model-experiment-id"
+        <select class="form-control"
-               ng-model="model.newModelSpec.experiment_id"
+                ng-model="model.newModelSpec.experiment_id"
-               ng-required="true"
+                ng-required="true"
-               placeholder="{$ 'UUID of the experiment.'|translate $}">
+                ng-options="experiment.id as experiment.name + ':' + experiment.id for experiment in ctrl.experiments">
+        </select>
       </div>
     </div>
   </div>

meteos_ui/static/dashboard/machine_learning/models/create/info/template.info.controller.js

@@ -27,8 +27,23 @@
     .controller('createModelInfoController', createModelInfoController);
 
   createModelInfoController.$inject = [
+    'horizon.app.core.openstack-service-api.meteos'
   ];
 
-  function createModelInfoController() {
+  function createModelInfoController(meteos) {
+
+    var ctrl = this;
+    ctrl.experiments = [];
+
+    init();
+
+    function init() {
+      meteos.getExperiments().success(onGetExperiments);
+    }
+
+    function onGetExperiments(response) {
+      ctrl.experiments = response.items;
+    }
+
   }
 })();

meteos_ui/static/dashboard/machine_learning/templates/create/info/info.html

@@ -22,10 +22,11 @@
           <translate>Image</translate>
           <span class="hz-icon-required fa fa-asterisk"></span>
         </label>
-        <input name="template-image-id" type="text" class="form-control" id="template-image-id"
+        <select class="form-control"
-               ng-model="model.newTemplateSpec.image_id"
+                ng-model="model.newTemplateSpec.image_id"
-               ng-required="true"
+                ng-required="true"
-               placeholder="{$ 'Name or ID of the image.'|translate $}">
+                ng-options="image.id as image.name + ':' + image.id for image in ctrl.images">
+        </select>
       </div>
     </div>
   </div>

meteos_ui/static/dashboard/machine_learning/templates/create/info/template.info.controller.js

@@ -27,8 +27,22 @@
     .controller('createTemplateInfoController', createTemplateInfoController);
 
   createTemplateInfoController.$inject = [
+    'horizon.app.core.openstack-service-api.glance'
   ];
 
-  function createTemplateInfoController() {
+  function createTemplateInfoController(glance) {
+
+    var ctrl = this;
+    ctrl.images = [];
+    init();
+
+    function init() {
+      glance.getImages().success(onGetImages);
+    }
+
+    function onGetImages(response) {
+      ctrl.images = response.items;
+    }
+
   }
 })();

meteos_ui/static/dashboard/machine_learning/templates/create/spec/spec.html

@@ -70,6 +70,16 @@
           <translate>Floating IP Pool</translate>
           <span class="hz-icon-required fa fa-asterisk"></span>
         </label>
+        <!--
+        TODO(h-eguchi): Need to add a angularjs method getting public network in horizon.
+        -->
+        <!--
+        <select class="form-control"
+                ng-model="model.newTemplateSpec.floating_ip_pool"
+                ng-required="true"
+                ng-options="network.id as network.name + ':' + network.id for network in ctrl.networks">
+        </select>
+        -->
         <input name="template-floating-ip-pool" type="text" class="form-control" id="template-floating-ip-pool"
                ng-model="model.newTemplateSpec.floating_ip_pool"
                ng-required="true"

meteos_ui/static/dashboard/machine_learning/templates/create/spec/template.spec.controller.js

@@ -28,15 +28,27 @@
 
   createTemplateSpecController.$inject = [
     '$scope',
-    'horizon.framework.util.i18n.gettext'
+    'horizon.framework.util.i18n.gettext',
+    'horizon.app.core.openstack-service-api.neutron'
   ];
 
-  function createTemplateSpecController($scope, gettext) {
+  function createTemplateSpecController($scope, gettext, neutron) {
     var ctrl = this;
+    ctrl.networks = [];
 
     ctrl.templateVersionOptions = [
       { label: gettext('1.6.0'), value: '1.6.0' }
     ];
 
+    init();
+
+    function init() {
+      neutron.getNetworks().success(onGetNetworks);
+    }
+
+    function onGetNetworks(response) {
+      ctrl.networks = response.items;
+    }
+
   }
 })();