the name needs to be word wrap

if the name is too long,
it will affect the display.

Change-Id: Ib1e35d32b0b3f82a0f949d94a2f4c8bcfd4eff41
Closes-Bug: #1801862

horizon/static/framework/widgets/table/hz-dynamic-table.html

@@ -78,7 +78,7 @@
             </span>
           </td>
           <td ng-repeat="column in config.columns"
-            class="rsp-p{$ column.priority $}"
+            class="rsp-p{$ column.priority $} {$ column.classes $}"
             ng-if="columnAllowed(column)">
             <hz-cell table="table" column="column" item="item"></hz-cell>
           </td>

horizon/templates/horizon/common/_detail_header.html

@@ -1,7 +1,7 @@
 <div class='page-header detail-header'>
   <div class="row">
     <div class="detail-title col-xs-12 col-sm-9">
-      <span class="h1">{{ page_title }}</span>
+      <span class="h1 word-wrap">{{ page_title }}</span>
     </div>
 
     <div class="detail-actions col-xs-12 col-sm-3 text-right">

openstack_dashboard/dashboards/identity/application_credentials/templates/application_credentials/_detail_overview.html

@@ -3,7 +3,7 @@
 <div class="detail">
   <dl class="dl-horizontal">
     <dt>{% trans "Name" %}</dt>
-    <dd data-display="{{ application_credential.name }}">{{ application_credential.name }}</dd>
+    <dd data-display="{{ application_credential.name }}" class="word-wrap">{{ application_credential.name }}</dd>
     <dt>{% trans "ID" %}</dt>
     <dd>{{ application_credential.id }}</dd>
     <dt>{% trans "Project ID" %}</dt>
@@ -23,7 +23,7 @@
         <tbody>
         {% for role in application_credential.roles %}
           <tr>
-            <td>{{ role.name }}</td>
+            <td class="word-wrap">{{ role.name }}</td>
             <td>{{ role.id }}</td>
             <td>{{ role.domain_id | default:_("-") }}</td>
         {% endfor %}

openstack_dashboard/dashboards/identity/static/dashboard/identity/roles/roles.module.js

@@ -49,7 +49,8 @@
       .append({
         id: 'name',
         priority: 1,
-        sortDefault: true
+        sortDefault: true,
+        classes: "word-wrap"
       })
       .append({
         id: 'id',

openstack_dashboard/dashboards/identity/users/templates/users/_detail_overview.html

@@ -8,10 +8,10 @@
     {% endif %}
     {% if domain_name %}
       <dt>{% trans "Domain Name" %}</dt>
-      <dd>{{ domain_name }}</dd>
+      <dd class="word-wrap">{{ domain_name }}</dd>
     {% endif %}
     <dt>{% trans "User Name" %}</dt>
-    <dd data-display="{{ user.name|default:user.id }}">{{ user.name }}</dd>
+    <dd data-display="{{ user.name|default:user.id }}" class="word-wrap">{{ user.name }}</dd>
     {% if description %}
       <dt>{% trans "Description" %}</dt>
       <dd>{{ description }}</dd>
@@ -28,7 +28,7 @@
     <dd>{{ user.project_id }}</dd>
     {% if tenant_name %}
       <dt>{% trans "Primary Project Name" %}</dt>
-      <dd>{{ tenant_name }}</dd>
+      <dd class="word-wrap">{{ tenant_name }}</dd>
     {% endif %}
     {% if extras %}
       {% for key, value in extras.items %}

openstack_dashboard/dashboards/project/cg_snapshots/templates/cg_snapshots/_detail_overview.html

@@ -3,7 +3,7 @@
 <div class="detail">
   <dl class="dl-horizontal">
     <dt>{% trans "Name" %}</dt>
-    <dd data-display="{{ cg_snapshot.name|default:cg_snapshot.id }}">{{ cg_snapshot.name }}</dd>
+    <dd data-display="{{ cg_snapshot.name|default:cg_snapshot.id }}" class="word-wrap">{{ cg_snapshot.name }}</dd>
     <dt>{% trans "ID" %}</dt>
     <dd>{{ cg_snapshot.id }}</dd>
     {% if cg_snapshot.description %}
@@ -13,7 +13,7 @@
     <dt>{% trans "Status" %}</dt>
     <dd>{{ cg_snapshot.status|capfirst }}</dd>
     <dt>{% trans "Consistency Group" %}</dt>
-    <dd>
+    <dd class="word-wrap">
       <a href="{% url 'horizon:project:cgroups:detail' cg_snapshot.consistencygroup_id %}">
         {% if cg_snapshot.cg_name %}
           {{ cg_snapshot.cg_name }}
@@ -28,7 +28,7 @@
   <hr class="header_rule">
   <dl class="dl-horizontal">
   {% for vol_type_names in cg_snapshot.volume_type_names %}
-    <dd>{{ vol_type_names }}</dd>
+    <dd class="word-wrap">{{ vol_type_names }}</dd>
   {% endfor %}
   </dl>
 
@@ -36,7 +36,7 @@
   <hr class="header_rule">
   <dl class="dl-horizontal">
   {% for vol_names in cg_snapshot.volume_names %}
-    <dd>{{ vol_names }}</dd>
+    <dd class="word-wrap">{{ vol_names }}</dd>
   {% empty %}
     <dd>
       <em>{% trans "No assigned volumes" %}</em>

openstack_dashboard/dashboards/project/cgroups/templates/cgroups/_detail_overview.html

@@ -3,7 +3,7 @@
 <div class="detail">
   <dl class="dl-horizontal">
     <dt>{% trans "Name" %}</dt>
-    <dd>{{ cgroup.name }}</dd>
+    <dd class="word-wrap">{{ cgroup.name }}</dd>
     <dt>{% trans "ID" %}</dt>
     <dd>{{ cgroup.id }}</dd>
     <dt>{% trans "Description" %}</dt>
@@ -16,7 +16,7 @@
   <hr class="header_rule">
   <dl class="dl-horizontal">
   {% for vol_type_names in cgroup.volume_type_names %}
-    <dd>{{ vol_type_names }}</dd>
+    <dd class="word-wrap">{{ vol_type_names }}</dd>
   {% endfor %}
   </dl>
 
@@ -24,7 +24,7 @@
   <hr class="header_rule">
   <dl class="dl-horizontal">
   {% for vol_names in cgroup.volume_names %}
-    <dd>{{ vol_names }}</dd>
+    <dd class="word-wrap">{{ vol_names }}</dd>
   {% empty %}
     <dd>
       <em>{% trans "No assigned volumes" %}</em>

openstack_dashboard/dashboards/project/instances/templates/instances/_detail_overview.html

@@ -3,7 +3,7 @@
 <div class="detail">
   <dl class="dl-horizontal">
     <dt>{% trans "Name" %}</dt>
-    <dd data-display="{{ instance.name|default:instance.id }}">{{ instance.name }}</dd>
+    <dd data-display="{{ instance.name|default:instance.id }}" class="word-wrap">{{ instance.name }}</dd>
     <dt>{% trans "Description" %}</dt>
     <dd>{{ instance.description|default:_("-") }}</dd>
     <dt>{% trans "ID" %}</dt>
@@ -46,7 +46,7 @@
   <dl class="dl-horizontal">
     {% if instance.full_flavor %}
       <dt>{% trans "Flavor Name" %}</dt>
-      <dd>{{ instance.full_flavor.name }}</dd>
+      <dd class="word-wrap">{{ instance.full_flavor.name }}</dd>
       <dt>{% trans "Flavor ID" %}</dt>
       <dd>{{ instance.full_flavor.id }}</dd>
       <dt>{% trans "RAM" %}</dt>
@@ -90,7 +90,7 @@
     <hr class="header_rule">
     <dl class="dl-horizontal">
       {% for group in instance.security_groups %}
-        <dt>{{ group.name }}</dt>
+        <dt class="word-wrap">{{ group.name }}</dt>
         <dd>
           <ul class="list-unstyled">
           {% for rule in group.rules %}
@@ -111,11 +111,11 @@
       <dt>{% trans "Key Name" %}</dt>
       {% trans "None" as default_key_name %}
       {% with formatted_default_key_name="<em>"|add:default_key_name|add:"</em>" %}
-        <dd>{{ instance.key_name|default:formatted_default_key_name }}</dd>
+        <dd class="word-wrap">{{ instance.key_name|default:formatted_default_key_name }}</dd>
       {% endwith %}
       {% if instance.image %}
         <dt>{% trans "Image Name" %}</dt>
-        <dd>
+        <dd class="word-wrap">
         {% if instance.image_name %}
           <a href="{{ instance.image_url }}">{{ instance.image_name }}</a>
         {% else %}
@@ -141,7 +141,7 @@
     <dl class="dl-horizontal">
     {% for volume in instance.volumes %}
         <dt>{% trans "Attached To" %}</dt>
-        <dd>
+        <dd class="word-wrap">
             {% url instance.volume_url volume.id as volume_url %}
             {% blocktrans trimmed with volume_label=volume.name|default:volume.id volume_device=volume.device %}
             <a href="{{ volume_url }}">{{ volume_label }}</a> on {{ volume_device }}

openstack_dashboard/dashboards/project/instances/tests.py

@@ -1454,7 +1454,7 @@ class InstanceDetailTests(InstanceTestBase):
         qs = "?%s=%s" % (tg.param_name, tg.get_tab("overview").get_id())
         res = self._get_instance_details(server, qs)
 
-        self.assertContains(res, "<dd>keyName</dd>", 1)
+        self.assertContains(res, '<dd class="word-wrap">keyName</dd>', 1)
         self.assertContains(res, "<dt>someMetaLabel</dt>", 1)
         self.assertContains(res, "<dd>someMetaData</dd>", 1)
         self.assertContains(res, "<dt>some&lt;b&gt;html&lt;/b&gt;label</dt>",

openstack_dashboard/dashboards/project/networks/templates/networks/_detail_overview.html

@@ -3,7 +3,7 @@
 <div class="info detail">
   <dl class="dl-horizontal">
     <dt title="{% trans 'Name' %}">{% trans "Name" %}</dt>
-    <dd>{{ network.name|default:_("None") }}</dd>
+    <dd class="word-wrap">{{ network.name|default:_("None") }}</dd>
     <dt title="{% trans 'ID' %}">{% trans "ID" %}</dt>
     <dd data-display="{{ network.name_or_id }}">{{ network.id|default:_("None") }}</dd>
     <dt title="{% trans 'Project ID' %}">{% trans "Project ID" %}</dt>

openstack_dashboard/dashboards/project/networks/templates/networks/ports/_detail_overview.html

@@ -3,11 +3,11 @@
 <div class="detail">
   <dl class="dl-horizontal">
     <dt>{% trans "Name" %}</dt>
-    <dd>{{ port.name|default:_("None") }}</dd>
+    <dd class="word-wrap">{{ port.name|default:_("None") }}</dd>
     <dt>{% trans "ID" %}</dt>
     <dd data-display="{{ port.name_or_id }}">{{ port.id|default:_("None") }}</dd>
     <dt>{% trans "Network Name" %}</dt>
-    <dd>{{ port.network_name|default:_("None") }}</dd>
+    <dd class="word-wrap">{{ port.network_name|default:_("None") }}</dd>
     <dt>{% trans "Network ID" %}</dt>
     <dd><a href="{{ port.network_url }}">{{ port.network_id|default:_("None") }}</a></dd>
     {% if port.tenant_id %}
@@ -25,7 +25,7 @@
       <dd>{{ port.port_security_enabled }}</dd>
     {% endif %}
     <dt>{% trans "DNS Name" %}</dt>
-    <dd>{{ port.dns_name|default:_("None") }}</dd>
+    <dd class="word-wrap">{{ port.dns_name|default:_("None") }}</dd>
     {% if port.mac_state %}
       <dt>{% trans "MAC Learning State" %}</dt>
       <dd>{{ port.mac_state }}</dd>
@@ -41,7 +41,7 @@
   {% for host in port.dns_assignment %}
     <dl class="dl-horizontal">
       <dt>{% trans "Hostname" %}</dt>
-      <dd>{{ host.hostname }}</dd>
+      <dd class="word-wrap">{{ host.hostname }}</dd>
       <dt>{% trans "IP Address" %}</dt>
       <dd>{{ host.ip_address }}</dd>
       <dt>{% trans "FQDN" %}</dt>
@@ -87,7 +87,7 @@
   <hr class="header_rule">
   <dl class="dl-horizontal">
     {% for group in port.security_groups %}
-      <dt>{{ group.name }}</dt>
+      <dt class="word-wrap">{{ group.name }}</dt>
       <dd>
         <ul class="list-unstyled">
         {% for rule in group.rules %}

openstack_dashboard/dashboards/project/networks/templates/networks/subnets/_detail_overview.html

@@ -3,11 +3,11 @@
 <div class="detail">
   <dl class="dl-horizontal">
     <dt title="{% trans 'Name' %}">{% trans "Name" %}</dt>
-    <dd>{{ subnet.name|default:_("None") }}</dd>
+    <dd class="word-wrap">{{ subnet.name|default:_("None") }}</dd>
     <dt title="{% trans 'ID' %}">{% trans "ID" %}</dt>
     <dd data-display="{{ subnet.name_or_id }}">{{subnet.id|default:_("None") }}</dd>
     <dt title="{% trans 'Network Name' %}">{% trans "Network Name" %}</dt>
-    <dd>{{ subnet.network_name|default:_("None") }}</dd>
+    <dd class="word-wrap">{{ subnet.network_name|default:_("None") }}</dd>
     <dt title="{% trans 'Network ID' %}">{% trans "Network ID" %}</dt>
     <dd><a href="{{ subnet.network_url }}">{{ subnet.network_id|default:_("None") }}</a></dd>
     <dt title="{% trans 'Subnet Pool' %}">{% trans "Subnet Pool" %}</dt>

openstack_dashboard/dashboards/project/routers/templates/routers/_detail_overview.html

@@ -3,7 +3,7 @@
 <div class="detail">
   <dl class="dl-horizontal">
     <dt>{% trans "Name" %}</dt>
-    <dd data-display="{{ router.name_or_id }}">{{ router.name|default:_("None") }}</dd>
+    <dd data-display="{{ router.name_or_id }}" class="word-wrap">{{ router.name|default:_("None") }}</dd>
     <dt>{% trans "ID" %}</dt>
     <dd>{{ router.id }}</dd>
     <dt>{% trans "Description" %}</dt>

openstack_dashboard/dashboards/project/snapshots/templates/snapshots/_detail_overview.html

@@ -3,7 +3,7 @@
 <div class="detail">
   <dl class="dl-horizontal">
     <dt>{% trans "Name" %}</dt>
-    <dd data-display="{{ snapshot.name|default:snapshot.id }}">{{ snapshot.name }}</dd>
+    <dd data-display="{{ snapshot.name|default:snapshot.id }}" class="word-wrap">{{ snapshot.name }}</dd>
     <dt>{% trans "ID" %}</dt>
     <dd>{{ snapshot.id }}</dd>
     {% if snapshot.description %}
@@ -13,7 +13,7 @@
     <dt>{% trans "Status" %}</dt>
     <dd>{{ snapshot.status|capfirst }}</dd>
     <dt>{% trans "Volume" %}</dt>
-    <dd>
+    <dd class="word-wrap">
       <a href="{{ snapshot.volume_url }}">
         {% if volume.name %}
           {{ volume.name }}

openstack_dashboard/dashboards/project/volumes/templates/volumes/_detail_overview.html

@@ -3,7 +3,7 @@
 <div class="detail">
   <dl class="dl-horizontal">
     <dt>{% trans "Name" %}</dt>
-    <dd data-display="{{ volume.name|default:volume.id }}">{{ volume.name }}</dd>
+    <dd data-display="{{ volume.name|default:volume.id }}" class="word-wrap">{{ volume.name }}</dd>
     <dt>{% trans "ID" %}</dt>
     <dd>{{ volume.id }}</dd>
     {% if volume.description %}
@@ -50,7 +50,7 @@
   <dl class="dl-horizontal">
   {% for attachment in volume.attachments %}
     <dt>{% trans "Attached To" %}</dt>
-    <dd>
+    <dd class="word-wrap">
       {% url detail_url.instance attachment.server_id as instance_url %}
       {% blocktrans trimmed with instance_name=attachment.instance.name device=attachment.device %}
       <a href="{{ instance_url }}">{{ instance_name }}</a> on {{ device }}
@@ -67,7 +67,7 @@
   <hr class="header_rule">
   <dl class="dl-horizontal">
     <dt>{% trans "Image" %}</dt>
-    <dd>
+    <dd class="word-wrap">
       {% url detail_url.image volume.volume_image_metadata.image_id as image_url %}
       <a href="{{ image_url }}">{{ volume.volume_image_metadata.image_name }}</a>
     </dd>
@@ -96,7 +96,7 @@
   </dl>
   <dl>
       <dt>{% trans "Name" %}</dt>
-      <dd>{{ volume.transfer.name }}</dd>
+      <dd class="word-wrap">{{ volume.transfer.name }}</dd>
   </dl>
   <dl>
       <dt>{% trans "Created" context "Created time" %}</dt>

openstack_dashboard/static/app/core/images/images.module.js

@@ -89,6 +89,7 @@
         id: 'name',
         priority: 1,
         sortDefault: true,
+        classes: "word-wrap",
         urlFunction: imagesService.getDetailsPath
       })
       .append({

openstack_dashboard/static/app/core/keypairs/keypairs.module.js

@@ -56,6 +56,7 @@
         id: 'name',
         priority: 1,
         sortDefault: true,
+        classes: "word-wrap",
         urlFunction: keypairsService.urlFunction
       })
       .append({

openstack_dashboard/static/app/core/server_groups/server-groups.module.js

@@ -52,6 +52,7 @@
         id: 'name',
         priority: 1,
         sortDefault: true,
+        classes: "word-wrap",
         urlFunction: serverGroupsService.getDetailsPath
       })
       // The name is not unique, so we need to show the ID to

openstack_dashboard/static/app/core/trunks/trunks.module.js

@@ -62,6 +62,7 @@
         id: 'name_or_id',
         priority: 1,
         sortDefault: true,
+        classes: "word-wrap",
         urlFunction: trunksService.getDetailsPath
       })
       .append({