/*! For license information please see 9281.js.LICENSE.txt */
"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[9281],{79281:(e,t,i)=>{i.r(t),i.d(t,{IntegrationMonitor:()=>O});var n=i(50493),a=(i(68784),i(94430)),o=i(56765),r=i(53421),s=i(15633);let d=class extends((0,r.NC)(r.z2)(a.oi)){render(){const e=Date.now(),t=this.pendings||[],i=this.scenarios||[],n=this.connections||[];return[{title:"pending instances",icon:"update",value:t.length},{title:"due out instances",icon:"update_disabled",value:Math.max(0,t.concat({due:e+1}).findIndex((t=>Number(t.due)>e)))},{title:"total scenarios",icon:"format_list_numbered",value:i.length},{title:"scenario instances",icon:"list_alt",value:i.reduce(((e,t)=>e+t.instances.length),0)},{title:"connections",icon:"device_hub",value:n.length},{title:"active connections",icon:"fact_check",value:n.filter((e=>"CONNECTED"==e.state)).length}].map((({title:e,icon:t,value:i})=>this.renderCard(e,t,i)))}renderCard(e,t,i){return a.dy`
      <div card>
        <span>${e}</span>
        <mwc-icon>${t}</mwc-icon>
        <strong> ${i}</strong>
      </div>
    `}};d.styles=[s.Ix,a.iv`
      :host {
        display: flex;
        flex-direction: row;

        overflow: hidden;
        background-color: var(--paper-grey-800);
        border-radius: var(--border-radius);
        color: var(--opacity-light-color);
      }

      [card] {
        flex: 1;
        margin: var(--margin-default);
        padding: var(--padding-narrow) var(--padding-default);
        border-right: var(--border-light-color);
      }
      :host :last-child {
        border-right: none;
      }
      strong {
        font-size: 36px;
        line-height: 30px;
        color: var(--theme-white-color);
      }
      span {
        display: block;
        margin-bottom: var(--margin-narrow);
        font-size: var(--fontsize-small);
        text-transform: capitalize;
      }
      @media screen and (max-width: 480px) {
        :host {
          font-size: 0.8em;
        }
        [card] {
          margin: var(--margin-narrow);
          padding: var(--padding-narrow);
        }
        [card]:nth-child(5),
        [card]:nth-child(6) {
          display: none;
        }
        [card]:nth-child(4) {
          border-right: none;
        }
        mwc-icon {
          font-size: var(--fontsize-large);
        }
        span {
          line-height: 1;
        }
        strong {
          font-size: 24px;
        }
      }
    `],(0,n.gn)([(0,o.Cb)({type:Array}),(0,n.w6)("design:type",Object)],d.prototype,"pendings",void 0),(0,n.gn)([(0,o.Cb)({type:Array}),(0,n.w6)("design:type",Object)],d.prototype,"scenarios",void 0),(0,n.gn)([(0,o.Cb)({type:Array}),(0,n.w6)("design:type",Object)],d.prototype,"connections",void 0),d=(0,n.gn)([(0,o.Mo)("integration-summary")],d);var c=i(60438),l=i(1102),p=i(36179);let g=class extends a.oi{render(){const e=void 0===this.tag?"(*)":this.tag,t=this.scales||[];return a.dy`
      <div tags>
        <mwc-icon>bookmark_border</mwc-icon>
        <select @change=${e=>this.tag=e.target.value} .value=${e}>
          <option value="(*)">*</option>
          ${Object.keys(this.tags||{}).sort().map((e=>a.dy`<option value=${e}>${e}</option>`))}
        </select>
      </div>

      <div pendings>
        <div timeline>
          <table>
            ${(0,l.A)(t.map((e=>`\n              <tr>\n                <th><span>${e}</span></th>\n                <td></td>\n              </tr>\n            `)).join("\n              <tr>\n                <th></th>\n                <td></td>\n              </tr>\n              <tr>\n                <th></th>\n                <td></td>\n              </tr>\n            "))}
          </table>
        </div>

        <div pending-wrap>${(0,c.E)(this.queue())}</div>
      </div>
    `}queue(){return(0,n.FC)(this,arguments,(function*(){for(;this.running;){var e=Date.now(),t=Object.values(this.filterPendings||{});yield yield(0,n.qq)(t.map((t=>a.dy`
          <div pendings-by-tag>
            ${t.map(((t,i)=>{var n=Number(t.due),o=Math.max(3*Math.floor((n-e)/1e3),0);return a.dy`
                <div pending .style="top:${o}px;background-color:${this.colorIndex[t.stuff.scenario]};">
                  ${0==i?a.dy` <div>${this.countdown(t.due,e)}</div> `:a.dy``}
                </div>
              `}))}
          </div>
        `))),yield(0,n.qq)((0,p._v)(1e3))}}))}countdown(e,t){var i=(Number(e)-t)/1e3,n=Math.floor(Math.abs(i));const a=Math.floor(n/60);return`${i>0?"":"-"}${a?a+"m ":""}${n-60*a}s`}buildFilterPendings(){var e,t;t=void 0===this.tag||"(*)"==this.tag?this.pendings||[]:(this.pendings||[]).filter((e=>e.tag==this.tag));const i=Date.now(),n=(null===(e=t[t.length-1])||void 0===e?void 0:e.due)||i,a=Math.max(5,Math.ceil((n-i)/6e4+1));this.scales=new Array(a).fill(0).map(((e,t)=>[`${String(t).padStart(2,"0")}:00`,`${String(t).padStart(2,"0")}:30`])).flat(),this.filterPendings=t.reduce(((e,t)=>(e[t.tag]?e[t.tag].push(t):e[t.tag]=[t],e)),{})}updated(e){e.has("pendings")&&(this.buildFilterPendings(),this.tags=(this.pendings||[]).reduce(((e,t)=>(e[t.tag]=(e[t.tag]||0)+1,e)),{})),e.has("tag")&&this.buildFilterPendings()}};g.styles=[s.Ix,a.iv`
      :host {
        display: flex;
        flex-direction: column;
        background-color: rgba(var(--primary-color-rgb), 0.1);
        border-radius: var(--border-radius);
        padding: var(--padding-narrow);
      }

      div[tags] {
        display: flex;
        align-items: center;
      }
      [tags] mwc-icon {
        margin: 0 var(--margin-narrow) 0 0;
        font-size: var(--fontsize-large);
      }

      select {
        flex: 1;
        display: inline-block;
        border: none;
        border-radius: var(--border-radius);
      }

      select:focus {
        outline: 0;
      }

      [pendings] {
        display: flex;

        flex: 1;
        position: relative;
        overflow: auto;
      }

      [pending-wrap] {
        flex: 1;
        margin-top: var(--margin-default);
        padding-left: 30px;
        padding-right: 4px;
        font-size: 8px;
        line-height: 16px;

        display: flex;
      }

      [pendings-by-tag] {
        flex: 1;
        position: relative;
        margin: 0 1px;
      }

      [pending] {
        display: block;
        height: 2px;
        width: 100%;
        white-space: nowrap;
        position: absolute;
      }

      [timeline] {
        position: absolute;
        width: 100%;
      }
      [timeline] table {
        border-collapse: collapse;
        margin-top: var(--margin-default);
        width: 100%;
      }
      [timeline] th {
        opacity: 0.5;
        width: 25px;
        border: 0;
        font-weight: normal;
        font-size: 9px;
      }
      [timeline] th span {
        display: block;
        position: absolute;
        margin-top: -22px;
      }
      [timeline] td {
        border: 0;
        border-top: var(--border-dark-color);
        height: 30px;
        box-sizing: border-box;
      }
      [timeline] tr:nth-child(3n + 1) td {
        border: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.4);
        box-sizing: border-box;
      }
    `],(0,n.gn)([(0,o.Cb)({type:Array}),(0,n.w6)("design:type",Object)],g.prototype,"pendings",void 0),(0,n.gn)([(0,o.Cb)({type:Array}),(0,n.w6)("design:type",Object)],g.prototype,"filteredPendings",void 0),(0,n.gn)([(0,o.Cb)({type:Object}),(0,n.w6)("design:type",Object)],g.prototype,"colorIndex",void 0),(0,n.gn)([(0,o.Cb)({type:Boolean}),(0,n.w6)("design:type",Boolean)],g.prototype,"running",void 0),(0,n.gn)([(0,o.Cb)({type:Object}),(0,n.w6)("design:type",Object)],g.prototype,"tags",void 0),(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],g.prototype,"tag",void 0),(0,n.gn)([(0,o.Cb)({type:Array}),(0,n.w6)("design:type",Object)],g.prototype,"scales",void 0),g=(0,n.gn)([(0,o.Mo)("pending-q-monitor")],g);i(89053),i(77198);var v=i(16682),h=i(28120),u=i(27805),m=i(77675);let b=class extends((0,h.$)(m.h)(a.oi)){firstUpdated(){this.logs=[],this.startSubscribe()}disconnectedCallback(){super.disconnectedCallback(),this.stopSubscribe()}render(){const e=this.logs||[];return a.dy`
      <div options></div>
      <div content>
        ${e.map((({timestamp:e,message:t,level:i})=>a.dy` <div><span>${new Date(e).toLocaleString()}</span> <strong>${i}</strong> ${t}</div> `))}
      </div>
    `}async startSubscribe(){this.subscription=await(0,u.Ld)({query:v.ZP`
          subscription ($instanceName: String, $scenarioName: String, $level: String) {
            log: scenarioInstanceLog(instanceName: $instanceName, scenarioName: $scenarioName, level: $level) {
              level
              message
              timestamp
            }
          }
        `,variables:{instanceName:this.instanceName,scenarioName:this.scenarioName}},{next:async({data:e})=>{var t=this.scrollHeight-this.scrollTop===this.clientHeight;this.logs.push(e.log),this.logs.length>100&&this.logs.shift(),this.requestUpdate(),t&&(await this.updateComplete,this.scrollTop=this.scrollHeight-this.clientHeight)}})}async stopSubscribe(){var e;await(null===(e=this.subscription)||void 0===e?void 0:e.unsubscribe()),delete this.subscription}};b.styles=[s.Ix,a.iv`
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--theme-white-color);
        padding: var(--padding-wide);
      }
      :host([active]) {
        padding: 0;
      }

      [content] {
        flex: 1;

        display: flex;
        flex-direction: column;
        overflow: auto;

        font-size: var(--fontsize-small);
      }
      span {
        color: var(--secondary-text-color);
      }
    `],(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],b.prototype,"scenarioName",void 0),(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],b.prototype,"instanceName",void 0),(0,n.gn)([(0,o.Cb)({type:Array}),(0,n.w6)("design:type",Object)],b.prototype,"logs",void 0),b=(0,n.gn)([(0,o.Mo)("scenario-instance-log-view")],b);let y=class extends((0,h.$)(m.h)(a.oi)){render(){const e=this.tab||"info",{scenarioName:t,instanceName:i,description:n,state:o,progress:r,variables:s,data:d,message:c}=this.instance||{},{rate:l=0,steps:p=0,step:g=0,rounds:v=0}=r||{},h=`${this.contextPath||""}/scenario-view/${this.scenarioName}`;return a.dy`
      <div content>
        <div tab>
          <span @click=${e=>this.tab="info"} ?active=${"info"==e}>info</span>
          <span @click=${e=>this.tab="variables"} ?active=${"variables"==e}>variables</span>
          <span @click=${e=>this.tab="data"} ?active=${"data"==e}>data</span>
          <span @click=${e=>this.tab="log"} ?active=${"log"==e}>log</span>
        </div>
        <div detail>
          <div info ?active=${"info"==e}>
            <ul>
              <li>scenario name : <strong>${t}</strong></li>
              <li>instance name : ${i}</li>
              <li>description : ${n}</li>
              <li>state : ${o}</li>
              <li>total steps : ${p}</li>
              <li>current step : ${g}</li>
              <li>rounds : ${v}</li>
              <li>messge : ${c}</li>
            </ul>
            <iframe diagram src="${h}"></iframe>
          </div>
          <div variables ?active=${"variables"==e}>${this.renderVariableObject(s)}</div>
          <div data ?active=${"data"==e}>${this.renderDataObject(d)}</div>
          <scenario-instance-log-view
            log
            ?active=${"log"==e}
            .scenarioName=${this.scenarioName}
            .instanceName=${this.instanceName}
          ></scenario-instance-log-view>
        </div>
      </div>
    `}firstUpdated(){this.startSubscribe()}disconnectedCallback(){super.disconnectedCallback(),this.stopSubscribe()}stateChanged(e){this.contextPath=e.app.contextPath}renderDataObject(e){const t=Object.keys(e||{});if(0==t.length)return a.dy`<pre>no data</pre>`;const i=this.step||t[0];return a.dy`
      <ul keys>
        ${t.map((e=>a.dy`<li @click=${t=>this.step=e} ?active=${i==e}>${e}</li>`))}
      </ul>
      <div value>
        <pre>${e[i]?JSON.stringify(e[i],null,2):""}</pre>
      </div>
    `}renderVariableObject(e){const t=Object.keys(e||{});if(0==t.length)return a.dy`<pre>no data</pre>`;const i=this.key||t[0];return a.dy`
      <ul keys>
        ${t.map((e=>a.dy`<li @click=${t=>this.key=e} ?active=${i==e}>${e}</li>`))}
      </ul>
      <div value>
        <pre>${e[i]?JSON.stringify(e[i],null,2):""}</pre>
      </div>
    `}async startSubscribe(){this.subscription=await(0,u.Ld)({query:v.ZP`
          subscription ($instanceName: String, $scenarioName: String) {
            scenarioInstanceState(instanceName: $instanceName, scenarioName: $scenarioName) {
              instanceName
              scenarioName
              state
              progress {
                rate
                steps
                step
                rounds
              }
              variables
              data
            }
          }
        `,variables:{instanceName:this.instanceName,scenarioName:this.scenarioName}},{next:async({data:e})=>{e&&(this.instance=e.scenarioInstanceState)}})}async stopSubscribe(){var e;await(null===(e=this.subscription)||void 0===e?void 0:e.unsubscribe()),delete this.subscription}};y.styles=[s.Ix,a.iv`
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--main-section-background-color);
      }

      [diagram] {
        flex: 1;
        height: 100%;
        border: none;
      }

      [content] {
        flex: 1;

        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      [tab] {
        display: flex;
      }

      [tab] span {
        display: inline;
        padding: var(--padding-wide) var(--padding-wide) var(--padding-narrow) var(--padding-wide);
        border-bottom: 3px solid transparent;
        color: var(--secondary-color);
        text-transform: capitalize;
      }

      [tab] span[active] {
        border-color: var(--primary-color);
        font-weight: bold;
      }

      [detail] {
        flex: 1;
        background-color: var(--theme-white-color);
        border-top: var(--border-dark-color);
        overflow: hidden;
        padding: var(--padding-wide);
      }

      [detail] > * {
        display: none;
        width: 100%;
        height: 100%;
        color: var(--secondary-color);
      }

      [detail] > [active] {
        display: flex;
        overflow: auto;
      }

      pre {
        margin: 0;
      }

      [detail] ul {
        margin: 0;
        padding: 0;
        flex: 1;
        list-style: inside '- ';
      }
      [detail] li {
        padding: var(--padding-default) var(--padding-narrow) var(--padding-narrow) var(--padding-narrow);
        border-bottom: var(--border-dark-color);
      }

      li[active] {
        font-weight: bold;
      }

      [value] {
        flex: 1;
        overflow: auto;
        padding: var(--padding-wide);
      }
      scenario-instance-log-view [active] {
        padding: 0;
      }

      @media only screen and (max-width: 460px) {
        [info][active] {
          display: block;
        }
        [detail] {
          padding: var(--padding-default);
          overflow: auto;
        }
        [detail] > * {
          height: auto;
        }
        [diagram] {
          width: 100%;
          min-height: 500px;
        }
      }
    `],(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],y.prototype,"scenarioName",void 0),(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],y.prototype,"instanceName",void 0),(0,n.gn)([(0,o.Cb)({type:Object}),(0,n.w6)("design:type",Object)],y.prototype,"instance",void 0),(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],y.prototype,"tab",void 0),(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],y.prototype,"step",void 0),(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],y.prototype,"key",void 0),(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],y.prototype,"contextPath",void 0),y=(0,n.gn)([(0,o.Mo)("scenario-instance-view")],y);var f=i(37077);function w(e){return e&&"UNLOADED"!==e}let x=class extends((0,r.NC)(r.z2)(a.oi)){render(){var e=this.instance;const{instanceName:t,progress:i,message:n,state:o}=e,{rate:r=0,steps:s=0,step:d=0,rounds:c=0}=i||{},l=w(o);return a.dy`
      <div name>${t}</div>
      <div progress-wrap>
        <div progress>
          <div id="progressbar" .style="width:${r}%;background-color:${this.color};"></div>
        </div>
        <div steps>${d}/${s}</div>
      </div>
      <div buttons>
        <span><strong>${c}</strong> round</span>
        <mwc-icon-button @click=${e=>this.showInstanceDetail()} icon="wysiwyg"></mwc-icon-button>
        <mwc-icon-button
          @click=${t=>l?this.stopScenario(e):this.startScenario(e)}
          icon=${l?"pause":"play_arrow"}
        ></mwc-icon-button>
      </div>
    `}async startScenario(e){var t=await u.Lp.mutate({mutation:v.ZP`
        mutation ($scenarioName: String!, $instanceName: String) {
          startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {
            state
          }
        }
      `,variables:{scenarioName:e.scenarioName,instanceName:e.instanceName}});(0,f.h4)({level:"info",message:`${w(t.data.startScenario.state)?"success":"fail"} to start scenario : ${e.scenarioName}`})}async stopScenario(e){var t=await u.Lp.mutate({mutation:v.ZP`
        mutation ($instanceName: String!) {
          stopScenario(instanceName: $instanceName) {
            state
          }
        }
      `,variables:{instanceName:e.instanceName}});(0,f.h4)({level:"info",message:`${w(t.data.stopScenario.state)?"fail":"success"} to stop instance : ${e.instanceName}`})}async showInstanceDetail(){const{instanceName:e,scenarioName:t}=this.instance;(0,f.Mw)(a.dy`
        <scenario-instance-view .instanceName=${e} .scenarioName=${t}></scenario-instance-view>
      `,{size:"large",title:`${r.z2.t("title.scenario-instance")}`})}};function $(e){return e&&"UNLOADED"!==e}x.styles=[s.Ix,a.iv`
      :host {
        display: block;
        overflow: hidden;
        position: relative;
        padding: var(--padding-narrow);
        color: var(--secondary-color);
      }

      [running] {
        background-color: lightgreen;
      }

      [name] {
        font-size: var(--fontsize-default);
        font-weight: bold;
      }

      [progress] {
        display: block;
        position: relative;

        width: 100%;
        margin: 2px;
        padding: 2px;
        box-sizing: border-box;

        border: var(--border-dark-color);
        border-radius: 10px;
        background-color: var(--theme-white-color);
      }
      [progress-wrap] {
        display: flex;
        flex-direction: row;
        margin: 4px 0;
      }

      [running] [progress] {
        background-color: var(--theme-white-color);
      }
      [steps] {
        padding: 0 0 0 var(--padding-narrow);
      }

      #progressbar {
        height: 100%;
        text-align: left;
        border-radius: 5px;
        animation: width 1s linear ease-out;
      }
      [buttons] {
        --mdc-icon-button-size: 18px;
        --mdc-icon-size: 18px;
        border-top: var(--border-dark-color);
        padding: var(--padding-narrow) 0 0 0;
        text-align: right;
      }
      [buttons] mwc-icon-button {
        color: var(--primary-color);
      }

      @keyframes width {
        0% {
          width: 0;
        }
        100% {
          width: auto;
        }
      }
    `],(0,n.gn)([(0,o.Cb)({type:Object}),(0,n.w6)("design:type",Object)],x.prototype,"instance",void 0),(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],x.prototype,"color",void 0),x=(0,n.gn)([(0,o.Mo)("scenario-instance-monitor")],x);let S=class extends((0,r.NC)(r.z2)(a.oi)){render(){const e=this.scenario||{},t=this.mode,{id:i,name:n,description:o,schedule:r,color:s}=e,d=e.instances||[];return a.dy`
      <div desc>
        <div detail-info>
          <strong>${n}</strong>
          ${o}
          <span>${d.length}</span>
        </div>
        <div schedule>
          <mwc-icon .style="background-color: ${s};">schedule</mwc-icon>
          <pre>${r}</pre>
        </div>
        ${this.renderButtons(e)}
      </div>

      ${"detail"===t?a.dy`
            <ul>
              ${d.map((e=>a.dy`
                  <li .style="border-color:${s};background-color:${s}">
                    <span></span>
                    <scenario-instance-monitor .instance=${e} .color=${s}></scenario-instance-monitor>
                  </li>
                `))}
            </ul>
            ${this.renderButtons(e)}
          `:a.dy``}
    `}renderButtons(e){const t=(e.instances||[]).find((t=>t.instanceName==e.name));return a.dy`
      <div buttons ?detail=${"detail"==this.mode}>
        <mwc-icon-button @click=${t=>this.popupLogView(e)} icon="text_snippet"></mwc-icon-button>
        ${t?a.dy`
              <mwc-icon-button
                icon="pause_circle_outline"
                @click=${t=>this.stopScenario(e)}
                stop
              ></mwc-icon-button>
            `:a.dy` <mwc-icon-button
              icon="play_circle_outline"
              @click=${t=>this.startScenario(e)}
            ></mwc-icon-button>`}
      </div>
    `}async popupLogView(e){(0,f.Mw)(a.dy` <scenario-instance-log-view .scenarioName=${e.name}></scenario-instance-log-view> `,{size:"large",title:`${r.z2.t("title.scenario-log")} (${e.name})`})}async startScenario(e){var t=await u.Lp.mutate({mutation:v.ZP`
        mutation ($scenarioName: String!) {
          startScenario(scenarioName: $scenarioName) {
            state
          }
        }
      `,variables:{scenarioName:e.name}});(0,f.h4)({level:"info",message:`${$(t.data.startScenario.state)?"success":"fail"} to start instance : ${e.name}`})}async stopScenario(e){var t=await u.Lp.mutate({mutation:v.ZP`
        mutation ($instanceName: String!) {
          stopScenario(instanceName: $instanceName) {
            state
          }
        }
      `,variables:{instanceName:e.name}});(0,f.h4)({level:"info",message:`${$(t.data.stopScenario.state)?"fail":"success"} to stop instance : ${e.name}`})}};S.styles=[s.Ix,a.iv`
      :host {
        display: flex;
        flex-direction: row;
        margin: var(--margin-default);

        border: var(--border-dark-color);
        background-color: var(--theme-white-color);
        box-shadow: var(--box-shadow);
        border-radius: var(--border-radius);
        position: relative;
        overflow: hidden;
      }

      [desc] {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: var(--padding-default);
        width: 200px;
        color: var(--secondary-color);
        font-size: var(--fontsize-small);
      }

      [desc] [detail-info] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: calc(100% - 25px);
        height: 45px;
      }

      [desc] strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--fontsize-large);
      }

      [desc] span {
        display: block;
        position: absolute;
        top: 0px;
        right: var(--padding-default);
        font-size: 40px;
        font-weight: bold;
        text-align: right;
      }

      [desc] [schedule] * {
        vertical-align: middle;
        display: inline;
      }

      [desc] [schedule] {
        background-color: #f1f1f1;
        border-radius: 20px;
        margin: var(--margin-default) 0;
        padding: var(--padding-narrow);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        line-height: 8px;
      }

      [buttons] {
        --mdc-icon-button-size: 24px;
        --mdc-icon-size: 24px;
        border-top: var(--border-dark-color);
        padding: var(--padding-narrow) 0 0 0;
        text-align: right;
      }

      [buttons] mwc-icon-button {
        color: var(--primary-color);
      }

      [buttons][detail] {
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: auto;
      }

      [desc] mwc-icon {
        border-radius: 50%;
        color: var(--theme-white-color);
        font-size: 18px;
      }

      :host([mode='detail']) [schedule] {
        margin: var(--margin-default) 0 0 0;
      }

      :host([mode='detail']) [desc] [buttons] {
        display: none;
      }
      :host([mode='detail']) [buttons] {
        border-top: none;
        padding: var(--padding-default);
      }

      ul {
        flex: 1;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
      }

      ul > li {
        position: relative;
        margin: var(--margin-default);
        min-width: 140px;
        max-width: 180px;
        border: 1px solid black;
        border-radius: var(--border-radius);
        font-size: 12px;
      }

      li span {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
      }

      @media screen and (max-width: 480px) {
        :host {
          margin: var(--margin-narrow);
          max-width: 46%;
        }

        :host([mode='detail']) {
          max-width: initial;
        }

        [desc] {
          padding: var(--padding-narrow);
        }

        :host([mode='detail']) > [desc] {
          max-width: 125px;
        }

        [desc] [detail-info] {
          height: 38px;
        }

        [desc] span {
          font-size: 36px;
        }
      }
    `],(0,n.gn)([(0,o.Cb)({type:Object}),(0,n.w6)("design:type",Object)],S.prototype,"scenario",void 0),(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],S.prototype,"mode",void 0),S=(0,n.gn)([(0,o.Mo)("scenario-monitor")],S);let N=class extends((0,r.NC)(r.z2)(a.oi)){constructor(){super(...arguments),this.running=!1}render(){var e=this.scenarios||[];const t=this.mode||"brief",i=this.filter||"";return a.dy`
      <div info>
        <h2>scenarios</h2>
        <span>
          <input .value=${i} @change=${e=>this.filter=e.target.value} placeholder="search" />
          <mwc-icon @click=${e=>this.mode="brief"} ?active=${"brief"==t}>view_comfy</mwc-icon>
          <mwc-icon @click=${e=>this.mode="detail"} ?active=${"detail"==t}>dehaze</mwc-icon>
        </span>
      </div>

      <div content>
        <pending-q-monitor
          .pendings=${this.pendings}
          .colorIndex=${this.colorIndex||{}}
          .running=${this.running}
        ></pending-q-monitor>

        <div scenarios mode=${t}>
          <div flowbox>
            ${e.filter((e=>0==e.name.indexOf(i))).map((e=>a.dy`<scenario-monitor .scenario=${e} mode=${t}></scenario-monitor>`))}
          </div>
        </div>
      </div>
    `}};N.styles=[s.Ix,a.iv`
      :host {
        display: flex;
        flex-direction: column;

        overflow: hidden;
      }

      [info] {
        display: flex;
        margin-bottom: var(--margin-default);
        padding: var(--padding-narrow) 0;
        flex-direction: row;
        align-items: center;
        border-bottom: 2px solid var(--secondary-color);
      }
      [info] h2 {
        margin: 0;
        font: var(--subtitle-font);
        color: var(--secondary-color);
        text-transform: capitalize;
      }

      [info] > span {
        display: flex;
        margin-left: auto;
      }
      [info] input {
        margin: var(--input-margin);
        padding: var(--padding-narrow);
        border: var(--border-dark-color);
        border-radius: var(--border-radius);
        font: var(--input-font);
      }
      [info] mwc-icon {
        margin-left: var(--margin-narrow);
        color: rgba(var(--secondary-color-rgb), 0.6);
        line-height: 34px;
        cursor: pointer;
      }
      [info] mwc-icon[active] {
        color: var(--primary-color);
      }

      [content] {
        flex: 1;

        display: flex;
        flex-direction: row;

        overflow: hidden;
      }

      pending-q-monitor {
        width: 100px;
      }

      [scenarios] {
        flex: 1;

        overflow: auto;
        display: flex;
        flex-direction: column;
      }

      [scenarios] [flowbox] {
        display: flex;
        flex-direction: column;
        min-height: min-content;
      }

      [scenarios][mode='brief'] [flowbox] {
        flex-flow: row wrap;
        align-self: start;
      }

      scenario-monitor {
        flex: none;
        height: fit-content;
      }

      @media screen and (max-width: 480px) {
        pending-q-monitor {
          width: 80px;
        }
      }
    `],(0,n.gn)([(0,o.Cb)({type:Array}),(0,n.w6)("design:type",Object)],N.prototype,"scenarios",void 0),(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],N.prototype,"mode",void 0),(0,n.gn)([(0,o.Cb)({type:String}),(0,n.w6)("design:type",String)],N.prototype,"filter",void 0),(0,n.gn)([(0,o.Cb)({type:Array}),(0,n.w6)("design:type",Object)],N.prototype,"pendings",void 0),(0,n.gn)([(0,o.Cb)({type:Object}),(0,n.w6)("design:type",Object)],N.prototype,"colorIndex",void 0),(0,n.gn)([(0,o.Cb)({type:Boolean}),(0,n.w6)("design:type",Boolean)],N.prototype,"running",void 0),N=(0,n.gn)([(0,o.Mo)("scenarios-monitor")],N);let C=class extends a.oi{render(){var e=this.connections||[];return a.dy`
      <div info>
        <h2>connections</h2>
      </div>

      <div cards>${e.map((e=>this.renderConnection(e)))}</div>
    `}renderConnection(e){const{id:t,name:i,description:n,type:o,state:r}=e,s="CONNECTED"==r;return a.dy`
      <div card ?connected=${s}>
        <strong>${i}</strong>
        <span>${n}</span>
        <span>Type : ${o}</span>
        <div buttons>
          <mwc-icon-button
            @click=${t=>s?this.disconnect(e):this.connect(e)}
            .icon=${s?"link_off":"link"}
            label=${s?"disconnect":"connect"}
          ></mwc-icon-button>
        </div>
      </div>
    `}async connect(e){var t=await u.Lp.mutate({mutation:v.ZP`
        mutation ($name: String!) {
          connectConnection(name: $name) {
            state
          }
        }
      `,variables:{name:e.name}});e.state=t.data.connectConnection.state,this.requestUpdate(),document.dispatchEvent(new CustomEvent("notify",{detail:{level:"info",message:`${"CONNECTED"==e.state?"success":"fail"} to connect : ${e.name}`}}))}async disconnect(e){var t=await u.Lp.mutate({mutation:v.ZP`
        mutation ($name: String!) {
          disconnectConnection(name: $name) {
            state
          }
        }
      `,variables:{name:e.name}});e.state=t.data.disconnectConnection.state,this.requestUpdate(),document.dispatchEvent(new CustomEvent("notify",{detail:{level:"info",message:`${"CONNECTED"==e.state?"fail":"success"} to disconnect : ${e.name}`}}))}};C.styles=[s.Ix,a.iv`
      :host {
        display: flex;
        flex-direction: column;

        overflow: hidden;
        background-color: var(--theme-white-color);
        border-radius: var(--border-radius);
        border: var(--border-dark-color);
      }
      h2 {
        margin: 0;
        padding: var(--padding-default) 0 var(--padding-default) var(--padding-default);
        border-bottom: var(--border-dark-color);
        font: var(--subtitle-font);
        color: var(--secondary-color);
        text-transform: capitalize;
      }

      [cards] {
        flex: 1;
        display: flex;
        flex-direction: column;

        overflow: auto;
      }

      [card] {
        display: flex;
        flex-direction: column;
        padding: var(--padding-default);
        border-bottom: var(--border-dark-color);
        color: var(--secondary-color);
      }
      [card] * {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      [card] strong {
        color: var(--primary-color);
      }
      [card] span {
        font-size: var(--fontsize-default);
        line-height: var(--fontsize-large);
      }

      [connected] strong::after {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--status-success-color);
        margin-left: var(--margin-narrow);
      }
      [buttons] {
        --mdc-icon-button-size: 20px;
        --mdc-icon-size: 20px;
        border-top: 1px dashed rgba(0, 0, 0, 0.1);
        margin: var(--margin-narrow) 0 0 0;
        padding: var(--padding-narrow) 0 0 0;
        text-align: right;
      }
      [buttons] mwc-icon-button {
        color: rgba(var(--secondary-color-rgb), 0.8);
      }
      @media screen and (max-width: 480px) {
        h2 {
          padding: var(--padding-narrow);
        }
        [card] span {
          display: none;
        }
      }
    `],(0,n.gn)([(0,o.Cb)({type:Array}),(0,n.w6)("design:type",Object)],C.prototype,"connections",void 0),C=(0,n.gn)([(0,o.Mo)("connections-monitor")],C);var k=i(51266);function z(e){return e&&"UNLOADED"!==e}let O=class extends((0,r.NC)(r.z2)(m.B4)){get context(){return{title:r.z2.t("text.integration monitor"),help:"integration/ui/integration-monitor"}}render(){return a.dy`
      <integration-summary
        .pendings=${this.pendings}
        .scenarios=${this.scenarios}
        .connections=${this.connections}
      ></integration-summary>
      <content>
        <scenarios-monitor
          .scenarios=${this.scenarios}
          .pendings=${this.pendings}
          .colorIndex=${this.colorIndex||{}}
          .running=${!!this.active}
        ></scenarios-monitor>
        <connections-monitor .connections=${this.connections}></connections-monitor>
      </content>
    `}async pageUpdated(e){"active"in e&&(this.active?(await this.fetchScenarios(),await this.fetchConnections(),await this.startSubscribe()):await this.stopSubscribe())}async fetchScenarios(){const e=await u.Lp.query({query:v.ZP`
        query {
          responses: scenarios {
            items {
              id
              name
              description
              active
              state
              schedule
              timezone
              instances {
                instanceName
                scenarioName
                state
                progress {
                  rate
                  steps
                  step
                  rounds
                }
                variables
                data
                message
              }
              updater {
                id
                name
              }
              updatedAt
            }
            total
          }
        }
      `});var t={};this.scenarios=(e.data.responses.items||[]).map((e=>{var i=function(e){var t=0;if(0===e.length)return t;for(var i=0;i<e.length;i++)t=e.charCodeAt(i)+((t<<5)-t),t&=t;var n="#";for(i=0;i<3;i++)n+=("00"+(t>>8*i&255).toString(16)).substr(-2);return n}(e.id);return t[e.id]=i,Object.assign(Object.assign({},e),{color:i})})),this.colorIndex=t}async fetchConnections(){const e=await u.Lp.query({query:v.ZP`
        query {
          responses: connections {
            items {
              id
              name
              description
              type
              state
            }
            total
          }
        }
      `});this.connections=e.data.responses.items||[]}async startSubscribe(){this.scenarioInstanceStateSubscription||(this.scenarioInstanceStateSubscription=await(0,u.Ld)({query:v.ZP`
          subscription {
            scenarioInstanceState {
              instanceName
              scenarioName
              state
              progress {
                rate
                steps
                step
                rounds
              }
            }
          }
        `},{next:async({data:e})=>{if(e){var{scenarioName:t,instanceName:i,state:n}=e.scenarioInstanceState;this.scenarios=this.scenarios||[];var a=this.scenarios.find((e=>e.name===t));if(!a)return this.scenarios=[],await this.stopSubscribe(),await this.fetchScenarios(),void await this.startSubscribe();var o=a.instances.findIndex((e=>e.instanceName===i));-1==o?z(n)&&a.instances.push(e.scenarioInstanceState):z(n)?a.instances.splice(o,1,e.scenarioInstanceState):a.instances.splice(o,1),this.scenarios.splice(this.scenarios.indexOf(a),1,Object.assign({},a)),this.scenarios=[...this.scenarios]}},start:e=>{k.log(e)},error:e=>{k.log(e)},complete:()=>{k.log("complete")}}),this.scenarioQueueStateSubscription=await(0,u.Ld)({query:v.ZP`
          subscription {
            scenarioQueueState {
              queue {
                stuff
                due
                priority
                tag
              }
            }
          }
        `},{next:({data:e})=>{e&&(this.pendings=e.scenarioQueueState.queue)}}),this.connectionStateSubscription=await(0,u.Ld)({query:v.ZP`
          subscription {
            connectionState {
              id
              name
              description
              type
              state
            }
          }
        `},{next:async({data:e})=>{if(e){var t=e.connectionState;this.connections=this.connections||[];var i=this.connections.findIndex((e=>e.id===t.id));-1!==i?(this.connections[i]=e.connectionState,this.connections=[...this.connections]):this.connections=[...this.connections,e.connectionState]}}}))}async stopSubscribe(){var e,t,i;await(null===(e=this.scenarioInstanceStateSubscription)||void 0===e?void 0:e.unsubscribe()),await(null===(t=this.scenarioQueueStateSubscription)||void 0===t?void 0:t.unsubscribe()),await(null===(i=this.connectionStateSubscription)||void 0===i?void 0:i.unsubscribe()),delete this.scenarioInstanceStateSubscription,delete this.scenarioQueueStateSubscription,delete this.connectionStateSubscription}};O.ScenarioInstanceStatus=["READY","STARTED","STOPPED","HALTED"],O.styles=[s.Ix,a.iv`
      :host {
        display: flex;
        flex-direction: column;

        overflow: hidden;
        background-color: var(--main-section-background-color);
        padding: var(--padding-wide);
      }

      integration-summary {
        margin-bottom: var(--margin-wide);
      }

      content {
        flex: 1;
        display: flex;
        flex-direction: row;

        overflow: hidden;
      }

      connections-monitor {
        width: 180px;
      }

      scenarios-monitor {
        flex: 1;
        margin: 0 var(--margin-wide) 0 0;
      }

      @media screen and (max-width: 480px) {
        :host {
          padding: var(--padding-default);
        }
        integration-summary {
          margin-bottom: var(--margin-default);
        }
        content {
          display: block;
          overflow: auto;
        }
        scenarios-monitor {
          min-height: 350px;
          margin: 0 0 var(--margin-default) 0;
        }
        connections-monitor {
          width: initial;
        }
      }
    `],(0,n.gn)([(0,o.Cb)({type:Array}),(0,n.w6)("design:type",Object)],O.prototype,"scenarios",void 0),(0,n.gn)([(0,o.Cb)({type:Array}),(0,n.w6)("design:type",Object)],O.prototype,"pendings",void 0),(0,n.gn)([(0,o.Cb)({type:Array}),(0,n.w6)("design:type",Object)],O.prototype,"connections",void 0),(0,n.gn)([(0,o.Cb)({type:Object}),(0,n.w6)("design:type",Object)],O.prototype,"colorIndex",void 0),O=(0,n.gn)([(0,o.Mo)("integration-monitor")],O)},60438:(e,t,i)=>{i.d(t,{E:()=>c});var n=i(28773),a=i(95974);class o{constructor(e){this.G=e}disconnect(){this.G=void 0}reconnect(e){this.G=e}deref(){return this.G}}class r{constructor(){this.Y=void 0,this.Z=void 0}get(){return this.Y}pause(){var e;null!==(e=this.Y)&&void 0!==e||(this.Y=new Promise((e=>this.Z=e)))}resume(){var e;null===(e=this.Z)||void 0===e||e.call(this),this.Y=this.Z=void 0}}var s=i(62987);class d extends a.sR{constructor(){super(...arguments),this._$Cq=new o(this),this._$CK=new r}render(e,t){return n.Jb}update(e,[t,i]){if(this.isConnected||this.disconnected(),t===this._$CX)return;this._$CX=t;let a=0;const{_$Cq:o,_$CK:r}=this;return(async(e,t)=>{for await(const i of e)if(!1===await t(i))return})(t,(async e=>{for(;r.get();)await r.get();const n=o.deref();if(void 0!==n){if(n._$CX!==t)return!1;void 0!==i&&(e=i(e,a)),n.commitValue(e,a),a++}return!0})),n.Jb}commitValue(e,t){this.setValue(e)}disconnected(){this._$Cq.disconnect(),this._$CK.pause()}reconnected(){this._$Cq.reconnect(this),this._$CK.resume()}}const c=(0,s.XM)(d)}}]);