feat: table representation improved. made the table rows clickable an…

…d removed view buttons on all entity tables.
MeToCo · Aug 14, 2024 · 8fc327e · 8fc327e
1 parent 6e2ba0f
commit 8fc327e
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 137 deletions.
diff --git a/...r-ui/src/main/webapp/app/entities/message-header/list/message-header-table.component.html b/...r-ui/src/main/webapp/app/entities/message-header/list/message-header-table.component.html
@@ -1,5 +1,5 @@
 <div class="table-responsive table-entities" id="entities" *ngIf="sortedMessageHeaders && sortedMessageHeaders.length > 0">
-  <table class="table table-striped" aria-describedby="page-heading">
+  <table class="table table-striped table-hover" aria-describedby="page-heading">
     <thead>
       <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="emitSortChange()">
         <th scope="col" jhiSortBy="headerId">
@@ -38,11 +38,10 @@
             <fa-icon class="p-1" icon="sort"></fa-icon>
           </div>
         </th>
-        <th scope="col"></th>
       </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let messageHeader of sortedMessageHeaders; trackBy: trackId" data-cy="entityTable">
+      <tr *ngFor="let messageHeader of sortedMessageHeaders; trackBy: trackId" data-cy="entityTable" class='clickable-row' [routerLink]="['/message-header', messageHeader.headerId, 'view']">
         <td>
           <a [routerLink]="['/message-header', messageHeader.headerId, 'view']">{{ messageHeader.headerId }}</a>
         </td>
@@ -55,16 +54,6 @@
         </td>
         <td *ngIf="standalone">{{ messageHeader.createdDate | formatMediumDatetime }}</td>
         <td *ngIf="standalone">{{ messageHeader.lastModifiedDate | formatMediumDatetime }}</td>
-        <td class="text-end">
-          <div class="btn-group">
-            <a [routerLink]="['/message-header', messageHeader.headerId, 'view']">
-              <button type="button" class="btn btn-info btn-sm" data-cy="entityDetailsButton">
-                <fa-icon icon="eye"></fa-icon>
-                <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
-              </button>
-            </a>
-          </div>
-        </td>
       </tr>
     </tbody>
   </table>

diff --git a/simulator-ui/src/main/webapp/app/entities/message/list/message.component.html b/simulator-ui/src/main/webapp/app/entities/message/list/message.component.html
@@ -21,7 +21,7 @@ <h2 id="page-heading" data-cy="MessageHeading">
   </div>
 
   <div class="table-responsive table-entities" id="entities" *ngIf="messages && messages.length > 0">
-    <table class="table table-striped" aria-describedby="page-heading">
+    <table class="table table-striped table-hover" aria-describedby="page-heading">
       <thead>
         <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="navigateToWithComponentValues()">
           <th scope="col" jhiSortBy="messageId">
@@ -70,7 +70,7 @@ <h2 id="page-heading" data-cy="MessageHeading">
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let message of messages; trackBy: trackId" data-cy="entityTable">
+        <tr *ngFor="let message of messages; trackBy: trackId" data-cy="entityTable" class='clickable-row' [routerLink]="['/message', message.messageId, 'view']">
           <td>
             <a [routerLink]="['/message', message.messageId, 'view']">{{ message.messageId }}</a>
           </td>
@@ -85,7 +85,7 @@ <h2 id="page-heading" data-cy="MessageHeading">
           <td>{{ message.createdDate | formatMediumDatetime }}</td>
           <td>{{ message.lastModifiedDate | formatMediumDatetime }}</td>
           <td class="text-end">
-            <div class="btn-group">
+            <!-- //NOSONAR --><div class="btn-group" (click)="$event.stopPropagation()">
               <a [routerLink]="['/message-header']" [queryParams]="{ 'filter[messageId.in]': message.messageId }">
                 <button type="button" class="btn btn-info btn-sm" data-cy="filterOtherEntityButton">
                   <fa-icon icon="heading"></fa-icon>
@@ -97,12 +97,6 @@ <h2 id="page-heading" data-cy="MessageHeading">
                   >
                 </button>
               </a>
-              <a [routerLink]="['/message', message.messageId, 'view']">
-                <button type="button" class="btn btn-info btn-sm" data-cy="entityDetailsButton">
-                  <fa-icon icon="eye"></fa-icon>
-                  <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
-                </button>
-              </a>
             </div>
           </td>
         </tr>

diff --git a/...lator-ui/src/main/webapp/app/entities/scenario-action/list/scenario-action.component.html b/...lator-ui/src/main/webapp/app/entities/scenario-action/list/scenario-action.component.html
@@ -21,7 +21,7 @@ <h2 id="page-heading" data-cy="ScenarioActionHeading">
   </div>
 
   <div class="table-responsive table-entities" id="entities" *ngIf="scenarioActions && scenarioActions.length > 0">
-    <table class="table table-striped" aria-describedby="page-heading">
+    <table class="table table-striped table-hover" aria-describedby="page-heading">
       <thead>
         <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="navigateToWithComponentValues()">
           <th scope="col" jhiSortBy="actionId">
@@ -54,11 +54,10 @@ <h2 id="page-heading" data-cy="ScenarioActionHeading">
               <fa-icon class="p-1" icon="sort"></fa-icon>
             </div>
           </th>
-          <th scope="col"></th>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let scenarioAction of scenarioActions; trackBy: trackId" data-cy="entityTable">
+        <tr *ngFor="let scenarioAction of scenarioActions; trackBy: trackId" class='clickable-row'  data-cy="entityTable" [routerLink]="['/scenario-action', scenarioAction.actionId, 'view']">
           <td>
             <a [routerLink]="['/scenario-action', scenarioAction.actionId, 'view']">{{ scenarioAction.actionId }}</a>
           </td>
@@ -72,16 +71,6 @@ <h2 id="page-heading" data-cy="ScenarioActionHeading">
               }}</a>
             </div>
           </td>
-          <td class="text-end">
-            <div class="btn-group">
-              <a [routerLink]="['/scenario-action', scenarioAction.actionId, 'view']">
-                <button type="submit" class="btn btn-info btn-sm" data-cy="entityDetailsButton">
-                  <fa-icon icon="eye"></fa-icon>
-                  <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
-                </button>
-              </a>
-            </div>
-          </td>
         </tr>
       </tbody>
     </table>

diff --git a/.../main/webapp/app/entities/scenario-execution/detail/scenario-actions-table.component.html b/.../main/webapp/app/entities/scenario-execution/detail/scenario-actions-table.component.html
@@ -1,5 +1,5 @@
 <div class="table-responsive table-entities" id="entities" *ngIf="sortedActions && sortedActions.length > 0; else noParameters">
-  <table class="table table-striped" aria-describedby="page-heading">
+  <table class="table table-striped table-hover" aria-describedby="page-heading">
     <thead>
       <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="sortActions()">
         <th scope="col" jhiSortBy="actionId">
@@ -26,27 +26,16 @@
             <fa-icon class="p-1" icon="sort"></fa-icon>
           </div>
         </th>
-        <th scope="col"></th>
       </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let scenarioAction of sortedActions; trackBy: trackId" data-cy="entityTable">
+      <tr *ngFor="let scenarioAction of sortedActions; trackBy: trackId" data-cy="entityTable" class='clickable-row'  [routerLink]="['/scenario-action', scenarioAction.actionId, 'view']">
         <td>
           <a [routerLink]="['/scenario-action', scenarioAction.actionId, 'view']">{{ scenarioAction.actionId }}</a>
         </td>
         <td>{{ scenarioAction.name }}</td>
         <td>{{ scenarioAction.startDate | formatMediumDatetime }}</td>
         <td>{{ scenarioAction.endDate | formatMediumDatetime }}</td>
-        <td class="text-end">
-          <div class="btn-group">
-            <a [routerLink]="['/scenario-action', scenarioAction.actionId, 'view']">
-              <button type="submit" class="btn btn-info btn-sm" data-cy="entityDetailsButton">
-                <fa-icon icon="eye"></fa-icon>
-                <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
-              </button>
-            </a>
-          </div>
-        </td>
       </tr>
     </tbody>
   </table>

diff --git a/...main/webapp/app/entities/scenario-execution/detail/scenario-messages-table.component.html b/...main/webapp/app/entities/scenario-execution/detail/scenario-messages-table.component.html
@@ -1,5 +1,5 @@
 <div class="table-responsive table-entities" id="entities" *ngIf="sortedMessages && sortedMessages.length > 0; else noMessages">
-  <table class="table table-striped" aria-describedby="page-heading">
+  <table class="table table-striped table-hover" aria-describedby="page-heading">
     <thead>
       <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="sortMessages()">
         <th scope="col" jhiSortBy="messageId">
@@ -26,19 +26,18 @@
             <fa-icon class="p-1" icon="sort"></fa-icon>
           </div>
         </th>
-        <th scope="col"></th>
       </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let message of sortedMessages; trackBy: trackId">
+      <tr *ngFor="let message of sortedMessages; trackBy: trackId" class='clickable-row' [routerLink]="['/message', message.messageId, 'view']">
         <td>
           <a [routerLink]="['/message', message.messageId, 'view']">{{ message.messageId }}</a>
         </td>
         <td>{{ message.direction }}</td>
         <td>{{ message.payload }}</td>
         <td>{{ message.createdDate | formatMediumDatetime }}</td>
         <td class="text-end">
-          <div class="btn-group">
+          <!-- //NOSONAR --><div class="btn-group" (click)="$event.stopPropagation()">
             <a [routerLink]="['/message-header']" [queryParams]="{ 'filter[messageId.in]': message.messageId }">
               <button type="button" class="btn btn-info btn-sm">
                 <fa-icon icon="heading"></fa-icon>
@@ -50,12 +49,6 @@
                 >
               </button>
             </a>
-            <a [routerLink]="['/message', message.messageId, 'view']">
-              <button type="button" class="btn btn-info btn-sm">
-                <fa-icon icon="eye"></fa-icon>
-                <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
-              </button>
-            </a>
           </div>
         </td>
       </tr>

diff --git a/...in/webapp/app/entities/scenario-execution/detail/scenario-parameters-table.component.html b/...in/webapp/app/entities/scenario-execution/detail/scenario-parameters-table.component.html
@@ -1,5 +1,5 @@
 <div class="table-responsive table-entities" id="entities" *ngIf="sortedParameters && sortedParameters.length > 0; else noParameters">
-  <table class="table table-striped" aria-describedby="page-heading">
+  <table class="table table-striped table-hover" aria-describedby="page-heading">
     <thead>
       <th scope="col" jhiSortBy="parameterId">
         <div class="d-flex">
@@ -25,26 +25,15 @@
           <fa-icon class="p-1" icon="sort"></fa-icon>
         </div>
       </th>
-      <th scope="col"></th>
     </thead>
     <tbody>
-      <tr *ngFor="let scenarioParameter of sortedParameters; trackBy: trackId">
+      <tr *ngFor="let scenarioParameter of sortedParameters; trackBy: trackId" class='clickable-row' [routerLink]="['/scenario-parameter', scenarioParameter.parameterId, 'view']">
         <td>
           <a [routerLink]="['/scenario-parameter', scenarioParameter.parameterId, 'view']">{{ scenarioParameter.parameterId }}</a>
         </td>
         <td>{{ scenarioParameter.name }}</td>
         <td>{{ scenarioParameter.controlType }}</td>
         <td>{{ scenarioParameter.value }}</td>
-        <td class="text-end">
-          <div class="btn-group">
-            <a [routerLink]="['/scenario-parameter', scenarioParameter.parameterId, 'view']">
-              <button type="button" class="btn btn-info btn-sm">
-                <fa-icon icon="eye"></fa-icon>
-                <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
-              </button>
-            </a>
-          </div>
-        </td>
       </tr>
     </tbody>
   </table>

diff --git a/...ui/src/main/webapp/app/entities/scenario-execution/list/scenario-execution.component.html b/...ui/src/main/webapp/app/entities/scenario-execution/list/scenario-execution.component.html
@@ -20,8 +20,9 @@ <h2 id="page-heading" data-cy="ScenarioExecutionHeading" *ngIf="!hideTitle">
     <span jhiTranslate="citrusSimulatorApp.scenarioExecution.home.notFound">No Scenario Executions found</span>
   </div>
 
-  <div class="table-responsive table-entities" id="entities" *ngIf="scenarioExecutions && scenarioExecutions.length > 0">
-    <table class="table table-striped" aria-describedby="page-heading">
+  <div class="table-responsive  table-entities" id="entities"
+       *ngIf="scenarioExecutions && scenarioExecutions.length > 0">
+    <table class="table table-striped table-hover" aria-describedby="page-heading">
       <thead>
         <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="navigateToWithComponentValues()">
           <th scope="col" jhiSortBy="executionId">
@@ -48,37 +49,36 @@ <h2 id="page-heading" data-cy="ScenarioExecutionHeading" *ngIf="!hideTitle">
               <fa-icon class="p-1" icon="sort"></fa-icon>
             </div>
           </th>
-          <th scope="col" jhiSortBy="status">
+          <th scope="col">
             <div class="d-flex">
               <span jhiTranslate="citrusSimulatorApp.testResult.status">Status</span>
-              <fa-icon class="p-1" icon="sort"></fa-icon>
             </div>
           </th>
-          <th scope="col" jhiSortBy="errorMessage">
+          <th class="w-50" scope="col">
             <div class="d-flex">
               <span jhiTranslate="citrusSimulatorApp.testResult.errorMessage">Error Message</span>
-              <fa-icon class="p-1" icon="sort"></fa-icon>
             </div>
           </th>
-          <th scope="col"></th>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let scenarioExecution of scenarioExecutions; trackBy: trackId" data-cy="entityTable">
+        <tr *ngFor="let scenarioExecution of scenarioExecutions; trackBy: trackId" data-cy="entityTable"
+            class='clickable-row' [routerLink]="['/scenario-execution', scenarioExecution.executionId, 'view']">
           <td>
             <a [routerLink]="['/scenario-execution', scenarioExecution.executionId, 'view']">{{ scenarioExecution.executionId }}</a>
           </td>
           <td>{{ scenarioExecution.scenarioName }}</td>
           <td>{{ scenarioExecution.startDate | formatMediumDatetime }}</td>
           <td>{{ scenarioExecution.endDate | formatMediumDatetime }}</td>
           <td>
-            <span class="badge" [ngClass]="getStatusBadgeClass({ id: 0, name: scenarioExecution.testResult?.status ?? 'RUNNING' })">{{
-              scenarioExecution.testResult?.status ?? 'RUNNING'
-            }}</span>
+              <span class="badge"
+                    [ngClass]="getStatusBadgeClass({ id: 0, name: scenarioExecution.testResult?.status ?? 'RUNNING' })">{{
+                  scenarioExecution.testResult?.status ?? 'RUNNING'
+                }}</span>
           </td>
           <td>{{ scenarioExecution.testResult?.errorMessage }}</td>
           <td class="text-end">
-            <div class="btn-group">
+            <!-- //NOSONAR --><div class="btn-group" (click)="$event.stopPropagation()">
               <a [routerLink]="['/scenario-action']" [queryParams]="{ 'filter[scenarioExecutionId.in]': scenarioExecution.executionId }">
                 <button type="button" class="btn btn-info btn-sm" data-cy="filterOtherEntityButton">
                   <fa-icon icon="flag"></fa-icon>
@@ -97,12 +97,6 @@ <h2 id="page-heading" data-cy="ScenarioExecutionHeading" *ngIf="!hideTitle">
                   <span class="d-none d-md-inline" jhiTranslate="citrusSimulatorApp.scenarioExecution.scenarioParameters">Parameters</span>
                 </button>
               </a>
-              <a [routerLink]="['/scenario-execution', scenarioExecution.executionId, 'view']">
-                <button type="button" class="btn btn-info btn-sm" data-cy="entityDetailsButton">
-                  <fa-icon icon="eye"></fa-icon>
-                  <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
-                </button>
-              </a>
             </div>
           </td>
         </tr>

diff --git a/...ui/src/main/webapp/app/entities/scenario-execution/list/scenario-execution.component.scss b/...ui/src/main/webapp/app/entities/scenario-execution/list/scenario-execution.component.scss
@@ -6,7 +6,4 @@ th[jhisortby='errorMessage'] {
     cursor: default;
   }
 
-  fa-icon {
-    visibility: hidden;
-  }
 }
diff --git a/...ui/src/main/webapp/app/entities/scenario-parameter/list/scenario-parameter.component.html b/...ui/src/main/webapp/app/entities/scenario-parameter/list/scenario-parameter.component.html
@@ -21,7 +21,7 @@ <h2 id="page-heading" data-cy="ScenarioParameterHeading">
   </div>
 
   <div class="table-responsive table-entities" id="entities" *ngIf="scenarioParameters && scenarioParameters.length > 0">
-    <table class="table table-striped" aria-describedby="page-heading">
+    <table class="table table-striped table-hover" aria-describedby="page-heading">
       <thead>
         <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="navigateToWithComponentValues()">
           <th scope="col" jhiSortBy="parameterId">
@@ -66,11 +66,10 @@ <h2 id="page-heading" data-cy="ScenarioParameterHeading">
               <fa-icon class="p-1" icon="sort"></fa-icon>
             </div>
           </th>
-          <th scope="col"></th>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let scenarioParameter of scenarioParameters; trackBy: trackId" data-cy="entityTable">
+        <tr *ngFor="let scenarioParameter of scenarioParameters; trackBy: trackId" data-cy="entityTable" class='clickable-row' [routerLink]="['/scenario-parameter', scenarioParameter.parameterId, 'view']">
           <td>
             <a [routerLink]="['/scenario-parameter', scenarioParameter.parameterId, 'view']">{{ scenarioParameter.parameterId }}</a>
           </td>
@@ -80,22 +79,12 @@ <h2 id="page-heading" data-cy="ScenarioParameterHeading">
           <td>{{ scenarioParameter.createdDate }}</td>
           <td>{{ scenarioParameter.lastModifiedDate | formatMediumDatetime }}</td>
           <td>
-            <div *ngIf="scenarioParameter.scenarioExecution">
+            <!-- //NOSONAR --><div *ngIf="scenarioParameter.scenarioExecution" (click)="$event.stopPropagation()">
               <a [routerLink]="['/scenario-execution', scenarioParameter.scenarioExecution.executionId, 'view']">{{
                 scenarioParameter.scenarioExecution.scenarioName
               }}</a>
             </div>
           </td>
-          <td class="text-end">
-            <div class="btn-group">
-              <a [routerLink]="['/scenario-parameter', scenarioParameter.parameterId, 'view']">
-                <button type="button" class="btn btn-info btn-sm" data-cy="entityDetailsButton">
-                  <fa-icon icon="eye"></fa-icon>
-                  <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
-                </button>
-              </a>
-            </div>
-          </td>
         </tr>
       </tbody>
     </table>

diff --git a/simulator-ui/src/main/webapp/app/entities/test-parameter/list/test-parameter.component.html b/simulator-ui/src/main/webapp/app/entities/test-parameter/list/test-parameter.component.html
@@ -21,7 +21,7 @@ <h2 id="page-heading" data-cy="TestParameterHeading">
   </div>
 
   <div class="table-responsive table-entities" id="entities" *ngIf="testParameters && testParameters.length > 0">
-    <table class="table table-striped" aria-describedby="page-heading">
+    <table class="table table-striped table-hover" aria-describedby="page-heading">
       <thead>
         <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="navigateToWithComponentValues()">
           <th scope="col" jhiSortBy="key">
@@ -54,28 +54,17 @@ <h2 id="page-heading" data-cy="TestParameterHeading">
               <fa-icon class="p-1" icon="sort"></fa-icon>
             </div>
           </th>
-          <th scope="col"></th>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let testParameter of testParameters; trackBy: trackId" data-cy="entityTable">
+        <tr *ngFor="let testParameter of testParameters; trackBy: trackId" data-cy="entityTable" class='clickable-row' [routerLink]="['/test-result', testParameter.testResult.id, 'view']">
           <td>{{ testParameter.key }}</td>
           <td>{{ testParameter.value }}</td>
           <td>{{ testParameter.createdDate | formatMediumDatetime }}</td>
           <td>{{ testParameter.lastModifiedDate | formatMediumDatetime }}</td>
           <td>
             <a [routerLink]="['/test-result', testParameter.testResult.id, 'view']">{{ testParameter.testResult.id }}</a>
           </td>
-          <td class="text-end">
-            <div class="btn-group">
-              <a [routerLink]="['/test-parameter', testParameter.testResult.id, testParameter.key, 'view']">
-                <button type="button" class="btn btn-info btn-sm" data-cy="entityDetailsButton">
-                  <fa-icon icon="eye"></fa-icon>
-                  <span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
-                </button>
-              </a>
-            </div>
-          </td>
         </tr>
       </tbody>
     </table>