You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@brooklyn.apache.org by GitBox <gi...@apache.org> on 2021/09/01 09:41:22 UTC

[GitHub] [brooklyn-ui] jathanasiou commented on a change in pull request #274: Added proper display of locations to avoid confusions

jathanasiou commented on a change in pull request #274:
URL: https://github.com/apache/brooklyn-ui/pull/274#discussion_r699208577



##########
File path: ui-modules/app-inspector/app/views/main/inspect/summary/summary.template.html
##########
@@ -86,11 +86,19 @@ <h2 ng-if="vm.entity" class="entity-name">
 
         <div ng-if="vm.location.items">
             <div ng-if="vm.location.items.length !== 0 || !vm.location.multi">
-                <p>This entity is running on <em><ng-pluralize count="vm.location.items.length" when="{'0': 'no locations', 'one': '{} location', 'other': '{} locations'}"></ng-pluralize></em></p>
+                <p>This entity is associated with <em><ng-pluralize count="vm.location.items.length" when="{'0': 'no locations', 'one': 'this location {} ', 'other': 'these locations'}"></ng-pluralize></em></p>
                 <ul>
                     <li ng-repeat="item in vm.location.items track by item.id">
-                        <strong>{{item.config['spec.final'] | specToLabel:vm.metadata}}</strong>
-                        <span ng-if="item.config.availabilityZone">in <code>{{item.config.availabilityZone}}</code> availability zone</span>
+                        <span ng-if="item.id"> Location Id: <strong>{{item.id | specToLabel:vm.metadata}}</strong> </span>
+                        <ul>
+                            <li ng-if="item.name"> <span> Name:  {{item.name | specToLabel:vm.metadata}}</span> </li>
+                            <li ng-if="item.config['spec.final']"> <span> Environment:  {{item.config['spec.final'] | specToLabel:vm.metadata}}</span> </li>
+                            <li ng-if="item.spec"> <span> Spec:  {{item.spec | specToLabel:vm.metadata}}</span> </li>
+                            <li ng-if="item.type"> <span> Type:  {{item.type | specToLabel:vm.metadata}}</span> </li>
+                            <li ng-if="item.config['address']"> <span> Address:  {{item.config['address'] | specToLabel:vm.metadata}}</span> </li>
+                            <li ng-if="item.config['endpoint']"> <span> Endpoint:  {{item.config['endpoint'] | specToLabel:vm.metadata}}</span> </li>

Review comment:
       Should be equivalent to `item.config.address` and `.endpoint`.

##########
File path: ui-modules/app-inspector/app/views/main/inspect/summary/summary.template.html
##########
@@ -86,11 +86,19 @@ <h2 ng-if="vm.entity" class="entity-name">
 
         <div ng-if="vm.location.items">
             <div ng-if="vm.location.items.length !== 0 || !vm.location.multi">
-                <p>This entity is running on <em><ng-pluralize count="vm.location.items.length" when="{'0': 'no locations', 'one': '{} location', 'other': '{} locations'}"></ng-pluralize></em></p>
+                <p>This entity is associated with <em><ng-pluralize count="vm.location.items.length" when="{'0': 'no locations', 'one': 'this location {} ', 'other': 'these locations'}"></ng-pluralize></em></p>
                 <ul>
                     <li ng-repeat="item in vm.location.items track by item.id">
-                        <strong>{{item.config['spec.final'] | specToLabel:vm.metadata}}</strong>
-                        <span ng-if="item.config.availabilityZone">in <code>{{item.config.availabilityZone}}</code> availability zone</span>
+                        <span ng-if="item.id"> Location Id: <strong>{{item.id | specToLabel:vm.metadata}}</strong> </span>
+                        <ul>
+                            <li ng-if="item.name"> <span> Name:  {{item.name | specToLabel:vm.metadata}}</span> </li>

Review comment:
       Consider using CSS rules instead for spacing/padding eg
   
   ```
   <ul class="location-items">
       <li ng-repeat="item in vm.location.items track by item.id">
           <span ng-if="item.id"> Location Id: <strong>{{item.id | specToLabel:vm.metadata}}</strong> </span>
           <ul>
               <li ng-if="item.name"> <span> Name:  {{item.name | specToLabel:vm.metadata}}</span> </li>
   ...
   ```
   
   ```
   .location-items {
       li > span {
           padding: 0px 1em;
       }
   }
   ```

##########
File path: ui-modules/app-inspector/app/views/main/inspect/summary/summary.template.html
##########
@@ -86,11 +86,19 @@ <h2 ng-if="vm.entity" class="entity-name">
 
         <div ng-if="vm.location.items">
             <div ng-if="vm.location.items.length !== 0 || !vm.location.multi">
-                <p>This entity is running on <em><ng-pluralize count="vm.location.items.length" when="{'0': 'no locations', 'one': '{} location', 'other': '{} locations'}"></ng-pluralize></em></p>
+                <p>This entity is associated with <em><ng-pluralize count="vm.location.items.length" when="{'0': 'no locations', 'one': 'this location {} ', 'other': 'these locations'}"></ng-pluralize></em></p>
                 <ul>
                     <li ng-repeat="item in vm.location.items track by item.id">
-                        <strong>{{item.config['spec.final'] | specToLabel:vm.metadata}}</strong>
-                        <span ng-if="item.config.availabilityZone">in <code>{{item.config.availabilityZone}}</code> availability zone</span>
+                        <span ng-if="item.id"> Location Id: <strong>{{item.id | specToLabel:vm.metadata}}</strong> </span>
+                        <ul>
+                            <li ng-if="item.name"> <span> Name:  {{item.name | specToLabel:vm.metadata}}</span> </li>

Review comment:
       Consider using CSS rules instead for spacing/padding eg
   
   ```
   <ul class="location-items">
       <li ng-repeat="item in vm.location.items track by item.id">
           <span ng-if="item.id">Location Id: <strong>{{item.id | specToLabel:vm.metadata}}</strong></span>
           <ul>
               <li ng-if="item.name"><span> Name:  {{item.name | specToLabel:vm.metadata}}</span></li>
   ...
   ```
   
   ```
   .location-items {
       li > span {
           padding: 0px 1em;
       }
   }
   ```

##########
File path: ui-modules/app-inspector/app/views/main/inspect/summary/summary.template.html
##########
@@ -86,11 +86,19 @@ <h2 ng-if="vm.entity" class="entity-name">
 
         <div ng-if="vm.location.items">
             <div ng-if="vm.location.items.length !== 0 || !vm.location.multi">
-                <p>This entity is running on <em><ng-pluralize count="vm.location.items.length" when="{'0': 'no locations', 'one': '{} location', 'other': '{} locations'}"></ng-pluralize></em></p>
+                <p>This entity is associated with <em><ng-pluralize count="vm.location.items.length" when="{'0': 'no locations', 'one': 'this location {} ', 'other': 'these locations'}"></ng-pluralize></em></p>
                 <ul>
                     <li ng-repeat="item in vm.location.items track by item.id">
-                        <strong>{{item.config['spec.final'] | specToLabel:vm.metadata}}</strong>
-                        <span ng-if="item.config.availabilityZone">in <code>{{item.config.availabilityZone}}</code> availability zone</span>
+                        <span ng-if="item.id"> Location Id: <strong>{{item.id | specToLabel:vm.metadata}}</strong> </span>
+                        <ul>
+                            <li ng-if="item.name"> <span> Name:  {{item.name | specToLabel:vm.metadata}}</span> </li>

Review comment:
       Consider using CSS rules instead for spacing/padding eg
   
   ```
   <ul class="location-items">
       <li ng-repeat="item in vm.location.items track by item.id">
           <span ng-if="item.id">Location Id: <strong>{{item.id | specToLabel:vm.metadata}}</strong></span>
           <ul>
               <li ng-if="item.name"><span> Name:  {{item.name | specToLabel:vm.metadata}}</span></li>
   ...
   ```
   
   ```
   .location-items {
       li > span {
           padding: 0px 1em;
       }
   }
   ```
   
   Same logic could be applied to the double spaces by further HTML element structuring, if necessary.

##########
File path: ui-modules/app-inspector/app/views/main/inspect/summary/summary.template.html
##########
@@ -86,11 +86,19 @@ <h2 ng-if="vm.entity" class="entity-name">
 
         <div ng-if="vm.location.items">
             <div ng-if="vm.location.items.length !== 0 || !vm.location.multi">
-                <p>This entity is running on <em><ng-pluralize count="vm.location.items.length" when="{'0': 'no locations', 'one': '{} location', 'other': '{} locations'}"></ng-pluralize></em></p>
+                <p>This entity is associated with <em><ng-pluralize count="vm.location.items.length" when="{'0': 'no locations', 'one': 'this location {} ', 'other': 'these locations'}"></ng-pluralize></em></p>
                 <ul>
                     <li ng-repeat="item in vm.location.items track by item.id">
-                        <strong>{{item.config['spec.final'] | specToLabel:vm.metadata}}</strong>
-                        <span ng-if="item.config.availabilityZone">in <code>{{item.config.availabilityZone}}</code> availability zone</span>
+                        <span ng-if="item.id"> Location Id: <strong>{{item.id | specToLabel:vm.metadata}}</strong> </span>
+                        <ul>
+                            <li ng-if="item.name"> <span> Name:  {{item.name | specToLabel:vm.metadata}}</span> </li>
+                            <li ng-if="item.config['spec.final']"> <span> Environment:  {{item.config['spec.final'] | specToLabel:vm.metadata}}</span> </li>
+                            <li ng-if="item.spec"> <span> Spec:  {{item.spec | specToLabel:vm.metadata}}</span> </li>
+                            <li ng-if="item.type"> <span> Type:  {{item.type | specToLabel:vm.metadata}}</span> </li>
+                            <li ng-if="item.config['address']"> <span> Address:  {{item.config['address'] | specToLabel:vm.metadata}}</span> </li>
+                            <li ng-if="item.config['endpoint']"> <span> Endpoint:  {{item.config['endpoint'] | specToLabel:vm.metadata}}</span> </li>

Review comment:
       @iuliana not really but the dot syntax is considered the standard for JSON-like structures. They have no functional difference but essentially
   - dots look simpler
   - brackets allow for complex or dynamic keys eg `myObj[getKey()]`
   
   Brackets basically hint that you're either accessing an array or have complex index keys and need that syntax. For the sake of uniformity I consider dots better with brackets used only on these exceptional cases, but that's a bit subjective .




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: dev-unsubscribe@brooklyn.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org