login page exception - hz-login-finder doesn't function because of horizon.app loading failure

[Gloria Gu]

It happens to master and stable/pike. Didn't check other version.

When access login page of horizon in Chrome, F12 you will see the following exceptions in the console. If it uses default keystone credential, it doesn't hurt, once login the exceptions are gone.

However, if want to use the WEBSSO feature when angular invokes the hz-login-finder directive to hide the username/password inputs...it doesn't function. Looks like it is caused by the loading problem of horizon.app module

Exceptions ----

Uncaught SyntaxError: Unexpected token <
c575dddbc1e4.js:325 Uncaught ReferenceError: gettext is not defined
    at c575dddbc1e4.js:325
    at c575dddbc1e4.js:325
(anonymous) @ c575dddbc1e4.js:325
(anonymous) @ c575dddbc1e4.js:325
732ce617825a.js:699 Uncaught Error: [$injector:nomod] Module 'horizon.app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=horizon.app
    at 732ce617825a.js:699
    at 732ce617825a.js:818
    at ensure (732ce617825a.js:816)
    at Object.module (732ce617825a.js:818)
    at 680be8487836.js:1
(anonymous) @ 732ce617825a.js:699
(anonymous) @ 732ce617825a.js:818
ensure @ 732ce617825a.js:816
module @ 732ce617825a.js:818
(anonymous) @ 680be8487836.js:1
732ce617825a.js:699 Uncaught Error: [$injector:modulerr] Failed to instantiate module horizon.app due to:
Error: [$injector:nomod] Module 'horizon.app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=horizon.app
    at https://myhelion.test/static/dashboard/js/732ce617825a.js:699:8
    at https://myhelion.test/static/dashboard/js/732ce617825a.js:818:59
    at ensure (https://myhelion.test/static/dashboard/js/732ce617825a.js:816:320)
    at module (https://myhelion.test/static/dashboard/js/732ce617825a.js:818:8)
    at https://myhelion.test/static/dashboard/js/732ce617825a.js:925:35
    at forEach (https://myhelion.test/static/dashboard/js/732ce617825a.js:703:400)
    at loadModules (https://myhelion.test/static/dashboard/js/732ce617825a.js:924:156)
    at createInjector (https://myhelion.test/static/dashboard/js/732ce617825a.js:913:464)
    at doBootstrap (https://myhelion.test/static/dashboard/js/732ce617825a.js:792:36)
    at bootstrap (https://myhelion.test/static/dashboard/js/732ce617825a.js:793:58)
http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=horizon.app&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'horizon.app'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.5.8%2F%24injector%2Fnomod%3Fp0%3Dhorizon.app%0A%20%20%20%20at%20https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A699%3A8%0A%20%20%20%20at%20https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A818%3A59%0A%20%20%20%20at%20ensure%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A816%3A320)%0A%20%20%20%20at%20module%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A818%3A8)%0A%20%20%20%20at%20https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A925%3A35%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A703%3A400)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A924%3A156)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A913%3A464)%0A%20%20%20%20at%20doBootstrap%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A792%3A36)%0A%20%20%20%20at%20bootstrap%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A793%3A58)
    at https://myhelion.test/static/dashboard/js/732ce617825a.js:699:8
    at https://myhelion.test/static/dashboard/js/732ce617825a.js:818:59
    at ensure (https://myhelion.test/static/dashboard/js/732ce617825a.js:816:320)
    at module (https://myhelion.test/static/dashboard/js/732ce617825a.js:818:8)
    at https://myhelion.test/static/dashboard/js/732ce617825a.js:925:35
    at forEach (https://myhelion.test/static/dashboard/js/732ce617825a.js:703:400)
    at loadModules (https://myhelion.test/static/dashboard/js/732ce617825a.js:924:156)
    at createInjector (https://myhelion.test/static/dashboard/js/732ce617825a.js:913:464)
    at doBootstrap (https://myhelion.test/static/dashboard/js/732ce617825a.js:792:36)
    at bootstrap (https://myhelion.test/static/dashboard/js/732ce617825a.js:793:58)
http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=horizon.app&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'horizon.app'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.5.8%2F%24injector%2Fnomod%3Fp0%3Dhorizon.app%0A%20%20%20%20at%20https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A699%3A8%0A%20%20%20%20at%20https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A818%3A59%0A%20%20%20%20at%20ensure%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A816%3A320)%0A%20%20%20%20at%20module%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A818%3A8)%0A%20%20%20%20at%20https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A925%3A35%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A703%3A400)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A924%3A156)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A913%3A464)%0A%20%20%20%20at%20doBootstrap%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A792%3A36)%0A%20%20%20%20at%20bootstrap%20(https%3A%2F%2Fmyhelion.test%2Fstatic%2Fdashboard%2Fjs%2F732ce617825a.js%3A793%3A58)
    at https://myhelion.test/static/dashboard/js/732ce617825a.js:699:8
    at https://myhelion.test/static/dashboard/js/732ce617825a.js:927:7
    at forEach (https://myhelion.test/static/dashboard/js/732ce617825a.js:703:400)
    at loadModules (https://myhelion.test/static/dashboard/js/732ce617825a.js:924:156)
    at createInjector (https://myhelion.test/static/dashboard/js/732ce617825a.js:913:464)
    at doBootstrap (https://myhelion.test/static/dashboard/js/732ce617825a.js:792:36)
    at bootstrap (https://myhelion.test/static/dashboard/js/732ce617825a.js:793:58)
    at angularInit (https://myhelion.test/static/dashboard/js/732ce617825a.js:789:556)
    at HTMLDocument.<anonymous> (https://myhelion.test/static/dashboard/js/732ce617825a.js:1846:1383)
    at fire (https://myhelion.test/static/dashboard/js/732ce617825a.js:208:299)

[Gloria Gu (gloria-gu)]

I turn on the localy_settings.py COMPRESS_ENABED = False

I will see better errors

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module horizon.app due to:
Error: [$injector:modulerr] Failed to instantiate module schemaForm due to:
ReferenceError: gettext is not defined
    at config (http://localhost:7788/static/framework/widgets/form/decorator.js:133:27)

gettext from angular didn't get loaded when load _login_form.html

Then I resolved a bunch of gettext issue...now I am stuck at

...horizon.app.core.images.resourceType is there...but the code is suspecious

 angular
    .module('horizon.app.core.images', [
      'ngRoute',
      'horizon.app.core.images.actions',
      'horizon.app.core.images.details'
    ])
    .constant('horizon.app.core.images.events', events())
    .constant('horizon.app.core.images.non_bootable_image_types', ['aki', 'ari'])
    .constant('horizon.app.core.images.validationRules', validationRules())
    .constant('horizon.app.core.images.imageFormats', imageFormats())
    .constant('horizon.app.core.images.resourceType', 'OS::Glance::Image')

-------------------------------------

angular
    .module('horizon.app.core.images')
    .factory('horizon.app.core.images.actions.edit.service', editService);

  editService.$inject = [
    '$q',
    'horizon.app.core.images.events',
    'horizon.app.core.images.resourceType',
    'horizon.app.core.images.actions.editWorkflow',
    'horizon.app.core.metadata.service',
    'horizon.app.core.openstack-service-api.glance',
    'horizon.app.core.openstack-service-api.policy',
    'horizon.framework.util.actions.action-result.service',
    'horizon.framework.util.q.extensions',
    'horizon.framework.widgets.modal.wizard-modal.service',
    'horizon.framework.widgets.toast.service'
  ];

--------------------

angular.js:68 Uncaught Error: [$injector:unpr] Unknown provider: horizon.app.core.images.resourceTypeProvider <- horizon.app.core.images.resourceType <- horizon.app.core.images.actions.edit.service
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=horizon.app.core.images.resourceTypeProvider%20%3C-%20horizon.app.core.images.resourceType%20%3C-%20horizon.app.core.images.actions.edit.service
    at angular.js:68
    at angular.js:4511
    at Object.getService [as get] (angular.js:4664)
    at angular.js:4516
    at getService (angular.js:4664)
    at injectionArgs (angular.js:4688)
    at Object.invoke (angular.js:4710)
    at Object.enforcedReturnValue [as $get] (angular.js:4557)
    at Object.invoke (angular.js:4718)
    at angular.js:4517
(anonymous) @ angular.js:68
(anonymous) @ angular.js:4511
getService @ angular.js:4664
(anonymous) @ angular.js:4516
getService @ angular.js:4664
injectionArgs @ angular.js:4688
invoke @ angular.js:4710
enforcedReturnValue @ angular.js:4557
invoke @ angular.js:4718
(anonymous) @ angular.js:4517
getService @ angular.js:4664
injectionArgs @ angular.js:4688
invoke @ angular.js:4710
(anonymous) @ angular.js:4526
forEach @ angular.js:321
createInjector @ angular.js:4526
doBootstrap @ angular.js:1758
bootstrap @ angular.js:1779
angularInit @ angular.js:1664
(anonymous) @ angular.js:31763
fire @ jquery.js:3048
fireW...

[Gloria Gu (gloria-gu)]

Also wants to point...it only happens to login page _login_form.html ...once logins in the exceptions are gone. Just wondering what is the difference between loading the login page and regular page?

[Gloria Gu (gloria-gu)]

tried on newton and ocata...they don't have the issue

[Gloria Gu (gloria-gu)]

checked the images module and images edit service...they are the same as pike, so they are not actually the cause of the problem.

[Gloria Gu (gloria-gu)]

https://review.openstack.org/#/c/541676/ this backported change causes the problem

[Gloria Gu (gloria-gu)]

# add URL for ngdetails
 views = import_module('horizon.browsers.views')
 urlpatterns.append(url(r'^ngdetails/',
                        views.AngularDetailsView.as_view(),
                           name='ngdetails'))
_decorate_urlconf(urlpatterns, require_auth)

in horizon/base.py causes problem

[Gloria Gu (gloria-gu)]

@Akihiro @Ivan If you guys have suggestions where that injection should happen, please let me know. Currently, it is injected at the root level before all other js loaded, which causes problem. I tried a couple of ways...found it is hard to make ngdetail page refresh work while login page loads without problem.

[Gloria Gu (gloria-gu)]

this is bug link to the bug https://bugs.launchpad.net/zun-ui/+bug/1681627

[OpenStack Infra (hudson-openstack)]

Fix proposed to branch: master
Review: https://review.openstack.org/552789

[OpenStack Infra (hudson-openstack)]

Fix proposed to branch: stable/queens
Review: https://review.openstack.org/553969

[OpenStack Infra (hudson-openstack)]

Fix proposed to branch: stable/pike
Review: https://review.openstack.org/553970

[OpenStack Infra (hudson-openstack)]

Reviewed: https://review.openstack.org/552789
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=f494c6f2d475bfc936b78fda7ce11ed4d46c7224
Submitter: Zuul
Branch: master

commit f494c6f2d475bfc936b78fda7ce11ed4d46c7224
Author: Shu Muto <email address hidden>
Date: Wed Mar 14 11:43:12 2018 +0900

    Fix Angular errors in openstack_auth

    Angular errors on login page are caused by loading ngdetails view.
    Although registration of URL for ngdetails is executed on top level
    of Horizon, ngdetails view is not needed to be loaded in login page,
    i.e. openstack_auth side.
    To fix this issue, this patch moves registration of URL for ngdetails
    into openstack_dashboard side.

    Change-Id: Ib039417b4e666c2341f17ac05fd7723bc758816c
    Closes-Bug: #1754133
    Closes-Bug: #1753557

[OpenStack Infra (hudson-openstack)]

Reviewed: https://review.openstack.org/553969
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=676b1de40d9f3e4e01fd297ca0ac95a7badaeb7e
Submitter: Zuul
Branch: stable/queens

commit 676b1de40d9f3e4e01fd297ca0ac95a7badaeb7e
Author: Shu Muto <email address hidden>
Date: Wed Mar 14 11:43:12 2018 +0900

    Fix Angular errors in openstack_auth

    Angular errors on login page are caused by loading ngdetails view.
    Although registration of URL for ngdetails is executed on top level
    of Horizon, ngdetails view is not needed to be loaded in login page,
    i.e. openstack_auth side.
    To fix this issue, this patch moves registration of URL for ngdetails
    into openstack_dashboard side.

    Change-Id: Ib039417b4e666c2341f17ac05fd7723bc758816c
    Closes-Bug: #1754133
    Closes-Bug: #1753557
    (cherry picked from commit f494c6f2d475bfc936b78fda7ce11ed4d46c7224)

[OpenStack Infra (hudson-openstack)]

Reviewed: https://review.openstack.org/553970
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=6f6f46dc6d2f38719b114a80edabe2eb01b1ab06
Submitter: Zuul
Branch: stable/pike

commit 6f6f46dc6d2f38719b114a80edabe2eb01b1ab06
Author: Shu Muto <email address hidden>
Date: Wed Mar 14 11:43:12 2018 +0900

    Fix Angular errors in openstack_auth

    Angular errors on login page are caused by loading ngdetails view.
    Although registration of URL for ngdetails is executed on top level
    of Horizon, ngdetails view is not needed to be loaded in login page,
    i.e. openstack_auth side.
    To fix this issue, this patch moves registration of URL for ngdetails
    into openstack_dashboard side.

    Conflicts:
     openstack_dashboard/test/urls.py
     openstack_dashboard/urls.py

    The above conflicts are caused by bp/django2-support which landed in Rocky,
    particully by https://review.openstack.org/#/c/527323/12.

    Change-Id: Ib039417b4e666c2341f17ac05fd7723bc758816c
    Closes-Bug: #1754133
    Closes-Bug: #1753557
    (cherry picked from commit f494c6f2d475bfc936b78fda7ce11ed4d46c7224)

[OpenStack Infra (hudson-openstack)]

This issue was fixed in the openstack/horizon 14.0.0.0b1 development milestone.

[OpenStack Infra (hudson-openstack)]

This issue was fixed in the openstack/horizon 13.0.1 release.

[OpenStack Infra (hudson-openstack)]

This issue was fixed in the openstack/horizon 12.0.3 release.

[OpenStack Infra (hudson-openstack)]

Fix proposed to branch: stable/ocata
Review: https://review.openstack.org/629374

[OpenStack Infra (hudson-openstack)]

Reviewed: https://review.opendev.org/629374
Committed: https://git.openstack.org/cgit/openstack/horizon/commit/?id=c920dc9d42bea38a5ea9d1964161f14a80fe7ae7
Submitter: Zuul
Branch: stable/ocata

commit c920dc9d42bea38a5ea9d1964161f14a80fe7ae7
Author: Shu Muto <email address hidden>
Date: Wed Mar 14 11:43:12 2018 +0900

    Fix Angular errors in openstack_auth

    Angular errors on login page are caused by loading ngdetails view.
    Although registration of URL for ngdetails is executed on top level
    of Horizon, ngdetails view is not needed to be loaded in login page,
    i.e. openstack_auth side.
    To fix this issue, this patch moves registration of URL for ngdetails
    into openstack_dashboard side.

    Conflicts:
     openstack_dashboard/test/urls.py
     openstack_dashboard/urls.py

    The above conflicts are caused by bp/django2-support which landed in Rocky,
    particully by https://review.openstack.org/#/c/527323/12.

    Another problem:

    ngdetails url doesn't have project prefix after Ocata release, pls see:
    https://github.com/openstack/horizon/blob/stable/ocata/ \
        openstack_dashboard/static/app/core/images/images.service.js#L59
    https://github.com/openstack/horizon/blob/stable/pike/ \
        openstack_dashboard/static/app/core/images/images.service.js#L69

    So the following simple changes need to be made in urls.py
    in addition to the primitive backport patches.

    -ngdetails_url = url(r'^ngdetails/',
    +ngdetails_url = url(r'^project/ngdetails/',

    Change-Id: Ib039417b4e666c2341f17ac05fd7723bc758816c
    Closes-Bug: #1754133
    Closes-Bug: #1753557
    (cherry picked from commit f494c6f2d475bfc936b78fda7ce11ed4d46c7224)
    (cherry picked from commit 6f6f46dc6d2f38719b114a80edabe2eb01b1ab06)
    Signed-off-by: Zhang Hua <email address hidden>

[OpenStack Infra (hudson-openstack)]

This issue was fixed in the openstack/horizon ocata-eol release.