diff options
author | Michael Davis <michael.s.davis@ibm.com> | 2017-04-18 10:01:04 -0500 |
---|---|---|
committer | Patrick Williams <patrick@stwcx.xyz> | 2017-09-20 12:41:34 -0500 |
commit | 994a93b29ddbae647f2cb1aae6ec94e8a26db88c (patch) | |
tree | bf1607ebd92954aac3db2ade6b0d9b288c353aa3 /app/overview | |
parent | 0c26234e00c3634e1e3a71dc9ccb81dd3569088b (diff) | |
download | phosphor-webui-994a93b29ddbae647f2cb1aae6ec94e8a26db88c.tar.gz phosphor-webui-994a93b29ddbae647f2cb1aae6ec94e8a26db88c.zip |
add inventory templates
Change-Id: I735465dc2d6ab0583586ece23380ea8570f024fa
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
Diffstat (limited to 'app/overview')
-rw-r--r-- | app/overview/controllers/inventory-controller.html | 485 | ||||
-rw-r--r-- | app/overview/controllers/inventory-controller.js | 30 | ||||
-rw-r--r-- | app/overview/controllers/inventory-overview-controller.html | 102 | ||||
-rw-r--r-- | app/overview/controllers/inventory-overview-controller.js | 27 | ||||
-rw-r--r-- | app/overview/index.js | 10 | ||||
-rw-r--r-- | app/overview/styles/index.scss | 1 | ||||
-rw-r--r-- | app/overview/styles/inventory.scss | 338 |
7 files changed, 993 insertions, 0 deletions
diff --git a/app/overview/controllers/inventory-controller.html b/app/overview/controllers/inventory-controller.html new file mode 100644 index 0000000..7da39f9 --- /dev/null +++ b/app/overview/controllers/inventory-controller.html @@ -0,0 +1,485 @@ +<div id="inventory"> + <div class="row column"> + <h1>CPU cores inventory</h1> + </div> + <section class="row column"> + <div class="page-header"> + <h2 class="inline h4">CPU cores present in the system</h2> + <button class="inline btn-export float-right">Export</button> + </div> + </section> + <!-- Filters --> + <section class="row column"> + <!-- search --> + <div class="content__search"> + <label for="content__search-input">Search</label> + <input id="content__search-input" type="text" placeholder="Filter hardware components"/> + <input id="content__search-submit" type="submit" class="btn btn-secondary" value="Submit"/> + </div> + <div class="toggle-filter"> + <button class="inline first" ng-click="toggleall = !toggleall" + ng-class="toggleall ? 'btn-primary' : 'btn-secondary'">All + </button> + <button class="inline " ng-click="togglehigh = !togglehigh" + ng-class="togglehigh ? 'btn-primary' : 'btn-secondary'">High + </button> + <button class="inline" ng-click="togglemed = !togglemed" + ng-class="togglemed ? 'btn-primary' : 'btn-secondary'">Medium + </button> + <button class="inline last" ng-click="togglelow = !togglelow" + ng-class="togglelow ? 'btn-primary' : 'btn-secondary'">Low + </button> + </div> + </section> <!-- end filter --> + <section class="row column"> + <div id="back-link"> + <a href="#/overview/inventory-overview">Back to Inventory overview</a> + </div> + </section> + <section id="inventory__details" class="row"> + <div class="row column header-row header__actions-bar"> + <div class="column small-12 large-3 "> + <p class="inline inventory__heading inventory__device-col"><span + class="inline priority-tag-circ high-priority" aria-label="High Priority"></span>CPU cores (6) + </p> + </div> + <div class="column hide-for-medium-only large-3 "> + <p class="inline inventory__heading inventory__function-col inv-active">Active</p> + </div> + <div class="column hide-for-medium-only large-3 "> + <p class="inline inventory__heading inventory__present-col inv-present">Present</p> + </div> + <div class="column hide-for-medium-only large-2 "> + <p class="inline inventory__heading inventory__state-col inventory__critical-label" aria-label="High - Emergency">High - Emergency</p> + </div> + <div class="column small-4 large-1 "></div> + </div> + + <!-- Inventory Item --> + <div class="row column accord-row" + ng-class="{'active': inventory__metadatarow, 'selected': inventory__selected}"> + <div class="row column" ng-click="inventory__metadatarow = ! inventory__metadatarow"> + <div class="column small-12 large-3 inventory__info"> + <p class="priority-tag-circ high-priority" aria-label="High Priority"></p> + <p class="inventory__title">CPU core 5</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Part Number</p> + <p class="courier-bold">1230123ab</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Serial Number</p> + <p class="courier-bold">1230123ab</p> + </div> + <div class="column small-12 small-4 large-2"> + <p class="content-label">Model Number</p> + <p class="courier-bold">86399-2201</p> + </div> + <button class="accord-trigger" ng-class="{'active': inventory__metadatarow}"></button> + </div> + <div class="row column inventory__metadata-row" ng-class="{'active': inventory__metadatarow}"> + <div class="row column"> + <div class="column large-3 hide-for-medium-only"> + + </div> + <div class="column large-3 small-12"> + <p class="content-label">Manufacturer</p> + <p class="courier-bold">IBM</p> + </div> + <div class="column large-3 small-12"> + <p class="content-label">CCIN</p> + <p class="courier-bold">2BE3</p> + </div> + <div class="column small-12 large-2"> + <p class="content-label">Version</p> + <p class="courier-bold">EE86399-2201</p> + </div> + <div class="column large-1 hide-for-medium-only"> </div> + </div> + <div class="row column"> + <div class="column small-12 large-3 hide-for-medium-only"> + + </div> + <div class="column small-12 large-3"> + <p class="content-label">Field Replacable</p> + <p class="courier-bold">Not Replaceable</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Build Date</p> + <p class="courier-bold">04/01/2004</p> + </div> + <div class="column small-12 large-2"> + <p class="content-label">Cooling Type</p> + <p class="courier-bold">Air cooled</p> + </div> + <div class="column large-1 hide-for-medium-only"> </div> + </div> + <div class="row inv-event-log-row"> + <p class="column small-12 large-3 inventory__critical-label" aria-label="High - Emergency">High - Emergency</p> + <p class="column small-12 large-7 "> + org.open_power.Error.Host.Event.Event.Cras.amet... + </p> + <p class="column small-12 large-2"> + <a href="#/overviewlog"> View event log</a> + </p> + </div> + </div> + </div> + + <!-- Inventory Item --> + <div class="row column accord-row" + ng-class="{'active': inventory__metadatarow2, 'selected': inventory__selected}"> + <div class="row column" ng-click="inventory__metadatarow2 = ! inventory__metadatarow2"> + <div class="column small-12 large-3 inventory__info"> + <p class="priority-tag-circ high-priority" aria-label="High Priority"></p> + <p class="inventory__title">CPU core 6</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Part Number</p> + <p class="courier-bold">12355123ab</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Serial Number</p> + <p class="courier-bold">123014423ab</p> + </div> + <div class="column small-12 small-4 large-2"> + <p class="content-label">Model Number</p> + <p class="courier-bold">86399-32201</p> + </div> + <button class="accord-trigger" ng-class="{'active': inventory__metadatarow2}"></button> + </div> + <div class="row column inventory__metadata-row" ng-class="{'active': inventory__metadatarow2}"> + <div class="row column"> + <div class="column large-3 hide-for-medium-only"> + + </div> + <div class="column large-3 small-12"> + <p class="content-label">Manufacturer</p> + <p class="courier-bold">IBM</p> + </div> + <div class="column large-3 small-12"> + <p class="content-label">CCIN</p> + <p class="courier-bold">2BE3</p> + </div> + <div class="column small-12 large-2"> + <p class="content-label">Version</p> + <p class="courier-bold">EE86399-2201</p> + </div> + <div class="column large-1 hide-for-medium-only"> </div> + </div> + <div class="row column"> + <div class="column small-12 large-3 hide-for-medium-only"> + + </div> + <div class="column small-12 large-3"> + <p class="content-label">Field Replacable</p> + <p class="courier-bold">Not Replaceable</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Build Date</p> + <p class="courier-bold">04/01/2004</p> + </div> + <div class="column small-12 large-2"> + <p class="content-label">Cooling Type</p> + <p class="courier-bold">Air cooled</p> + </div> + <div class="column large-1 hide-for-medium-only"> </div> + </div> + <div class="row inv-event-log-row"> + <p class="column small-12 large-3 inventory__critical-label" aria-label="Normal">High - emergency</p> + <p class="column small-12 large-7 "> + org.open_power.Error.Host.Event.Event.Cras.amet... + </p> + <p class="column small-12 large-2"> + <a href="#/overviewlog"> View event log</a> + </p> + </div> + </div> + </div> + + <!-- Inventory Item --> + <div class="row column accord-row" + ng-class="{'active': inventory__metadatarow5, 'selected': inventory__selected}"> + <div class="row column" ng-click="inventory__metadatarow5 = ! inventory__metadatarow5"> + <div class="column small-12 large-3 inventory__info"> + <p class="priority-tag-circ warn-priority" aria-label="Warning Priority"></p> + <p class="inventory__title">CPU core 4</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Part Number</p> + <p class="courier-bold">14530123ab</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Serial Number</p> + <p class="courier-bold">12350123ab</p> + </div> + <div class="column small-12 small-4 large-2"> + <p class="content-label">Model Number</p> + <p class="courier-bold">86399-2201</p> + </div> + <button class="accord-trigger" ng-class="{'active': inventory__metadatarow5}"></button> + </div> + <div class="row column inventory__metadata-row" ng-class="{'active': inventory__metadatarow5}"> + <div class="row column"> + <div class="column large-3 hide-for-medium-only"> + + </div> + <div class="column large-3 small-12"> + <p class="content-label">Manufacturer</p> + <p class="courier-bold">IBM</p> + </div> + <div class="column large-3 small-12"> + <p class="content-label">CCIN</p> + <p class="courier-bold">2BE3</p> + </div> + <div class="column small-12 large-2"> + <p class="content-label">Version</p> + <p class="courier-bold">EE86399-2201</p> + </div> + <div class="column large-1 hide-for-medium-only"> </div> + </div> + <div class="row column"> + <div class="column small-12 large-3 hide-for-medium-only"> + + </div> + <div class="column small-12 large-3"> + <p class="content-label">Field Replacable</p> + <p class="courier-bold">Not Replaceable</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Build Date</p> + <p class="courier-bold">04/01/2004</p> + </div> + <div class="column small-12 large-2"> + <p class="content-label">Cooling Type</p> + <p class="courier-bold">Air cooled</p> + </div> + <div class="column large-1 hide-for-medium-only"> </div> + </div> + <div class="row inv-event-log-row"> + <p class="column small-12 large-3 inventory__warning-label" aria-label="Warning Priority">Medium - Warning</p> + <p class="column small-12 large-7 "> + org.open_power.Error.Host.Event.Event.Cras.amet... + </p> + <p class="column small-12 large-2"> + <a href="#/overviewlog"> View event log</a> + </p> + </div> + </div> + </div> + + <!-- Inventory Item --> + <div class="row column accord-row" + ng-class="{'active': inventory__metadatarow3, 'selected': inventory__selected}"> + <div class="row column" ng-click="inventory__metadatarow3 = ! inventory__metadatarow3"> + <div class="column small-12 large-3 inventory__info"> + <p class="priority-tag-circ normal-priority" aria-label="Normal Priority"></p> + <p class="inventory__title">CPU core 1</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Part Number</p> + <p class="courier-bold">123024123ab</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Serial Number</p> + <p class="courier-bold">123043123ab</p> + </div> + <div class="column small-12 small-4 large-2"> + <p class="content-label">Model Number</p> + <p class="courier-bold">86399-2201</p> + </div> + <button class="accord-trigger" ng-class="{'active': inventory__metadatarow3}"></button> + </div> + <div class="row column inventory__metadata-row" ng-class="{'active': inventory__metadatarow3}"> + <div class="row column"> + <div class="column large-3 hide-for-medium-only"> + + </div> + <div class="column large-3 small-12"> + <p class="content-label">Manufacturer</p> + <p class="courier-bold">IBM</p> + </div> + <div class="column large-3 small-12"> + <p class="content-label">CCIN</p> + <p class="courier-bold">2BE3</p> + </div> + <div class="column small-12 large-2"> + <p class="content-label">Version</p> + <p class="courier-bold">EE86399-2201</p> + </div> + <div class="column large-1 hide-for-medium-only"> </div> + </div> + <div class="row column"> + <div class="column small-12 large-3 hide-for-medium-only"> + + </div> + <div class="column small-12 large-3"> + <p class="content-label">Field Replacable</p> + <p class="courier-bold">Not Replaceable</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Build Date</p> + <p class="courier-bold">04/01/2004</p> + </div> + <div class="column small-12 large-2"> + <p class="content-label">Cooling Type</p> + <p class="courier-bold">Air cooled</p> + </div> + <div class="column large-1 hide-for-medium-only"> </div> + </div> + <div class="row inv-event-log-row"> + <p class="column small-12 large-3 inventory__low-label" aria-label="Low Priority">Low - informational</p> + <p class="column small-12 large-7 "> + org.open_power.Error.Host.Event.Event.Cras.amet... + </p> + <p class="column small-12 large-2"> + <a href="#/overviewlog"> View event log</a> + </p> + </div> + </div> + </div> + + <!-- Inventory Item --> + <div class="row column accord-row" + ng-class="{'active': inventory__metadatarow4, 'selected': inventory__selected}"> + <div class="row column" ng-click="inventory__metadatarow4 = ! inventory__metadatarow4"> + <div class="column small-12 large-3 inventory__info"> + <p class="priority-tag-circ normal-priority" aria-label="Normal Priority"></p> + <p class="inventory__title">CPU core 2</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Part Number</p> + <p class="courier-bold">123012443ab</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Serial Number</p> + <p class="courier-bold">1230333123ab</p> + </div> + <div class="column small-12 small-4 large-2"> + <p class="content-label">Model Number</p> + <p class="courier-bold">86399-2201</p> + </div> + <button class="accord-trigger" ng-class="{'active': inventory__metadatarow4}"></button> + </div> + <div class="row column inventory__metadata-row" ng-class="{'active': inventory__metadatarow4}"> + <div class="row column"> + <div class="column large-3 hide-for-medium-only"> + + </div> + <div class="column large-3 small-12"> + <p class="content-label">Manufacturer</p> + <p class="courier-bold">IBM</p> + </div> + <div class="column large-3 small-12"> + <p class="content-label">CCIN</p> + <p class="courier-bold">2BE3</p> + </div> + <div class="column small-12 large-2"> + <p class="content-label">Version</p> + <p class="courier-bold">EE86399-2201</p> + </div> + <div class="column large-1 hide-for-medium-only"> </div> + </div> + <div class="row column"> + <div class="column small-12 large-3 hide-for-medium-only"> + + </div> + <div class="column small-12 large-3"> + <p class="content-label">Field Replacable</p> + <p class="courier-bold">Not Replaceable</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Build Date</p> + <p class="courier-bold">04/01/2004</p> + </div> + <div class="column small-12 large-2"> + <p class="content-label">Cooling Type</p> + <p class="courier-bold">Air cooled</p> + </div> + <div class="column large-1 hide-for-medium-only"> </div> + </div> + <div class="row inv-event-log-row"> + <p class="column small-12 large-3 inventory__low-label" aria-label="Low Priority">Low - informational</p> + <p class="column small-12 large-7 "> + org.open_power.Error.Host.Event.Event.Cras.amet... + </p> + <p class="column small-12 large-2"> + <a href="#/overviewlog"> View event log</a> + </p> + </div> + </div> + </div> + + <!-- Inventory Item --> + <div class="row column accord-row" + ng-class="{'active': inventory__metadatarow5, 'selected': inventory__selected}"> + <div class="row column" ng-click="inventory__metadatarow5 = ! inventory__metadatarow5"> + <div class="column small-12 large-3 inventory__info"> + <p class="priority-tag-circ normal-priority" aria-label="Normal Priority"></p> + <p class="inventory__title">CPU core 3</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Part Number</p> + <p class="courier-bold">14530123ab</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Serial Number</p> + <p class="courier-bold">12350123ab</p> + </div> + <div class="column small-12 small-4 large-2"> + <p class="content-label">Model Number</p> + <p class="courier-bold">86399-2201</p> + </div> + <button class="accord-trigger" ng-class="{'active': inventory__metadatarow5}"></button> + </div> + <div class="row column inventory__metadata-row" ng-class="{'active': inventory__metadatarow5}"> + <div class="row column"> + <div class="column large-3 hide-for-medium-only"> + + </div> + <div class="column large-3 small-12"> + <p class="content-label">Manufacturer</p> + <p class="courier-bold">IBM</p> + </div> + <div class="column large-3 small-12"> + <p class="content-label">CCIN</p> + <p class="courier-bold">2BE3</p> + </div> + <div class="column small-12 large-2"> + <p class="content-label">Version</p> + <p class="courier-bold">EE86399-2201</p> + </div> + <div class="column large-1 hide-for-medium-only"> </div> + </div> + <div class="row column"> + <div class="column small-12 large-3 hide-for-medium-only"> + + </div> + <div class="column small-12 large-3"> + <p class="content-label">Field Replacable</p> + <p class="courier-bold">Not Replaceable</p> + </div> + <div class="column small-12 large-3"> + <p class="content-label">Build Date</p> + <p class="courier-bold">04/01/2004</p> + </div> + <div class="column small-12 large-2"> + <p class="content-label">Cooling Type</p> + <p class="courier-bold">Air cooled</p> + </div> + <div class="column large-1 hide-for-medium-only"> </div> + </div> + <div class="row inv-event-log-row"> + <p class="column small-12 large-3 inventory__low-label" aria-label="Low Priority">Low - informational</p> + <p class="column small-12 large-7 "> + org.open_power.Error.Host.Event.Event.Cras.amet... + </p> + <p class="column small-12 large-2"> + <a href="#/overviewlog"> View event log</a> + </p> + </div> + </div> + </div> + </section> + <paginate ng-include="paginate"></paginate> +</div> <!-- end event log -->
\ No newline at end of file diff --git a/app/overview/controllers/inventory-controller.js b/app/overview/controllers/inventory-controller.js new file mode 100644 index 0000000..9dcc22c --- /dev/null +++ b/app/overview/controllers/inventory-controller.js @@ -0,0 +1,30 @@ +/** + * Controller for log + * + * @module app/overview + * @exports logController + * @name logController + * @version 0.1.0 + */ + +window.angular && (function (angular) { + 'use strict'; + + angular + .module('app.overview') + .controller('inventoryController', [ + '$scope', + '$log', + '$window', + 'APIUtils', + 'dataService', + function($scope, $log, $window, APIUtils, dataService, userModel){ + $scope.dataService = dataService; + + $scope.dropdown_selected = false; + + } + ] + ); + +})(angular); diff --git a/app/overview/controllers/inventory-overview-controller.html b/app/overview/controllers/inventory-overview-controller.html new file mode 100644 index 0000000..a81305f --- /dev/null +++ b/app/overview/controllers/inventory-overview-controller.html @@ -0,0 +1,102 @@ +<div id="inventory-overview"> + <div class="row column"> + <h1>Hardware Inventory</h1> + </div> + <section class="row column"> + <div class="page-header"> + <h2 class="inline h4">Inventory items present in the system</h2> + <button class="inline btn-export float-right">Export</button> + </div> + </section> + <section class="row column"> + <!-- search --> + <div class="content__search"> + <label for="content__search-input">Search</label> <input id="content__search-input" type="text" + placeholder="Filter hardware components"/> <input + id="content__search-submit" type="submit" class="btn btn-secondary" + value="Submit"/> + </div> + <div class="toggle-filter"> + <button class="inline first" ng-click="toggleall = !toggleall" + ng-class="toggleall ? 'btn-primary' : 'btn-secondary'">All + </button> + <button class="inline " ng-click="togglehigh = !togglehigh" + ng-class="togglehigh ? 'btn-primary' : 'btn-secondary'">High + </button> + <button class="inline" ng-click="togglemed = !togglemed" + ng-class="togglemed ? 'btn-primary' : 'btn-secondary'">Medium + </button> + <button class="inline last" ng-click="togglelow = !togglelow" + ng-class="togglelow ? 'btn-primary' : 'btn-secondary'">Low + </button> + </div> + </section> + <!-- end search --> + <section id="inventory-categories" class="row column"> + <div class="row column header-row"> + <div class="column large-12 header__actions-bar"> + <p class="inline inventory__heading inventory__device-col">Hardware</p> + <p class="inline inventory__heading inventory__function-col">Function</p> + <p class="inline inventory__heading inventory__present-col">Present</p> + <p class="inline inventory__heading inventory__state-col">State</p> + </div> + </div> + <a class="inventory__group" href=""> + <p class="inline inventory__device-col">All devices (30)</p> + </a> + <a class="inventory__group" href=""> + <p class="inline inventory__device-col"><span class="inline priority-tag-circ normal-priority" aria-label="Normal Priority"></span>Motherboard (1)</p> + <p class="inline inventory__function-col inv-active">Active</p> + <p class="inline inventory__present-col inv-present">Present</p> + <p class="inline inventory__state-col"> </p> + </a> + <a class="inventory__group" href=""> + <p class="inline inventory__device-col"><span class="inline priority-tag-circ normal-priority" aria-label="Normal Priority"></span>CPU (1)</p> + <p class="inline inventory__function-col inv-active">Active</p> + <p class="inline inventory__present-col inv-present">Present</p> + <p class="inline inventory__state-col"> </p> + </a> + <a class="inventory__group" href="#/overview/inventory"> + <p class="inline inventory__device-col"><span class="inline priority-tag-circ high-priority" aria-label="High Priority"></span>CPU cores (6)</p> + <p class="inline inventory__function-col inv-active">Active</p> + <p class="inline inventory__present-col inv-present">Present</p> + <p class="inline inventory__state-col inventory__critical-label">High - Emergency</p> + </a> + <a class="inventory__group" href=""> + <p class="inline inventory__device-col"><span class="inline priority-tag-circ normal-priority" aria-label="Normal Priority"></span>DIMM (4)</p> + <p class="inline inventory__function-col inv-active">Active</p> + <p class="inline inventory__present-col inv-present">Present</p> + <p class="inline inventory__state-col"> </p> + </a> + <a class="inventory__group" href=""> + <p class="inline inventory__device-col"><span class="inline priority-tag-circ warn-priority" aria-label="Warning Priority"></span>Fan (5)</p> + <p class="inline inventory__function-col inv-active">Active</p> + <p class="inline inventory__present-col inv-present">Present</p> + <p class="inline inventory__state-col inventory__warning-label">Medium - Warning</p> + </a> + <a class="inventory__group" href=""> + <p class="inline inventory__device-col"><span class="inline priority-tag-circ normal-priority"></span>Chasis (3)</p> + <p class="inline inventory__function-col inv-active">Active</p> + <p class="inline inventory__present-col inv-present">Present</p> + <p class="inline inventory__state-col"> </p> + </a> + <a class="inventory__group" href=""> + <p class="inline inventory__device-col"><span class="inline priority-tag-circ normal-priority" aria-label="Normal Priority"></span>BMC (5)</p> + <p class="inline inventory__function-col inv-active">Active</p> + <p class="inline inventory__present-col inv-present">Present</p> + <p class="inline inventory__state-col"> </p> + </a> + <a class="inventory__group" href=""> + <p class="inline inventory__device-col"><span class="inline priority-tag-circ medium-priority " aria-label="MediumPriority"></span>MISC (5)</p> + <p class="inline inventory__function-col inv-inactive">Inactive</p> + <p class="inline inventory__present-col inv-present">Present</p> + <p class="inline inventory__state-col inventory__medium-label">Medium - Error</p> + </a> + <a class="inventory__group inv-disabled" href=""> + <p class="inline inventory__device-col"><span class="inline priority-tag-circ disabled" aria-label="Low Priority"></span>PCIE card (0)</p> + <p class="inline inventory__function-col inv-inactive">Inactive</p> + <p class="inline inventory__present-col inv-not-present">Not Present</p> + <p class="inline inventory__state-col inventory__low-label">Low - Informational</p> + </a> + </section> +</div>
\ No newline at end of file diff --git a/app/overview/controllers/inventory-overview-controller.js b/app/overview/controllers/inventory-overview-controller.js new file mode 100644 index 0000000..9177ae5 --- /dev/null +++ b/app/overview/controllers/inventory-overview-controller.js @@ -0,0 +1,27 @@ +/** + * Controller for log + * + * @module app/overview + * @exports logController + * @name logController + * @version 0.1.0 + */ + +window.angular && (function (angular) { + 'use strict'; + + angular + .module('app.overview') + .controller('inventoryOverviewController', [ + '$scope', + '$window', + 'APIUtils', + 'dataService', + function($scope, $window, APIUtils, dataService, userModel){ + $scope.dataService = dataService; + + } + ] + ); + +})(angular); diff --git a/app/overview/index.js b/app/overview/index.js index fdf9f3b..a31d86b 100644 --- a/app/overview/index.js +++ b/app/overview/index.js @@ -18,6 +18,16 @@ window.angular && (function (angular) { // Route configuration .config(['$routeProvider', function ($routeProvider) { $routeProvider + .when('/overview/inventory-overview', { + 'templateUrl': 'overview/controllers/inventory-overview-controller.html', + 'controller': 'inventoryOverviewController', + authenticated: true + }) + .when('/overview/inventory', { + 'templateUrl': 'overview/controllers/inventory-controller.html', + 'controller': 'inventoryController', + authenticated: true + }) .when('/overview/sensors-overview', { 'templateUrl': 'overview/controllers/sensors-overview-controller.html', 'controller': 'sensorsOverviewController', diff --git a/app/overview/styles/index.scss b/app/overview/styles/index.scss index d4ead7d..ccd10bf 100644 --- a/app/overview/styles/index.scss +++ b/app/overview/styles/index.scss @@ -1,6 +1,7 @@ @import "./bmc-reboot.scss"; @import "./log.scss"; @import "./sensors.scss"; +@import "./inventory.scss"; @import "./power-operations.scss"; @import "./system-overview.scss"; @import "./unit-id.scss";
\ No newline at end of file diff --git a/app/overview/styles/inventory.scss b/app/overview/styles/inventory.scss new file mode 100644 index 0000000..1aba405 --- /dev/null +++ b/app/overview/styles/inventory.scss @@ -0,0 +1,338 @@ +@mixin col-label { + text-transform: uppercase; + font-weight: 700; + font-size: .8em; +} + +$title-minWidth: 210px; + +.inventory__heading { + font-weight: 700; +} + +.inv-active { + color: $active; +} + +.inv-inactive { + color: $inactive; +} + +.inv-present { + color: $present; +} +.inv-not-present { + color: $not-present; +} + +.inventory__critical-label { + color: $thresh-critical; +} + +.inventory__warning-label { + color: $thresh-warning; +} + +.inventory__medium-label { + color: $medium-lightbg; +} + +.inventory__low-label { + color: $low-lightbg; +} + +.col-3 { + @include calcColumn-3; +} +.col-4 { + min-width: 100%; + @include mediaQuery(medium) { + @include calcColumn-4(15px); + } +} +// Inventory Overview + +#inventory-overview { + .inventory__group { + position: relative; + display: block; + margin: .5em 0; + font-weight: 700; + background: $white; + padding: 1.8em 1em 1em 3.7em; + text-decoration: none; + border: 1px solid $lightgrey; + vertical-align: middle; + &:hover { + background: $lightblue; + color: $black; + } + @include mediaQuery(x-large) { + //max-width: 60%; + } + .inv-active { + color: darken($active, 20%); + } + .inv-present { + color: darken($present, 20%); + } + &.inv-disabled { + background: lighten($lightgrey, 5%); + .inventory__device-col { + color: lighten($darkgrey, 20%); + } + } + } + .priority-tag-circ { + position: absolute; + top: 50%; + left: 1.2em; + transform: translateY(-50%); + } + + // Header row + .header__actions-bar { + padding-left: 3.5em; + padding-right: 1em; + } +} + +// Inventory single items + +#inventory, #inventory-overview { + .inventory__device-col { + margin-right: 6px; + width: 50%; + @include mediaQuery(medium){ + width: auto; + } + } + .inventory__function-col { + @include col-label; + display: none; + } + .inventory__present-col { + @include col-label; + display: none; + } + .inventory__state-col { + @include col-label; + } + .inventory__device-col, + .inventory__function-col, + .inventory__present-col, + .inventory__state-col { + @media (min-width: 1025px){ + display: inline-block; + @include calcColumn-4(5px); + } + } + + .content__search { + max-width: 100%; + @media(min-width: 1300px) { + max-width: 50%; + } + } + .toggle-filter { + display: inline-block; + margin-right: 0; + } +} + +#back-link { + margin: 1em 0 0; + a { + text-decoration: none; + position: relative; + display: inline-block; + padding-left: 1.2em; + font-weight: 700; + &:before { + content: '\221F'; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-53%) rotate(45deg); + display: inline-block; + margin-right: 6px; + font-size: 1.1em; + font-weight: bold; + text-shadow: 0 0 1px black; + } + &:hover { + text-decoration: underline; + } + } +} + +#inventory__details { + display: block; + margin-top: .6em; + position: relative; + overflow: hidden; + + .header__actions-bar { + position: relative; + + .priority-tag-circ { + position: absolute; + left: 1.2em; + top: 50%; + transform: translateY(-50%); + &.high-priority { + background-color: rgba($critical-darkbg, .3); + } + } + .inventory__category { + margin: 0; + color: $white; + min-width: $title-minWidth; + } + } + .accord-row {padding-left: 3.7em;} + .header-row { + background: $darkpurple; + padding-left: 3.7em; + .inv-active { + color: $active; + } + + .inv-inactive { + color: $inactive; + } + + .inv-present { + color: $present; + } + .inv-not-present { + color: $not-present; + } + + .inventory__critical-label { + color: lighten($thresh-critical, 15%); + } + + .inventory__warning-label { + color: $thresh-warning; + } + + .inventory__medium-label { + color: $medium-lightbg; + } + + .inventory__low-label { + color: lighten($low-lightbg, 20%); + } + } + + //Export log + .btn-export { + text-transform: capitalize; + color: $black; + font-size: .9em; + font-weight: 700; + position: relative; + padding: 0 0 1em 2em; + &:hover { + text-decoration: underline; + } + } + .btn-export { + margin-top: 7px; + } + .btn-export:before { + content: '\21E5'; + position: absolute; + font-size: 1.7em; + vertical-align: middle; + transform: rotate(90deg); + display: inline-block; + left: 2px; + top: -5px; + } + + .accord-row { + padding-top: 1.6em; + .priority-tag-circ { + position: absolute; + top: 28px; + left: 1.2em; + } + } + + .accord-trigger { + position: absolute; + top: 20px; + right: 1em; + } + //Sensor info + .inventory__title { + font-weight: 700; + font-size: 1.1em; + min-width: $title-minWidth; + max-width: 78%; + vertical-align: top; + } + .inventory__description { + font-weight: 400; + } + + .inventory__reading { + @include fontCourierBold; + font-size: 1.2em; + color: $black; + //max-width: 18%; + } + + // Sensor metadata row + .inventory__metadata-row { + max-height: 0; + overflow: hidden; + -webkit-transition: 0.5s linear max-height; + transition: 0.5s linear max-height; + padding: 0; + &.active { + max-height: 1000px; //max-height used to allow flexible height of content and still allow transition + @include fastTransition-all; + //@include mediaQuery(small) { + // max-height: 1000px; + //} + //@include mediaQuery(medium) { + // max-height: 1000px; + //} + } + } + .inv-event-log-row { + position: relative; + z-index: 100; + border-top: 2px solid $lightgrey; + margin-right: 3.7em; + margin-left: 0; + padding-top: .8em; + word-break: break-word; + :first-child, + :last-child { + font-size: .9em; + font-weight: 600; + text-transform: uppercase; + text-decoration: none; + padding-bottom: .7em; + padding-top: .7em; + @include mediaQuery(small) { + padding-bottom: 0; + padding-top: 0; + } + } + a:hover { + text-decoration: underline; + } + .column { + margin-bottom: 0; + } + } +} + +//end inventory details + + |