Improving K8s domain dialog format (#185)

* Improve formatting on k8s domain status dialog

* Update secret username correctly

Author: rakillen

webui/src/js/models/k8s-domain-definition.js

@@ -235,9 +235,9 @@ define(['knockout', 'utils/observable-properties', 'utils/common-utilities', 'ut
         };
 
         this.handlePrepareModelSecrets = (secrets) => {
-          if (secrets && secrets.secrets && secrets.secrets.length) {
-            wktLogger.debug('handlePrepareModelSecrets() working on %d secrets', secrets.secrets.length);
-            for (const secret of secrets.secrets) {
+          if (secrets && secrets.length) {
+            wktLogger.debug('handlePrepareModelSecrets() working on %d secrets', secrets.length);
+            for (const secret of secrets) {
               wktLogger.debug('working on secret %s', secret.name);
 
               // The secret should always exist already because prepare model updated the model first,

webui/src/js/viewModels/domain-status-dialog.js

@@ -1,13 +1,13 @@
 /**
  * @license
- * Copyright (c) 2021, Oracle and/or its affiliates.
+ * Copyright (c) 2021, 2022, Oracle and/or its affiliates.
  * Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
  */
 'use strict';
 
-define(['accUtils', 'knockout', 'js-yaml', 'utils/i18n', 'models/wkt-project', 'ojs/ojinputtext',
+define(['accUtils', 'knockout', 'js-yaml', 'utils/i18n', 'models/wkt-project', 'utils/view-helper', 'ojs/ojinputtext',
   'ojs/ojlabel', 'ojs/ojbutton', 'ojs/ojdialog', 'ojs/ojformlayout', 'ojs/ojvalidationgroup'],
-function(accUtils, ko, jsyaml, i18n, project) {
+function(accUtils, ko, jsyaml, i18n, project, viewHelper) {
   function DomainStatusDialogModel(args) {
     const DIALOG_SELECTOR = '#domainStatusDialog';
 
@@ -20,11 +20,13 @@ function(accUtils, ko, jsyaml, i18n, project) {
     this.connected = () => {
       accUtils.announce('Show domain status dialog loaded.', 'assertive');
 
+      this.dialogContainer = $(DIALOG_SELECTOR)[0];
+
       // open the dialog after the current thread, which is loading this view model.
       // using oj-dialog initial-visibility="show" causes vertical centering issues.
-      setTimeout(function() {
-        $(DIALOG_SELECTOR)[0].open();
-      }, 1);
+      viewHelper.componentReady(this.dialogContainer).then(() => {
+        this.dialogContainer.open();
+      });
     };
 
     this.labelMapper = (labelId) => {
@@ -36,7 +38,7 @@ function(accUtils, ko, jsyaml, i18n, project) {
     };
 
     this.okInput = () => {
-      $(DIALOG_SELECTOR)[0].close();
+      this.dialogContainer.close();
     };
 
     this.makeYamlOutput = (data) => {

webui/src/js/views/domain-status-dialog.html

@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021, Oracle and/or its affiliates.
+ Copyright (c) 2021, 2022, Oracle and/or its affiliates.
  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
  -->
 <oj-dialog id="domainStatusDialog" class="wkt-route-edit-dialog" initial-visibility="hide">
@@ -13,11 +13,12 @@
     <oj-label for="overallstatus">
       <oj-bind-text value="{{labelMapper('domain-status-overallstatus')}}"></oj-bind-text>
     </oj-label>
-    <br>
-    <oj-input-text id="overallstatus" value="{{domainOverallStatus}}" readonly="true"></oj-input-text>
+    <p class="wkt-status-paragraph" id="overallstatus">
+      <oj-bind-text value="{{domainOverallStatus}}"></oj-bind-text>
+    </p>
   </div>
 
-  <div class="oj-panel wkt-notop">
+  <div class="oj-panel">
     <oj-bind-if test="[[isOperatorVersion4orHigher === false]]">
       <oj-label for="introspectJobFailureCount">
         <oj-bind-text value="{{labelMapper('domain-status-introspectJobFailureCount')}}"></oj-bind-text>
@@ -30,54 +31,44 @@
       </oj-label>
     </oj-bind-if>
 
-    <br>
-    <oj-input-text id="introspectJobFailureCount" value="{{introspectJobFailureCount}}" readonly="true"></oj-input-text>
+    <p class="wkt-status-paragraph" id="introspectJobFailureCount">
+      <oj-bind-text value="{{introspectJobFailureCount}}"></oj-bind-text>
+    </p>
   </div>
 
   <oj-bind-if test="[[domainHasError === true]]">
     <div class="oj-panel">
       <oj-label for="error-message">
         <oj-bind-text value="{{labelMapper('domain-status-message')}}"></oj-bind-text>
       </oj-label>
-      <br>
-      <oj-text-area class="domainError" id="error-message"  max-rows="100000" value="{{domainErrorMessage}}"
-                    readonly="true">
-      </oj-text-area>
+      <p class="wkt-status-paragraph preformat domainError" id="error-message"
+        ><oj-bind-text class="domainError" value="{{domainErrorMessage}}"></oj-bind-text></p>
     </div>
   </oj-bind-if>
 
   <div class="oj-panel">
     <oj-label for="conditions">
       <oj-bind-text value="{{labelMapper('domain-status-conditions')}}"></oj-bind-text>
     </oj-label>
-    <br>
-    <oj-text-area id="conditions" max-rows="100000"
-                  value="{{domainConditions}}"
-                  readonly="true">
-    </oj-text-area>
+    <p class="wkt-status-paragraph preformat" id="conditions"
+      ><oj-bind-text value="{{domainConditions}}"></oj-bind-text></p>
   </div>
 
   <div class="oj-panel">
-
     <oj-label for="clusterstatus">
       <oj-bind-text value="{{labelMapper('domain-status-clusterstatus')}}"></oj-bind-text>
     </oj-label>
-    <br>
-    <oj-text-area id="clusterstatus" max-rows="100000" value="{{domainClusterStatus}}"
-                  readonly="true">
-    </oj-text-area>
-
+    <p class="wkt-status-paragraph preformat" id="clusterstatus"
+      ><oj-bind-text value="{{domainClusterStatus}}"></oj-bind-text></p>
   </div>
 
   <div class="oj-panel">
     <oj-label for="serverstatus">
       <oj-bind-text value="{{labelMapper('domain-status-serverstatus')}}"></oj-bind-text>
     </oj-label>
-    <br>
-    <oj-text-area id="serverstatus" max-rows="100000" value="{{domainServerStatus}}" readonly="true">
-    </oj-text-area>
+    <p class="wkt-status-paragraph preformat" id="serverstatus"
+      ><oj-bind-text value="{{domainServerStatus}}"></oj-bind-text></p>
   </div>
-
   </div>
 
   <div slot="footer">