@chapeaux/cpx-operator-graph - npm Package Compare versions

Comparing version 0.4.2 to 0.4.3

cpx-operator-graph.cjs.js

@@ -6,30 +6,80 @@ "use strict";
 const tmpl = `<style>
-.node { fill: transparent; stroke-width:  var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGDisconnectedColor, #ccc); }
-.edges { fill: transparent; stroke-width: var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGConnectedColor,#369); }
+:host { font-family: Red Hat Display, sans-serif; }
+.node { fill: transparent; stroke-width:  var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGDisconnectedColor, #d2d2d2); }
+.edges { fill: transparent; stroke-width: var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGConnectedColor,#0266c8); }
 .inbound, .outbound, .active { display: none; }
-[active] .node { stroke: var(--cpxOGActiveColor,#090); }
+[active] .node { stroke: var(--cpxOGActiveColor,#93d434); }
 [active] .active, [inbound] .inbound, [outbound] .outbound { display: block; }
-[active] .active { fill: var(--cpxOGActiveColor, #090); }
-[connect] .node { stroke: var(--cpxOGConnectedColor,#00F); }
+[active] .active { fill: var(--cpxOGActiveColor, #93d434); }
+[connect] .node { stroke: var(--cpxOGConnectedColor,#0266c8); }
 
 table { table-layout: fixed; max-width: 100%; width: 100%; border-collapse: collapse; border-spacing: 0; }
-thead th:nth-child(1) { width: 5%; }
-thead th:nth-child(2) { width: 25%; text-align:left; }
+thead th { padding-bottom: 20px; }
+thead th:nth-child(1) { width: 8%; }
+thead th:nth-child(2) { width: 12%; text-align:left; }
 thead th:nth-child(3) { width: 25%; }
 thead th:nth-child(4) { width: 25%; text-align: left; }
-thead th:nth-child(5) { width: 20%; text-align: left; }
+thead th:nth-child(5) { width: 30%; text-align: left; }
 tr { border-bottom: 1px solid #999; }
 td { padding: 0; }
 tbody td:nth-child(1) {}
-tbody th:nth-child(2) { color: #369; text-align: left; }
+tbody th:nth-child(2) { color: var(--cpxOGConnectedColor, #0266c8); text-align: left; }
 tbody td:nth-child(3) { text-align: right; }
-tbody td:nth-child(4) {}
+tbody td:nth-child(4) { padding-left: 24px; }
 tbody td:nth-child(5) {}
 svg { display: block; max-width: 100px; }
+
+.toggle { line-height: 25px; padding-left: 0; font-size: 16px; position:relative; }
+input[type=checkbox] { height: 0; width: 0; visibility: hidden; order: 2; }
+label {
+  cursor: pointer;
+  text-indent: 60px;
+  font-size: 20px;
+  width: 50px;
+  height: 30px;
+  background: var(--cpxOGDisconnectedColor, #d2d2d2);
+  display: block;
+  border-radius: 25px;
+  position: absolute;
+  right: 8em;
+  top: 0;
+  white-space: nowrap;
+  line-height: 30px;
+  color: var(--cpxOGDisconnectedColor, #d2d2d2);
+}
+
+label:after {
+  content: '';
+  position: absolute;
+  top: 6px;
+  left: 7px;
+  width: 17px;
+  height: 17px;
+  background: #fff;
+  border-radius: 20px;
+  transition: 0.3s;
+}
+
+input:checked + label {
+  background: var(--cpxOGConnectedColor, #0266c8);
+  color: #151515;
+}
+
+input:checked + label:after  { left: calc(100% - 7px); transform: translateX(-100%); }
+label:active:after { width: 33px; }
+.options { display: grid; grid-template-columns: 50% 50%; margin-bottom: 60px; }
 </style>
 <section>
+<h3>OpenShift Version</h3>
+<div class="options">
+  <pfe-select><select id="ocp_versions"></select></pfe-select>
+</div>
 <h3>Channel</h3>
-<pfe-select><select id="channels"></select></pfe-select>
-<input type="checkbox" name="all-channels" value="all" id="all-channels">
-<label for="all-channels">All operator versions</label>
+<div class="options">
+  <pfe-select><select id="channels"></select></pfe-select>
+  <div class="toggle">
+    <input type="checkbox" name="all-channels" value="all" id="all-channels">
+    <label for="all-channels">Show all versions</label>
+  </div>
+</div>
 <table>
@@ -161,20 +211,2 @@ <caption></caption>
         });
-        Object.defineProperty(this, "_filter", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ""
-        });
-        Object.defineProperty(this, "_query", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ""
-        });
-        Object.defineProperty(this, "_sort", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ""
-        });
         Object.defineProperty(this, "_order", {
@@ -184,3 +216,3 @@ enumerable: true,
             writable: true,
-            value: "asc"
+            value: "desc"
         });
@@ -263,29 +295,17 @@ Object.defineProperty(this, "_channel", {
         }
+        this.shadowRoot.innerHTML = tmpl;
         this.render();
+        if (this.channels.size > 0) {
+            const channelSelect = this.shadowRoot.querySelector('#channels');
+            [...this.channels.keys()].forEach(channel => {
+                const opt = document.createElement('option');
+                opt.innerHTML = channel;
+                opt.setAttribute('value', channel);
+                if (this.channel === channel) {
+                    opt.setAttribute('selected', 'selected');
+                }
+                channelSelect.appendChild(opt);
+            });
+        }
     }
-    get filter() {
-        return this._filter;
-    }
-    set filter(val) {
-        if (this._filter === val)
-            return;
-        this._filter = val;
-        this.render();
-    }
-    get query() {
-        return this._query;
-    }
-    set query(val) {
-        if (this._query === val)
-            return;
-        this._query = val;
-    }
-    get sort() {
-        return this._sort;
-    }
-    set sort(val) {
-        if (this._sort === val)
-            return;
-        this._sort = val;
-    }
     get order() {
@@ -300,3 +320,3 @@ return this._order;
     get channel() {
-        return this._channel;
+        return this._channel !== "" ? this._channel : [...this.channels.keys()][0];
     }
@@ -351,24 +371,30 @@ set channel(val) {
     render(all) {
-        this.shadowRoot.innerHTML = tmpl;
-        if (this.channels.get(this.channel)) {
-            this.channels.get(this.channel).forEach(csv => {
-                let row = document.createElement('tr');
-                row.id = csv['_id'];
-                row.onclick = this.handleClick(row.id);
-                row.innerHTML = `<td></td>
-        <th scope="row">${csv['version']}</th>
-        <td>${csv['replaces'] || ''}</td>
-        <td><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-          <g class="node">
-              <circle cx="20" cy="50" r="10"/>
-              <circle class="active" cx="20" cy="50" r="3"/>
-              <line class="inbound outbound" x1="10" y1="50" x2="30" y2="50"/>
-              <line class="inbound" x1="5" y1="43" x2="35" y2="43" stroke="white" stroke-width="12"/>
-              <line class="outbound" x1="5" y1="57" x2="35" y2="57" stroke="white" stroke-width="12"/>
-          </g>
-          <g class="edges"></g>
-        </svg></td>
-        <td>${csv['channels'] || ''}</td>`;
-                this.body.appendChild(row);
-            });
+        if (this.channels.size > 0) {
+            if (!all) {
+                if (this.channels.get(this.channel)) {
+                    while (this.body.firstChild) {
+                        this.body.removeChild(this.body.firstChild);
+                    }
+                    this.channels.get(this.channel).forEach(csv => {
+                        const row = document.createElement('tr');
+                        row.id = csv['_id'];
+                        row.onclick = this.handleClick(row.id);
+                        row.innerHTML = `<td></td>
+            <th scope="row">${csv['version']}</th>
+            <td>${csv['replaces'] || ''}</td>
+            <td><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+              <g class="node">
+                  <circle cx="20" cy="50" r="10"/>
+                  <circle class="active" cx="20" cy="50" r="3"/>
+                  <line class="inbound outbound" x1="10" y1="50" x2="30" y2="50"/>
+                  <line class="inbound" x1="5" y1="43" x2="35" y2="43" stroke="white" stroke-width="12"/>
+                  <line class="outbound" x1="5" y1="57" x2="35" y2="57" stroke="white" stroke-width="12"/>
+              </g>
+              <g class="edges"></g>
+            </svg></td>
+            <td>${csv['channels'] || ''}</td>`;
+                        this.body.appendChild(row);
+                    });
+                }
+            }
         }
@@ -379,2 +405,6 @@ }
 window.customElements.define(CPXOperatorGraph.tag, CPXOperatorGraph);
+document.dispatchEvent(new CustomEvent("cpx-operator-graph-ready", {
+    composed: true,
+    bubbles: true,
+}));
 //# sourceMappingURL=cpx-operator-graph.js.map

cpx-operator-graph.js

 import { compareSemVer } from 'https://cdn.skypack.dev/semver-parser';
 const tmpl = `<style>
-.node { fill: transparent; stroke-width:  var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGDisconnectedColor, #ccc); }
-.edges { fill: transparent; stroke-width: var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGConnectedColor,#369); }
+:host { font-family: Red Hat Display, sans-serif; }
+.node { fill: transparent; stroke-width:  var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGDisconnectedColor, #d2d2d2); }
+.edges { fill: transparent; stroke-width: var(--cpxOGStrokeWidth,3); stroke: var(--cpxOGConnectedColor,#0266c8); }
 .inbound, .outbound, .active { display: none; }
-[active] .node { stroke: var(--cpxOGActiveColor,#090); }
+[active] .node { stroke: var(--cpxOGActiveColor,#93d434); }
 [active] .active, [inbound] .inbound, [outbound] .outbound { display: block; }
-[active] .active { fill: var(--cpxOGActiveColor, #090); }
-[connect] .node { stroke: var(--cpxOGConnectedColor,#00F); }
+[active] .active { fill: var(--cpxOGActiveColor, #93d434); }
+[connect] .node { stroke: var(--cpxOGConnectedColor,#0266c8); }
 
 table { table-layout: fixed; max-width: 100%; width: 100%; border-collapse: collapse; border-spacing: 0; }
-thead th:nth-child(1) { width: 5%; }
-thead th:nth-child(2) { width: 25%; text-align:left; }
+thead th { padding-bottom: 20px; }
+thead th:nth-child(1) { width: 8%; }
+thead th:nth-child(2) { width: 12%; text-align:left; }
 thead th:nth-child(3) { width: 25%; }
 thead th:nth-child(4) { width: 25%; text-align: left; }
-thead th:nth-child(5) { width: 20%; text-align: left; }
+thead th:nth-child(5) { width: 30%; text-align: left; }
 tr { border-bottom: 1px solid #999; }
 td { padding: 0; }
 tbody td:nth-child(1) {}
-tbody th:nth-child(2) { color: #369; text-align: left; }
+tbody th:nth-child(2) { color: var(--cpxOGConnectedColor, #0266c8); text-align: left; }
 tbody td:nth-child(3) { text-align: right; }
-tbody td:nth-child(4) {}
+tbody td:nth-child(4) { padding-left: 24px; }
 tbody td:nth-child(5) {}
 svg { display: block; max-width: 100px; }
+
+.toggle { line-height: 25px; padding-left: 0; font-size: 16px; position:relative; }
+input[type=checkbox] { height: 0; width: 0; visibility: hidden; order: 2; }
+label {
+  cursor: pointer;
+  text-indent: 60px;
+  font-size: 20px;
+  width: 50px;
+  height: 30px;
+  background: var(--cpxOGDisconnectedColor, #d2d2d2);
+  display: block;
+  border-radius: 25px;
+  position: absolute;
+  right: 8em;
+  top: 0;
+  white-space: nowrap;
+  line-height: 30px;
+  color: var(--cpxOGDisconnectedColor, #d2d2d2);
+}
+
+label:after {
+  content: '';
+  position: absolute;
+  top: 6px;
+  left: 7px;
+  width: 17px;
+  height: 17px;
+  background: #fff;
+  border-radius: 20px;
+  transition: 0.3s;
+}
+
+input:checked + label {
+  background: var(--cpxOGConnectedColor, #0266c8);
+  color: #151515;
+}
+
+input:checked + label:after  { left: calc(100% - 7px); transform: translateX(-100%); }
+label:active:after { width: 33px; }
+.options { display: grid; grid-template-columns: 50% 50%; margin-bottom: 60px; }
 </style>
 <section>
+<h3>OpenShift Version</h3>
+<div class="options">
+  <pfe-select><select id="ocp_versions"></select></pfe-select>
+</div>
 <h3>Channel</h3>
-<pfe-select><select id="channels"></select></pfe-select>
-<input type="checkbox" name="all-channels" value="all" id="all-channels">
-<label for="all-channels">All operator versions</label>
+<div class="options">
+  <pfe-select><select id="channels"></select></pfe-select>
+  <div class="toggle">
+    <input type="checkbox" name="all-channels" value="all" id="all-channels">
+    <label for="all-channels">Show all versions</label>
+  </div>
+</div>
 <table>
@@ -157,20 +207,2 @@ <caption></caption>
         });
-        Object.defineProperty(this, "_filter", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ""
-        });
-        Object.defineProperty(this, "_query", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ""
-        });
-        Object.defineProperty(this, "_sort", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ""
-        });
         Object.defineProperty(this, "_order", {
@@ -180,3 +212,3 @@ enumerable: true,
             writable: true,
-            value: "asc"
+            value: "desc"
         });
@@ -259,29 +291,17 @@ Object.defineProperty(this, "_channel", {
         }
+        this.shadowRoot.innerHTML = tmpl;
         this.render();
+        if (this.channels.size > 0) {
+            const channelSelect = this.shadowRoot.querySelector('#channels');
+            [...this.channels.keys()].forEach(channel => {
+                const opt = document.createElement('option');
+                opt.innerHTML = channel;
+                opt.setAttribute('value', channel);
+                if (this.channel === channel) {
+                    opt.setAttribute('selected', 'selected');
+                }
+                channelSelect.appendChild(opt);
+            });
+        }
     }
-    get filter() {
-        return this._filter;
-    }
-    set filter(val) {
-        if (this._filter === val)
-            return;
-        this._filter = val;
-        this.render();
-    }
-    get query() {
-        return this._query;
-    }
-    set query(val) {
-        if (this._query === val)
-            return;
-        this._query = val;
-    }
-    get sort() {
-        return this._sort;
-    }
-    set sort(val) {
-        if (this._sort === val)
-            return;
-        this._sort = val;
-    }
     get order() {
@@ -296,3 +316,3 @@ return this._order;
     get channel() {
-        return this._channel;
+        return this._channel !== "" ? this._channel : [...this.channels.keys()][0];
     }
@@ -347,24 +367,30 @@ set channel(val) {
     render(all) {
-        this.shadowRoot.innerHTML = tmpl;
-        if (this.channels.get(this.channel)) {
-            this.channels.get(this.channel).forEach(csv => {
-                let row = document.createElement('tr');
-                row.id = csv['_id'];
-                row.onclick = this.handleClick(row.id);
-                row.innerHTML = `<td></td>
-        <th scope="row">${csv['version']}</th>
-        <td>${csv['replaces'] || ''}</td>
-        <td><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-          <g class="node">
-              <circle cx="20" cy="50" r="10"/>
-              <circle class="active" cx="20" cy="50" r="3"/>
-              <line class="inbound outbound" x1="10" y1="50" x2="30" y2="50"/>
-              <line class="inbound" x1="5" y1="43" x2="35" y2="43" stroke="white" stroke-width="12"/>
-              <line class="outbound" x1="5" y1="57" x2="35" y2="57" stroke="white" stroke-width="12"/>
-          </g>
-          <g class="edges"></g>
-        </svg></td>
-        <td>${csv['channels'] || ''}</td>`;
-                this.body.appendChild(row);
-            });
+        if (this.channels.size > 0) {
+            if (!all) {
+                if (this.channels.get(this.channel)) {
+                    while (this.body.firstChild) {
+                        this.body.removeChild(this.body.firstChild);
+                    }
+                    this.channels.get(this.channel).forEach(csv => {
+                        const row = document.createElement('tr');
+                        row.id = csv['_id'];
+                        row.onclick = this.handleClick(row.id);
+                        row.innerHTML = `<td></td>
+            <th scope="row">${csv['version']}</th>
+            <td>${csv['replaces'] || ''}</td>
+            <td><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+              <g class="node">
+                  <circle cx="20" cy="50" r="10"/>
+                  <circle class="active" cx="20" cy="50" r="3"/>
+                  <line class="inbound outbound" x1="10" y1="50" x2="30" y2="50"/>
+                  <line class="inbound" x1="5" y1="43" x2="35" y2="43" stroke="white" stroke-width="12"/>
+                  <line class="outbound" x1="5" y1="57" x2="35" y2="57" stroke="white" stroke-width="12"/>
+              </g>
+              <g class="edges"></g>
+            </svg></td>
+            <td>${csv['channels'] || ''}</td>`;
+                        this.body.appendChild(row);
+                    });
+                }
+            }
         }
@@ -374,1 +400,5 @@ }
 window.customElements.define(CPXOperatorGraph.tag, CPXOperatorGraph);
+document.dispatchEvent(new CustomEvent("cpx-operator-graph-ready", {
+    composed: true,
+    bubbles: true,
+}));

package.json

 {
   "name": "@chapeaux/cpx-operator-graph",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Chapeaux Operator Graph Component",
@@ -32,3 +32,3 @@ "type": "module",
   "homepage": "https://github.com/chapeaux/cpx-components/components/cpx-operator-graph",
-  "gitHead": "da1d23d27058c4b6b02190b7e8e580891fe680b2",
+  "gitHead": "7fc3b7573b82d5e76e95ca2df0c32a28c8d62ac1",
   "dependencies": {
@@ -35,0 +35,0 @@ "semver-parser": "^4.0.0"

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63829

increased by4.41%

Lines of code

828

increased by6.7%

Number of medium supply chain risk alerts

3

decreased by-25%

No dependency changes