IA update: Add logs and update overview icon
This is the first patchset of the information architecture changes.
These changes are the result of several months of design research with
users to improve the existing information architecture (IA). More
information can we found in the Github story.
This patchset will add a Logs section and move event logs and dumps from
the Health section to the new Logs section. It will also update the icon
used for the Overview page.
Github story: https://github.com/openbmc/webui-vue/issues/56
Testing:
1. IBM build:
- Logs contained Event logs and dumps
- Both pages rendered when clicking link
2. Intel build
- Logs contained Event logs only
- Logs page rendered when clicking link
3. Tested default build
- Logs contained Event logs only
- Logs page rendered when clicking link
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I4621837202cf5ad3469d6ea460d9a5bdc79c8816
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index f7989d2..df6acbf 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -49,7 +49,7 @@
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto helper-menu">
<b-nav-item
- to="/health/event-logs"
+ to="/logs/event-logs"
data-test-id="appHeader-container-health"
>
<status-icon :status="healthStatusIcon" />
diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js
index f9ba077..42552da 100644
--- a/src/components/AppNavigation/AppNavigationMixin.js
+++ b/src/components/AppNavigation/AppNavigationMixin.js
@@ -1,4 +1,5 @@
-import IconAnalytics from '@carbon/icons-vue/es/analytics/16';
+import IconDashboard from '@carbon/icons-vue/es/dashboard/16';
+import IconTextLinkAnalysis from '@carbon/icons-vue/es/text-link--analysis/16';
import IconDataCheck from '@carbon/icons-vue/es/data--check/16';
import IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16';
import IconSettings from '@carbon/icons-vue/es/settings/16';
@@ -7,7 +8,8 @@
const AppNavigationMixin = {
components: {
- iconOverview: IconAnalytics,
+ iconOverview: IconDashboard,
+ iconLogs: IconTextLinkAnalysis,
iconHealth: IconDataCheck,
iconControl: IconSettingsAdjust,
iconConfiguration: IconSettings,
@@ -24,15 +26,22 @@
icon: 'iconOverview',
},
{
- id: 'health',
- label: this.$t('appNavigation.health'),
- icon: 'iconHealth',
+ id: 'logs',
+ label: this.$t('appNavigation.logs'),
+ icon: 'iconLogs',
children: [
{
id: 'event-logs',
label: this.$t('appNavigation.eventLogs'),
- route: '/health/event-logs',
+ route: '/logs/event-logs',
},
+ ],
+ },
+ {
+ id: 'health',
+ label: this.$t('appNavigation.health'),
+ icon: 'iconHealth',
+ children: [
{
id: 'hardware-status',
label: this.$t('appNavigation.hardwareStatus'),
diff --git a/src/env/components/AppNavigation/ibm.js b/src/env/components/AppNavigation/ibm.js
index b8186a4..8792ccc 100644
--- a/src/env/components/AppNavigation/ibm.js
+++ b/src/env/components/AppNavigation/ibm.js
@@ -1,4 +1,5 @@
-import IconAnalytics from '@carbon/icons-vue/es/analytics/16';
+import IconDashboard from '@carbon/icons-vue/es/dashboard/16';
+import IconTextLinkAnalysis from '@carbon/icons-vue/es/text-link--analysis/16';
import IconDataCheck from '@carbon/icons-vue/es/data--check/16';
import IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16';
import IconSettings from '@carbon/icons-vue/es/settings/16';
@@ -7,7 +8,8 @@
const AppNavigationMixin = {
components: {
- iconOverview: IconAnalytics,
+ iconOverview: IconDashboard,
+ iconLogs: IconTextLinkAnalysis,
iconHealth: IconDataCheck,
iconControl: IconSettingsAdjust,
iconConfiguration: IconSettings,
@@ -24,20 +26,27 @@
icon: 'iconOverview',
},
{
- id: 'health',
- label: this.$t('appNavigation.health'),
- icon: 'iconHealth',
+ id: 'logs',
+ label: this.$t('appNavigation.logs'),
+ icon: 'iconLogs',
children: [
{
id: 'dumps',
label: this.$t('appNavigation.dumps'),
- route: '/health/dumps',
+ route: '/logs/dumps',
},
{
id: 'event-logs',
label: this.$t('appNavigation.eventLogs'),
- route: '/health/event-logs',
+ route: '/logs/event-logs',
},
+ ],
+ },
+ {
+ id: 'health',
+ label: this.$t('appNavigation.health'),
+ icon: 'iconHealth',
+ children: [
{
id: 'hardware-status',
label: this.$t('appNavigation.hardwareStatus'),
diff --git a/src/env/components/AppNavigation/intel.js b/src/env/components/AppNavigation/intel.js
index 7144487..9c3591f 100644
--- a/src/env/components/AppNavigation/intel.js
+++ b/src/env/components/AppNavigation/intel.js
@@ -1,4 +1,5 @@
-import IconAnalytics from '@carbon/icons-vue/es/analytics/16';
+import IconDashboard from '@carbon/icons-vue/es/dashboard/16';
+import IconTextLinkAnalysis from '@carbon/icons-vue/es/text-link--analysis/16';
import IconDataCheck from '@carbon/icons-vue/es/data--check/16';
import IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16';
import IconSettings from '@carbon/icons-vue/es/settings/16';
@@ -7,7 +8,8 @@
const AppNavigationMixin = {
components: {
- iconOverview: IconAnalytics,
+ iconOverview: IconDashboard,
+ iconLogs: IconTextLinkAnalysis,
iconHealth: IconDataCheck,
iconControl: IconSettingsAdjust,
iconConfiguration: IconSettings,
@@ -24,15 +26,22 @@
icon: 'iconOverview',
},
{
- id: 'health',
- label: this.$t('appNavigation.health'),
- icon: 'iconHealth',
+ id: 'logs',
+ label: this.$t('appNavigation.logs'),
+ icon: 'iconLogs',
children: [
{
id: 'event-logs',
label: this.$t('appNavigation.eventLogs'),
- route: '/health/event-logs',
+ route: '/logs/event-logs',
},
+ ],
+ },
+ {
+ id: 'health',
+ label: this.$t('appNavigation.health'),
+ icon: 'iconHealth',
+ children: [
{
id: 'hardware-status',
label: this.$t('appNavigation.hardwareStatus'),
diff --git a/src/env/router/ibm.js b/src/env/router/ibm.js
index 91b70a7..8b94cf7 100644
--- a/src/env/router/ibm.js
+++ b/src/env/router/ibm.js
@@ -3,7 +3,7 @@
import ClientSessions from '@/views/AccessControl/ClientSessions';
import ConsoleLayout from '@/layouts/ConsoleLayout.vue';
import DateTimeSettings from '@/views/Configuration/DateTimeSettings';
-import EventLogs from '@/views/Health/EventLogs';
+import EventLogs from '@/views/Logs/EventLogs';
import FactoryReset from '@/views/Control/FactoryReset';
import Firmware from '@/views/Configuration/Firmware';
import HardwareStatus from '@/views/Health/HardwareStatus';
@@ -29,7 +29,7 @@
import i18n from '@/i18n';
// Custom components
-import Dumps from '@/views/Health/Dumps';
+import Dumps from '@/views/Logs/Dumps';
const routes = [
{
@@ -96,7 +96,7 @@
},
},
{
- path: '/health/dumps',
+ path: '/logs/dumps',
name: 'dumps',
component: Dumps,
meta: {
@@ -104,7 +104,7 @@
},
},
{
- path: '/health/event-logs',
+ path: '/logs/event-logs',
name: 'event-logs',
component: EventLogs,
meta: {
diff --git a/src/env/router/intel.js b/src/env/router/intel.js
index 53f6154..3e3349d 100644
--- a/src/env/router/intel.js
+++ b/src/env/router/intel.js
@@ -3,7 +3,7 @@
import ClientSessions from '@/views/AccessControl/ClientSessions';
import ConsoleLayout from '@/layouts/ConsoleLayout.vue';
import DateTimeSettings from '@/views/Configuration/DateTimeSettings';
-import EventLogs from '@/views/Health/EventLogs';
+import EventLogs from '@/views/Logs/EventLogs';
import Firmware from '@/views/Configuration/Firmware';
import HardwareStatus from '@/views/Health/HardwareStatus';
import Kvm from '@/views/Control/Kvm';
@@ -100,7 +100,7 @@
},
},
{
- path: '/health/event-logs',
+ path: '/logs/event-logs',
name: 'event-logs',
component: EventLogs,
meta: {
diff --git a/src/env/store/ibm.js b/src/env/store/ibm.js
index ff20b9c..787f897 100644
--- a/src/env/store/ibm.js
+++ b/src/env/store/ibm.js
@@ -1,5 +1,5 @@
import store from '@/store';
-import DumpsStore from '@/store/modules/Health/DumpsStore';
+import DumpsStore from '@/store/modules/Logs/DumpsStore';
store.unregisterModule('virtualMedia');
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index eccd302..a5fd820 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -111,6 +111,7 @@
"health": "Health",
"kvm": "@:appPageTitle.kvm",
"ldap": "@:appPageTitle.ldap",
+ "logs": "Logs",
"localUserManagement": "@:appPageTitle.localUserManagement",
"managePowerUsage": "@:appPageTitle.managePowerUsage",
"networkSettings": "@:appPageTitle.networkSettings",
diff --git a/src/router/routes.js b/src/router/routes.js
index 7501073..1c5d57b 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -2,7 +2,7 @@
import ChangePassword from '@/views/ChangePassword';
import ConsoleLayout from '@/layouts/ConsoleLayout.vue';
import DateTimeSettings from '@/views/Configuration/DateTimeSettings';
-import EventLogs from '@/views/Health/EventLogs';
+import EventLogs from '@/views/Logs/EventLogs';
import FactoryReset from '@/views/Control/FactoryReset';
import Firmware from '@/views/Configuration/Firmware';
import HardwareStatus from '@/views/Health/HardwareStatus';
@@ -104,7 +104,7 @@
},
},
{
- path: '/health/event-logs',
+ path: '/logs/event-logs',
name: 'event-logs',
component: EventLogs,
meta: {
diff --git a/src/store/index.js b/src/store/index.js
index 29dfe4f..5aba466 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -13,7 +13,7 @@
import PowerControlStore from './modules/Control/PowerControlStore';
import PowerPolicyStore from './modules/Control/PowerPolicyStore';
import NetworkSettingStore from './modules/Configuration/NetworkSettingsStore';
-import EventLogStore from './modules/Health/EventLogStore';
+import EventLogStore from './modules/Logs/EventLogStore';
import SensorsStore from './modules/Health/SensorsStore';
import ServerLedStore from './modules/Control/ServerLedStore';
import SystemStore from './modules/Health/SystemStore';
diff --git a/src/store/modules/Health/DumpsStore.js b/src/store/modules/Logs/DumpsStore.js
similarity index 100%
rename from src/store/modules/Health/DumpsStore.js
rename to src/store/modules/Logs/DumpsStore.js
diff --git a/src/store/modules/Health/EventLogStore.js b/src/store/modules/Logs/EventLogStore.js
similarity index 100%
rename from src/store/modules/Health/EventLogStore.js
rename to src/store/modules/Logs/EventLogStore.js
diff --git a/src/views/Health/Dumps/Dumps.vue b/src/views/Logs/Dumps/Dumps.vue
similarity index 100%
rename from src/views/Health/Dumps/Dumps.vue
rename to src/views/Logs/Dumps/Dumps.vue
diff --git a/src/views/Health/Dumps/DumpsForm.vue b/src/views/Logs/Dumps/DumpsForm.vue
similarity index 100%
rename from src/views/Health/Dumps/DumpsForm.vue
rename to src/views/Logs/Dumps/DumpsForm.vue
diff --git a/src/views/Health/Dumps/DumpsModalConfirmation.vue b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
similarity index 100%
rename from src/views/Health/Dumps/DumpsModalConfirmation.vue
rename to src/views/Logs/Dumps/DumpsModalConfirmation.vue
diff --git a/src/views/Health/Dumps/index.js b/src/views/Logs/Dumps/index.js
similarity index 100%
rename from src/views/Health/Dumps/index.js
rename to src/views/Logs/Dumps/index.js
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
similarity index 100%
rename from src/views/Health/EventLogs/EventLogs.vue
rename to src/views/Logs/EventLogs/EventLogs.vue
diff --git a/src/views/Health/EventLogs/index.js b/src/views/Logs/EventLogs/index.js
similarity index 100%
rename from src/views/Health/EventLogs/index.js
rename to src/views/Logs/EventLogs/index.js
diff --git a/src/views/Overview/OverviewEvents.vue b/src/views/Overview/OverviewEvents.vue
index 885db07..b8f876a 100644
--- a/src/views/Overview/OverviewEvents.vue
+++ b/src/views/Overview/OverviewEvents.vue
@@ -2,7 +2,7 @@
<div>
<b-button
variant="link"
- to="/health/event-logs"
+ to="/logs/event-logs"
data-test-id="overviewEvents-button-eventLogs"
class="float-md-right"
>
diff --git a/tests/unit/__snapshots__/AppHeader.spec.js.snap b/tests/unit/__snapshots__/AppHeader.spec.js.snap
index 02d99b1..b472bcb 100644
--- a/tests/unit/__snapshots__/AppHeader.spec.js.snap
+++ b/tests/unit/__snapshots__/AppHeader.spec.js.snap
@@ -68,7 +68,7 @@
>
<b-nav-item
data-test-id="appHeader-container-health"
- to="/health/event-logs"
+ to="/logs/event-logs"
>
<span
class="status-icon secondary"
diff --git a/tests/unit/__snapshots__/AppNavigation.spec.js.snap b/tests/unit/__snapshots__/AppNavigation.spec.js.snap
index f97a1fc..04410ca 100644
--- a/tests/unit/__snapshots__/AppNavigation.spec.js.snap
+++ b/tests/unit/__snapshots__/AppNavigation.spec.js.snap
@@ -32,10 +32,10 @@
xmlns="http://www.w3.org/2000/svg"
>
<path
- d="M4,2H2V28a2,2,0,0,0,2,2H30V28H4Z"
+ d="M24 21H26V26H24zM20 16H22V26H20zM11 26a5.0059 5.0059 0 01-5-5H8a3 3 0 103-3V16a5 5 0 010 10z"
/>
<path
- d="M30,9H23v2h3.59L19,18.59l-4.29-4.3a1,1,0,0,0-1.42,0L6,21.59,7.41,23,14,16.41l4.29,4.3a1,1,0,0,0,1.42,0L28,12.41V16h2Z"
+ d="M28,2H4A2.002,2.002,0,0,0,2,4V28a2.0023,2.0023,0,0,0,2,2H28a2.0027,2.0027,0,0,0,2-2V4A2.0023,2.0023,0,0,0,28,2Zm0,9H14V4H28ZM12,4v7H4V4ZM4,28V13H28.0007l.0013,15Z"
/>
</svg>
@@ -47,6 +47,84 @@
class="nav-item"
>
<button
+ aria-controls="logs"
+ aria-expanded="false"
+ class="btn btn-link collapsed"
+ data-test-id="nav-button-logs"
+ type="button"
+ >
+ <svg
+ aria-hidden="true"
+ fill="currentColor"
+ focusable="false"
+ height="16"
+ preserveAspectRatio="xMidYMid meet"
+ viewBox="0 0 32 32"
+ width="16"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M8 10H16V12H8zM8 6H20V8H8zM8 2H20V4H8z"
+ />
+ <path
+ d="M4.7111,28l5.6312-9.9961,7.4341,6.49A2,2,0,0,0,20.86,23.96l6.9707-10.4034-1.6622-1.1132-7,10.4472-.07.1035-7.4345-6.4907a2.0032,2.0032,0,0,0-3.0806.5308L4,25.1826V2H2V28a2.0023,2.0023,0,0,0,2,2H30V28Z"
+ />
+ </svg>
+
+ appNavigation.logs
+
+ <svg
+ aria-hidden="true"
+ class="icon-expand"
+ fill="currentColor"
+ focusable="false"
+ height="16"
+ preserveAspectRatio="xMidYMid meet"
+ viewBox="0 0 16 16"
+ width="16"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M8 5L13 10 12.3 10.7 8 6.4 3.7 10.7 3 10z"
+ />
+ </svg>
+ </button>
+
+ <transition-stub
+ class="nav-item__nav"
+ css="true"
+ enteractiveclass="collapsing"
+ enterclass=""
+ entertoclass="collapse show"
+ leaveactiveclass="collapsing"
+ leaveclass="collapse show"
+ leavetoclass="collapse"
+ >
+ <ul
+ class="collapse"
+ id="logs"
+ style="display: none;"
+ >
+ <li
+ class="nav-item"
+ >
+ <a
+ class="nav-link"
+ data-test-id="nav-item-event-logs"
+ href="#/logs/event-logs"
+ >
+
+ appNavigation.eventLogs
+
+ </a>
+ </li>
+ </ul>
+ </transition-stub>
+ </li>
+ <li
+ class="nav-item"
+ >
+ <button
aria-controls="health"
aria-expanded="false"
class="btn btn-link collapsed"
@@ -125,15 +203,6 @@
>
<a
class="nav-link"
- data-test-id="nav-item-event-logs"
- href="#/health/event-logs"
- >
-
- appNavigation.eventLogs
-
- </a>
- <a
- class="nav-link"
data-test-id="nav-item-hardware-status"
href="#/health/hardware-status"
>
@@ -575,10 +644,10 @@
xmlns="http://www.w3.org/2000/svg"
>
<path
- d="M4,2H2V28a2,2,0,0,0,2,2H30V28H4Z"
+ d="M24 21H26V26H24zM20 16H22V26H20zM11 26a5.0059 5.0059 0 01-5-5H8a3 3 0 103-3V16a5 5 0 010 10z"
/>
<path
- d="M30,9H23v2h3.59L19,18.59l-4.29-4.3a1,1,0,0,0-1.42,0L6,21.59,7.41,23,14,16.41l4.29,4.3a1,1,0,0,0,1.42,0L28,12.41V16h2Z"
+ d="M28,2H4A2.002,2.002,0,0,0,2,4V28a2.0023,2.0023,0,0,0,2,2H28a2.0027,2.0027,0,0,0,2-2V4A2.0023,2.0023,0,0,0,28,2Zm0,9H14V4H28ZM12,4v7H4V4ZM4,28V13H28.0007l.0013,15Z"
/>
</svg>
@@ -590,6 +659,84 @@
class="nav-item"
>
<button
+ aria-controls="logs"
+ aria-expanded="false"
+ class="btn btn-link collapsed"
+ data-test-id="nav-button-logs"
+ type="button"
+ >
+ <svg
+ aria-hidden="true"
+ fill="currentColor"
+ focusable="false"
+ height="16"
+ preserveAspectRatio="xMidYMid meet"
+ viewBox="0 0 32 32"
+ width="16"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M8 10H16V12H8zM8 6H20V8H8zM8 2H20V4H8z"
+ />
+ <path
+ d="M4.7111,28l5.6312-9.9961,7.4341,6.49A2,2,0,0,0,20.86,23.96l6.9707-10.4034-1.6622-1.1132-7,10.4472-.07.1035-7.4345-6.4907a2.0032,2.0032,0,0,0-3.0806.5308L4,25.1826V2H2V28a2.0023,2.0023,0,0,0,2,2H30V28Z"
+ />
+ </svg>
+
+ appNavigation.logs
+
+ <svg
+ aria-hidden="true"
+ class="icon-expand"
+ fill="currentColor"
+ focusable="false"
+ height="16"
+ preserveAspectRatio="xMidYMid meet"
+ viewBox="0 0 16 16"
+ width="16"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M8 5L13 10 12.3 10.7 8 6.4 3.7 10.7 3 10z"
+ />
+ </svg>
+ </button>
+
+ <transition-stub
+ class="nav-item__nav"
+ css="true"
+ enteractiveclass="collapsing"
+ enterclass=""
+ entertoclass="collapse show"
+ leaveactiveclass="collapsing"
+ leaveclass="collapse show"
+ leavetoclass="collapse"
+ >
+ <ul
+ class="collapse"
+ id="logs"
+ style="display: none;"
+ >
+ <li
+ class="nav-item"
+ >
+ <a
+ class="nav-link"
+ data-test-id="nav-item-event-logs"
+ href="#/logs/event-logs"
+ >
+
+ appNavigation.eventLogs
+
+ </a>
+ </li>
+ </ul>
+ </transition-stub>
+ </li>
+ <li
+ class="nav-item"
+ >
+ <button
aria-controls="health"
aria-expanded="false"
class="btn btn-link collapsed"
@@ -668,15 +815,6 @@
>
<a
class="nav-link"
- data-test-id="nav-item-event-logs"
- href="#/health/event-logs"
- >
-
- appNavigation.eventLogs
-
- </a>
- <a
- class="nav-link"
data-test-id="nav-item-hardware-status"
href="#/health/hardware-status"
>