CDPD-61226, KNOX-2896 - API services view on Knox Home page can be se…

…lected (apache#795)

The default view is the 'old' list view which belongs to v1. If end-users want the most recent modal-window style, they will need to use v2 as gateway.api.services.view.version in gateway-site.xml.

Change-Id: Iffd122d3ae21640f542238c55e2a0fc88bd85c53

gateway-server/src/main/java/org/apache/knox/gateway/config/impl/GatewayConfigImpl.java

@@ -324,6 +324,8 @@ public class GatewayConfigImpl extends Configuration implements GatewayConfig {
   private static final String KNOX_HOMEPAGE_PROFILE_PREFIX =  "knox.homepage.profile.";
   private static final String KNOX_HOMEPAGE_PINNED_TOPOLOGIES =  "knox.homepage.pinned.topologies";
   private static final String KNOX_HOMEPAGE_HIDDEN_TOPOLOGIES =  "knox.homepage.hidden.topologies";
+  private static final String KNOX_HOMEPAGE_API_SERVICES_VIEW_VERSION = "knox.homepage.api.services.view.version";
+
   private static final Set<String> KNOX_HOMEPAGE_HIDDEN_TOPOLOGIES_DEFAULT = new HashSet<>(Arrays.asList("admin", "manager", "knoxsso", "metadata", "homepage"));
   private static final String KNOX_HOMEPAGE_LOGOUT_ENABLED =  "knox.homepage.logout.enabled";
   private static final String GLOBAL_LOGOUT_PAGE_URL = "knox.global.logout.page.url";
@@ -1389,6 +1391,11 @@ public Set<String> getPinnedTopologiesOnHomepage() {
     return pinnedTopologies == null ? Collections.emptySet() : new HashSet<>(pinnedTopologies);
   }
 
+  @Override
+  public String getApiServicesViewVersionOnHomepage() {
+    return getTrimmed(KNOX_HOMEPAGE_API_SERVICES_VIEW_VERSION, DEFAULT_API_SERVICES_VIEW_VERSION);
+  }
+
   @Override
   public String getServiceParameter(String service, String parameter) {
     return get(GATEWAY_SERVICE_PREFIX + service + "." + parameter, "");

gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/KnoxMetadataResource.java

@@ -237,7 +237,7 @@ private TopologyInformationWrapper getTopologies(String topologyName) {
               }
             });
           });
-          topologies.addTopology(topology.getName(), isPinnedTopology(topology.getName(), config), new TreeSet<>(apiServices), new TreeSet<>(uiServices));
+          topologies.addTopology(topology.getName(), isPinnedTopology(topology.getName(), config), config.getApiServicesViewVersionOnHomepage(), new TreeSet<>(apiServices), new TreeSet<>(uiServices));
         }
       }
     }

gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/TopologyInformation.java

@@ -32,6 +32,9 @@ public class TopologyInformation implements Comparable<TopologyInformation>{
   @XmlElement(name = "pinned")
   private boolean pinned;
 
+  @XmlElement(name = "apiServicesViewVersion")
+  private String apiServicesViewVersion;
+
   @XmlElement(name = "service")
   @XmlElementWrapper(name = "apiServices")
   private Set<ServiceModel> apiServices;
@@ -56,6 +59,14 @@ public void setPinned(boolean pinned) {
     this.pinned = pinned;
   }
 
+  public void setApiServicesViewVersion(String apiServicesViewVersion) {
+    this.apiServicesViewVersion = apiServicesViewVersion;
+  }
+
+  public String getApiServicesViewVersion() {
+    return apiServicesViewVersion;
+  }
+
   public Set<ServiceModel> getApiServices() {
     return apiServices;
   }

gateway-service-metadata/src/main/java/org/apache/knox/gateway/service/metadata/TopologyInformationWrapper.java

@@ -36,12 +36,13 @@ public Set<TopologyInformation> getTopologies() {
     return topologies;
   }
 
-  public void addTopology(String name, boolean pinned, Set<ServiceModel> apiServices, Set<ServiceModel> uiServices) {
+  public void addTopology(String name, boolean pinned, String apiServicesViewVersion, Set<ServiceModel> apiServices, Set<ServiceModel> uiServices) {
     final TopologyInformation topology = new TopologyInformation();
     topology.setTopologyName(name);
     topology.setPinned(pinned);
     topology.setApiServices(apiServices);
     topology.setUiServices(uiServices);
+    topology.setApiServicesViewVersion(apiServicesViewVersion);
     this.topologies.add(topology);
   }
 

gateway-spi-common/src/main/java/org/apache/knox/gateway/GatewayTestConfig.java

@@ -929,6 +929,11 @@ public Set<String> getPinnedTopologiesOnHomepage() {
     return Collections.emptySet();
   }
 
+  @Override
+  public String getApiServicesViewVersionOnHomepage() {
+    return DEFAULT_API_SERVICES_VIEW_VERSION;
+  }
+
   /**
    * @return returns whether know token permissive failure is enabled
    */

gateway-spi/src/main/java/org/apache/knox/gateway/config/GatewayConfig.java

@@ -117,6 +117,8 @@ public interface GatewayConfig {
 
   int DEFAULT_CM_SERVICE_DISCOVERY_MAX_RETRY_ATTEMPTS = 3;
 
+  String DEFAULT_API_SERVICES_VIEW_VERSION = "v1";
+
   /**
    * The location of the gateway configuration.
    * Subdirectories will be: topologies
@@ -835,6 +837,11 @@ public interface GatewayConfig {
    */
   Set<String> getPinnedTopologiesOnHomepage();
 
+  /**
+   * @return the API services view version (v1/v2) on Knox homepage
+   */
+  String getApiServicesViewVersionOnHomepage();
+
   /**
    * @return returns whether know token permissive validation is enabled
    */

knox-homepage-ui/angular.json

@@ -70,6 +70,7 @@
             },
             "development": {
               "buildOptimizer": false,
+              "aot": false,
               "optimization": false,
               "vendorChunk": true,
               "extractLicenses": false,

knox-homepage-ui/home/app/app.module.ts

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 import {NgModule} from '@angular/core';
+import {DataTableModule} from 'angular2-datatable';
 import {BrowserModule} from '@angular/platform-browser';
 import {HttpClientModule, HttpClientXsrfModule} from '@angular/common/http';
 import {MatGridListModule} from '@angular/material/grid-list';
@@ -31,6 +32,7 @@ import {HomepageService} from './homepage.service';
     imports: [BrowserModule,
         HttpClientModule,
         HttpClientXsrfModule,
+        DataTableModule,
         MatGridListModule,
         BsModalModule,
         RouterModule.forRoot([])

knox-homepage-ui/home/app/topologies/topology.information.component.html

@@ -52,7 +52,41 @@ <h3>{{service.description}}</h3>
         </mat-grid-list>
 
         <!-- API services -->
-        <mat-grid-list cols="4" rowHeight="130px" *ngIf="topology.topology !== 'cdp-proxy'">
+
+        <h5 *ngIf="topology.apiServices.service.length > 0">API Services</h5>
+
+        <table *ngIf="topology.apiServicesViewVersion === 'v1'" class="table table-hover" [mfData]="topology.apiServices.service" #api="mfDataTable" [mfRowsOnPage]="5">
+            <colgroup>
+                <col width="30%">
+                <col width="70%">
+            </colgroup>
+            <thead>
+                <tr *ngIf="topology.apiServices.service.length === 0"><th colspan="2">No API services found</th></tr>
+                <tr *ngIf="topology.apiServices.service.length > 0"><th colspan="2">API services</th></tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let service of api.data">
+                    <td>
+                        <span class="inline-glyph glyphicon glyphicon-info-sign btn btn-xs"
+                        title="{{service.description}}"
+                        data-toggle="tooltip"></span>
+                        {{service.shortDesc}} <span class="small" *ngIf="service.version">(v{{service.version}})</span>
+                    </td>
+                    <td>
+                        <a href="{{service.serviceUrl}}">{{service.serviceUrl}}</a>
+                    </td>
+                </tr>
+            </tbody>
+            <tfoot>
+                <tr>
+                    <td colspan="4">
+                      <mfBootstrapPaginator [rowsOnPageSet]="[5,10,15]"></mfBootstrapPaginator>
+                    </td>
+                </tr>
+            </tfoot>
+        </table>
+
+        <mat-grid-list cols="4" rowHeight="130px" *ngIf="topology.topology !== 'cdp-proxy' && topology.apiServicesViewVersion === 'v2'">
             <mat-grid-tile *ngFor="let service of topology.apiServices.service" [colspan]="1" [rowspan]="1">
                 <span *ngIf="!this['enableServiceText_' + service.serviceName.toLowerCase()]" (click)="openApiServiceInformationModal(service)">
                     <img src="assets/service-logos/{{service.serviceName.toLowerCase()}}.png" height="50px" (error)="enableServiceText('enableServiceText_' + service.serviceName.toLowerCase())"/>

knox-homepage-ui/home/app/topologies/topology.information.ts

@@ -19,6 +19,7 @@ import {Service} from './service';
 export class TopologyInformation {
     topology: string;
     pinned: boolean;
+    apiServicesViewVersion: string;
     apiServices: Service[];
     uiServices: Service[];
 }

knox-homepage-ui/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^13.0.1",
     "@angular/platform-browser-dynamic": "^13.0.1",
     "@angular/router": "^13.0.1",
+    "angular2-datatable": "^0.6.0",
     "bootstrap": "^3.4.1",
     "core-js": "^2.6.11",
     "jquery": "^3.5.1",