From ae2a0cc4ed7cdc4ec5a2dca493d7fd7c9d1486f2 Mon Sep 17 00:00:00 2001 From: Robert Patrick Date: Mon, 7 Mar 2022 12:50:14 -0600 Subject: [PATCH 1/2] addressing UI refresh issue and some Jet audit issues --- webui/src/css/app.css | 2 +- webui/src/js/viewModels/model-design-view.js | 88 +++++++++++-------- webui/src/js/views/domain-status-dialog.html | 3 +- webui/src/js/views/image-design-view.html | 4 +- webui/src/js/views/project-settings-page.html | 2 +- 5 files changed, 55 insertions(+), 44 deletions(-) diff --git a/webui/src/css/app.css b/webui/src/css/app.css index 71107d8ac..b9270f065 100644 --- a/webui/src/css/app.css +++ b/webui/src/css/app.css @@ -258,7 +258,7 @@ } .wkt-paths-table { - .wkt-env-vars-table; + border: 1px solid var(--oj-collection-border-color); width: 100%; } diff --git a/webui/src/js/viewModels/model-design-view.js b/webui/src/js/viewModels/model-design-view.js index e4d47b3bf..b2f54c7b9 100644 --- a/webui/src/js/viewModels/model-design-view.js +++ b/webui/src/js/viewModels/model-design-view.js @@ -3,10 +3,10 @@ * 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/ */ -define(['accUtils', 'utils/i18n', 'knockout', 'models/wkt-project', 'utils/url-catalog', 'utils/wkt-logger', - 'wrc-frontend/core/parsers/yaml', 'wrc-frontend/integration/viewModels/utils','wdt-model-designer/loader', - 'ojs/ojinputtext', 'ojs/ojlabel', 'ojs/ojbutton', 'ojs/ojformlayout'], -function(accUtils, i18n, ko, project, urlCatalog, wktLogger, YamlParser, ViewModelUtils) { +define(['accUtils', 'utils/i18n', 'knockout', 'models/wkt-project', 'utils/url-catalog', 'utils/view-helper', + 'utils/wkt-logger', 'wrc-frontend/core/parsers/yaml', 'wrc-frontend/integration/viewModels/utils', + 'wdt-model-designer/loader', 'ojs/ojinputtext', 'ojs/ojlabel', 'ojs/ojbutton', 'ojs/ojformlayout'], +function(accUtils, i18n, ko, project, urlCatalog, viewHelper, wktLogger, YamlParser, ViewModelUtils) { function ModelDesignViewModel() { let subscriptions = []; @@ -18,19 +18,18 @@ function(accUtils, i18n, ko, project, urlCatalog, wktLogger, YamlParser, ViewMod this.connected = () => { accUtils.announce('Model design view loaded.', 'assertive'); + this.designer = document.getElementById('WdtModelDesigner'); + subscriptions.push(this.project.wdtModel.internal.wlRemoteConsolePort.subscribe((newValue) => { wktLogger.debug('Model Design View got event for Remote Console backend port change to %s', newValue); - this.showWdtModelDesigner(newValue, this); + this.showWdtModelDesigner(newValue, this.designer); }, this)); - // eslint-disable-next-line no-unused-vars - subscriptions.push(this.project.wdtModel.modelContent.subscribe((newValue) => { + subscriptions.push(this.project.wdtModel.modelContent.subscribe(() => { wktLogger.debug('Model Design View got event for Model contents changed'); if (this.designer) { - // FIXME - There doesn't seem to be a way to update the data of the data provider. - // Please fix this accordingly and delete this comment... - // + this.createRemoteConsoleProvider(this.designer, true); } }, this)); @@ -40,12 +39,11 @@ function(accUtils, i18n, ko, project, urlCatalog, wktLogger, YamlParser, ViewMod if (typeof port !== 'undefined') { wktLogger.debug('direct connected: port=%s', port); - // FIXME - There seems to be a race condition where the JET component does not seem to - // be fully loaded by the time we get to this point. Working around it for now... - // - setTimeout( () => { - this.showWdtModelDesigner(port); - }, 1000); + if (this.designer) { + viewHelper.componentReady(this.designer).then(() => { + this.showWdtModelDesigner(port, this.designer); + }); + } } }; @@ -67,13 +65,15 @@ function(accUtils, i18n, ko, project, urlCatalog, wktLogger, YamlParser, ViewMod return window.api.process.isLinux(); }; - this.showWdtModelDesigner = (backendPort) => { + this.showWdtModelDesigner = (backendPort, wdtModelDesigner) => { wktLogger.info('showWdtModelDesigner using backendPort %s', backendPort); if (!backendPort) { return; } - self.designer = document.getElementById('WdtModelDesigner'); + if (!wdtModelDesigner) { + return; + } // We cannot use to control the visibility of // the JET composite, because it prevents @@ -84,25 +84,18 @@ function(accUtils, i18n, ko, project, urlCatalog, wktLogger, YamlParser, ViewMod // that controls its visibility. The default value for that // property is false. // - self.designer.visible = this.showRemoteConsoleComponent(); - self.designer.setBackendUrlPort(backendPort); + wdtModelDesigner.visible = this.showRemoteConsoleComponent(); + wdtModelDesigner.setBackendUrlPort(backendPort); // ResizeObserver needs to be set on the parent element // of the tag. // - const parentElement = self.designer.parentElement; + const parentElement = wdtModelDesigner.parentElement; new ResizeObserver(() => { - self.designer.resize(); + wdtModelDesigner.resize(); }).observe(parentElement); - // TODO - Do we need to use the Remote Console parser or can we just use js-yaml? - // - const providerOptions = this.getRemoteConsoleProviderOptions(); - YamlParser.parse(providerOptions.fileContents).then(data => { - self.designer.createProvider(providerOptions.name, data); - }).catch(err => { - ViewModelUtils.failureResponseDefaultHandling(err); - }); + this.createRemoteConsoleProvider(wdtModelDesigner); }; // We need to support several use cases: @@ -120,7 +113,7 @@ function(accUtils, i18n, ko, project, urlCatalog, wktLogger, YamlParser, ViewMod }; if (!providerOptions.fileContents) { - const modelTemplates = self.designer.getProperty('modelTemplate'); + const modelTemplates = this.designer.getProperty('modelTemplate'); providerOptions.fileContents = modelTemplates.sparse; } @@ -130,17 +123,36 @@ function(accUtils, i18n, ko, project, urlCatalog, wktLogger, YamlParser, ViewMod return providerOptions; }; + this.createRemoteConsoleProvider = (wdtModelDesigner, resetExistingDataProvider = false) => { + if (!wdtModelDesigner) { + return; + } + + if (resetExistingDataProvider) { + wdtModelDesigner.deactivateProvider(this.dataProvider); + } + + const providerOptions = this.getRemoteConsoleProviderOptions(); + // TODO - Do we need to use the Remote Console parser or can we just use js-yaml? + // + YamlParser.parse(providerOptions.fileContents).then(data => { + wdtModelDesigner.createProvider(providerOptions.name, data); + }).catch(err => { + ViewModelUtils.failureResponseDefaultHandling(err); + }); + }; + // Triggered when WDT Model File provider has been activated with the WRC backend. // this.providerActivated = (event) => { - self.dataProvider = event.detail.value; - self.designer.selectLastVisitedSlice(); + this.dataProvider = event.detail.value; + this.designer.selectLastVisitedSlice(); }; // Triggered when changes have been downloaded from the WRC backend, for the active WDT Model File provider. // this.changesAutoDownloaded = (event) => { - self.project.wdtModel.modelContent(event.detail.value); + this.project.wdtModel.modelContent(event.detail.value); }; // Triggered when WDT Model File provider has been deactivated with the WRC backend. @@ -148,17 +160,17 @@ function(accUtils, i18n, ko, project, urlCatalog, wktLogger, YamlParser, ViewMod this.providerDeactivated = (event) => { const result = event.detail.value; delete result.data; - self.dataProvider = {state: 'disconnected'}; + this.dataProvider = {state: 'disconnected'}; }; // Triggered when WDT Model Designer has lost its connection to the WRC backend. // this.connectionLostRefused = (event) => { wktLogger.debug('connectionLostRefused: backendUrl=%s', event.detail.value); - if (self.designer) { - self.designer.visible = false; + if (this.designer) { + this.designer.visible = false; } - self.project.wdtModel.internal.wlRemoteConsolePort(undefined); + this.project.wdtModel.internal.wlRemoteConsolePort(undefined); }; const wrcInitialText = this.labelMapper('wrc-install-description'); diff --git a/webui/src/js/views/domain-status-dialog.html b/webui/src/js/views/domain-status-dialog.html index aa1ca8f63..cd7cf130d 100644 --- a/webui/src/js/views/domain-status-dialog.html +++ b/webui/src/js/views/domain-status-dialog.html @@ -23,8 +23,7 @@
- + diff --git a/webui/src/js/views/image-design-view.html b/webui/src/js/views/image-design-view.html index e32230907..700718c06 100644 --- a/webui/src/js/views/image-design-view.html +++ b/webui/src/js/views/image-design-view.html @@ -19,7 +19,7 @@ on-value-changed="[[selectedSubviewValueChangedHandler]]" value="{{selectedSubview}}">
-
+
-
+

+

From 35a98f6163440cd418e91a373ae06deec994a8fa Mon Sep 17 00:00:00 2001 From: Robert Patrick Date: Mon, 7 Mar 2022 18:23:50 -0600 Subject: [PATCH 2/2] fixing disconnected bug --- webui/src/js/viewModels/model-design-view.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/webui/src/js/viewModels/model-design-view.js b/webui/src/js/viewModels/model-design-view.js index b2f54c7b9..d8dbe2c5e 100644 --- a/webui/src/js/viewModels/model-design-view.js +++ b/webui/src/js/viewModels/model-design-view.js @@ -53,7 +53,8 @@ function(accUtils, i18n, ko, project, urlCatalog, viewHelper, wktLogger, YamlPar }); if (this.designer) { - this.designer.deactivateProvider(self.dataProvider); + wktLogger.debug('disconnected() dataProvider = %s', JSON.stringify(this.dataProvider)); + this.designer.deactivateProvider(this.dataProvider); } }; @@ -152,6 +153,7 @@ function(accUtils, i18n, ko, project, urlCatalog, viewHelper, wktLogger, YamlPar // Triggered when changes have been downloaded from the WRC backend, for the active WDT Model File provider. // this.changesAutoDownloaded = (event) => { + wktLogger.debug('changesAutoDownloaded event: %s', event.detail.value); this.project.wdtModel.modelContent(event.detail.value); };