making changes to improve the usability of the image page (#99)

* making changes to improve the usability of the image page

* Wait for aux image tag to initialize before refreshing

* Listen for aux image changes for open/close project

Co-authored-by: Richard Killen <richard.killen@oracle.com>

Author: robertpatrick

electron/app/locales/en/webui.json

@@ -231,6 +231,11 @@
   "image-design-create-image-help": "Whether you want to create a new primary image or use an existing image.",
   "image-design-create-image-aux-help": "Whether you want to create a new primary image or use an existing image, such as one of the standard images in the Oracle Container Registry.",
 
+  "image-design-aux-image-settings-label": "Auxiliary Image Configuration",
+  "image-design-aux-image-config-off-label": "Do not use an auxiliary image",
+  "image-design-aux-image-config-use-label": "Use an existing auxiliary image",
+  "image-design-aux-image-config-create-label": "Create a new auxiliary image",
+
   "image-design-image-tag-label": "Image Tag",
   "image-design-image-tag-mii-create-help": "The tag to use to identify the new image containing the Oracle Fusion Middleware installation and WebLogic Deploy Tooling model to use to create and run the domain.",
   "image-design-image-tag-mii-create-with-aux-help": "The tag to use to identify the new image containing the Oracle Fusion Middleware installation to use to run the domain.",
@@ -265,10 +270,6 @@
   "image-design-custom-base-image-inspect-label": "Inspect Custom Base Image",
   "image-design-custom-base-image-inspect-busy-title": "Inspecting Image...Please Wait",
 
-  "image-design-use-aux-image-label": "Use Auxiliary Image",
-  "image-design-use-aux-image-help": "Split the Fusion Middleware software and the WebLogic Deploy Tooling software and model into two separate images that will be combined at runtime.",
-  "image-design-create-aux-image-label": "Create New Auxiliary Image Containing WebLogic Deploy Tooling Model",
-  "image-design-create-aux-image-help": "Whether you want to create a new auxiliary image for the WebLogic Deploy Tooling software and model or use an existing image.",
   "image-design-aux-image-tag-label": "Auxiliary Image Tag",
   "image-design-aux-image-tag-create-help": "The tag to use to identify the new image containing the WebLogic Deploy Tooling installation and model to use to create the domain.",
   "image-design-aux-image-tag-use-help": "The tag to use to identify the existing image containing the WebLogic Deploy Tooling installation and model to use to create the domain.",
@@ -491,8 +492,18 @@
   "domain-design-pv-volume-log-home-help": "The path to use to write the WebLogic Server log files.",
 
   "domain-design-image-title": "Primary Image to Use for the Domain",
+  "domain-design-hints-goto-create-image": "Go To Create Primary Image Page",
+  "domain-design-goto-create-image-button-label": "Go To Create Primary Image Page",
   "domain-design-image-tag-label": "Primary Image Tag",
-  "domain-design-image-tag-help": "The tag of the primary image to use for the domain.  This field is set by the Image Tag field on the Primary Image tab of the Image page so go there to change its value, if needed.",
+
+  "domain-design-image-tag-mii-create-help": "The tag to use to identify the new image containing the Oracle Fusion Middleware installation and WebLogic Deploy Tooling model to use to create and run the domain.  This field is set by the Image Tag field on the Primary Image tab of the Image page so go there to change its value, if needed.",
+  "domain-design-image-tag-mii-create-with-aux-help": "The tag to use to identify the new image containing the Oracle Fusion Middleware installation to use to run the domain.  This field is set by the Image Tag field on the Primary Image tab of the Image page so go there to change its value, if needed.",
+  "domain-design-image-tag-mii-use-help": "The tag to use to identify the existing image containing the Oracle Fusion Middleware installation and WebLogic Deploy Tooling model to use to create and run the domain.",
+  "domain-design-image-tag-mii-use-with-aux-help": "The tag to use to identify the existing image containing the Oracle Fusion Middleware installation to use to run the domain.",
+  "domain-design-image-tag-dii-create-help": "The tag to use to identify the new image containing the Oracle Fusion Middleware installation and domain to use.  This field is set by the Image Tag field on the Primary Image tab of the Image page so go there to change its value, if needed.",
+  "domain-design-image-tag-dii-use-help": "The tag to use to identify the existing image containing the Oracle Fusion Middleware installation and domain to use.",
+  "domain-design-image-tag-pv-create-help": "The tag to use to identify the new image containing the Oracle Fusion Middleware installation to use to run the domain that already exists on the external Kubernetes persistent volume.  This field is set by the Image Tag field on the Primary Image tab of the Image page so go there to change its value, if needed.",
+  "domain-design-image-tag-pv-use-help": "The tag to use to identify the existing image containing the Oracle Fusion Middleware installation to use to run the domain that already exists on the external Kubernetes persistent volume.",
   "domain-design-image-registry-address-label": "Image Registry Address",
   "domain-design-image-registry-address-help": "The image registry hostname and port to use to log in to the registry, if required.  This field's value is parsed from the Primary Image Tag field and an empty value assumes Docker Hub is the registry being used.",
   "domain-design-image-pull-policy-label": "Primary Image Pull Policy",
@@ -511,8 +522,11 @@
   "domain-design-image-registry-pull-email-help": "The image registry user's email address used to create the Kubernetes image pull secret.",
 
   "domain-design-aux-image-title": "Auxiliary Image to Use for the Domain",
+  "domain-design-hints-goto-create-aux-image": "Go To Create Auxiliary Image Page",
+  "domain-design-goto-create-aux-image-button-label": "Go To Create Auxiliary Image Page",
   "domain-design-aux-image-tag-label": "Auxiliary Image Tag",
-  "domain-design-aux-image-tag-help": "The tag of the auxiliary image to use for the domain.  This field is set by the Image Tag field on the Auxiliary Image tab of the Image page so go there to change its value, if needed.",
+  "domain-design-create-aux-image-tag-help": "The tag of the auxiliary image to use for the domain.  This field is set by the Image Tag field on the Auxiliary Image tab of the Image page so go there to change its value, if needed.",
+  "domain-design-use-aux-image-tag-help": "The tag of the auxiliary image to use for the domain.",
   "domain-design-aux-image-registry-address-label": "Image Registry Address",
   "domain-design-aux-image-registry-address-help": "The image registry hostname and port to use to log in to the registry, if required.  This field's value is parsed from the Auxiliary Image Tag field and an empty value assumes Docker Hub is the registry being used.",
   "domain-design-aux-image-pull-policy-label": "Auxiliary Image Pull Policy",
@@ -949,8 +963,8 @@
   "wit-creator-builder-login-in-progress": "Performing {{builderName}} log in to allow pulling the base image {{imageTag}}",
 
   "wit-aux-creator-image-not-mii-message": "The Target Domain Location type on the Project Settings page is not using Model-in-Image so there is no auxiliary image to create.",
-  "wit-aux-creator-image-not-use-message": "The Use Auxiliary Image option on the Primary Image tab of the Image page is turned off so there is no auxiliary image to create.",
-  "wit-aux-creator-image-not-create-message": "The Create New Auxiliary Image option on the Auxiliary Image tab of the Image page is off so there is no auxiliary image to create.",
+  "wit-aux-creator-image-not-use-message": "The Do not use an auxiliary image option on the Primary Image tab of the Image page is selected so there is no auxiliary image to create.",
+  "wit-aux-creator-image-not-create-message": "The Use an existing auxiliary image option on the Auxiliary Image tab of the Image page is selected so there is no auxiliary image to create.",
   "wit-aux-creator-aborted-error-title": "Create Auxiliary Image Aborted",
   "wit-aux-creator-invalid-java-home-error-prefix": "Unable to create auxiliary image due to the Java Home being invalid",
   "wit-aux-creator-invalid-wdt-installer-file-message": "Unable to create auxiliary image due to invalid WebLogic Deploy Tooling Installer file",
@@ -994,8 +1008,8 @@
   "image-pusher-create-failed-error-message":"Unable to push image {{imageTag}}: {{error}}.",
 
   "aux-image-pusher-image-not-mii-message": "The Target Domain Location type on the Project Settings page is not using Model-in-Image so there is no image to push.",
-  "aux-image-pusher-image-not-use-message": "The Use Auxiliary Image option on the Primary Image tab of the Image page is turned off so there is no image to push.",
-  "aux-image-pusher-image-not-create-message": "The Create New Primary Image option on the Auxiliary Image tab of the Image page is off so there is no image to push.",
+  "aux-image-pusher-image-not-use-message": "The Do not use an auxiliary image option on the Primary Image tab of the Image page is selected so there is no image to push.",
+  "aux-image-pusher-image-not-create-message": "The Use an existing auxiliary image option on the Primary Image tab of the Image page is selected so there is no image to push.",
   "aux-image-pusher-push-aborted-title": "Push Image Aborted",
   "aux-image-pusher-push-in-progress": "Pushing auxiliary image {{imageTag}}",
   "aux-image-pusher-image-builder-invalid-error-message": "The image builder executable {{fileName}} is not valid: {{error}}.",

webui/src/js/utils/screen-utils.js

@@ -5,10 +5,13 @@
  */
 'use strict';
 
-define([],
-  function() {
+define(['knockout', 'ojs/ojcorerouter'],
+  function(ko, CoreRouter) {
     function ScreenUtils() {
       const thisUtil = this;
+      const imageDesignViewSelectedSubview = ko.observable();
+      let pendingImageDesignViewSubviewSelection;
+      let mainNavigationRouter;
 
       this.sliderPositions = {};
 
@@ -100,6 +103,45 @@ define([],
           }
         }).observe(parentElement);
       };
+
+      this.createMainNavigationRouter = (routeData, routeOptions) => {
+        mainNavigationRouter = new CoreRouter(routeData, routeOptions);
+      };
+
+      this.getMainNavigationRouter = () => {
+        return mainNavigationRouter;
+      };
+
+      this.gotoMainPage = (path) => {
+        mainNavigationRouter.go({ path: path });
+      };
+
+      this.setImageDesignViewSelectedSubview = (view, honorPendingTabChange = false) => {
+        if (honorPendingTabChange && pendingImageDesignViewSubviewSelection) {
+          imageDesignViewSelectedSubview(pendingImageDesignViewSubviewSelection);
+          pendingImageDesignViewSubviewSelection = undefined;
+        } else {
+          imageDesignViewSelectedSubview(view);
+        }
+      };
+
+      this.getImageDesignViewSelectedSubviewObservable = () => {
+        return imageDesignViewSelectedSubview;
+      };
+
+      this.setPendingImageDesignViewSubviewSelection = (view) => {
+        pendingImageDesignViewSubviewSelection = view;
+      };
+
+      this.gotoImageDesignPrimaryImageScreen = () => {
+        this.setPendingImageDesignViewSubviewSelection('primaryImage');
+        this.gotoMainPage('image-page');
+      };
+
+      this.gotoImageDesignAuxiliaryImageScreen = () => {
+        this.setPendingImageDesignViewSubviewSelection('auxiliaryImage');
+        this.gotoMainPage('image-page');
+      };
     }
 
     return new ScreenUtils();

webui/src/js/viewModels/app-main.js

@@ -6,15 +6,14 @@
 'use strict';
 
 define(['accUtils', 'knockout', 'utils/i18n', 'models/wkt-project', 'models/wkt-console', 'utils/dialog-helper',
-  'utils/view-helper', 'ojs/ojarraydataprovider', 'ojs/ojarraytreedataprovider', 'ojs/ojcorerouter',
+  'utils/view-helper', 'utils/screen-utils', 'ojs/ojarraydataprovider', 'ojs/ojarraytreedataprovider', 'ojs/ojcorerouter',
   'ojs/ojmodule-element-utils', 'ojs/ojmodulerouter-adapter', 'ojs/ojknockoutrouteradapter', 'ojs/ojurlparamadapter',
   'ojs/ojoffcanvas', 'ojs/ojknockouttemplateutils', 'ojs/ojresponsiveutils', 'ojs/ojresponsiveknockoututils',
-  'utils/wkt-logger',
-  'ojs/ojknockout', 'ojs/ojinputtext', 'ojs/ojlabel', 'ojs/ojbutton', 'ojs/ojdialog', 'ojs/ojformlayout',
-  'ojs/ojselectsingle', 'ojs/ojvalidationgroup', 'ojs/ojcollapsible'],
-function(accUtils, ko, i18n, project, wktConsole, dialogHelper, viewHelper, ArrayDataProvider, ArrayTreeDataProvider,
-  CoreRouter, ModuleElementUtils, ModuleRouterAdapter, KnockoutRouterAdapter, UrlParamAdapter, OffCanvasUtils,
-  KnockoutTemplateUtils, ResponsiveUtils, ResponsiveKnockoutUtils, wktLogger) {
+  'utils/wkt-logger', 'ojs/ojknockout', 'ojs/ojinputtext', 'ojs/ojlabel', 'ojs/ojbutton', 'ojs/ojdialog',
+  'ojs/ojformlayout', 'ojs/ojselectsingle', 'ojs/ojvalidationgroup', 'ojs/ojcollapsible'],
+function(accUtils, ko, i18n, project, wktConsole, dialogHelper, viewHelper, screenUtils, ArrayDataProvider,
+  ArrayTreeDataProvider, CoreRouter, ModuleElementUtils, ModuleRouterAdapter, KnockoutRouterAdapter, UrlParamAdapter,
+  OffCanvasUtils, KnockoutTemplateUtils, ResponsiveUtils, ResponsiveKnockoutUtils, wktLogger) {
 
   function AppMainModel() {
 
@@ -81,10 +80,11 @@ function(accUtils, ko, i18n, project, wktConsole, dialogHelper, viewHelper, Arra
     ];
 
     // Router setup
-    let router = new CoreRouter(routeData, {
+    screenUtils.createMainNavigationRouter(routeData, {
       urlAdapter: new UrlParamAdapter(),
       history: 'skip'
     });
+    const router = screenUtils.getMainNavigationRouter();
     router.sync();
 
     this.moduleAdapter = new ModuleRouterAdapter(router);