15 |
16 | ```js{5}
17 | // Sample method from Reboot BMC page
18 | rebootBmc() {
19 | this.$store
20 | .dispatch('controls/rebootBmc')
21 | .then(message => this.successToast(message))
22 | .catch(({ message }) => this.errorToast(message));
23 | }
24 |
25 | // Methods used in this example
26 | methods: {
27 | makeSuccessToast() {
28 | this.successToast('This is a success toast and will be dismissed after 10 seconds.');
29 | },
30 | makeErrorToast() {
31 | this.errorToast('This is an error toast and must be dismissed by the user.');
32 | },
33 | makeWarningToast() {
34 | this.warningToast('This is a warning toast and must be dismissed by the user.');
35 | },
36 | makeInfoToast() {
37 | this.infoToast('This is an info toast and must be dismissed by the user.');
38 | },
39 | }
40 | ```
41 |
42 | ## Additional options
43 |
44 | The first argument for each method will be the toast body content. It accepts a
45 | string value or an array of strings for toasts needing to display multiple lines
46 | of content.
47 |
48 | The BVToastMixin also accepts additional options as a second argument. Pass an
49 | object with a `title` property to change the default toast title. Include a
50 | `refreshAction` property, set to true, to include a link that refreshes the
51 | application. Include a `timestamp` property, set to true, to include a timestamp
52 | in the toast.
53 |
54 | 
56 |
57 | ```js
58 |
59 | methods: {
60 | makeInfoToast() {
61 | this.infoToast([
62 | 'This is a toast with multi-lined body content.',
63 | 'Just pass an array of strings!'
64 | ], {
65 | title: 'This is an example',
66 | refreshAction: true,
67 | timestamp: true
68 | })
69 | }
70 | }
71 | ```
72 |
--------------------------------------------------------------------------------
/docs/guide/components/toasts/toast-options.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openbmc/webui-vue/7fb9bb4f60eef821fb3964888a25cbc4e4e54718/docs/guide/components/toasts/toast-options.png
--------------------------------------------------------------------------------
/docs/guide/components/toasts/toast.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openbmc/webui-vue/7fb9bb4f60eef821fb3964888a25cbc4e4e54718/docs/guide/components/toasts/toast.png
--------------------------------------------------------------------------------
/docs/guide/guidelines/colors.md:
--------------------------------------------------------------------------------
1 | # Colors
2 |
3 | This color palette has been agreed upon by the OpenBMC community and differs
4 | from the Bootstrap color patterns. The OpenBMC palette includes custom hex
5 | values, along with additional blue, green, red, and yellow color variables used
6 | as accent colors for components. The `.scss` component files use these accent
7 | colors to override default styles set by the Bootstrap library.
8 |
9 | - [Learn more about theme customization](/customization/theme/)
10 | - [Open an issue in the OpenBMC webui-vue repo](https://github.com/openbmc/webui-vue/issues/new/choose)
11 | to request a change
12 | - [Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors)
13 |
14 | ## Grays
15 |
16 |
3 |
5 |
6 |
7 |
36 |
37 |
40 |
--------------------------------------------------------------------------------
/src/assets/styles/_obmc-custom.scss:
--------------------------------------------------------------------------------
1 | // Vendor styles
2 | @import "./bootstrap";
3 | @import "~bootstrap-vue/src/index";
4 |
5 | // Custom BMC styles
6 | @import "./bmc/custom";
7 |
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_alert.scss:
--------------------------------------------------------------------------------
1 | .alert {
2 | display: flex;
3 | padding: $spacer;
4 | border-width: 0 0 0 3px;
5 | color: gray("800");
6 | margin-bottom: $spacer;
7 |
8 | &.small {
9 | padding: $spacer / 2;
10 | font-size: 1rem;
11 | }
12 |
13 | .close {
14 | font-weight: 300;
15 | opacity: 1;
16 | }
17 |
18 | .alert-icon {
19 | display: inline-flex;
20 | align-items: flex-start;
21 | margin-right: $spacer;
22 | margin-bottom: $spacer;
23 |
24 | @include media-breakpoint-up(sm) {
25 | margin-bottom: 0;
26 | }
27 | }
28 |
29 | .alert-content {
30 | flex: 1 1 auto;
31 | }
32 |
33 | .alert-title {
34 | margin-bottom: $spacer / 2;
35 | }
36 |
37 | .alert-msg {
38 | p + p {
39 | margin-bottom: $spacer;
40 | }
41 |
42 | p:last-of-type {
43 | margin-bottom: 0;
44 | }
45 | }
46 |
47 | &.alert-info {
48 | border-left-color: theme-color("info");
49 | background-color: theme-color-light("info");
50 | fill: theme-color("info");
51 | }
52 |
53 | &.alert-success {
54 | border-left-color: theme-color("success");
55 | background-color: theme-color-light("success");
56 | fill: theme-color("success");
57 | }
58 |
59 | &.alert-danger {
60 | border-left-color: theme-color("danger");
61 | background-color: theme-color-light("danger");
62 | fill: theme-color("danger");
63 | }
64 |
65 | &.alert-warning {
66 | border-left-color: theme-color("warning");
67 | background-color: theme-color-light("warning");
68 | fill: theme-color("warning");
69 | }
70 | }
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_badge.scss:
--------------------------------------------------------------------------------
1 | .badge-pill {
2 | // Need to explicitly set border-radius
3 | // for pill variant because global $enable-rounded
4 | // Bootstrap setting removes rounded pill style
5 | border-radius: 10rem;
6 | fill: currentColor;
7 | font-weight: 400;
8 | line-height: 1.5;
9 | display: inline-flex;
10 | .close {
11 | font-size: 1em;
12 | margin-left: $spacer/2;
13 | font-weight: inherit;
14 | color: inherit;
15 | }
16 | }
17 |
18 | .badge-primary {
19 | background-color: theme-color-light("info");
20 | color: theme-color("info");
21 | }
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_base.scss:
--------------------------------------------------------------------------------
1 | dt,
2 | legend,
3 | label {
4 | color: gray("800");
5 | font-size: 14px;
6 | font-weight: 400;
7 | line-height: 1.4285;
8 | }
9 |
10 | h1,
11 | .h1 {
12 | font-size: 2.625rem;
13 | font-weight: 300;
14 | line-height: 1.238;
15 | }
16 |
17 | h2,
18 | .h2 {
19 | font-size: 2.25rem;
20 | font-weight: 300;
21 | line-height: 1.3333;
22 | }
23 |
24 | h3,
25 | .h3 {
26 | font-size: 1.75rem;
27 | font-weight: 400;
28 | line-height: 1.2857;
29 | }
30 |
31 | h4,
32 | .h4 {
33 | font-size: 1.25rem;
34 | font-weight: 400;
35 | line-height: 1.3;
36 | }
37 |
38 | h5,
39 | .h5 {
40 | font-size: 1rem;
41 | font-weight: 500;
42 | line-height: 1.375;
43 | }
44 |
45 | h6,
46 | .h6 {
47 | font-size: 0.875rem;
48 | font-weight: 500;
49 | line-height: 1.2857;
50 | }
51 |
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_bootstrap-grid.scss:
--------------------------------------------------------------------------------
1 | .container-xl {
2 | // Fluid layout container class sets 100%
3 | // width until xl breakpoint. Once a max-width
4 | // is set, setting the left margin to 0 is needed
5 | // so the content doesn't center align
6 | // https://bootstrap-vue.org/docs/components/layout#fluid-width-container
7 | margin-left: 0;
8 | }
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_buttons.scss:
--------------------------------------------------------------------------------
1 | @import 'bootstrap/dist/css/bootstrap.css';
2 |
3 | .btn {
4 | padding-top: $spacer / 2;
5 | padding-right: $spacer;
6 | padding-bottom: $spacer / 2;
7 | padding-left: $spacer;
8 | display: inline-flex;
9 | align-items: center;
10 | justify-content: space-around;
11 | svg {
12 | margin-right: $spacer / 4;
13 | }
14 | &:disabled {
15 | color: gray("600");
16 | fill: currentColor;
17 | box-shadow: none !important;
18 | &:not(.btn-link) {
19 | border-color: gray("400");
20 | background-color: gray("400");
21 | }
22 | }
23 | }
24 |
25 | .btn-primary {
26 | fill: currentColor;
27 | &:focus,
28 | &:not(:disabled):not(.disabled):active:focus {
29 | border-color: $white;
30 | box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
31 | }
32 | }
33 |
34 | .btn-secondary {
35 | fill: currentColor;
36 | &:focus,
37 | &:not(:disabled):not(.disabled):active:focus {
38 | border-color: $white;
39 | box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
40 | }
41 | }
42 |
43 | // Global style for all button link
44 | .btn-link {
45 | font-weight: $headings-font-weight;
46 | fill: theme-color("primary");
47 | text-decoration: none !important;
48 | &:hover {
49 | background-color: gray("200");
50 | color: theme-color("primary");
51 | }
52 | &:active {
53 | background-color: gray("300");
54 | }
55 | &:focus {
56 | box-shadow: inset 0 0 0 2px theme-color("primary");
57 | color: theme-color("primary");
58 | outline: none;
59 | }
60 | &:disabled {
61 | box-shadow: $btn-focus-box-shadow;
62 | }
63 | }
64 |
65 | // Icon only buttons
66 | .btn-icon-only svg {
67 | margin-right: 0;
68 | }
69 |
70 | // Datepicker, clear search and Password toggle buttons
71 | .input-action-btn,
72 | .btn-datepicker {
73 | position: absolute;
74 | right: 0;
75 | top: 0;
76 | z-index: $zindex-dropdown + 1;
77 | }
78 |
79 | // Contain input buttons within input
80 | .btn-datepicker .dropdown-toggle,
81 | .input-action-btn {
82 | padding: 7px;
83 | margin: 1px;
84 | }
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_calendar.scss:
--------------------------------------------------------------------------------
1 | .b-calendar-nav {
2 | .btn {
3 | &:hover {
4 | background: none;
5 | color: theme-color("dark");
6 | }
7 | }
8 | }
9 |
10 | .b-calendar-grid .btn {
11 | display: inline-block;
12 | }
13 |
14 | // Date picker focus
15 | .b-calendar .b-calendar-grid {
16 | padding: 6px 12px;
17 | }
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_card.scss:
--------------------------------------------------------------------------------
1 | .card {
2 | .bg-success {
3 | background-color: theme-color-light('success')!important;
4 | }
5 | }
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_dropdown.scss:
--------------------------------------------------------------------------------
1 | // Make calendar visible over the table
2 | .dropdown-menu {
3 | z-index: $zindex-dropdown + 1;
4 | padding: 0;
5 | }
6 | .dropdown-item {
7 | padding-left: $spacer/4;
8 | margin-top: -1 * $spacer/4;
9 | }
10 | .b-dropdown-form {
11 | padding: $spacer/2;
12 | .form-group {
13 | margin-bottom: $spacer/2;
14 | }
15 | }
16 | // Table filter dropdown clear button style
17 | .table-filter {
18 | .dropdown-item {
19 | &:hover {
20 | background-color: gray("200");
21 | }
22 | &:active {
23 | background-color: gray("300");
24 | }
25 | &:focus {
26 | outline: none;
27 | background-color: transparent;
28 | box-shadow: inset 0 0 0 2px theme-color("primary");
29 | }
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_index.scss:
--------------------------------------------------------------------------------
1 | // OpenBMC Global Style Overrides of out of the box
2 | // Bootstrap styles
3 | @import "./alert";
4 | @import "./badge";
5 | @import "./base";
6 | @import "./bootstrap-grid";
7 | @import "./buttons";
8 | @import "./calendar";
9 | @import "./card";
10 | @import "./dropdown";
11 | @import "./forms";
12 | @import "./kvm";
13 | @import "./modal";
14 | @import "./pagination";
15 | @import "./section-divider";
16 | @import "./sol";
17 | @import "./tables";
18 | @import "./toasts";
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_kvm.scss:
--------------------------------------------------------------------------------
1 | #terminal-kvm {
2 | height: calc(100vh - 300px);
3 | display: flex;
4 | &.full-window {
5 | height: calc(100vh - 80px);
6 | }
7 | div:nth-child(1) {
8 | background: transparent !important;
9 | display: block !important;
10 | overflow: hidden !important;
11 | }
12 | }
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_modal.scss:
--------------------------------------------------------------------------------
1 | .modal-header {
2 | .close {
3 | font-weight: normal;
4 | color: theme-color("dark");
5 | opacity: 1;
6 | }
7 | .modal-title {
8 | font-size: 1.25rem;
9 | font-weight: normal;
10 | line-height: 1.3;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_pagination.scss:
--------------------------------------------------------------------------------
1 | .table-pagination-select {
2 | display: flex;
3 | flex-direction: row-reverse;
4 | justify-content: flex-end;
5 | select {
6 | width: fit-content;
7 | }
8 | label {
9 | margin-left: $spacer;
10 | line-height: $spacer * 2;
11 | }
12 | }
13 |
14 | .b-pagination {
15 | @include media-breakpoint-up(sm) {
16 | justify-content: flex-end;
17 | }
18 | .page-item.active button {
19 | color: theme-color("dark");
20 | background-color: color("white");
21 | border-color: $border-color;
22 | box-shadow: inset 0px -3px theme-color("primary");
23 | }
24 | }
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_section-divider.scss:
--------------------------------------------------------------------------------
1 | .section-divider {
2 | border-bottom: 1px solid gray('400');
3 | }
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_sol.scss:
--------------------------------------------------------------------------------
1 | #terminal .xterm .xterm-viewport {
2 | overflow: auto;
3 | }
--------------------------------------------------------------------------------
/src/assets/styles/bmc/custom/_toasts.scss:
--------------------------------------------------------------------------------
1 | .b-toaster {
2 | top: 75px!important; // make sure toasts do not hide top header
3 | }
4 |
5 | // Toast component and status icon style
6 | .toast {
7 | padding: $spacer/2 $spacer/2 $spacer/2 $spacer+2;
8 | border-width: 0 0 0 3px;
9 | box-shadow: $box-shadow;
10 | .close {
11 | font-weight: 300;
12 | opacity: 1;
13 | }
14 | }
15 |
16 | .toast-header {
17 | display: flex;
18 | align-items: flex-start;
19 | background-color: inherit!important; //override specificity
20 | border: none;
21 | color: theme-color("dark")!important; //override specificity
22 | padding-bottom: 0;
23 | }
24 |
25 | .toast-icon {
26 | display: flex;
27 | margin-right: 1rem;
28 |
29 | svg {
30 | margin-left: -2.5rem;
31 | }
32 |
33 | + .close {
34 | line-height: .9;
35 | }
36 | }
37 |
38 | .toast-body {
39 | color: theme-color("dark");
40 | padding-top: 0;
41 | }
42 |
43 | .b-toast-success .toast {
44 | border-left-color: theme-color("success")!important;
45 | background-color: theme-color-light("success")!important;
46 | }
47 |
48 | .b-toast-info .toast {
49 | border-left-color: theme-color("info")!important;
50 | background-color: theme-color-light("info")!important;
51 | }
52 |
53 | .b-toast-danger .toast {
54 | border-left-color: theme-color("danger")!important;
55 | background-color: theme-color-light("danger")!important;
56 | }
57 |
58 | .b-toast-warning .toast {
59 | border-left-color: theme-color("warning")!important;
60 | background-color: theme-color-light("warning")!important;
61 | }
--------------------------------------------------------------------------------
/src/assets/styles/bmc/helpers/_colors.scss:
--------------------------------------------------------------------------------
1 | // Sass Color Variables
2 | $black: #000;
3 | $white: #fff;
4 |
5 | $blue-500: #2d60e5;
6 | $green-500: #0a7d06;
7 | $red-500: #da1416;
8 | $yellow-500: #efc100;
9 |
10 | $gray-100: #f4f4f4;
11 | $gray-200: #e6e6e6;
12 | $gray-300: #d8d8d8;
13 | $gray-400: #cccccc;
14 | $gray-500: #b3b3b3;
15 | $gray-600: #999999;
16 | $gray-700: #666666;
17 | $gray-800: #3f3f3f;
18 | $gray-900: #161616;
19 |
20 | // Sass Base Color Variables
21 | $blue: $blue-500;
22 | $green: $green-500;
23 | $red: $red-500;
24 | $yellow: $yellow-500;
25 |
26 | // Sass Theme Color Variables
27 | // Can be used as variants
28 | $danger: $red;
29 | $dark: $gray-900;
30 | $info: $blue;
31 | $light: $gray-100;
32 | $primary: $blue;
33 | $secondary: $gray-800;
34 | $success: $green;
35 | $warning: $yellow;
36 |
37 | $loading-color: $primary;
38 | $navbar-color: $dark;
39 |
--------------------------------------------------------------------------------
/src/assets/styles/bmc/helpers/_functions.scss:
--------------------------------------------------------------------------------
1 | // This function is usually used to get a lighter
2 | // theme variant color to use as a background color
3 | @function theme-color-light($variant) {
4 | @return theme-color-level($variant, -11.3);
5 | }
6 |
7 | @function theme-color-dark($variant) {
8 | @return theme-color-level($variant, 2);
9 | }
--------------------------------------------------------------------------------
/src/assets/styles/bmc/helpers/_index.scss:
--------------------------------------------------------------------------------
1 | @import "./colors";
2 | @import "./motion";
3 | @import "./variables";
4 | @import "./functions";
--------------------------------------------------------------------------------
/src/assets/styles/bmc/helpers/_motion.scss:
--------------------------------------------------------------------------------
1 | $duration--fast-01: 70ms; //Micro-interactions such as button and toggle
2 | $duration--fast-02: 110ms; //Micro-interactions such as fade
3 | $duration--moderate-01: 150ms; //Micro-interactions, small expansion, short distance movements
4 | $duration--moderate-02: 240ms; //Expansion, system communication, toast
5 | $duration--slow-01: 400ms; //Large expansion, important system notifications
6 | $duration--slow-02: 700ms; //Background dimming
7 |
8 | // https://www.carbondesignsystem.com/guidelines/motion/basics/#easing
9 | $standard-easing--productive: cubic-bezier(0.2, 0, 0.38, 0.9);
10 | $standard-easing--expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
11 | $entrance-easing--productive: cubic-bezier(0, 0, 0.38, 0.9);
12 | $entrance-easing--expressive: cubic-bezier(0, 0, 0.3, 1);
13 | $exit-easing--productive: cubic-bezier(0.2, 0, 1, 0.9);
14 | $exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
--------------------------------------------------------------------------------
/src/assets/styles/bmc/helpers/_variables.scss:
--------------------------------------------------------------------------------
1 | // Override Bootstrap Variables - node_modules/Bootstrap/scss/_variables.scss
2 | $enable-rounded: false;
3 | $enable-validation-icons: false;
4 | $transition-base: all $duration--moderate-02 $standard-easing--productive;
5 | $transition-fade: opacity $duration--moderate-01 $standard-easing--productive;
6 | $transition-collapse: height $duration--slow-01 $standard-easing--expressive;
7 |
8 | // OpenBMC Custom Variables
9 | $responsive-layout-bp: lg;
10 | $header-height: 48px;
11 | $navigation-width: 300px;
12 | $form-label-font-size: .875rem;
13 | $form-line-height: 1.25rem;
14 | $box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
15 | $focus-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
16 | border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
17 |
--------------------------------------------------------------------------------
/src/assets/styles/bootstrap/_helpers.scss:
--------------------------------------------------------------------------------
1 | @import "~bootstrap/scss/functions";
2 | @import "~bootstrap/scss/variables";
3 | @import "~bootstrap/scss/mixins";
--------------------------------------------------------------------------------
/src/assets/styles/bootstrap/_index.scss:
--------------------------------------------------------------------------------
1 | // Base
2 | @import "~bootstrap/scss/root";
3 | @import "~bootstrap/scss/reboot";
4 | @import "~bootstrap/scss/transitions";
5 | @import "~bootstrap/scss/type";
6 |
7 | // Components
8 | @import "~bootstrap/scss/alert";
9 | @import "~bootstrap/scss/badge";
10 | @import "~bootstrap/scss/breadcrumb";
11 | @import "~bootstrap/scss/button-group";
12 | @import "~bootstrap/scss/buttons";
13 | @import "~bootstrap/scss/card";
14 | @import "~bootstrap/scss/close";
15 | @import "~bootstrap/scss/code";
16 | @import "~bootstrap/scss/custom-forms";
17 | @import "~bootstrap/scss/dropdown";
18 | @import "~bootstrap/scss/forms";
19 | @import "~bootstrap/scss/grid";
20 | @import "~bootstrap/scss/images";
21 | @import "~bootstrap/scss/input-group";
22 | @import "~bootstrap/scss/list-group";
23 | @import "~bootstrap/scss/media";
24 | @import "~bootstrap/scss/modal";
25 | @import "~bootstrap/scss/nav";
26 | @import "~bootstrap/scss/navbar";
27 | @import "~bootstrap/scss/pagination";
28 | @import "~bootstrap/scss/popover";
29 | @import "~bootstrap/scss/progress";
30 | @import "~bootstrap/scss/spinners";
31 | @import "~bootstrap/scss/tables";
32 | @import "~bootstrap/scss/toasts";
33 | @import "~bootstrap/scss/tooltip";
34 |
35 | // Utils
36 | @import "~bootstrap/scss/utilities";
37 | @import "~bootstrap/scss/print";
--------------------------------------------------------------------------------
/src/components/AppHeader/index.js:
--------------------------------------------------------------------------------
1 | import AppHeader from './AppHeader';
2 | export default AppHeader;
3 |
--------------------------------------------------------------------------------
/src/components/AppNavigation/index.js:
--------------------------------------------------------------------------------
1 | import AppNavigation from './AppNavigation';
2 | export default AppNavigation;
3 |
--------------------------------------------------------------------------------
/src/components/Global/Alert.vue:
--------------------------------------------------------------------------------
1 |
2 |
15 |
19 |
16 |
18 |
20 |
22 |
3 |
11 |
15 |
16 |
17 |
18 |
54 |
55 |
60 |
--------------------------------------------------------------------------------
/src/components/Global/LoadingBar.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
19 |
20 |
30 |
--------------------------------------------------------------------------------
/src/components/Global/PageTitle.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ sectionTitle }}
4 |
3 |
6 |
7 |
8 |
39 |
40 |
48 |
--------------------------------------------------------------------------------
/src/components/Global/Search.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ title }}
4 |{{ description }}
5 |
3 |
9 |
10 |
11 |
13 |
23 |
24 |
31 |
34 |
35 |
36 |
37 |
38 |
39 |
74 |
75 |
87 |
--------------------------------------------------------------------------------
/src/components/Global/StatusIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
3 |
15 |
16 |
17 |
42 |
--------------------------------------------------------------------------------
/src/components/Global/TableToolbarExport.vue:
--------------------------------------------------------------------------------
1 |
2 | 4 | {{ $t('global.table.items', { count: totalNumberOfCells }) }} 5 |
6 |7 | {{ 8 | $t('global.table.selectedItems', { 9 | count: totalNumberOfCells, 10 | filterCount: filteredItemsCount, 11 | }) 12 | }} 13 |
14 |
3 |
11 |
15 |
16 |
17 |
18 |
71 |
72 |
105 |
--------------------------------------------------------------------------------
/src/layouts/ConsoleLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
34 |
5 |
20 |
6 |
19 |
7 | 
13 |
14 |
13 | 15 | {{ customizableGuiName }} 16 |
17 |
21 |
33 |
22 |
23 |
24 |
25 | 
31 |
32 |
31 |
6 |
7 |
8 |
15 |
16 |
36 |
37 |
38 | -
9 |
- {{ $t('pageInventory.systemIndicator.powerStatus') }} 10 |
- 11 | {{ $t(powerStatus) }} 12 | 13 |
-
17 |
- 18 | {{ $t('pageInventory.systemIndicator.identifyLed') }} 19 | 20 |
-
21 |
28 | 29 | {{ $t('global.status.on') }} 30 | 31 | {{ $t('global.status.off') }} 32 | 33 |
34 |
9 | 10 | {{ $t('pageDumps.modal.initiateSystemDumpMessage1') }} 11 | 12 |
13 |14 | {{ $t('pageDumps.modal.initiateSystemDumpMessage2') }} 15 |
16 |
17 |
7 | {{ $t('pageFirmware.alert.operationInProgress') }} 8 |
9 |13 | {{ $t('pageFirmware.alert.serverMustBePoweredOffTo') }} 14 |
15 |-
16 |
- 17 | {{ $t('pageFirmware.alert.switchRunningAndBackupImages') }} 18 | 19 |
- 20 | {{ $t('pageFirmware.alert.updateFirmware') }} 21 | 22 |
8 | {{ $t('pageFirmware.cardTitleRunning') }} 9 |
10 | 11 |-
12 |
- {{ $t('pageFirmware.cardBodyVersion') }} 13 |
- {{ runningVersion }} 14 |
21 | {{ $t('pageFirmware.cardTitleBackup') }} 22 |
23 | 24 |-
25 |
- {{ $t('pageFirmware.cardBodyVersion') }} 26 |
-
27 |
28 | 29 | {{ backupStatus }} 30 | 31 | {{ backupVersion }} 32 |
33 |
10 | {{ $t('pageFirmware.modal.switchRunningImageInfo') }} 11 |
12 |13 | {{ 14 | $t('pageFirmware.modal.switchRunningImageInfo2', { 15 | backup, 16 | }) 17 | }} 18 |
19 |11 | {{ $t('pageFirmware.modal.updateFirmwareInfo') }} 12 |
13 |14 | {{ 15 | $t('pageFirmware.modal.updateFirmwareInfo2', { 16 | running: runningBmcVersion, 17 | }) 18 | }} 19 |
20 |21 | {{ $t('pageFirmware.modal.updateFirmwareInfo3') }} 22 |
23 | 24 | 25 | {{ $t('pageFirmware.modal.updateFirmwareInfoDefault') }} 26 | 27 |
5 |
7 | -
10 |
- 11 | {{ $t('pageRebootBmc.lastReboot') }} 12 | 13 |
- 14 | {{ $filters.formatDate(lastBmcRebootTime) }} 15 | {{ $filters.formatTime(lastBmcRebootTime) }} 16 | 17 |
- -- 18 |
4 |
21 | {{ title }}
5 | 20 |-
13 |
- {{ $t('pageOverview.total') }} 14 |
- {{ dataFormatter(dumps.length) }} 15 |
-
13 |
- {{ $t('pageOverview.criticalEvents') }} 14 |
-
15 | {{ dataFormatter(criticalEvents.length) }}
16 |
17 |
18 |
-
22 |
- {{ $t('pageOverview.warningEvents') }} 23 |
-
24 | {{ dataFormatter(warningEvents.length) }}
25 |
26 |
27 |
-
9 |
- {{ $t('pageOverview.runningVersion') }} 10 |
- {{ dataFormatter(runningVersion) }} 11 |
- {{ $t('pageOverview.backupVersion') }} 12 |
- {{ dataFormatter(backupVersion) }} 13 |
-
17 |
- {{ $t('pageOverview.firmwareVersion') }} 18 |
- {{ dataFormatter(firmwareVersion) }} 19 |
-
9 |
- {{ $t('pageOverview.systemIdentifyLed') }} 10 |
-
11 |
18 | 19 | {{ $t('global.status.on') }} 20 | 21 | {{ $t('global.status.off') }} 22 | 23 |
24 |
-
10 |
- {{ $t('pageOverview.hostName') }} 11 |
- {{ dataFormatter(network.hostname) }} 12 |
-
16 |
- {{ $t('pageOverview.linkStatus') }} 17 |
- 18 | {{ dataFormatter(network.linkStatus) }} 19 | 20 |
-
26 |
- {{ $t('pageOverview.ipv4') }} 27 |
- 28 | {{ dataFormatter(network.staticAddress) }} 29 | 30 |
-
34 |
- {{ $t('pageOverview.dhcp') }} 35 |
- 36 | {{ 37 | dataFormatter( 38 | network.dhcpAddress.length !== 0 39 | ? network.dhcpAddress[0].Address 40 | : null, 41 | ) 42 | }} 43 | 44 |
-
9 |
- {{ $t('pageOverview.powerConsumption') }} 10 |
- 11 | {{ $t('global.status.notAvailable') }} 12 | 13 |
- {{ powerConsumptionValue }} W 14 |
- {{ $t('pageOverview.powerCap') }} 15 |
- 16 | {{ $t('global.status.disabled') }} 17 | 18 |
- {{ powerCapValue }} W 19 |
-
6 |
- {{ $t('pageOverview.bmcTime') }} 7 |
- 8 | {{ $filters.formatDate(bmcTime) }} 9 | {{ $filters.formatTime(bmcTime) }} 10 | 11 |
- -- 12 |
-
9 |
- {{ $t('pageOverview.model') }} 10 |
- {{ dataFormatter(serverModel) }} 11 |
- {{ $t('pageOverview.serialNumber') }} 12 |
- {{ dataFormatter(serverSerialNumber) }} 13 |
-
17 |
- {{ $t('pageOverview.serverManufacturer') }} 18 |
- {{ dataFormatter(serverManufacturer) }} 19 |
7 |
8 |
9 |
14 |
31 |
34 | Show password as plain text. Note: this will visually expose your password on the screen.
35 |
36 |
37 |
38 | `;
39 |
--------------------------------------------------------------------------------
/tests/unit/Global/__snapshots__/LoadingBar.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`LoadingBar.vue should render correctly 1`] = `
4 |
7 |
13 | `;
14 |
--------------------------------------------------------------------------------
/tests/unit/Global/__snapshots__/PageTitle.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`PageTitle.vue should render correctly 1`] = `
4 | 8 | PageSection test title 9 |
10 | 11 | 12 |
7 |
15 | `;
16 |
--------------------------------------------------------------------------------
/tests/unit/Global/__snapshots__/Search.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Search.vue should render correctly 1`] = `
4 | 8 | Page Title 9 |
10 | 11 |12 | A page title test description 13 |
14 |
7 |
62 | `;
63 |
--------------------------------------------------------------------------------
/tests/unit/Global/__snapshots__/StatusIcon.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`StatusIcon.vue should render correctly 1`] = `
4 |
27 | `;
28 |
--------------------------------------------------------------------------------
/tests/unit/Global/__snapshots__/TableCellCount.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`TableCellCount.vue should render correctly 1`] = `
4 |
12 |
19 |
61 |
20 |
60 |
24 |
25 |
56 |
57 |
58 |
59 |
28 |
43 |
44 |
45 |
52 |
53 |
54 |
55 |
7 |
13 | `;
14 |
--------------------------------------------------------------------------------
/tests/unit/Global/__snapshots__/TableToolbar.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`TableToolbar.vue should render correctly 1`] = `
4 | 8 | 9 | global.table.items 10 | 11 |
12 |