LT-342: Audit Log :: style
This commit is contained in:
Leonardo Campos
parent
59e54f1122
commit
a8f1b3b9d7
@ -1,6 +1,3 @@
|
||||
|
||||
|
||||
|
||||
<template name="hipaaAuditLog">
|
||||
<ul id="hipaaAuditLog" class="list-group">
|
||||
{{#each hipaaAudit}}
|
||||
@ -13,7 +10,9 @@
|
||||
{{#if logMessageType 'init'}}
|
||||
<li class="hipaaAuditItem list-group-item">
|
||||
<div class="media">
|
||||
<i class="pull-left fa fa-gears fa-2x lightgray"></i>
|
||||
<div class="media-icon">
|
||||
<i class="fa fa-gears fa-2x"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<span class="small gray">{{entryTimestamp}}</span><br>
|
||||
<span class="userName" style="{{getHighlightColor}}">{{userName}}</span> initialized HIPAA Audit Log.
|
||||
@ -26,7 +25,9 @@
|
||||
{{#if logMessageType 'access'}}
|
||||
<li class="hipaaAuditItem list-group-item">
|
||||
<div class="media">
|
||||
<i class="pull-left fa fa-database fa-2x lightgray"></i>
|
||||
<div class="media-icon">
|
||||
<i class="fa fa-database fa-2x"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<span class="small gray">{{entryTimestamp}}</span><br>
|
||||
<span class="userName" style="{{getHighlightColor}}">{{userName}}</span> accessed record(s) <span class="mongoRecordId" style="{{getHighlightColor}}">{{getRecordId}}</span> in the <span class="collectionName" style="{{getHighlightColor}}">{{getCollectionName}}</span> collection.
|
||||
@ -39,7 +40,9 @@
|
||||
{{#if logMessageType 'create'}}
|
||||
<li class="hipaaAuditItem list-group-item">
|
||||
<div class="media">
|
||||
<i class="pull-left fa fa-plus-circle fa-2x lightgray"></i>
|
||||
<div class="media-icon">
|
||||
<i class="fa fa-plus-circle fa-2x"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<span class="small gray">{{entryTimestamp}}</span><br>
|
||||
{{#if hasPatientInfo}}
|
||||
@ -56,7 +59,9 @@
|
||||
{{#if logMessageType 'modify'}}
|
||||
<li class="hipaaAuditItem list-group-item">
|
||||
<div class="media">
|
||||
<i class="pull-left fa fa-pencil fa-2x lightgray"></i>
|
||||
<div class="media-icon">
|
||||
<i class="fa fa-pencil fa-2x"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<span class="small gray">{{entryTimestamp}}</span><br>
|
||||
{{#if hasPatientInfo}}
|
||||
@ -74,7 +79,9 @@
|
||||
{{#if logMessageType 'clone'}}
|
||||
<li class="hipaaAuditItem list-group-item">
|
||||
<div class="media">
|
||||
<i class="pull-left fa fa-code-fork fa-2x lightgray"></i>
|
||||
<div class="media-icon">
|
||||
<i class="fa fa-code-fork fa-2x"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<span class="small gray">{{entryTimestamp}}</span><br>
|
||||
<span class="userName" style="{{getHighlightColor}}">{{userName}}</span> cloned record <span class="mongoRecordId" style="{{getHighlightColor}}">{{getRecordId}}</span> in the <span class="collectionName" style="{{getHighlightColor}}">{{getCollectionName}}</span> collection.
|
||||
@ -87,7 +94,9 @@
|
||||
{{#if logMessageType 'delete'}}
|
||||
<li class="hipaaAuditItem list-group-item">
|
||||
<div class="media">
|
||||
<i class="pull-left fa fa-minus-circle fa-2x lightgray"></i>
|
||||
<div class="media-icon">
|
||||
<i class="fa fa-minus-circle fa-2x"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<span class="small gray">{{entryTimestamp}}</span><br>
|
||||
<span class="userName" style="{{getHighlightColor}}">{{userName}}</span> deleted record <span class="mongoRecordId" style="{{getHighlightColor}}">{{getRecordId}}</span> in the <span class="collectionName" style="{{getHighlightColor}}">{{getCollectionName}}</span> collection.
|
||||
@ -100,7 +109,9 @@
|
||||
{{#if logMessageType 'denied'}}
|
||||
<li class="hipaaAuditItem list-group-item">
|
||||
<div class="media">
|
||||
<i class="pull-left fa fa-warning fa-2x lightgray"></i>
|
||||
<div class="media-icon">
|
||||
<i class="fa fa-warning fa-2x"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<span class="small gray">{{entryTimestamp}}</span><br>
|
||||
<span class="userName" style="{{getHighlightColor}}">{{userName}}</span> was denied access to record <span class="mongoRecordId" style="{{getHighlightColor}}">{{getRecordId}}</span> in the <span class="collectionName" style="{{getHighlightColor}}">{{getCollectionName}}</span> collection.
|
||||
@ -113,7 +124,9 @@
|
||||
{{#if logMessageType 'viewed'}}
|
||||
<li class="hipaaAuditItem list-group-item">
|
||||
<div class="media">
|
||||
<i class="pull-left fa fa-eye fa-2x lightgray"></i>
|
||||
<div class="media-icon">
|
||||
<i class="fa fa-eye fa-2x"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<span class="small gray">{{entryTimestamp}}</span><br>
|
||||
{{#if hasPatientInfo}}
|
||||
@ -130,7 +143,9 @@
|
||||
{{#if logMessageType 'publish'}}
|
||||
<li class="hipaaAuditItem list-group-item">
|
||||
<div class="media">
|
||||
<i class="pull-left fa fa-rss fa-2x lightgray"></i>
|
||||
<div class="media-icon">
|
||||
<i class="fa fa-rss fa-2x"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<span class="small gray">{{entryTimestamp}}</span><br>
|
||||
<span class="userName" style="{{getHighlightColor}}">{{userName}}</span> published record <span class="mongoRecordId" style="{{getHighlightColor}}">{{getRecordId}}</span> in the <span class="collectionName" style="{{getHighlightColor}}">{{getCollectionName}}</span> collection.
|
||||
@ -143,7 +158,9 @@
|
||||
{{#if logMessageType 'unpublish'}}
|
||||
<li class="hipaaAuditItem list-group-item">
|
||||
<div class="media">
|
||||
<i class="pull-left fa fa-circle-o fa-2x lightgray"></i>
|
||||
<div class="media-icon">
|
||||
<i class="fa fa-circle-o fa-2x"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<span class="small gray">{{entryTimestamp}}</span><br>
|
||||
<span class="userName" style="{{getHighlightColor}}">{{userName}}</span> unpublished record <span class="mongoRecordId" style="{{getHighlightColor}}">{{getRecordId}}</span> in the <span class="collectionName" style="{{getHighlightColor}}">{{getCollectionName}}</span> collection.
|
||||
@ -156,16 +173,16 @@
|
||||
{{#if logMessageType 'error'}}
|
||||
<li class="hipaaAuditItem list-group-item">
|
||||
<div class="media">
|
||||
<i class="pull-left fa fa-bomb fa-2x lightgray"></i>
|
||||
<div class="media-icon">
|
||||
<i class="fa fa-bomb fa-2x"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<span class="small gray">{{entryTimestamp}}</span><br>
|
||||
<span class="userName" style="{{getHighlightColor}}">{{userName}}</span> received a data access error while performing an action!<br>
|
||||
<span class="error">{{getErrorMessage}}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
@ -1,78 +1,48 @@
|
||||
#hipaaAuditLog{
|
||||
padding-left: 0px !important;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
|
||||
li{
|
||||
.hipaaAuditItem {
|
||||
// There's a CSS rule on ohif-user-management that's changing the .hipaaAuditItem border style
|
||||
border: none !important;
|
||||
|
||||
background-color: black;
|
||||
list-style: none;
|
||||
padding-top: 5px;
|
||||
padding-left: 20px;
|
||||
padding-left: 10px;
|
||||
line-height: 25px;
|
||||
border-top: 1px solid #436270;
|
||||
border-bottom: 1px solid #436270;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: #151a1f;
|
||||
}
|
||||
|
||||
&:hover, &:active, &.active {
|
||||
background-color: #2c363f;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
top: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.media-icon {
|
||||
float: left;
|
||||
top: 12px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.gray{
|
||||
color: gray;
|
||||
}
|
||||
.lightgray{
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.iconColumn{
|
||||
width: 10%;
|
||||
}
|
||||
.messageClumn{
|
||||
width: 80%;
|
||||
}
|
||||
.fa{
|
||||
padding-right: 12px;
|
||||
padding-left: 4px;
|
||||
padding-top: 6px;
|
||||
width: 40px;
|
||||
//border: 1px solid orange;
|
||||
}
|
||||
.fa-recycle{
|
||||
padding-top: 8px;
|
||||
}
|
||||
.fa-plus-circle{
|
||||
padding-left: 6px !important;
|
||||
}
|
||||
.fa-circle-o{
|
||||
padding-left: 6px !important;
|
||||
}
|
||||
.fa-minus-circle{
|
||||
padding-left: 6px !important;
|
||||
}
|
||||
.fa-database{
|
||||
padding-left: 7px !important;
|
||||
}
|
||||
.fa-pencil{
|
||||
padding-left: 6px !important;
|
||||
}
|
||||
.fa-code-fork{
|
||||
padding-left: 12px !important;
|
||||
}
|
||||
.fa-warning{
|
||||
padding-left: 5px !important
|
||||
}
|
||||
.fa-rss{
|
||||
padding-left: 7px !important;
|
||||
}
|
||||
|
||||
.hipaaAuditItem{
|
||||
border-top: 1px solid lightgray;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.hipaaAuditItem:nth-child(1){
|
||||
border-top: 0px;
|
||||
}
|
||||
|
||||
.media-body{
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
#hipaaAuditLog{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.userName, .patientName, .mongoRecordId, .collectionName{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
@tableTextSecondaryColor: #91b9cd;
|
||||
|
||||
.close-btn {
|
||||
text-align: right;
|
||||
padding: 5px 5px 0;
|
||||
margin-right: 10px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
@ -10,7 +11,34 @@
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: @tableTextSecondaryColor;
|
||||
opacity: 1;
|
||||
|
||||
&.close:hover, &.close:focus {
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1161px) {
|
||||
.close-btn {
|
||||
.btn-default {
|
||||
margin-right: 3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.close-btn {
|
||||
.btn-default {
|
||||
margin-right: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,15 @@
|
||||
<template name="hipaaLogPage">
|
||||
<div id="hipaaLogPage" class="page">
|
||||
{{#if hasCloseButtons}}
|
||||
{{> hipaaCloseButton header="true" }}
|
||||
{{/if}}
|
||||
|
||||
|
||||
<div class="hipaaHeader clearfix">
|
||||
<div class="header pull-left">
|
||||
Audit Log
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
{{> hipaaCloseButton header="true" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{> hipaaRibbon }}
|
||||
|
||||
<div class="container">
|
||||
|
||||
@ -1,13 +1,52 @@
|
||||
@tableTextSecondaryColor: #91b9cd;
|
||||
|
||||
@hipaaHeaderHeight: 75px;
|
||||
@hipaaHeaderBgColor: #151a1f;
|
||||
|
||||
#hipaaLogPage{
|
||||
background-color: white;
|
||||
//padding-top: 80px;
|
||||
#hipaaLogPage {
|
||||
background-color: #000;
|
||||
|
||||
#hipaaLogTitle{
|
||||
left: 30px;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
.hipaaHeader {
|
||||
background-color: @hipaaHeaderBgColor;
|
||||
height: @hipaaHeaderHeight;
|
||||
margin-bottom: 2px;
|
||||
padding: 0 20px;
|
||||
|
||||
& > div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 22px;
|
||||
font-weight: 300;
|
||||
color: @tableTextSecondaryColor;
|
||||
line-height: @hipaaHeaderHeight;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
padding: 0 5%;
|
||||
width: 100%;
|
||||
|
||||
& > div.row {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1161px) {
|
||||
#hipaaLogPage {
|
||||
.container {
|
||||
padding: 0 3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
#hipaaLogPage {
|
||||
.container {
|
||||
padding: 0 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +1,28 @@
|
||||
<template name="hipaaRibbon">
|
||||
<aside id="hipaaRibbon" class="{{getRibbonClass}}">
|
||||
<div class="btn-group">
|
||||
<input type="text" name="hipaaSearchFilter" id="hipaaSearchFilter" class="{{getInputClass}}" value="{{getHipaaSearchFilter}}" placeholder="Search User" style="{{getSearchFilterStyling}}">
|
||||
<span id="searchClear" class="glyphicon glyphicon-remove-circle"></span>
|
||||
</div>
|
||||
<!--<input type="text" name="hipaaSearchFilter" id="hipaaSearchFilter" class="{{getInputClass}}" value="{{getHipaaSearchFilter}}" placeholder="Search User" style="{{getSearchFilterStyling}}">-->
|
||||
<input type="date" id="beginDateInput" class="{{getInputClass}}" value="{{getBeginDate}}" style="{{getDateRangeStyling}}">
|
||||
<input type="date" id="endDateInput" class="{{getInputClass}}" value="{{getEndDate}}" style="{{getDateRangeStyling}}">
|
||||
<select id="actionFilter" name="actionFilter" class="{{getSelectClass}}" style="{{getSelectStyling}}">
|
||||
<template name="hipaaRibbon">
|
||||
<div id="hipaaRibbon" class="row {{getRibbonClass}}">
|
||||
<div class="filter col-xs-12 col-sm-4 col-md-6">
|
||||
<span>User</span>
|
||||
<div class="btn-group">
|
||||
<input type="text" name="hipaaSearchFilter" id="hipaaSearchFilter" value="{{getHipaaSearchFilter}}" class="form-control">
|
||||
<span id="searchClear" class="glyphicon glyphicon-remove-circle"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter col-xs-4 col-sm-3 col-md-2 text-center">
|
||||
<span>Begin Date</span>
|
||||
<input type="date" id="beginDateInput" class="{{getInputClass}}" value="{{getBeginDate}}">
|
||||
</div>
|
||||
<div class="filter col-xs-4 col-sm-3 col-md-2 text-center">
|
||||
<span>End Date</span>
|
||||
<input type="date" id="endDateInput" class="{{getInputClass}}" value="{{getEndDate}}">
|
||||
</div>
|
||||
<div class="filter col-xs-4 col-sm-2 text-center">
|
||||
<span>Action</span>
|
||||
<select id="actionFilter" name="actionFilter" class="{{getSelectClass}}">
|
||||
<option id="filterCreatedButton" value="create">Created</option>
|
||||
<option id="filterModifiedButton" value="modify">Modified</option>
|
||||
<option id="filterViewedButton" value="viewed">Viewed</option>
|
||||
<option id="filterAllButton" selected value="">All</option>
|
||||
</select>
|
||||
</aside>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -39,36 +39,6 @@ Meteor.startup(function(){
|
||||
});
|
||||
|
||||
Template.hipaaRibbon.helpers({
|
||||
getSearchFilterStyling: function () {
|
||||
// spacing between inputs should be 20px each
|
||||
// if the overall width of the audit log is less than N, show the fullwidth
|
||||
if(Session.get('ribbonWidth') > ribbonBreakPoint){
|
||||
var searchFilterWidth = Session.get('ribbonWidth') - 575;
|
||||
return "margin-left: 10px; margin-right: 5px; width:" + searchFilterWidth + "px;";
|
||||
}else{
|
||||
var ribbonWidth = Session.get('ribbonWidth') - 40;
|
||||
return "width: " + ribbonWidth + "px; margin-left: 10px; margin-right: 10px;";
|
||||
}
|
||||
},
|
||||
getDateRangeStyling: function () {
|
||||
// spacing between inputs should be 20px each
|
||||
// date range inputs shouldn't be less than 170 px
|
||||
// if the overall width of the audit log is less than N, dont even show them
|
||||
if(Session.get('ribbonWidth') > ribbonBreakPoint){
|
||||
return "visbility: visible; margin-left: 5px; margin-right: 5px; width: 170px;";
|
||||
}else{
|
||||
return "display: none; visibility: hidden";
|
||||
}
|
||||
},
|
||||
getSelectStyling: function () {
|
||||
// spacing between inputs should be 20px each
|
||||
// select input should be the same as daterange
|
||||
if(Session.get('ribbonWidth') > ribbonBreakPoint){
|
||||
return "visbility: visible; margin-left: 5px; margin-right: 5px; width: 170px;";
|
||||
}else{
|
||||
return "display: none; visibility: hidden";
|
||||
}
|
||||
},
|
||||
getRibbonClass: function () {
|
||||
var hipaaAuditLog = Session.get('HipaaAuditLogConfig');
|
||||
if (hipaaAuditLog && hipaaAuditLog.classes) {
|
||||
|
||||
@ -1,46 +1,113 @@
|
||||
@tableTextPrimaryColor: white;
|
||||
@tableTextSecondaryColor: #91b9cd;
|
||||
|
||||
#hipaaRibbon{
|
||||
position: static;
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
height: 60px;
|
||||
//background-color: lightgray;
|
||||
@inputBackgroundColor: #2c363f;
|
||||
@inputPlaceholderColor: lightgray;
|
||||
|
||||
input[type="date"]{
|
||||
@hipaaRibbonBgColor: #151a1f;
|
||||
|
||||
#hipaaRibbon {
|
||||
background-color: @hipaaRibbonBgColor;
|
||||
border-bottom: solid 1px #6fbde2;
|
||||
color: @tableTextPrimaryColor;
|
||||
margin: 0 0 2px;
|
||||
padding: 20px 5%;
|
||||
|
||||
.filter {
|
||||
> span {
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
min-height: 70px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="date"] {
|
||||
padding-left: 10px;
|
||||
}
|
||||
input[type="text"]{
|
||||
// padding-left: 10px;
|
||||
// padding-right: 10px;
|
||||
}
|
||||
select{
|
||||
|
||||
select {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
// padding-left: 10px;
|
||||
// padding-right: 10px;
|
||||
}
|
||||
|
||||
#hipaaSearchFilter{
|
||||
color: black;
|
||||
}
|
||||
//---------------------------------------
|
||||
// Bootstrap users
|
||||
.form-control{
|
||||
display: inline-block !important;
|
||||
}
|
||||
#searchClear {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 14px;
|
||||
margin: auto;
|
||||
font-size: 14px;
|
||||
input, select {
|
||||
height: 40px;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
border: none;
|
||||
background-color: @inputBackgroundColor;
|
||||
color: @inputPlaceholderColor;
|
||||
font-size: 10pt;
|
||||
font-weight: normal;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
|
||||
transition: all 0.15s ease;
|
||||
-webkit-transition: all 0.15s ease;
|
||||
|
||||
&:active, &:hover {
|
||||
background-color: @inputBackgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
width: 100%;
|
||||
|
||||
#hipaaSearchFilter{
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
#searchClear {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 14px;
|
||||
margin: auto;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @media only screen and (max-width: 850px) {
|
||||
//
|
||||
// }
|
||||
|
||||
@media only screen and (max-width: 1161px) {
|
||||
#hipaaRibbon {
|
||||
padding: 20px 3%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
#hipaaRibbon {
|
||||
padding: 20px 1%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
#hipaaRibbon {
|
||||
.filter {
|
||||
&:first-child {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user