Merge pull request #352 from EventStore/simple-redaction

Handle redacted events in the UI

Author: timothycoleman

src/js/modules/streams/templates/templates.js

@@ -30,9 +30,9 @@ try {
 }
 module.run(['$templateCache', function($templateCache) {
   $templateCache.put('streams.item.event.tpl.html',
-    '<header class=page-header><h2 class=page-title>{{ evt.title }} <small ng-if=isNotTheSame>Link from {{ evt.positionEventNumber + \'@\' + evt.positionStreamId }}</small></h2><ul class=page-nav><li class=page-nav__item><a ng-if=evt ui-sref="^.addStreamEvent({ fromEvent: evt })">Add New Like This</a></li><li class=page-nav__item><a ui-sref=^.events>Back</a></li></ul></header><ul class=page-nav style="padding:0rem 0rem 2rem 0rem !important"><li class=page-nav__item><button ng-disabled=!prev ui-sref=".({streamId: evt.streamId, eventNumber: evt.positionEventNumber - 1})">prev</button></li><li class=page-nav__item><button ng-disabled=!next ui-sref=".({streamId: evt.streamId, eventNumber: evt.positionEventNumber + 1})">next</button></li></ul><br><table><thead><tr><th>No</th><th>Stream</th><th>Type</th><th>Timestamp</th></tr></thead><tbody ng-hide=hasEvent><tr><td colspan=5><em>Event does not exist for stream: {{streamId}}</em></td></tr></tbody><tbody ng-show=hasEvent><tr><td>{{ evt.eventNumber }}</td><td><a ui-sref="^.events({streamId: evt.streamId})">{{ evt.streamId }}</a></td><td>{{ evt.eventType }}</td><td>{{ evt.updated | date:\'yyyy-MM-dd HH:mm:ss\'}}</td></tr><tr ng-if="evt.isJson || evt.isMetaData || evt.isLinkMetaData"><td colspan=4><div ng-if=evt.isJson><strong>Data</strong><pre>\n' +
+    '<header class=page-header><h2 class=page-title>{{ evt.title }} <small ng-if=isNotTheSame>Link from {{ evt.positionEventNumber + \'@\' + evt.positionStreamId }}</small></h2><ul class=page-nav><li class=page-nav__item><a ng-if=evt ui-sref="^.addStreamEvent({ fromEvent: evt })">Add New Like This</a></li><li class=page-nav__item><a ui-sref=^.events>Back</a></li></ul></header><ul class=page-nav style="padding:0rem 0rem 2rem 0rem !important"><li class=page-nav__item><button ng-disabled=!prev ui-sref=".({streamId: evt.streamId, eventNumber: evt.positionEventNumber - 1})">prev</button></li><li class=page-nav__item><button ng-disabled=!next ui-sref=".({streamId: evt.streamId, eventNumber: evt.positionEventNumber + 1})">next</button></li></ul><br><table><thead><tr><th>No</th><th>Stream</th><th>Type</th><th>Timestamp</th></tr></thead><tbody ng-hide=hasEvent><tr><td colspan=5><em>Event does not exist for stream: {{streamId}}</em></td></tr></tbody><tbody ng-show=hasEvent><tr><td>{{ evt.eventNumber }}</td><td><a ui-sref="^.events({streamId: evt.streamId})">{{ evt.streamId }}</a></td><td>{{ evt.eventType }}</td><td>{{ evt.updated | date:\'yyyy-MM-dd HH:mm:ss\'}}</td></tr><tr ng-if="evt.isJson || evt.isMetaData || evt.isLinkMetaData"><td colspan=4><div ng-if=evt.isJson><strong>Data</strong><pre ng-if=!evt.isRedacted>\n' +
     '{{ evt.data }}\n' +
-    '				</pre></div><div ng-if=evt.isMetaData><strong>Metadata</strong><pre>\n' +
+    '				</pre><span class=note--warning ng-if=evt.isRedacted>This event\'s data was redacted</span></div><div ng-if=evt.isMetaData><strong>Metadata</strong><pre>\n' +
     '{{ evt.metaData }}\n' +
     '				</pre></div><div ng-if=evt.isLinkMetaData><strong>Link metadata</strong><pre>\n' +
     '{{ evt.content.linkMetaData }}\n' +
@@ -48,9 +48,9 @@ try {
 }
 module.run(['$templateCache', function($templateCache) {
   $templateCache.put('streams.item.events.tpl.html',
-    '<table><thead><tr><th>Event #</th><th>Name</th><th>Type</th><th>Created Date</th><th></th></tr></thead><tbody ng-repeat="event in streams track by $index"><tr ng-class="{ \'invalid\': !event.streamId }"><td><a ng-if=event.streamId ui-sref="^.event({streamId: event.streamId, eventNumber: event.eventNumber})">{{ event.positionEventNumber }}</a><text ng-if=!event.streamId>{{ event.positionEventNumber }}</text></td><td><a ng-if=event.streamId ui-sref="^.event({streamId: event.streamId, eventNumber: event.eventNumber})">{{ event.title }}</a><text ng-if=!event.streamId>{{ event.title }}</text></td><td>{{ event.eventType }}</td><td>{{ event.updated | date:\'yyyy-MM-dd HH:mm:ss\'}}</td><td><a ng-click="toggleJson($event, event)" style="cursor: pointer;" ng-if="event.isJson || event.isLinkMetaData || event.isMetaData">JSON</a></td></tr><tr ng-show=event.showJson><td colspan=5><div ng-if=event.isJson><strong>Data</strong><pre>\n' +
+    '<table><thead><tr><th>Event #</th><th>Name</th><th>Type</th><th>Created Date</th><th></th></tr></thead><tbody ng-repeat="event in streams track by $index"><tr ng-class="{ \'invalid\': !event.streamId }"><td><a ng-if=event.streamId ui-sref="^.event({streamId: event.streamId, eventNumber: event.eventNumber})">{{ event.positionEventNumber }}</a><text ng-if=!event.streamId>{{ event.positionEventNumber }}</text></td><td><a ng-if=event.streamId ui-sref="^.event({streamId: event.streamId, eventNumber: event.eventNumber})">{{ event.title }}</a><text ng-if=!event.streamId>{{ event.title }}</text></td><td>{{ event.eventType }}</td><td>{{ event.updated | date:\'yyyy-MM-dd HH:mm:ss\'}}</td><td><a ng-click="toggleJson($event, event)" style="cursor: pointer;" ng-if="event.isJson || event.isLinkMetaData || event.isMetaData">JSON</a></td></tr><tr ng-show=event.showJson><td colspan=5><div ng-if=event.isJson><strong>Data</strong><pre ng-if=!event.isRedacted>\n' +
     '{{ event.data }}					\n' +
-    '					</pre></div><div ng-if=event.metaData><strong>Metadata</strong><pre>\n' +
+    '					</pre><span class=note--warning ng-if=event.isRedacted>This event\'s data was redacted</span></div><div ng-if=event.metaData><strong>Metadata</strong><pre>\n' +
     '{{ event.metaData }}					\n' +
     '					</pre></div><div ng-if=event.isLinkMetaData><strong>Link metadata</strong><pre>\n' +
     '{{ event.linkMetaData }}					\n' +

src/js/modules/streams/views/streams.item.event.tpl.html

@@ -49,9 +49,13 @@ <h2 class="page-title">
 		<tr ng-if="evt.isJson || evt.isMetaData || evt.isLinkMetaData">
 			<td colspan="4">
 				<div ng-if="evt.isJson">
-				<strong>Data</strong><pre>
+				<strong>Data</strong>
+				<pre ng-if="!evt.isRedacted">
 {{ evt.data }}
 				</pre>
+				<span class="note--warning" ng-if="evt.isRedacted">
+This event's data was redacted
+				</span>
 				</div>
 				<div ng-if="evt.isMetaData">
 				<strong>Metadata</strong><pre>

src/js/modules/streams/views/streams.item.events.tpl.html

@@ -30,9 +30,12 @@
 			<td colspan="5">
 				<div ng-if="event.isJson">
 					<strong>Data</strong>
-					<pre>
+					<pre ng-if="!event.isRedacted">
 {{ event.data }}					
 					</pre>
+					<span class="note--warning" ng-if="event.isRedacted">
+						This event's data was redacted
+					</span>
 				</div>
 				<div ng-if="event.metaData">
 					<strong>Metadata</strong>