@things-factory/integration-ui 10.0.0-zeta.8 → 10.0.0

package/client/pages/scenario.ts

@@ -1,6 +1,8 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 import './scenario-detail.js'
 import './scenario-importer.js'
+import '../viewparts/scenario-versions.js'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
@@ -9,6 +11,7 @@ import { DataGrist } from '@operato/data-grist/ox-grist.js'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
 import { navigate, PageView } from '@operato/shell'
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
@@ -249,6 +252,69 @@ export class Scenario extends p13n(localize(i18next)(PageView)) {   static get s
           sortable: true,
           width: 60
  },
+        {
+          type: 'string',
+          name: 'publishState',
+          header: i18next.t('field.publish state'),
+          record: {
+            editable: false,
+            align: 'center',
+            // released → 라벨, draft → 'release' 버튼(클릭 시 릴리즈). 별도 버튼 컬럼 없이 상태 컬럼에서 처리.
+            renderer: (value, column, record) => {
+              if (!record || !record.id) return html``
+              if (value === 'released') {
+                return html`
+                  <span
+                    style="display:inline-flex;align-items:center;gap:3px;color:var(--md-sys-color-primary);font-size:11px;opacity:0.85;"
+                  >
+                    <md-icon style="font-size:15px;">check_circle</md-icon>${i18next.t('label.released')}
+                  </span>
+                `
+              }
+              return html`
+                <button
+                  style="cursor:pointer;display:inline-flex;align-items:center;gap:3px;font:inherit;font-size:11px;color:var(--md-sys-color-on-primary);background:var(--md-sys-color-primary);border:none;border-radius:999px;padding:2px 11px;"
+                  title=${i18next.t('button.release')}
+                  @click=${(e: Event) => {
+                    e.stopPropagation()
+                    this.releaseScenario(record)
+                  }}
+                >
+                  <md-icon style="font-size:15px;">publish</md-icon>${i18next.t('button.release')}
+                </button>
+              `
+            }
+          },
+          width: 100
+        },
+        {
+          type: 'number',
+          name: 'version',
+          header: i18next.t('field.version'),
+          record: {
+            editable: false,
+            align: 'center',
+            // 버전 번호 옆에 history 아이콘 — 클릭 시 버전 이력 열기(별도 컬럼 없이 version 컬럼 재사용).
+            renderer: (value, column, record) => {
+              if (!record || !record.id) return html``
+              return html`
+                <span style="display:inline-flex;align-items:center;justify-content:center;gap:4px;">
+                  v${value ?? 0}
+                  <md-icon
+                    style="cursor:pointer;font-size:17px;color:var(--md-sys-color-primary);"
+                    title=${i18next.t('button.version history')}
+                    @click=${(e: Event) => {
+                      e.stopPropagation()
+                      this.openVersionHistory(record)
+                    }}
+                    >history</md-icon
+                  >
+                </span>
+              `
+            }
+          },
+          width: 82
+        },
         {           type: 'object',
           name: 'updater',
           header: i18next.t('field.updater'),
@@ -286,6 +352,8 @@ export class Scenario extends p13n(localize(i18next)(PageView)) {   static get s
               description
               active
               state
+              publishState
+              version
               iteration
               schedule
               scheduleId
@@ -316,7 +384,8 @@ export class Scenario extends p13n(localize(i18next)(PageView)) {   static get s
       variables: {         filters,
         pagination: { page, limit },
         sortings
- }
+ },
+      fetchPolicy: 'no-cache'
  })
 
     return {       total: response.data.responses.total || 0,
@@ -406,13 +475,66 @@ export class Scenario extends p13n(localize(i18next)(PageView)) {   static get s
  }
  }
 
+  async releaseScenario(record) {
+    // 릴리즈 코멘트(선택) — OxPrompt.prompt(모달, native prompt 대체). 비우면 서버가 diff 요약으로 자동 채움.
+    const input = await OxPrompt.prompt({
+      type: 'question',
+      title: String(i18next.t('button.release')),
+      text: String(i18next.t('text.release comment optional')),
+      multiline: true,
+      confirmButton: { text: String(i18next.t('button.release')) },
+      cancelButton: { text: String(i18next.t('button.cancel')) }
+    })
+    if (input === null) return
+    const comment = input.trim() || null
+
+    const { errors } = await client.mutate({
+      mutation: gql`
+        mutation ($id: String!, $comment: String) {
+          releaseScenario(id: $id, comment: $comment) {
+            id
+            version
+            publishState
+          }
+        }
+      `,
+      variables: { id: record.id, comment: comment || null }
+    })
+
+    if (!errors) {
+      notify({ message: i18next.t('text.info_x_successfully', { x: i18next.t('button.release') }) })
+      this.grist.fetch()
+    } else {
+      notify({ level: 'error', message: errors.map(error => error.message).join('\n') })
+    }
+  }
+
+  openVersionHistory(record) {
+    openPopup(
+      html`
+        <scenario-versions
+          .scenarioId=${record.id}
+          .scenarioName=${record.name}
+          .onReverted=${() => this.grist.fetch()}
+          @reverted=${() => this.grist.fetch()}
+        ></scenario-versions>
+      `,
+      {
+        backdrop: true,
+        size: 'medium',
+        title: i18next.t('title.version history')
+      }
+    )
+  }
+
   async startScenario(record) {     var { data, errors } = await client.mutate({       mutation: gql`
-        mutation ($scenarioName: String!, $instanceName: String) {           startScenario(scenarioName: $scenarioName, instanceName: $instanceName) {             state
+        mutation ($scenarioName: String!, $instanceName: String, $mode: String) {           startScenario(scenarioName: $scenarioName, instanceName: $instanceName, mode: $mode) {             state
  }
  }
       `,
       variables: {         scenarioName: record.name,
-        instanceName: record.name
+        instanceName: record.name,
+        mode: 'released'
  }
  })
 

package/client/viewparts/scenario-instance-log-view.ts

@@ -6,6 +6,7 @@ import gql from 'graphql-tag'
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { subscribe } from '@operato/graphql'
+import { i18next } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 
 @customElement('scenario-instance-log-view')
@@ -51,6 +52,14 @@ export class ScenarioInstanceLogView extends LitElement {
         bottom: 15px;
         right: 16px;
         text-decoration: auto;
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 10px;
+        align-items: center;
+      }
+      #start [draft] {
+        --md-fab-container-color: var(--md-sys-color-secondary-container);
+        --md-fab-icon-color: var(--md-sys-color-on-secondary-container);
       }
     `
   ]
@@ -87,9 +96,23 @@ export class ScenarioInstanceLogView extends LitElement {
         )}
       </div>
       ${this.startable
-        ? html`<md-fab id="start" title="start" @click=${() => this.dispatchEvent(new CustomEvent('start'))}>
-            <md-icon slot="icon">play_arrow</md-icon>
-          </md-fab>`
+        ? html`
+            <div id="start">
+              <md-fab
+                title=${i18next.t('button.run released version')}
+                @click=${() => this.dispatchEvent(new CustomEvent('start', { detail: { mode: 'released' } }))}
+              >
+                <md-icon slot="icon">play_arrow</md-icon>
+              </md-fab>
+              <md-fab
+                draft
+                title=${i18next.t('button.run draft for debugging')}
+                @click=${() => this.dispatchEvent(new CustomEvent('start', { detail: { mode: 'draft' } }))}
+              >
+                <md-icon slot="icon">bug_report</md-icon>
+              </md-fab>
+            </div>
+          `
         : nothing}
     `
   }

package/client/viewparts/scenario-monitor.ts

@@ -243,7 +243,19 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
       <div buttons ?detail=${this.mode == 'detail'}>
         <md-icon @click=${e => this.popupLogView(scenario)}>text_snippet</md-icon>
         ${!scenarioInstance
-          ? html` <md-icon @click=${e => this.startScenario(scenario)}>play_circle</md-icon>`
+          ? html`
+              <md-icon
+                title=${i18next.t('button.run released version')}
+                @click=${e => this.startScenario(scenario, 'released')}
+                >play_circle</md-icon
+              >
+              <md-icon
+                title=${i18next.t('button.run draft for debugging')}
+                @click=${e => this.startScenario(scenario, 'draft')}
+                debug
+                >bug_report</md-icon
+              >
+            `
           : html` <md-icon @click=${e => this.stopScenario(scenario)} stop>pause_circle</md-icon> `}
       </div>
     `
@@ -254,7 +266,7 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
       html`
         <scenario-instance-log-view
           .scenarioName=${scenario.name}
-          @start=${() => this.startScenario(scenario)}
+          @start=${(e: CustomEvent) => this.startScenario(scenario, e.detail?.mode || 'released')}
           startable
         ></scenario-instance-log-view>
       `,
@@ -265,23 +277,24 @@ export class ScenarioMonitor extends localize(i18next)(LitElement) {
     )
   }
 
-  async startScenario(scenario) {
+  async startScenario(scenario, mode: string = 'released') {
     var response = await client.mutate({
       mutation: gql`
-        mutation ($scenarioName: String!) {
-          startScenario(scenarioName: $scenarioName) {
+        mutation ($scenarioName: String!, $mode: String) {
+          startScenario(scenarioName: $scenarioName, mode: $mode) {
             state
           }
         }
       `,
       variables: {
-        scenarioName: scenario.name
+        scenarioName: scenario.name,
+        mode
       }
     })
 
     notify({
       level: 'info',
-      message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${scenario.name}`
+      message: `${!IS_SCENARIO_RUNNING(response.data.startScenario.state) ? 'fail' : 'success'} to start instance : ${scenario.name} (${mode})`
     })
   }
 

package/client/viewparts/scenario-versions.ts

@@ -0,0 +1,334 @@
+import '@material/web/icon/icon.js'
+import '@material/web/chips/assist-chip.js'
+import '@operato/data-grist/ox-empty-note.js'
+
+import gql from 'graphql-tag'
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { client } from '@operato/graphql'
+import { notify } from '@operato/layout'
+import { OxPrompt } from '@operato/popup/ox-prompt.js'
+import { ScrollbarStyles } from '@operato/styles'
+
+/**
+ * 시나리오 버전 히스토리 패널.
+ *
+ *  - 릴리즈된 버전 목록(버전번호·코멘트·작성자·시각)
+ *  - 각 버전을 현재 draft 와 비교하는 diff 뷰
+ *  - 과거 버전을 현재 draft 로 복사(revert)
+ *
+ * board-ui 의 board-versions 를 시나리오(스텝 배열 diff)에 맞춰 확장한 형태.
+ */
+@customElement('scenario-versions')
+export class ScenarioVersions extends LitElement {
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+        font: var(--label-font);
+        padding: var(--spacing-medium, 12px);
+        gap: var(--spacing-medium, 12px);
+      }
+
+      div[card] {
+        position: relative;
+        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+        border-radius: var(--border-radius, 6px);
+        padding: var(--spacing-medium, 12px);
+        text-align: start;
+      }
+
+      div[head] {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-small, 6px);
+      }
+
+      div[head] [ver] {
+        font: var(--subtitle-font, bold 14px sans-serif);
+        color: var(--md-sys-color-primary);
+        display: inline-flex;
+        align-items: center;
+        gap: 3px;
+      }
+
+      div[head] [meta] {
+        margin-left: auto;
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        opacity: 0.75;
+        font-size: var(--fontsize-small, 12px);
+      }
+
+      div[comment] {
+        margin-top: 6px;
+        white-space: pre-wrap;
+        color: var(--md-sys-color-on-surface-variant, inherit);
+      }
+
+      div[actions] {
+        display: flex;
+        gap: var(--spacing-small, 6px);
+        margin-top: 8px;
+      }
+
+      md-icon {
+        font-size: var(--fontsize-large, 18px);
+        vertical-align: middle;
+      }
+
+      button {
+        cursor: pointer;
+        border: 1px solid var(--md-sys-color-outline, rgba(0, 0, 0, 0.2));
+        background: var(--md-sys-color-surface);
+        color: inherit;
+        border-radius: var(--border-radius, 6px);
+        padding: 4px 10px;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        font: inherit;
+      }
+      button[primary] {
+        background: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+        border-color: transparent;
+      }
+
+      div[diff] {
+        margin-top: 8px;
+        border-top: 1px dashed var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+        padding-top: 8px;
+        font-size: var(--fontsize-small, 12px);
+      }
+      div[diff] [group] {
+        font-weight: bold;
+        margin: 4px 0 2px;
+      }
+      [change] {
+        display: block;
+        padding: 1px 0;
+      }
+      [change][added] {
+        color: var(--md-sys-color-primary, green);
+      }
+      [change][removed] {
+        color: var(--md-sys-color-error, #b00020);
+        text-decoration: line-through;
+        opacity: 0.8;
+      }
+      [change][modified] {
+        color: var(--status-warning-color, #b26a00);
+      }
+      [change] small {
+        opacity: 0.7;
+      }
+
+      ox-empty-note {
+        padding: 24px;
+        opacity: 0.7;
+      }
+    `
+  ]
+
+  @property({ type: String }) scenarioId?: string
+  @property({ type: String }) scenarioName?: string
+  /** revert(과거→draft 복사) 성공 시 호출 — 목록 자동 갱신용 콜백(속성 바인딩이라 팝업 경계에서도 확실히 동작). */
+  @property({ attribute: false }) onReverted?: () => void
+
+  @state() versions: any[] = []
+  /** version → diff 결과(펼쳐진 경우만 존재) */
+  @state() diffs: { [version: number]: any } = {}
+
+  render() {
+    return html`
+      ${this.versions.length == 0
+        ? /* 빈 상태는 프레임워크 공통 부품(ox-empty-note) 사용 */
+          html`<ox-empty-note icon="history" title=${i18next.t('text.no released version information available')}></ox-empty-note>`
+        : this.versions.map(
+            (version, index) => html`
+              <div card>
+                <div head>
+                  <span ver><md-icon>sell</md-icon> v${version.version}</span>
+                  <span meta>
+                    <md-icon>person</md-icon> ${version.updater?.name || 'anonymous'}
+                    <md-icon>schedule</md-icon> ${new Date(version.updatedAt).toLocaleString()}
+                  </span>
+                </div>
+
+                ${version.comment ? html`<div comment>${version.comment}</div>` : ''}
+
+                <div actions>
+                  <button @click=${() => this.toggleDiff(version.version, this.versions[index + 1]?.version)}>
+                    <md-icon>difference</md-icon>${i18next.t('button.diff with previous')}
+                  </button>
+                  <button primary @click=${() => this.revert(version.version)}>
+                    <md-icon>settings_backup_restore</md-icon>${i18next.t('button.copy to draft')}
+                  </button>
+                </div>
+
+                ${this.diffs[version.version] ? this.renderDiff(this.diffs[version.version]) : ''}
+              </div>
+            `
+          )}
+    `
+  }
+
+  private renderDiff(diff: any) {
+    if (diff.earliest) {
+      return html`<div diff>${i18next.t('text.initial version all new')}</div>`
+    }
+
+    const fieldDiffs = diff.fieldDiffs || []
+    const stepDiffs = diff.stepDiffs || []
+
+    if (fieldDiffs.length == 0 && stepDiffs.length == 0) {
+      return html`<div diff>${i18next.t('text.no difference from previous')}</div>`
+    }
+
+    const fmt = (v: any) => (v === null || v === undefined ? '∅' : typeof v === 'object' ? JSON.stringify(v) : String(v))
+
+    return html`
+      <div diff>
+        ${fieldDiffs.length
+          ? html`
+              <div group>${i18next.t('label.scenario fields')}</div>
+              ${fieldDiffs.map(
+                (f: any) => html`<span change modified>${f.field}: <small>${fmt(f.before)} → ${fmt(f.after)}</small></span>`
+              )}
+            `
+          : ''}
+        ${stepDiffs.length
+          ? html`
+              <div group>${i18next.t('label.steps')}</div>
+              ${stepDiffs.map((s: any) => {
+                if (s.changeType == 'added') {
+                  return html`<span change added>+ ${s.name || '(unnamed)'}</span>`
+                }
+                if (s.changeType == 'removed') {
+                  return html`<span change removed>− ${s.name || '(unnamed)'}</span>`
+                }
+                const changed = (s.fieldDiffs || []).map((fd: any) => fd.field).join(', ')
+                return html`<span change modified>~ ${s.name || '(unnamed)'} <small>(${changed})</small></span>`
+              })}
+            `
+          : ''}
+      </div>
+    `
+  }
+
+  firstUpdated() {
+    this.refresh()
+  }
+
+  async refresh() {
+    if (!this.scenarioId) {
+      return
+    }
+
+    const response = (
+      await client.query({
+        query: gql`
+          query FetchScenarioVersions($id: String!) {
+            scenarioVersions(id: $id) {
+              id
+              version
+              comment
+              updater {
+                name
+              }
+              updatedAt
+            }
+          }
+        `,
+        variables: { id: this.scenarioId },
+        fetchPolicy: 'no-cache'
+      })
+    ).data
+
+    this.versions = response.scenarioVersions || []
+  }
+
+  async toggleDiff(version: number, prevVersion?: number) {
+    if (this.diffs[version]) {
+      const { [version]: _removed, ...rest } = this.diffs
+      this.diffs = rest
+      return
+    }
+
+    // 앞 버전과 비교 = "이 버전이 무엇을 바꿨나"(체인지로그). 최초 버전은 앞 버전이 없어 전체 신규.
+    if (prevVersion === undefined || prevVersion === null) {
+      this.diffs = { ...this.diffs, [version]: { earliest: true } }
+      return
+    }
+
+    const response = await client.query({
+      query: gql`
+        query ScenarioVersionDiff($id: String!, $base: Int!, $to: Int!) {
+          scenarioVersionDiff(id: $id, version: $base, toVersion: $to) {
+            fromVersion
+            toVersion
+            fieldDiffs {
+              field
+              before
+              after
+            }
+            stepDiffs {
+              name
+              changeType
+              fieldDiffs {
+                field
+              }
+            }
+          }
+        }
+      `,
+      variables: { id: this.scenarioId, base: prevVersion, to: version },
+      fetchPolicy: 'no-cache'
+    })
+
+    this.diffs = { ...this.diffs, [version]: response.data.scenarioVersionDiff }
+  }
+
+  async revert(version: number) {
+    const ok = await OxPrompt.open({
+      type: 'question',
+      title: String(i18next.t('button.copy to draft')),
+      text: String(i18next.t('text.sure to copy version to draft', { version })),
+      confirmButton: { text: String(i18next.t('button.confirm')) },
+      cancelButton: { text: String(i18next.t('button.cancel')) }
+    })
+    if (!ok) {
+      return
+    }
+
+    const response = await client.mutate({
+      mutation: gql`
+        mutation RevertScenarioVersion($id: String!, $version: Int!) {
+          revertScenarioVersion(id: $id, version: $version) {
+            id
+            version
+            publishState
+          }
+        }
+      `,
+      variables: { id: this.scenarioId, version }
+    })
+
+    if (!response.errors) {
+      notify({ message: i18next.t('text.info_x_successfully', { x: i18next.t('text.copy') }) })
+      this.onReverted?.()
+      this.dispatchEvent(new CustomEvent('reverted', { bubbles: true, composed: true }))
+    } else {
+      notify({ level: 'error', message: response.errors.map(e => e.message).join('\n') })
+    }
+  }
+}

package/dist-client/pages/scenario.d.ts

@@ -1,6 +1,8 @@
+import '@material/web/icon/icon.js';
 import '@operato/data-grist';
 import './scenario-detail.js';
 import './scenario-importer.js';
+import '../viewparts/scenario-versions.js';
 import { DataGrist } from '@operato/data-grist/ox-grist.js';
 import { PageView } from '@operato/shell';
 import { FetchOption } from '@operato/data-grist';
@@ -53,6 +55,8 @@ export declare class Scenario extends Scenario_base {
     _deleteScenario(): Promise<void>;
     _copyScenario(): Promise<void>;
     _updateScenario(): Promise<void>;
+    releaseScenario(record: any): Promise<void>;
+    openVersionHistory(record: any): void;
     startScenario(record: any): Promise<void>;
     stopScenario(record: any): Promise<void>;
     startScenarioSchedule(record: any): Promise<void>;