chore: remove id column to give other columns more space (#1867)

Signed-off-by: Philip Miglinci <pmig@glasskube.com>

Author: pmig

frontend/ui/src/app/applications/applications.component.html

@@ -60,9 +60,6 @@
       <thead
         class="border-t border-gray-200 dark:border-gray-600 text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
         <tr>
-          @if (fullVersion) {
-            <th scope="col" class="p-4">Id</th>
-          }
           <th scope="col" class="p-4">Application</th>
           <th scope="col" class="p-4">Type</th>
           <th scope="col" class="p-4">Versions</th>
@@ -75,11 +72,6 @@
       <tbody>
         @for (application of applications$ | async; track application.id) {
           <tr class="border-t border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
-            @if (fullVersion) {
-              <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                <app-uuid [uuid]="application.id!" />
-              </td>
-            }
             <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
               <a [routerLink]="['/', 'applications', application.id]">
                 <div class="flex items-center mr-3">

frontend/ui/src/app/applications/applications.component.ts

@@ -21,7 +21,6 @@ import {SecureImagePipe} from '../../util/secureImage';
 import {drawerFlyInOut} from '../animations/drawer';
 import {dropdownAnimation} from '../animations/dropdown';
 import {modalFlyInOut} from '../animations/modal';
-import {UuidComponent} from '../components/uuid';
 import {AutotrimDirective} from '../directives/autotrim.directive';
 import {
   PermissionsDirective,
@@ -42,7 +41,6 @@ import {ToastService} from '../services/toast.service';
     NgOptimizedImage,
     OverlayModule,
     AutotrimDirective,
-    UuidComponent,
     RequireVendorDirective,
     RequireRoleDirective,
     PermissionsDirective,

frontend/ui/src/app/artifacts/artifact-licenses/artifact-licenses.component.html

@@ -39,7 +39,6 @@
           <thead
             class="border-t border-gray-200 dark:border-gray-600 text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
             <tr>
-              <th scope="col" class="p-4">Id</th>
               <th scope="col" class="p-4">Name</th>
               <th scope="col" class="p-4">Customer</th>
               <th scope="col" class="p-4">Artifact</th>
@@ -51,9 +50,6 @@
           <tbody>
             @for (license of licenses$ | async; track license.id) {
               <tr class="border-t border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
-                <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                  <app-uuid [uuid]="license.id!" />
-                </td>
                 <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   <div class="flex items-center mr-3">
                     <span class="max-w-32 sm:max-w-64 lg:max-w-128 overflow-hidden text-ellipsis">

frontend/ui/src/app/artifacts/artifact-licenses/artifact-licenses.component.ts

@@ -18,7 +18,6 @@ import {filteredByFormControl} from '../../../util/filter';
 import {drawerFlyInOut} from '../../animations/drawer';
 import {dropdownAnimation} from '../../animations/dropdown';
 import {modalFlyInOut} from '../../animations/modal';
-import {UuidComponent} from '../../components/uuid';
 import {
   ArtifactLicense,
   ArtifactLicenseSelection,
@@ -33,7 +32,7 @@ import {EditArtifactLicenseComponent} from './edit-artifact-license.component';
 
 @Component({
   selector: 'app-artifact-licenses',
-  imports: [ReactiveFormsModule, AsyncPipe, FaIconComponent, UuidComponent, DatePipe, EditArtifactLicenseComponent],
+  imports: [ReactiveFormsModule, AsyncPipe, FaIconComponent, DatePipe, EditArtifactLicenseComponent],
   templateUrl: './artifact-licenses.component.html',
   animations: [dropdownAnimation, drawerFlyInOut, modalFlyInOut],
 })

frontend/ui/src/app/components/customer-organizations/customer-organizations.component.html

@@ -44,7 +44,6 @@
           <thead
             class="border-t border-gray-200 dark:border-gray-600 text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
             <tr>
-              <th scope="col" class="p-4">Id</th>
               <th scope="col" class="p-4"></th>
               <th scope="col" class="p-4">Name</th>
               <th scope="col" class="p-4">Creation Date</th>
@@ -57,10 +56,7 @@
           <tbody>
             @for (customer of customerOrganizations(); track customer.id) {
               <tr class="border-t border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
-                <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                  <app-uuid [uuid]="customer.id" />
-                </td>
-                <td>
+                <td class="pl-4">
                   <button
                     type="button"
                     (click)="uploadImage(customer)"

frontend/ui/src/app/components/customer-organizations/customer-organizations.component.ts

@@ -30,7 +30,6 @@ import {OrganizationService} from '../../services/organization.service';
 import {DialogRef, OverlayService} from '../../services/overlay.service';
 import {ToastService} from '../../services/toast.service';
 import {QuotaLimitComponent} from '../quota-limit.component';
-import {UuidComponent} from '../uuid';
 
 export const ALL_CUSTOMER_FEATURES: CustomerOrganizationFeature[] = ['deployment_targets', 'artifacts', 'alerts'];
 
@@ -39,7 +38,6 @@ export const ALL_CUSTOMER_FEATURES: CustomerOrganizationFeature[] = ['deployment
   imports: [
     ReactiveFormsModule,
     FontAwesomeModule,
-    UuidComponent,
     DatePipe,
     SecureImagePipe,
     AsyncPipe,

frontend/ui/src/app/components/users/users.component.html

@@ -40,7 +40,6 @@
     <thead
       class="border-t border-gray-200 dark:border-gray-600 text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
       <tr>
-        <th scope="col" class="p-4">Id</th>
         <th scope="col" class="p-4"></th>
         <th scope="col" class="p-4">Name</th>
         <th scope="col" class="p-4">E-Mail</th>
@@ -54,10 +53,7 @@
     <tbody>
       @for (user of users$ | async; track user.id) {
         <tr class="border-t border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
-          <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-            <app-uuid [uuid]="user.id!" />
-          </td>
-          <td>
+          <td class="pl-4">
             @if (user.imageUrl) {
               <img
                 (click)="uploadImage(user)"

frontend/ui/src/app/components/users/users.component.ts

@@ -31,7 +31,6 @@ import {DialogRef, OverlayService} from '../../services/overlay.service';
 import {ToastService} from '../../services/toast.service';
 import {UsersService} from '../../services/users.service';
 import {QuotaLimitComponent} from '../quota-limit.component';
-import {UuidComponent} from '../uuid';
 
 @Component({
   selector: 'app-users',
@@ -42,7 +41,6 @@ import {UuidComponent} from '../uuid';
     ReactiveFormsModule,
     RequireVendorDirective,
     AutotrimDirective,
-    UuidComponent,
     SecureImagePipe,
     QuotaLimitComponent,
   ],

frontend/ui/src/app/licenses/licenses.component.html

@@ -39,7 +39,6 @@
           <thead
             class="border-t border-gray-200 dark:border-gray-600 text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
             <tr>
-              <th scope="col" class="p-4">Id</th>
               <th scope="col" class="p-4">Name</th>
               <th scope="col" class="p-4">Customer</th>
               <th scope="col" class="p-4">Application</th>
@@ -51,9 +50,6 @@
           <tbody>
             @for (license of licenses$ | async; track license.id) {
               <tr class="border-t border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
-                <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                  <app-uuid [uuid]="license.id!" />
-                </td>
                 <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                   <div class="flex items-center mr-3">
                     <span class="max-w-32 sm:max-w-64 lg:max-w-128 overflow-hidden text-ellipsis">

frontend/ui/src/app/licenses/licenses.component.ts

@@ -18,7 +18,6 @@ import {filteredByFormControl} from '../../util/filter';
 import {drawerFlyInOut} from '../animations/drawer';
 import {dropdownAnimation} from '../animations/dropdown';
 import {modalFlyInOut} from '../animations/modal';
-import {UuidComponent} from '../components/uuid';
 import {AutotrimDirective} from '../directives/autotrim.directive';
 import {ApplicationsService} from '../services/applications.service';
 import {AuthService} from '../services/auth.service';
@@ -31,15 +30,7 @@ import {EditLicenseComponent} from './edit-license.component';
 @Component({
   selector: 'app-licenses',
   templateUrl: './licenses.component.html',
-  imports: [
-    AsyncPipe,
-    AutotrimDirective,
-    ReactiveFormsModule,
-    FaIconComponent,
-    UuidComponent,
-    DatePipe,
-    EditLicenseComponent,
-  ],
+  imports: [AsyncPipe, AutotrimDirective, ReactiveFormsModule, FaIconComponent, DatePipe, EditLicenseComponent],
   animations: [dropdownAnimation, drawerFlyInOut, modalFlyInOut],
 })
 export class LicensesComponent {