Depending on the size of the datatable, sometimes, the search
bar is "hidden" due to the user scrolling. To make the
interface more user-friendly, it is interesting that both
the search bar and the sidebar are always displayed. Therefore,
this patch is introducing changes to always pin the search bar
and the sidebar at the top of the page.
Closes-Bug: #1928678
Change-Id: I9186a4fa1dd2a16f75464ff3bb1c0c9b76a12cc7
Pages can not display normal when language is Simplified Chinese(zh-cn),
a row in the table can display only one Chinese character.
Remove "width: 100%" rule from the "word-wrap" class.
The page should now display normally.
Partial-Bug: #1936830
Change-Id: If72d49c78a9f83687785a1225151d819b85e88d2
Manage members dialog has a dropdown which lists all the role names.
If a role name is long enough, it pushes all the roles to the left
and hides them partially. This patch adds horizontal scrollbar for
such cases.
Closes-Bug: #1926511
Change-Id: I1bbf3b23717f9924974920d6569e018b94e3dbe8
It is easy enough to create instances in the wrong project.
This patch displays project name at launch instance dialog.
Closes-Bug: #1895588
Change-Id: Ied681bc3d1b4213bd6bacb3042b377ec2ac10855
As the label is not inline with filter added
bootstrap to make it adjust with screen-width
Change-Id: I189b0da7e4194e2e65230019f99598d97a50f802
Closes-Bug: #1445591
When member name is longer than $members-list-item-width
(130px) in members list (for example, project group in Edit
Project), current text-overflow will put ... (ellipsis) at
the end of the name and name will be truncated.
Updated the styling of .member class to make max-width
dynamic 80% and wrap the name in case it is really long.
Change-Id: Ic295a9b1e7fd3525c633d51a60054e713da6a657
Closes-bug: #1843480
ModalFormService (horizon.framework.widgets.form.ModalFormService,
used in create key pair dialog or create user dialog) and WizardModalService
(horizon.framework.widgets.modal.wizard-modal.service, used in create instance
dialog or create image dialog) are used in dialogs for create/edit/etc in Angularized
panel. But their help descriptions are shown in different style.
Angularization proposes new look and feel, so ModalFormService should follow
new style for help description like WizardModalService.
This patch proposes new style for help in dialogs that uses ModalFormService.
And "?" button for opening help panel is overlaped on input field on the first row,
so this patch moves it up little bit.
In this new style, if the help contents is too simple, it is not needed to
make description space in the right harf of dialog for looks consistency,
it is prefer not to add help panel, i.e. simply do not show "?" button.
Change-Id: Ia720180c7aaef1f3d9c5e24dbebe3fe2d796d6c7
Closes-Bug: #1781151
Make NG table get page size from the items per page setting
instead of a fixed number which is 20.
The styling of the pagination control is the same as the
django table with the prev and next links.
Co-Authored-By: Liuqing Jing <jing.liuqing@99cloud.net>
Co-Authored-By: Vladislav Kuzmin <vkuzmin@mirantis.com>
Change-Id: Ie5307e335ca3251a342d370e7277fe16067f7949
Closes-Bug: #1647677
They are forgot to split out from horizon.
They already have been moved to neutron-fwaas-dashboard
in https://review.openstack.org/#/c/541055/,
so we can safely drop them from horizon.
Change-Id: I8e74ed93085733f781c99423b6b1c7b15f5ea244
Closes-Bug: #1747500
In some cases by moving the network topology svg around and
playing with the zoom, you can lose track of it as it goes
out of view. Provide a button that resets the visualization
so it gets in the center and removes zoom.
Co-Authored-By: Ameed Ashour <Ameed.Ashour.ext@nokia.com>
Co-Authored-By: Paul Karikh <pkarikh@mirantis.com>
Change-Id: Ide5e10ec82972890fe20d68c4aa1d367df9863f6
Closes-Bug: #1540484
Initially the color changed with hover and looked weird, now it no
longer changes color on hover.
Closes-Bug #1600004: Inconsistent table color in Flavor Popover
Change-Id: Iecc7048f7c0051bae9702bd8855f3a83680f3d09
changed the heading type from h5 to h4 to enlarge it without
altering the appearance of other h5's. This was done because
the current font size made locating the text amongst the many
larger elements on the page, this change allows a user to
quickly identify the purpose of the sections below.
Closes-Bug #1743683
Change-Id: I992ed598d59e4fef6baa18139288782003a1ade3
This patch also adds checks for executable files in
pep8 job.
nose ignores executable files by default, so it is important
to ensure executable flag is not set for test files [1].
openstack_dashboard/test/test_plugins/panel_tests.py was not
tested actually and it was broken. This commit fixes it too.
[1] http://nose.readthedocs.io/en/latest/usage.html#cmdoption-exe
Co-Authored-By: Ivan Kolodyazhny <e0ne@e0ne.info>
Change-Id: I3a124fa2f9f0676b2b43a094e32e3d8b18fa6005
IE11/Edge browsers doesn't scale SVG images correct if
weight and height is specified directly in SVG. Also these
browsers doesn't work well with max-height style.
Change-Id: I3fe643dd5e0d47cb0e5a658c84d23a8750c217e7
Closes-Bug: #1715674
This change is to introduce a flexible mechanism for projects to
add content to horizon's navbar.
- Introduces a new plugin file variable called ADD_HEADER_SECTIONS,
which will take a list of views. These are template views that
will be used to render individual header sections.
- There is a new view in openstack_dashboard/views.py to cycle
through these added views and combine them into the complete
header to be added to the navbar.
- This view is queried by newly added javascript after page load.
On response it is inserted into the page's navbar.
If more than one header is present, the first will be shown in
the navbar, while the rest are added to a drop-down menu.
- The currently displayed header can be changed by clicking on a
new header in the drop-down; this is stored in a cookie to
persist the selection between pages.
- Unit tests were modified/added to verify the new plugin entry
can be parsed successfully and the main header view can parse
a plugin's view successfully
Change-Id: I177b69ec4e78c17f827e540a7e669af1c29e8b59
Implements: blueprint extensible-header
Signed-off-by: Tyler Smith <tyler.smith@windriver.com>
This removes some oddities with the CSS causing select menus to be
hidden in some circumstances. The side effect of this is that when the
modal body is tall, the window now scrolls instead of the body. I'm not
sure if this is actually bad, but its different.
Change-Id: If890ada4c1c450962789db23e9b4cfc50fe77900
Closes-Bug: 1603496
The datepicker plugin that we use provides its own css file, which we
were including and using, however, it was not inheriting any theme
variables. Because the CSS was built with the default Bootstrap
skin in mind, it looked fine until you tried it on a different theme
and it inherited nothing.
A very minimal SCSS has been provided that actually pulls in theme
variables. The datepicker markup has been broken into templates that
will allow more granular overrides.
Change-Id: I3b6c92a205b2bfff908cb720974821db517a6a3f
Partially-implements: blueprint horizon-dynamic-theme
Partially-Implements: blueprint bootstrap-html-standards
Cursor styling is overridden by 'pointer-events: none' as the item
is no longer the target of mouse events, so the cursor will always
be default.
Change-Id: I672d590b1e1da5aabba12dfb77f4cc4bde71e4cd
Much like the themable selects and checkboxes, number spinners
should also be themable.
Standard number spinners are not very customizable. We should use
existing buttons and fonts to add their functionality to allow a
richer experience if desired downstream.
An example of how to customize the spinner was placed in Material.
The example shows how to use flexbox to change layout type from
column to row, change icon order, and how to override the icons.
'autocomplete' needs to be false on this new element, otherwise
the browser will retain and load the last value without actually
triggering any JavaScript events by which we can key on and update
the state of the spinner buttons.
Change-Id: Ifd266cd515a903841e2d28e2f4731879116e3513
Closes-bug: #1598311
Added two charts for Number of Volumes and Total Volume Storage quotas
on Angular launch instance modal when cinder is enabled.
The charts reflect the volume usage of the new instances to be created
as the user changes the configuration on the modal.
Updated the chart styling for the charts to align better.
Change-Id: Ie744ada2317624153fcfdf9abdf4d7b26996a35e
Partially-implements: blueprint launch-instance-volume-quotas
Apple devices handle website icons through Apple Touch
Icon which requires apple-touch-icon tag in stylesheet.
Also Safari pinned tab icon requires a separate SVG
for being correctly displayed.
Change-Id: I108039b263dafee3f0f23a4f7daa796eca36a52f
Closes-Bug: #1689504
The Horizon spinner was using a spinner generated and animated
entirely out of JavaScript. Since CSS3 provides animates and we have
access to icon fonts, doing everything with JavaScript is not
necessary and actually taxing on the browser. Plus, all of the
spinner options were being passed in and around with JavaScript,
including the colors. This makes it supremely difficult to use the
theme to style the spinner.
The new spinner is just defined by a handful of templates now. There
are two clientside templates to support Legacy Horizon, and one
template in the Angular to support spinners going forward. Legacy
Horizon had two forms of spinners, so it was broken up. Angular as
not yet made use of the inline spinner, but should follow the same
markup when it is made.
There are two types of spinners, inline spinners (those shown when a
dynamic tab content is loading) and modal spinners (various other
places). These are consistent with each other for the 'default'
experience, but their experience can be entirely customized separate
from each other. 'material' has been augmented with loaders defined
within their design spec to show the power of this new feature.
horizon.templates.js was augmented with this refactor to support only
having to compile one tempalte at a time (instead of all of them) and
caching that template so that all of them can be recompiled later.
Also, horizon.loader.js was added to house template compilation code
that was repeated in several locations.
To test overwriting page modal spinner and inline-modal spinner
examples, please follow the instructions in _loading_inline_exmaple.html,
_loading_modal_example.html under
openstack_dashboard/themes/material/templates/horizon/client_side
Change-Id: I92bc786160e070d30691eeabd4f2a50d6e2bb395
Partially-implements: blueprint horizon-theme-css-reorg
Partially-Implements: blueprint bootstrap-html-standards
Closes-bug: #1570485
A developer panel that allows you to edit schema forms in real-time,
with multiple examples. Also, you can view that same form in a
standard Horizon modal to preview what the form will look like. Based
on http://schemaform.io/examples/bootstrap-example.html
Also fixes some bugs in the schema-form implementation:
- Arrays cleaned up and fixed
- Tab arrays cleaned up
- Improved modal form to use schema.title if available
Co-Authored-By: Rob Cresswell <robert.cresswell@outlook.com>
Change-Id: Ia75a18d4c0c064ae618ee923cd6d602b1ef6e66e
The media query for the sidebar menu was incorrect. This patch
updates the correct min value when the sidebar should be displayed
Change-Id: If6c424843d559aba87caf19333e1b725bf24e4cc
Closes-bug: #1661422
This patch updates the OpenStack logos across Horizon to the newer
versions. It also uses SVG files instead of PNG, so that it scales
better.
Change-Id: Ief3661023332ed6777256d20a4dc865f6a51695f
Closes-Bug: 1637490
Added space between the nav-tabs and tab content on details panels.
Removed the bullet points in front of instance IP addresses
and security groups.
Change-Id: I426e73eca0ef8ac57434631da75cb602674be893
Closes-bug: #1625310
- Make menu responsive (hides on smaller screens, e,g, 1/2 laptop screen,
tablet, mobile)
- Add aria parameters for accessibility
- Show current focus when navigating (accessibility)
- Remove the blue outline when clicking links in Chrome
- Makes menu less hideous
Change-Id: I1cdfa079f0b371d1afddefa67d8a21e93abde9ee
Implements: blueprint navigation-improvements
Closes-Bug: 1315488
Closes-Bug: 1628274
The default bootstrap styling for table rows uses the same classes as
alerts (warning, danger etc). Rather than layering additional logic
around this with a new class, we should just fall back to the documented
boostrap method.
Also resets the warning colour to its default bootstrap variable, rather
than carrying an altered version.
Change-Id: I3472244fcbbd121a8de48d78084554760dab6385
Closes-Bug: 1615632
Adds a word-break class that can be added to tables to prevent large
column values breaking the table shape.
Change-Id: Icca10d9c29254d176dc7f8b7c039bc19c3f52c72
Related-Bug: 1565724
Closes-Bug: 1584785
This patch reduces duplication arbitrary directory choices for
xstatic package locations in the static directory.
It moves the xstatic configuration from the library into the
settings file, and the supporting functions move to
the openstack_dashboard.utils.settings module. Having the xstatic
module list in settings allows deployers to add new modules.
It standardises the paths the files are served from, reducing
potential conflicts.
It simplifies the interaction with the xstatic modules, and also uses
the new MAIN variable if present to determine the entry points used.
Since some of the xstatic packages were installed into special
snowflakes directories (not following a pattern) the references to
those (bootstrap_scss and font_awesome) have been fixed.
Change-Id: Ia5be0e96fff1a4ddd6058d6b030ddf96da4b46e7
Since large Glance images even temporarily stored on dashboard side
tend to fill up Web Server filesystem, it is desirable to route image
payload directly to Glance service (which usually streams it to
storage backend, which in turn has plenty of space).
To make it possible we need to trick Django into thinking that a file
was selected inside FileInput, while its contents are not actually
transferred to Django server. Then, once image is created client-side
code needs to know the exact url the image payload needs to be
transferred to. Both tasks are solved via using ExternalFileField /
ExternalUploadMeta classes which allow to work around the usual Django
form processing workflow with minimal changes to CreateImage form
business logic.
The client-side code relies on CORS being enabled for Glance service
(otherwise browser would forbid the PUT request to a location
different from the one form content came from). In a Devstack setup
you'll need to edit [cors] section of glance-api.conf file, setting
`allowed_origin` setting to the full hostname of the web server (say,
http://<HOST_IP>/dashboard) and restart glance-api process.
A progress bar is implemented to track the progress of a file upload,
in case a really huge image is transferred.
The new machinery could be easily switched on/off with a single
setting `HORIZON_IMAGES_UPLOAD_MODE` set to 'direct' / 'legacy'.
Related-Bug: #1467890
Closes-Bug: #1403129
Implements blueprint: horizon-glance-large-image-upload
Change-Id: I01d02f75268186b43066df6fd966aa01c08e01d7