Service tags

components/app-framework/bower.json

@@ -25,6 +25,7 @@
     "jquery": "~1.11.3",
     "lodash": "~4.0.1",
     "ngSmoothScroll": "~2.0.0",
+    "ng-tags-input": "~3.2.0",
     "angular-cookies": "1.4",
     "angular-utf8-base64": "~0.0.5",
     "SpinKit": "spinkit#~1.2.5"

components/app-framework/src/framework.module.js

@@ -10,6 +10,7 @@
       'app.framework.widgets',
       'angular-websocket',
       'ngAnimate',
-      'toastr'
+      'toastr',
+      'ngTagsInput'
     ]);
 })();

components/app-framework/src/utils/focusable-input/focusable-input.directive.js

@@ -27,8 +27,10 @@
 
         element.find('input').on('focus', handleOnFocus);
         element.find('select-input').on('focus', handleOnFocus);
+        element.find('tags-input').on('focus', handleOnFocus);
         element.find('input').on('blur', handleOnBlur);
         element.find('select-input').on('blur', handleOnBlur);
+        element.find('tags-input').on('blur', handleOnBlur);
 
         function handleOnFocus() {
           element.addClass(focusedClass);

components/app-framework/src/widgets/async-task-dialog/async-task-dialog.html

@@ -1,5 +1,5 @@
 <div class="async-dialog">
-  <div class="detail-view-content no-margin" ng-keydown="$event.keyCode === 13 && !asyncTaskDialogCtrl.disableSubmit() && asyncTaskDialogCtrl.invokeAction()">
+  <div class="detail-view-content no-margin" ng-keydown="$event.keyCode === 13 && asyncTaskDialogCtrl.canUseEnter($event) && !asyncTaskDialogCtrl.disableSubmit() && asyncTaskDialogCtrl.invokeAction()">
     <div ng-if="asyncTaskDialogCtrl.content.title" class="detail-view-header">
       <h4 translate translate-values="{{asyncTaskDialogCtrl.content.titleTranslateValues}}">{{asyncTaskDialogCtrl.content.title}}</h4>
     </div>

components/app-framework/src/widgets/async-task-dialog/async-task-dialog.service.js

@@ -141,6 +141,11 @@
     vm.hasErrorMessage = hasErrorMessage;
     vm.isFormInvalid = isFormInvalid;
 
+    // Ignore enter if event has been marked with preventDefault()
+    vm.canUseEnter = function (ev) {
+      return !ev.isDefaultPrevented();
+    };
+
     /**
      * @name invokeAction
      * @description invokes the asyn task

components/app-framework/src/widgets/tags-input/tags-input.scss

@@ -0,0 +1,49 @@
+.tags-input-field.form-group {
+  height: auto;
+
+  // Override default styles for the tags-input directive
+  tags-input {
+
+    .host {
+      margin: 0;
+      min-height: 32px;
+      outline: 0;
+    }
+
+    .tags {
+      box-shadow: none;
+      border: 0;
+      padding: 0;
+
+      &.focused {
+        outline: 0;
+        border: 0;
+        box-shadow: none;
+      }
+
+      input.input {
+        font-family: $font-family-base;
+        font-size: $font-size-base;
+        height: 26px;
+        margin-bottom: 0;
+      }
+
+      .tag-item {
+        background: none;
+        font-family: $font-family-base;
+        font-size: $font-size-base;
+        margin: 2px 6px 2px 0;
+
+        &.selected {
+          background: $suse-primary;
+        }
+
+        ti-tag-item {
+          ng-include {
+            margin: 0 !important;
+          }
+        }
+      }
+    }
+  }
+}

components/app-framework/src/widgets/widgets.scss

@@ -24,6 +24,8 @@
 @import "status-indicator/status-indicator";
 @import "tabbed-nav/tabbed-nav";
 @import "table-inline-message/table-inline-message";
+@import "tags-input/tags-input";
 @import "toaster/toast";
 @import "wizard/wizard";
 @import "auto-update/auto-update";
+

components/cloud-foundry/frontend/i18n/en_US/app.json

@@ -191,7 +191,8 @@
             "type": "Type",
             "description": "Description",
             "created-date": "Date created",
-            "env-variables": "Show environment variables"
+            "env-variables": "Show environment variables",
+            "tags": "Tags"
           },
           "messages": {
             "no-services": "This application has no bound service instances.",
@@ -274,7 +275,8 @@
               "title": "Choose Existing Instance",
               "name-label": "Name",
               "plan-label": "Plan",
-              "apps-label": "Apps Attached"
+              "apps-label": "Apps Attached",
+              "tags-label": "Tags"
             },
             "notifications": {
               "success": "The '{{ service }}' service has been successfully attached to application '{{ appName }}'",

components/cloud-foundry/frontend/i18n/en_US/space.json

@@ -58,7 +58,8 @@
             "type": "type",
             "plan": "plan",
             "attached": "application attached",
-            "action": "@:cf.space-info.tabs.column.action"
+            "action": "@:cf.space-info.tabs.column.action",
+            "tags": "tags"
           },
           "none": "You have no service instances",
           "show-all-button": "@:cf.space-info.tabs.show-all-button"

components/cloud-foundry/frontend/src/view/applications/application/services/service-card/service-card.html

@@ -27,6 +27,17 @@
             {{ ::serviceCardCtrl.service.metadata.created_at | momentDateFormat }}
           </div>
         </div>
+        <div class="service-catalogue-card__meta-split">
+          <div translate class="service-catalogue-card__meta-left">
+            app.app-info.app-tabs.services.labels.tags
+          </div>
+          <div class="service-catalogue-card__meta-right">
+            <div ng-repeat="tag in serviceCardCtrl.service.entity.tags">
+              <div class="service-catalogue-card__tag">{{ tag }}</div>
+            </div>
+            <span ng-if="serviceCardCtrl.service.entity.tags.length === 0">-</span>
+          </div>
+        </div>
       </div>
       <div class="service-catalogue-card__icon">
         <img ng-src="{{ serviceCardCtrl.service.entity.extra.ImageURL }}" default-image default-image-src="/images/services/App_services_72.png"

components/cloud-foundry/frontend/src/view/applications/application/services/service-card/service-card.scss

@@ -44,6 +44,13 @@
   &__env {
     padding-top: 10px;
   }
+  &__tag {
+    border: 1px solid $input-border;
+    padding: 2px 6px;
+    border-radius: 4px;
+    margin-bottom: 2px;
+    display: inline-block;
+  }
 }
 .services-gallery-card {
   height: 100%;

components/cloud-foundry/frontend/src/view/applications/workflows/add-service-workflow/add-service-workflow.scss

@@ -36,8 +36,8 @@
 
   .select-instance-tabs {
 
-    min-height: 200px;
-    
+    min-height: 264px;
+
     .nav.nav-tabs {
       .uib-tab > a {
         background: transparent;

components/cloud-foundry/frontend/src/view/applications/workflows/add-service-workflow/instance.html

@@ -17,6 +17,7 @@
             <th class="select-col"></th>
             <th translate>.name-label</th>
             <th translate>.plan-label</th>
+            <th translate>.tags-label</th>
             <th translate>.apps-label</th>
           </tr>
         </thead>
@@ -29,10 +30,15 @@
             </td>
             <td>{{ instance.entity.name }}</td>
             <td>{{ wizardCtrl.options.servicePlanMap[instance.entity.service_plan_guid].entity.name }}</td>
+            <td>
+              <div ng-repeat="tag in instance.entity.tags">
+                <div>{{ tag }}</div>
+              </div>
+            </td>
             <td>{{ instance.entity.service_bindings.length || '-' }}</td>
           </tr>
           <tr class="no-bindable-instances" ng-if="wizardCtrl.options.instances.length === 0">
-            <td colspan="4" translate-namespace="app.app-info.app-tabs.services.bind.no-instances">
+            <td colspan="5" translate-namespace="app.app-info.app-tabs.services.bind.no-instances">
               <p translate>.title</p>
               <p translate>.prompt</p>
               <input type="hidden" required ng-model="wizardCtrl.options.userInput.ignored"></input>
@@ -41,7 +47,7 @@
         </tbody>
         <tfoot>
           <td></td>
-          <td colspan="3" class="td-create-service">
+          <td colspan="4" class="td-create-service">
             <button class="btn btn-sm btn-link" ng-click="wizardCtrl.options.createServiceBinding()">
             <i class="material-icons app-icon-sm add-icon">add_circle_outline</i>
             <span translate>app.app-info.app-tabs.services.bind.create</span>

components/cloud-foundry/frontend/src/view/applications/workflows/create-service-instance/create-service-instance.html

@@ -24,4 +24,13 @@
       tabindex="0" required>
     </select-input>
   </div>
+
+  <div class="form-group tags-input-field" focusable-input>
+    <label class="control-label" translate>Service Instance Tags</label>
+    <tags-input
+      min-length="1"
+      ng-model="asyncTaskDialogCtrl.context.options.userInput.tags"
+    ></tags-input>
+  </div>
+
 </form>

components/cloud-foundry/frontend/src/view/applications/workflows/create-service-instance/create-servince-instance.service.js

@@ -30,7 +30,8 @@
       var newInstance = {
         name: userInput.name,
         service_plan_guid: userInput.plan.metadata.guid,
-        space_guid: spaceGuid
+        space_guid: spaceGuid,
+        tags: _.map(userInput.tags, function (tag) { return tag.text; })
       };
 
       return instanceModel.createServiceInstance(cnsiGuid, newInstance)

components/cloud-foundry/frontend/src/view/dashboard/cluster/organization/space/detail/services/space-services.html

@@ -18,6 +18,7 @@
             <th st-sort="entity.name" st-sort-default="true" st-skip-natural="true" translate>cf.space-info.tabs.services.columns.services</th>
             <th st-sort="entity.type" st-skip-natural="true" translate>cf.space-info.tabs.services.columns.type</th>
             <th translate>cf.space-info.tabs.services.columns.plan</th>
+            <th translate>cf.space-info.tabs.services.columns.tags</th>
             <th translate>cf.space-info.tabs.services.columns.attached</th>
             <th translate ng-if="spaceSrvsCtrl.canDeleteOrUnbind">cf.space-info.tabs.services.columns.action</th>
           </tr>
@@ -28,6 +29,12 @@
             <td>{{ instance.entity.name }}</td>
             <td>{{ instance.entity.service_plan.entity.service.entity.label }}</td>
             <td>{{ instance.entity.service_plan.entity.name }}</td>
+            <td>
+              <div ng-repeat="tag in instance.entity.tags">
+                <div class="service-catalogue-card__tag">{{ tag }}</div>
+              </div>
+              <span ng-if="instance.entity.tags.length === 0">-</span>
+            </td>
             <td>{{ spaceSrvsCtrl.createApplicationList(instance.entity.service_bindings) }}</td>
             <td ng-if="spaceSrvsCtrl.canDeleteOrUnbind">
               <actions-menu actions="spaceSrvsCtrl.actionsPerSI[instance.metadata.guid]"