feat(Logging): show Hitem from SCL (#315)

Author: JakobVogelsang

__snapshots__/open-scd.md

@@ -395,6 +395,8 @@
     on=""
   >
   </mwc-icon-button-toggle>
+  <mwc-icon-button-toggle id="sclhistoryfilter">
+  </mwc-icon-button-toggle>
   <mwc-list
     id="content"
     wrapfocus=""

src/Logging.ts

@@ -22,6 +22,8 @@ import {
   LogEvent,
   Mixin,
   newActionEvent,
+  OpenDocEvent,
+  SclhistoryEntry,
 } from './foundation.js';
 import { get, translate } from 'lit-translate';
 import { getFilterIcon, iconColors } from './icons.js';
@@ -32,6 +34,7 @@ const icons = {
   warning: 'warning',
   error: 'report',
   action: 'history',
+  sclhistory: 'history_toggle_off',
 };
 
 function getPluginName(src: string): string {
@@ -101,6 +104,58 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
       return index;
     }
 
+    private convertToDate(when: string | null): Date | null {
+      const convertedTime = new Date(when ?? '');
+      if (!isNaN(convertedTime.getTime())) {
+        return convertedTime;
+      }
+      return null;
+    }
+
+    private createMessage(
+      who: string | null,
+      why: string | null
+    ): string | undefined {
+      let message = who;
+      if (message !== null && why !== null) {
+        message += ' : ' + why;
+      } else if (why !== null) {
+        message = why;
+      }
+      return message ?? undefined;
+    }
+
+    private createSclHistoryEntry(
+      who: string | null,
+      what: string | null,
+      why: string | null,
+      when: string | null
+    ): SclhistoryEntry {
+      return {
+        kind: 'sclhistory',
+        title: what ?? 'UNDEFINED',
+        message: this.createMessage(who, why),
+        time: this.convertToDate(when),
+      };
+    }
+
+    private async onLoadHistoryFromDoc(event: OpenDocEvent) {
+      const doc = event.detail.doc;
+
+      Array.from(
+        doc.querySelectorAll(':root > Header > History > Hitem')
+      ).forEach(historyItem => {
+        this.history.push(
+          this.createSclHistoryEntry(
+            historyItem.getAttribute('who'),
+            historyItem.getAttribute('what'),
+            historyItem.getAttribute('why'),
+            historyItem.getAttribute('when')
+          )
+        );
+      });
+    }
+
     private onIssue(de: IssueEvent): void {
       const issues = this.diagnoses.get(de.detail.validatorId);
       if (issues && issues[0].statusNumber > de.detail.statusNumber) return;
@@ -189,6 +244,7 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
       this.onLog = this.onLog.bind(this);
       this.addEventListener('log', this.onLog);
       this.addEventListener('issue', this.onIssue);
+      this.addEventListener('open-doc', this.onLoadHistoryFromDoc);
     }
 
     renderLogEntry(
@@ -205,7 +261,7 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
         >
           <span>
             <!-- FIXME: replace tt with mwc-chip asap -->
-            <tt>${entry.time.toLocaleTimeString()}</tt>
+            <tt>${entry.time?.toLocaleString()}</tt>
             ${entry.title}</span
           >
           <span slot="secondary">${entry.message}</span>
@@ -273,7 +329,9 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
 
     private renderFilterButtons() {
       return (<LogEntryType[]>Object.keys(icons)).map(
-        kind => html`<mwc-icon-button-toggle id="${kind}filter" on
+        kind => html`<mwc-icon-button-toggle
+          id="${kind}filter"
+          ?on=${kind !== 'sclhistory'}
           >${getFilterIcon(kind, false)}
           ${getFilterIcon(kind, true)}</mwc-icon-button-toggle
         >`
@@ -297,10 +355,14 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
           #log > mwc-icon-button-toggle:nth-child(4) {
             right: 158px;
           }
+          #log > mwc-icon-button-toggle:nth-child(5) {
+            right: 206px;
+          }
           #content mwc-list-item.info,
           #content mwc-list-item.warning,
           #content mwc-list-item.error,
-          #content mwc-list-item.action {
+          #content mwc-list-item.action,
+          #content mwc-list-item.sclhistory {
             display: none;
           }
           #infofilter[on] ~ #content mwc-list-item.info {
@@ -315,6 +377,9 @@ export function Logging<TBase extends LitElementConstructor>(Base: TBase) {
           #actionfilter[on] ~ #content mwc-list-item.action {
             display: flex;
           }
+          #sclhistoryfilter[on] ~ #content mwc-list-item.sclhistory {
+            display: flex;
+          }
 
           #log {
             --mdc-dialog-min-width: 92vw;

src/foundation.ts

@@ -228,7 +228,13 @@ export function newWizardEvent(
 
 type InfoEntryKind = 'info' | 'warning' | 'error';
 
-export type LogEntryType = 'info' | 'warning' | 'error' | 'action' | 'reset';
+export type LogEntryType =
+  | 'info'
+  | 'warning'
+  | 'error'
+  | 'action'
+  | 'reset'
+  | 'sclhistory';
 
 /** The basic information contained in each [[`LogEntry`]]. */
 export interface LogDetailBase {
@@ -245,6 +251,10 @@ export interface InfoDetail extends LogDetailBase {
   kind: InfoEntryKind;
   cause?: LogEntry;
 }
+/** A [[`LogEntry`]] create from the HItem Line (History) of the SCD File */
+export interface SclhistoryDetail extends LogDetailBase {
+  kind: 'sclhistory';
+}
 
 export interface ResetDetail {
   kind: 'reset';
@@ -283,13 +293,14 @@ export function newIssueEvent(
 
 /** [[`LogEntry`]]s are timestamped upon being committed to the `history`. */
 interface Timestamped {
-  time: Date;
+  time: Date | null;
 }
 
 export type CommitEntry = Timestamped & CommitDetail;
 export type InfoEntry = Timestamped & InfoDetail;
+export type SclhistoryEntry = Timestamped & SclhistoryDetail;
 
-export type LogEntry = InfoEntry | CommitEntry;
+export type LogEntry = InfoEntry | CommitEntry | SclhistoryEntry;
 
 /** Represents some work pending completion, upon which `promise` resolves. */
 export interface PendingStateDetail {

src/icons.ts

@@ -44,17 +44,19 @@ const pathsSVG = {
   warning: svg`<path d="M0 0h24v24H0z" fill="none"></path><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="currentColor"></path>`,
   error: svg`<path d="M0 0h24v24H0V0z" fill="none"></path>
   <path d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM19 14.9L14.9 19H9.1L5 14.9V9.1L9.1 5h5.8L19 9.1v5.8z" fill="currentColor"></path><path d="M11 7h2v7h-2z" fill="currentColor"></path><circle cx="12" cy="16" r="1" fill="currentColor"></circle>`,
+  sclhistory: svg`<rect xmlns="http://www.w3.org/2000/svg" fill="none"/><path xmlns="http://www.w3.org/2000/svg" d="M15.1,19.37l1,1.74c-0.96,0.44-2.01,0.73-3.1,0.84v-2.02C13.74,19.84,14.44,19.65,15.1,19.37z M4.07,13H2.05 c0.11,1.1,0.4,2.14,0.84,3.1l1.74-1C4.35,14.44,4.16,13.74,4.07,13z M15.1,4.63l1-1.74C15.14,2.45,14.1,2.16,13,2.05v2.02 C13.74,4.16,14.44,4.35,15.1,4.63z M19.93,11h2.02c-0.11-1.1-0.4-2.14-0.84-3.1l-1.74,1C19.65,9.56,19.84,10.26,19.93,11z M8.9,19.37l-1,1.74c0.96,0.44,2.01,0.73,3.1,0.84v-2.02C10.26,19.84,9.56,19.65,8.9,19.37z M11,4.07V2.05 c-1.1,0.11-2.14,0.4-3.1,0.84l1,1.74C9.56,4.35,10.26,4.16,11,4.07z M18.36,7.17l1.74-1.01c-0.63-0.87-1.4-1.64-2.27-2.27 l-1.01,1.74C17.41,6.08,17.92,6.59,18.36,7.17z M4.63,8.9l-1.74-1C2.45,8.86,2.16,9.9,2.05,11h2.02C4.16,10.26,4.35,9.56,4.63,8.9z M19.93,13c-0.09,0.74-0.28,1.44-0.56,2.1l1.74,1c0.44-0.96,0.73-2.01,0.84-3.1H19.93z M16.83,18.36l1.01,1.74 c0.87-0.63,1.64-1.4,2.27-2.27l-1.74-1.01C17.92,17.41,17.41,17.92,16.83,18.36z M7.17,5.64L6.17,3.89 C5.29,4.53,4.53,5.29,3.9,6.17l1.74,1.01C6.08,6.59,6.59,6.08,7.17,5.64z M5.64,16.83L3.9,17.83c0.63,0.87,1.4,1.64,2.27,2.27 l1.01-1.74C6.59,17.92,6.08,17.41,5.64,16.83z M13,7h-2v5.41l4.29,4.29l1.41-1.41L13,11.59V7z"/>`,
 };
 
 export const iconColors = {
   info: '--cyan',
   warning: '--yellow',
   error: '--red',
   action: '--blue',
+  sclhistory: '--cyan',
 };
 
 export function getFilterIcon(
-  type: 'action' | 'info' | 'warning' | 'error' | 'reset',
+  type: 'action' | 'info' | 'warning' | 'error' | 'reset' | 'sclhistory',
   state: boolean
 ): TemplateResult {
   if (type === 'reset') return html``;

test/testfiles/history.scd

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<SCL xmlns="http://www.iec.ch/61850/2003/SCL" release="4" revision="B" version="2007">
+  <Header id="40cf9d4d-19b1-4d24-9faa-0afa26ded001" revision="" version="1.0.0">
+    <History>
+      <Hitem revision="" version="0.0.1" what="SCD created from CIM File(s): some-cim-file.xml" when="2021-09-14T10:51:38Z" who="Test User 1"/>
+      <Hitem revision="" version="1.0.0" what="SCD created, Nice history test 1" when="2021-09-14T10:52:28Z" who="Test User 1"/>
+      <Hitem revision="" version="1.1.0" what="SCD updated, Nice history test 2" when="" who="Test User 1"/>
+      <Hitem revision="" version="1.2.0" what="SCD updated, Nice history test 3" when="invalid" who="Test User 1" why="Small correction in substation"/>
+      <Hitem revision="" version="1.2.0" what="SCD updated, Nice history test 4" why="Small correction in substation"/>
+      <Hitem revision="" version="1.2.0" what="SCD updated, Nice history test 5" />
+      <Hitem revision="" version="1.2.0" who="Test User 1" why="Small correction in substation"/>
+    </History>
+  </Header>
+</SCL>

test/unit/Logging.test.ts

@@ -5,6 +5,7 @@ import {
   CommitEntry,
   newIssueEvent,
   newLogEvent,
+  newOpenDocEvent,
 } from '../../src/foundation.js';
 
 import { MockAction } from './mock-actions.js';
@@ -218,7 +219,94 @@ describe('LoggingElement', () => {
     });
   });
 
-  describe('with an issue incomming', () => {
+  describe('when loading file with history items', () => {
+    beforeEach(async () => {
+      const doc = await fetch('/base/test/testfiles/history.scd')
+        .then(response => response.text())
+        .then(str => new DOMParser().parseFromString(str, 'application/xml'));
+
+      element.dispatchEvent(newOpenDocEvent(doc, 'history.scd'));
+      await element.requestUpdate();
+    });
+
+    it('has 7 items in the history list', () => {
+      expect(element.history.length).to.be.equal(7);
+    });
+
+    it('expect the correct values of the first line (with valid when and no why)', () => {
+      expect(element.history.length).to.be.equal(7);
+      expect(element.history[0].kind).to.be.equal('sclhistory');
+      expect(element.history[0].title).to.satisfy((msg: string) =>
+        msg.startsWith('SCD created from CIM File(s):')
+      );
+      expect(element.history[0].message).to.be.equal('Test User 1');
+      expect(element.history[0].time).to.be.not.null;
+    });
+
+    it('expect the correct values of the third line (with no when and no why)', () => {
+      expect(element.history.length).to.be.equal(7);
+      expect(element.history[2].kind).to.be.equal('sclhistory');
+      expect(element.history[2].title).to.satisfy((msg: string) =>
+        msg.startsWith('SCD updated, ')
+      );
+      expect(element.history[2].message).to.be.equal('Test User 1');
+      expect(element.history[2].time).to.be.null;
+    });
+
+    it('expect the correct values of the forth line (with invalid when, but valid why)', () => {
+      expect(element.history.length).to.be.equal(7);
+      expect(element.history[3].kind).to.be.equal('sclhistory');
+      expect(element.history[3].title).to.satisfy((msg: string) =>
+        msg.startsWith('SCD updated, ')
+      );
+      expect(element.history[3].message).to.be.equal(
+        'Test User 1 : Small correction in substation'
+      );
+      expect(element.history[3].time).to.be.null;
+    });
+
+    it('expect the correct message values (with missing who)', () => {
+      expect(element.history.length).to.be.equal(7);
+      expect(element.history[4].kind).to.be.equal('sclhistory');
+      expect(element.history[4].title).to.satisfy((msg: string) =>
+        msg.startsWith('SCD updated, ')
+      );
+      expect(element.history[4].message).to.be.equal(
+        'Small correction in substation'
+      );
+      expect(element.history[4].time).to.be.null;
+    });
+
+    it('expect undefined message (with missing who and why)', () => {
+      expect(element.history.length).to.be.equal(7);
+      expect(element.history[5].kind).to.be.equal('sclhistory');
+      expect(element.history[5].title).to.satisfy((msg: string) =>
+        msg.startsWith('SCD updated, ')
+      );
+      expect(element.history[5].message).to.be.undefined;
+      expect(element.history[5].time).to.be.null;
+    });
+
+    it('expect undefined title (with invalid what)', () => {
+      expect(element.history.length).to.be.equal(7);
+      expect(element.history[6].kind).to.be.equal('sclhistory');
+      expect(element.history[6].title).to.satisfy((msg: string) =>
+        msg.startsWith('UNDEFINED')
+      );
+      expect(element.history[6].message).to.be.equal(
+        'Test User 1 : Small correction in substation'
+      );
+      expect(element.history[6].time).to.be.null;
+    });
+
+    it('can reset its history', async () => {
+      element.dispatchEvent(newLogEvent({ kind: 'reset' }));
+      await element.requestUpdate();
+      expect(element).property('history').to.be.empty;
+    });
+  });
+
+  describe('with an issue incoming', () => {
     beforeEach(async () => {
       element.dispatchEvent(
         newIssueEvent({
@@ -246,7 +334,7 @@ describe('LoggingElement', () => {
       expect(element.diagnoses.has('/src/validators/ValidateTemplates.js')).to
         .be.false);
 
-    describe('with a second issue comming in - new statusNumber, same validator', () => {
+    describe('with a second issue coming in - new statusNumber, same validator', () => {
       beforeEach(() => {
         element.dispatchEvent(
           newIssueEvent({
@@ -284,7 +372,7 @@ describe('LoggingElement', () => {
       });
     });
 
-    describe('with a second issue comming in - same statusNumber, same validator', () => {
+    describe('with a second issue coming in - same statusNumber, same validator', () => {
       beforeEach(() => {
         element.dispatchEvent(
           newIssueEvent({
@@ -314,7 +402,7 @@ describe('LoggingElement', () => {
       });
     });
 
-    describe('with a second issue comming in - outdated statusNumber, same validator', () => {
+    describe('with a second issue coming in - outdated statusNumber, same validator', () => {
       beforeEach(() => {
         element.dispatchEvent(
           newIssueEvent({
@@ -325,7 +413,7 @@ describe('LoggingElement', () => {
         );
       });
 
-      it('ignores incomming the issue', () => {
+      it('ignores incoming the issue', () => {
         expect(element.diagnoses.get('/src/validators/ValidateSchema.js')).to
           .exist;
         expect(
@@ -339,7 +427,7 @@ describe('LoggingElement', () => {
       });
     });
 
-    describe('with another issue comming in - new validator', () => {
+    describe('with another issue coming in - new validator', () => {
       beforeEach(() => {
         element.dispatchEvent(
           newIssueEvent({