Strolch
/
strolch-wc-inspector
mirror of https://github.com/strolch-li/strolch-wc-inspector.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[New] Added a new agent components UI

This commit is contained in:
Robert von Burg 2023-07-28 11:28:59 +02:00
parent 96c9b3a32c
commit 78eb6140e0
Signed by: eitch
GPG Key ID: 75DB9C85C74331F7
1 changed files with 137 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
strolch-wc-components.html
View File

@ -36,9 +36,13 @@
paper-material { paper-material {
background: white; background: white;
margin-top: 0.3em; margin-top: 8px;
margin-bottom: 0.3em; margin-bottom: 16px;
padding: 0.3em; padding: 8px;
}
.component {
display: flex;
} }
.table-row { .table-row {
@ -48,35 +52,35 @@
} }
.table-heading, .table-cell { .table-heading, .table-cell {
flex-grow: 1; padding: 0;
flex-shrink: 1;
} }
.table-cell { .table-cell {
min-height: inherit; min-height: inherit;
} }
.label {
flex-basis: 10px;
flex-grow: 1;
font-style: italic;
}
.property-key { .property-key {
flex-basis: 200px;
flex-grow: 3; flex-grow: 3;
font-style: italic; font-style: italic;
overflow: auto;
} }
.property-value { .property-value {
flex-basis: 300px; flex-basis: 100px;
flex-grow: 8; flex-grow: 8;
justify-content: flex-start; justify-content: flex-start;
overflow: auto; overflow: auto;
} }
.name { .property-default {
flex-basis: 200px; flex-basis: 100px;
flex-grow: 2;
justify-content: flex-start;
overflow: auto;
}
.info {
flex-basis: 300px;
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -88,17 +92,17 @@
} }
.properties { .properties {
flex-basis: 200px; flex-basis: 300px;
flex-grow: 1; flex-grow: 3;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
} }
.btn { .btn {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
flex-basis: 100px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -107,7 +111,7 @@
.btn paper-button { .btn paper-button {
margin-bottom: 8px; margin-bottom: 8px;
width: 100%; width: 150px;
} }
</style> </style>
@ -117,47 +121,88 @@
<paper-icon-button icon="refresh" title="Refresh" on-tap="reload"></paper-icon-button> <paper-icon-button icon="refresh" title="Refresh" on-tap="reload"></paper-icon-button>
</div> </div>
<paper-material> <paper-material elevation="1">
<h3>Agent</h3>
<div class="table"> <div class="component">
<div class="table-row"> <div class="info">
<div class="table-heading name">Component</div> <p>
<div class="table-heading properties">Properties</div> <i>Application Name:</i><br>
<div class="table-heading btn"></div> <b>[[agent.applicationName]]</b>
</p>
<p>
<i>environment:</i><br>
<b>[[agent.environment]]</b>
</p>
<p>
<i>locale:</i><br>
<b>[[agent.locale]]</b>
</p>
<p>
<i>Config Path:</i><br>
<b>[[agent.configPath]]</b>
</p>
<p>
<i>Data Path:</i><br>
<b>[[agent.dataPath]]</b>
</p>
<p>
<i>Temp Path:</i><br>
<b>[[agent.tempPath]]</b>
</p>
<p>
<i>Supported languages:</i><br>
[[_getSupportedLanguages(agent)]]
</p>
</div> </div>
<div class="properties">
<template is="dom-repeat" items="[[components]]" as="comp"> <h3>Properties</h3>
<div class="table-row data"> <template is="dom-if" if="[[isEmptyArray(agent.properties)]]"><i>No Properties</i></template>
<div class="table-cell name"> <template is="dom-if" if="[[isNotEmptyArray(agent.properties)]]">
<h3>[[comp.name]]</h3> <div class="table table-list">
<p> <div class="table-row">
<i>API Class:</i><br> <div class="table-heading property-key">Key</div>
<b>[[comp.api]]</b> <div class="table-heading property-value">Value</div>
</p> <div class="table-heading property-default">Default</div>
<p> <div class="table-heading property-type">Type</div>
<i>Implementation:</i><br>
<b>[[comp.impl]]</b>
</p>
<p>
<i>State:</i><br>
<b>[[comp.state]]</b>
</p>
<p>
<i>Dependencies:</i><br>
[[_getDependencies(comp)]]
</p>
</div>
<div class="table-cell properties">
<div class="table table-list">
<template is="dom-repeat" items="[[comp.properties]]" as="property">
<div class="table-row">
<div class="table-cell property-key">[[property.key]]</div>
<div class="table-cell property-value">[[property.value]]</div>
</div>
</template>
</div> </div>
<template is="dom-repeat" items="[[agent.properties]]" as="property">
<div class="table-row">
<div class="table-cell property-key">[[property.key]]</div>
<div class="table-cell property-value">[[property.value]]
<template is="dom-if" if="[[property.unused]]">&nbsp;<i>(Unused!)</i></template>
</div>
<div class="table-cell property-default">[[property.defaultValue]]</div>
<div class="table-cell property-type">[[property.type]]</div>
</div>
</template>
</div> </div>
<div class="table-cell btn"> </template>
</div>
</div>
</paper-material>
<template is="dom-repeat" items="[[components]]" as="comp">
<paper-material elevation="1">
<h3>[[comp.name]]</h3>
<div class="component">
<div class="info">
<p>
<i>API Class:</i><br>
<b>[[comp.api]]</b>
</p>
<p>
<i>Implementation:</i><br>
<b>[[comp.impl]]</b>
</p>
<p>
<i>State:</i><br>
<b>[[comp.state]]</b>
</p>
<p>
<i>Dependencies:</i><br>
[[_getDependencies(comp)]]
</p>
<div class="btn">
<paper-button on-tap="onInitialize" raised hidden$="[[_hideInitialize(comp)]]">Initialize <paper-button on-tap="onInitialize" raised hidden$="[[_hideInitialize(comp)]]">Initialize
</paper-button> </paper-button>
<paper-button on-tap="onStart" raised hidden$="[[_hideStart(comp)]]">Start</paper-button> <paper-button on-tap="onStart" raised hidden$="[[_hideStart(comp)]]">Start</paper-button>
@ -166,10 +211,31 @@
</paper-button> </paper-button>
</div> </div>
</div> </div>
</template> <div class="properties">
<h3>Properties</h3>
</div> <template is="dom-if" if="[[isEmptyArray(comp.properties)]]"><i>No Properties</i></template>
</paper-material> <template is="dom-if" if="[[isNotEmptyArray(comp.properties)]]">
<div class="table table-list">
<div class="table-row">
<div class="table-heading property-key">Key</div>
<div class="table-heading property-value">Value</div>
<div class="table-heading property-default">Default</div>
<div class="table-heading property-type">Type</div>
</div>
<template is="dom-repeat" items="[[comp.properties]]" as="property">
<div class="table-row">
<div class="table-cell property-key">[[property.key]]</div>
<div class="table-cell property-value">[[property.value]]</div>
<div class="table-cell property-default">[[property.defaultValue]]</div>
<div class="table-cell property-type">[[property.type]]</div>
</div>
</template>
</div>
</template>
</div>
</div>
</paper-material>
</template>
<iron-ajax id="ajaxGetComponents" <iron-ajax id="ajaxGetComponents"
url="[[baseRestPath]]/strolch/agent/components" url="[[baseRestPath]]/strolch/agent/components"
@ -198,11 +264,18 @@
], ],
properties: { properties: {
agent: {
type: Object
},
components: { components: {
type: Array type: Array
} }
}, },
_getSupportedLanguages: function (agent) {
if (this.isEmptyArray(agent.supportedLanguages))
return "-";
return this.arrayToString(agent.supportedLanguages);
},
_getDependencies: function (component) { _getDependencies: function (component) {
if (this.isEmptyArray(component.dependencies)) if (this.isEmptyArray(component.dependencies))
return "-"; return "-";
@ -223,7 +296,8 @@
}, },
onGetComponentsResponse: function (data) { onGetComponentsResponse: function (data) {
this.components = data.detail.response.data; this.agent = data.detail.response.data.agent;
this.components = this.agent.components;
}, },
onPutStateResponse: function (data) { onPutStateResponse: function (data) {
this.reload(); this.reload();