@things-factory/integration-ui 10.0.0-beta.92 → 10.0.0-beta.96
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/client/pages/connection.ts +101 -43
- package/client/pages/scenario-detail.ts +41 -3
- package/client/pages/scenario.ts +1 -0
- package/client/viewparts/env-var-action-injector.ts +239 -0
- package/client/viewparts/env-var-quick-editor.ts +436 -0
- package/dist-client/pages/connection.d.ts +7 -1
- package/dist-client/pages/connection.js +88 -41
- package/dist-client/pages/connection.js.map +1 -1
- package/dist-client/pages/scenario-detail.js +29 -3
- package/dist-client/pages/scenario-detail.js.map +1 -1
- package/dist-client/pages/scenario.js +1 -0
- package/dist-client/pages/scenario.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-client/viewparts/env-var-action-injector.d.ts +38 -0
- package/dist-client/viewparts/env-var-action-injector.js +196 -0
- package/dist-client/viewparts/env-var-action-injector.js.map +1 -0
- package/dist-client/viewparts/env-var-quick-editor.d.ts +68 -0
- package/dist-client/viewparts/env-var-quick-editor.js +435 -0
- package/dist-client/viewparts/env-var-quick-editor.js.map +1 -0
- package/package.json +3 -3
- package/translations/en.json +18 -6
- package/translations/ja.json +18 -6
- package/translations/ko.json +18 -6
- package/translations/ms.json +18 -6
- package/translations/zh.json +18 -6
|
@@ -0,0 +1,435 @@
|
|
|
1
|
+
import { __decorate, __metadata } from "tslib";
|
|
2
|
+
import '@material/web/button/filled-button.js';
|
|
3
|
+
import '@material/web/button/outlined-button.js';
|
|
4
|
+
import '@material/web/button/text-button.js';
|
|
5
|
+
import '@material/web/icon/icon.js';
|
|
6
|
+
import gql from 'graphql-tag';
|
|
7
|
+
import { LitElement, css, html } from 'lit';
|
|
8
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
9
|
+
import { client } from '@operato/graphql';
|
|
10
|
+
import { notify } from '@operato/layout';
|
|
11
|
+
import { OxPropertyEditor } from '@operato/property-editor';
|
|
12
|
+
import { i18next, localize } from '@operato/i18n';
|
|
13
|
+
/**
|
|
14
|
+
* Connection / Step 파라미터 화면에서 useDomainAttribute 속성의 EnvVar 를
|
|
15
|
+
* 한 자리에서 확인·편집·삭제하는 인라인 편집기.
|
|
16
|
+
*
|
|
17
|
+
* 동작:
|
|
18
|
+
* - 현 도메인에 값이 있으면 update(M) / delete
|
|
19
|
+
* - 상속만 있는 경우(또는 없는 경우) "이 도메인에 등록" (create)
|
|
20
|
+
* - 부모 값을 덮어쓰면 closest-wins 로 자식 값이 적용됨을 안내
|
|
21
|
+
*
|
|
22
|
+
* 저장/삭제 성공 시 `saved` 이벤트 발생.
|
|
23
|
+
*/
|
|
24
|
+
let EnvVarQuickEditor = class EnvVarQuickEditor extends localize(i18next)(LitElement) {
|
|
25
|
+
constructor() {
|
|
26
|
+
super(...arguments);
|
|
27
|
+
/** 표시용 라벨 (속성 이름) */
|
|
28
|
+
this.propLabel = '';
|
|
29
|
+
this.editedValue = '';
|
|
30
|
+
this.busy = false;
|
|
31
|
+
this._editorEl = null;
|
|
32
|
+
this._editorChangeBound = null;
|
|
33
|
+
}
|
|
34
|
+
static { this.styles = css `
|
|
35
|
+
:host {
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
min-width: 460px;
|
|
39
|
+
max-height: 80vh;
|
|
40
|
+
padding: 20px 24px;
|
|
41
|
+
box-sizing: border-box;
|
|
42
|
+
background: var(--md-sys-color-surface, #fff);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
h3 {
|
|
46
|
+
margin: 0 0 4px;
|
|
47
|
+
font-size: 16px;
|
|
48
|
+
flex: 0 0 auto;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* 스크롤 가능 본문 — flex column 안에서 actions 위쪽 영역만 흘러내림 */
|
|
52
|
+
.body {
|
|
53
|
+
flex: 1 1 auto;
|
|
54
|
+
overflow: auto;
|
|
55
|
+
min-height: 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.key {
|
|
59
|
+
font-family: var(--md-sys-typescale-body-medium-font-family, monospace);
|
|
60
|
+
font-size: 12px;
|
|
61
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
62
|
+
background: var(--md-sys-color-surface-variant);
|
|
63
|
+
padding: 4px 8px;
|
|
64
|
+
border-radius: 6px;
|
|
65
|
+
display: inline-block;
|
|
66
|
+
margin-bottom: 16px;
|
|
67
|
+
word-break: break-all;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.status {
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
gap: 8px;
|
|
74
|
+
margin-bottom: 14px;
|
|
75
|
+
font-size: 14px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.status[data-status='local'] {
|
|
79
|
+
color: var(--md-sys-color-tertiary);
|
|
80
|
+
}
|
|
81
|
+
.status[data-status='inherited'] {
|
|
82
|
+
color: var(--md-sys-color-primary);
|
|
83
|
+
}
|
|
84
|
+
.status[data-status='absent'] {
|
|
85
|
+
color: var(--md-sys-color-error);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
md-outlined-text-field {
|
|
89
|
+
width: 100%;
|
|
90
|
+
margin-bottom: 12px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.actions {
|
|
94
|
+
display: flex;
|
|
95
|
+
justify-content: flex-end;
|
|
96
|
+
gap: 8px;
|
|
97
|
+
flex: 0 0 auto;
|
|
98
|
+
padding-top: 12px;
|
|
99
|
+
margin-top: 4px;
|
|
100
|
+
border-top: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.info {
|
|
104
|
+
font-size: 12px;
|
|
105
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
106
|
+
margin-bottom: 12px;
|
|
107
|
+
line-height: 1.5;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.scope {
|
|
111
|
+
font-size: 12px;
|
|
112
|
+
line-height: 1.6;
|
|
113
|
+
padding: 10px 12px;
|
|
114
|
+
margin-bottom: 14px;
|
|
115
|
+
border-radius: 8px;
|
|
116
|
+
background: var(--md-sys-color-surface-container-low, #f5f5f5);
|
|
117
|
+
border-left: 3px solid var(--md-sys-color-primary, #3457d5);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.scope .scope-title {
|
|
121
|
+
font-weight: 600;
|
|
122
|
+
color: var(--md-sys-color-on-surface);
|
|
123
|
+
margin-bottom: 4px;
|
|
124
|
+
display: flex;
|
|
125
|
+
align-items: center;
|
|
126
|
+
gap: 4px;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.scope .scope-title md-icon {
|
|
130
|
+
font-size: 14px;
|
|
131
|
+
--md-icon-size: 14px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.scope ul {
|
|
135
|
+
margin: 4px 0 0;
|
|
136
|
+
padding-left: 18px;
|
|
137
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.scope li {
|
|
141
|
+
margin-bottom: 2px;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.scope code {
|
|
145
|
+
font-family: var(--md-sys-typescale-body-medium-font-family, monospace);
|
|
146
|
+
font-size: 11px;
|
|
147
|
+
background: var(--md-sys-color-surface-variant);
|
|
148
|
+
padding: 1px 4px;
|
|
149
|
+
border-radius: 3px;
|
|
150
|
+
}
|
|
151
|
+
`; }
|
|
152
|
+
connectedCallback() {
|
|
153
|
+
super.connectedCallback();
|
|
154
|
+
this.editedValue = this.resolution?.value ?? '';
|
|
155
|
+
}
|
|
156
|
+
get isSecret() {
|
|
157
|
+
return this.propSpec?.type === 'secret' || /password|secret|token|key$/i.test(this.propLabel || '');
|
|
158
|
+
}
|
|
159
|
+
/**
|
|
160
|
+
* 저장 시 영향 범위 (scope) 안내 패널 — 운영자 의사결정 보조.
|
|
161
|
+
* - absent : 처음 등록. 자손 트리 전체에 inherit.
|
|
162
|
+
* - local : 이미 등록됨. 자손이 inherit (자손에 자기 override 있으면 그것 우선).
|
|
163
|
+
* - inherited: 상위에서 받고있음. 여기 등록 시 이 도메인 + 자손에만 한정 override.
|
|
164
|
+
*/
|
|
165
|
+
_renderScopePanel(isLocal, isInherited) {
|
|
166
|
+
if (isLocal) {
|
|
167
|
+
return html `
|
|
168
|
+
<div class="scope">
|
|
169
|
+
<div class="scope-title">
|
|
170
|
+
<md-icon>info</md-icon>
|
|
171
|
+
저장 위치 / 영향 범위
|
|
172
|
+
</div>
|
|
173
|
+
이 도메인에 이미 등록된 값이 자손 도메인 전체에 inherit 됩니다 (closest-wins).
|
|
174
|
+
<ul>
|
|
175
|
+
<li>여기서 값을 바꾸면 → 이 도메인 + 자손 트리 전체에 즉시 반영</li>
|
|
176
|
+
<li>특정 자손에 자기 override 가 등록되어 있으면 그쪽은 자기 값 우선</li>
|
|
177
|
+
<li>"이 도메인에서 삭제" → 부모(있다면) 값으로 fallback</li>
|
|
178
|
+
</ul>
|
|
179
|
+
</div>
|
|
180
|
+
`;
|
|
181
|
+
}
|
|
182
|
+
if (isInherited) {
|
|
183
|
+
return html `
|
|
184
|
+
<div class="scope">
|
|
185
|
+
<div class="scope-title">
|
|
186
|
+
<md-icon>inventory</md-icon>
|
|
187
|
+
저장 위치 / 영향 범위
|
|
188
|
+
</div>
|
|
189
|
+
현재 <code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 에서 상속된 값을 사용 중입니다.
|
|
190
|
+
<ul>
|
|
191
|
+
<li>여기서 등록하면 → 이 도메인 + 그 자손에만 우선 적용 (다른 형제 도메인은 영향 없음)</li>
|
|
192
|
+
<li>나머지 다른 자손들은 여전히
|
|
193
|
+
<code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 의 값을 그대로 사용</li>
|
|
194
|
+
</ul>
|
|
195
|
+
</div>
|
|
196
|
+
`;
|
|
197
|
+
}
|
|
198
|
+
return html `
|
|
199
|
+
<div class="scope">
|
|
200
|
+
<div class="scope-title">
|
|
201
|
+
<md-icon>add_circle</md-icon>
|
|
202
|
+
저장 위치 / 영향 범위
|
|
203
|
+
</div>
|
|
204
|
+
이 도메인에 처음 등록합니다.
|
|
205
|
+
<ul>
|
|
206
|
+
<li>저장 후 → 이 도메인 + 자손 트리 전체에서 사용</li>
|
|
207
|
+
<li>특정 자손이 자기 값을 별도 등록하면 그쪽은 자기 값 우선 (closest-wins)</li>
|
|
208
|
+
<li>잘못된 도메인에 저장하지 않도록 — 현재 컨텍스트 도메인을 한번 확인하세요</li>
|
|
209
|
+
</ul>
|
|
210
|
+
</div>
|
|
211
|
+
`;
|
|
212
|
+
}
|
|
213
|
+
get statusLabel() {
|
|
214
|
+
const s = this.resolution?.status;
|
|
215
|
+
if (s === 'local')
|
|
216
|
+
return `✓ ${i18next.t('text.set-on-this-domain') || '이 도메인에 등록됨'}`;
|
|
217
|
+
if (s === 'inherited')
|
|
218
|
+
return `🔗 ${i18next.t('text.inherited-from') || '상속'} (${this.resolution.sourceDomainName || '부모 도메인'})`;
|
|
219
|
+
return `⚠ ${i18next.t('text.not-set') || '미설정'}`;
|
|
220
|
+
}
|
|
221
|
+
render() {
|
|
222
|
+
const isLocal = this.resolution?.status === 'local';
|
|
223
|
+
const isInherited = this.resolution?.status === 'inherited';
|
|
224
|
+
return html `
|
|
225
|
+
<h3>${i18next.t('text.domain-attribute') || '도메인 속성'} · ${this.propLabel || this.key_}</h3>
|
|
226
|
+
|
|
227
|
+
<div class="body">
|
|
228
|
+
<div class="key">${this.key_}</div>
|
|
229
|
+
|
|
230
|
+
<div class="status" data-status=${this.resolution?.status || 'absent'}>${this.statusLabel}</div>
|
|
231
|
+
|
|
232
|
+
${this._renderScopePanel(isLocal, isInherited)}
|
|
233
|
+
|
|
234
|
+
${this._renderValueInput()}
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
<div class="actions">
|
|
238
|
+
${isLocal
|
|
239
|
+
? html `<md-text-button @click=${this._delete} ?disabled=${this.busy}>
|
|
240
|
+
${i18next.t('button.delete-from-this-domain') || '이 도메인에서 삭제'}
|
|
241
|
+
</md-text-button>`
|
|
242
|
+
: ''}
|
|
243
|
+
<md-outlined-button @click=${this._cancel} ?disabled=${this.busy}>
|
|
244
|
+
${i18next.t('button.cancel')}
|
|
245
|
+
</md-outlined-button>
|
|
246
|
+
<md-filled-button @click=${this._save} ?disabled=${this.busy || !this.editedValue}>
|
|
247
|
+
${isLocal ? i18next.t('button.update') || '갱신' : i18next.t('button.set') || '등록'}
|
|
248
|
+
</md-filled-button>
|
|
249
|
+
</div>
|
|
250
|
+
`;
|
|
251
|
+
}
|
|
252
|
+
/**
|
|
253
|
+
* 입력 control 은 플랫폼의 OxPropertyEditor 레지스트리에서 propSpec.type 에
|
|
254
|
+
* 등록된 element 를 그대로 사용. parameters builder 가 task params 화면에서
|
|
255
|
+
* 쓰는 것과 동일한 editor 를 EnvVar 편집기에도 노출 — 일관된 UX, 단일 진실 원천.
|
|
256
|
+
*
|
|
257
|
+
* EnvVar 저장 값은 항상 문자열. 비-string 값 (number/boolean/object) 은
|
|
258
|
+
* 직렬화/역직렬화. select 의 경우 option.value 가 string 이라 자연 동작.
|
|
259
|
+
*/
|
|
260
|
+
_renderValueInput() {
|
|
261
|
+
// host 만 lit-html 로 렌더. 실제 editor element 는 updated() 에서 imperative.
|
|
262
|
+
// secret 은 OxPropertyEditor 의 password editor 가 부족할 수 있어 별도 처리.
|
|
263
|
+
if (this.isSecret) {
|
|
264
|
+
return html `
|
|
265
|
+
<input
|
|
266
|
+
part="secret-input"
|
|
267
|
+
type="password"
|
|
268
|
+
.value=${this.editedValue}
|
|
269
|
+
@input=${(e) => (this.editedValue = e.target.value)}
|
|
270
|
+
?disabled=${this.busy}
|
|
271
|
+
style="width:100%; padding:8px; box-sizing:border-box;"
|
|
272
|
+
/>
|
|
273
|
+
`;
|
|
274
|
+
}
|
|
275
|
+
return html `<div id="editor-host"></div>`;
|
|
276
|
+
}
|
|
277
|
+
updated(changed) {
|
|
278
|
+
super.updated?.(changed);
|
|
279
|
+
if (this.isSecret)
|
|
280
|
+
return;
|
|
281
|
+
if (changed.has('propSpec') || !this._editorEl) {
|
|
282
|
+
this._mountEditor();
|
|
283
|
+
}
|
|
284
|
+
else if (changed.has('editedValue') && this._editorEl) {
|
|
285
|
+
// 외부에서 editedValue 변경 시 editor 도 동기화
|
|
286
|
+
const cur = this._editorEl.value;
|
|
287
|
+
if (cur !== this.editedValue)
|
|
288
|
+
this._editorEl.value = this.editedValue;
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
_mountEditor() {
|
|
292
|
+
const host = this.renderRoot.querySelector('#editor-host');
|
|
293
|
+
if (!host)
|
|
294
|
+
return;
|
|
295
|
+
host.replaceChildren();
|
|
296
|
+
this._cleanupEditorListener();
|
|
297
|
+
const spec = this.propSpec || {};
|
|
298
|
+
const type = spec.type || 'string';
|
|
299
|
+
const elementType = OxPropertyEditor.getEditor(type);
|
|
300
|
+
if (!elementType) {
|
|
301
|
+
// 등록 editor 없음 — fallback 으로 단순 text input
|
|
302
|
+
const fallback = document.createElement('input');
|
|
303
|
+
fallback.type = 'text';
|
|
304
|
+
fallback.style.cssText = 'width:100%; padding:8px; box-sizing:border-box;';
|
|
305
|
+
fallback.value = this.editedValue || '';
|
|
306
|
+
fallback.addEventListener('input', () => (this.editedValue = fallback.value));
|
|
307
|
+
host.appendChild(fallback);
|
|
308
|
+
this._editorEl = fallback;
|
|
309
|
+
return;
|
|
310
|
+
}
|
|
311
|
+
const el = document.createElement(elementType);
|
|
312
|
+
el.label = spec.label || i18next.t('field.value');
|
|
313
|
+
el.type = type;
|
|
314
|
+
el.placeholder = spec.placeholder || '';
|
|
315
|
+
el.property = spec.property;
|
|
316
|
+
el.editor = spec.editor;
|
|
317
|
+
el.value = this.editedValue || (type === 'checkbox' ? false : '');
|
|
318
|
+
// editor 의 change event 를 받아 editedValue 동기화. EnvVar 는 문자열 저장이라
|
|
319
|
+
// value 가 boolean/number 면 String() 변환.
|
|
320
|
+
const onChange = () => {
|
|
321
|
+
const v = el.value;
|
|
322
|
+
this.editedValue = v == null ? '' : typeof v === 'string' ? v : String(v);
|
|
323
|
+
};
|
|
324
|
+
el.addEventListener('change', onChange);
|
|
325
|
+
this._editorChangeBound = onChange;
|
|
326
|
+
host.appendChild(el);
|
|
327
|
+
this._editorEl = el;
|
|
328
|
+
}
|
|
329
|
+
_cleanupEditorListener() {
|
|
330
|
+
if (this._editorEl && this._editorChangeBound) {
|
|
331
|
+
this._editorEl.removeEventListener('change', this._editorChangeBound);
|
|
332
|
+
}
|
|
333
|
+
this._editorChangeBound = null;
|
|
334
|
+
this._editorEl = null;
|
|
335
|
+
}
|
|
336
|
+
disconnectedCallback() {
|
|
337
|
+
this._cleanupEditorListener();
|
|
338
|
+
super.disconnectedCallback();
|
|
339
|
+
}
|
|
340
|
+
_cancel() {
|
|
341
|
+
this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, composed: true }));
|
|
342
|
+
}
|
|
343
|
+
async _save() {
|
|
344
|
+
this.busy = true;
|
|
345
|
+
try {
|
|
346
|
+
const isUpdate = this.resolution?.status === 'local' && this.resolution?.envVarId;
|
|
347
|
+
const patches = isUpdate
|
|
348
|
+
? [{ id: this.resolution.envVarId, cuFlag: 'M', value: this.editedValue, active: true }]
|
|
349
|
+
: [
|
|
350
|
+
{
|
|
351
|
+
cuFlag: '+',
|
|
352
|
+
name: this.key_,
|
|
353
|
+
value: this.editedValue,
|
|
354
|
+
active: true,
|
|
355
|
+
description: this.propLabel || ''
|
|
356
|
+
}
|
|
357
|
+
];
|
|
358
|
+
const response = await client.mutate({
|
|
359
|
+
mutation: gql `
|
|
360
|
+
mutation ($patches: [EnvVarPatch!]!) {
|
|
361
|
+
updateMultipleEnvVars(patches: $patches) {
|
|
362
|
+
name
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
`,
|
|
366
|
+
variables: { patches }
|
|
367
|
+
});
|
|
368
|
+
if (response.errors)
|
|
369
|
+
throw new Error(response.errors.map((e) => e.message).join('\n'));
|
|
370
|
+
notify({ message: i18next.t('text.saved-successfully') || '저장되었습니다' });
|
|
371
|
+
this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }));
|
|
372
|
+
}
|
|
373
|
+
catch (e) {
|
|
374
|
+
notify({ level: 'error', message: e.message || String(e) });
|
|
375
|
+
}
|
|
376
|
+
finally {
|
|
377
|
+
this.busy = false;
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
async _delete() {
|
|
381
|
+
if (!this.resolution?.envVarId)
|
|
382
|
+
return;
|
|
383
|
+
// 도메인 환경변수 삭제는 확인 없이 즉시 처리.
|
|
384
|
+
this.busy = true;
|
|
385
|
+
try {
|
|
386
|
+
const response = await client.mutate({
|
|
387
|
+
mutation: gql `
|
|
388
|
+
mutation ($id: String!) {
|
|
389
|
+
deleteEnvVar(id: $id)
|
|
390
|
+
}
|
|
391
|
+
`,
|
|
392
|
+
variables: { id: this.resolution.envVarId }
|
|
393
|
+
});
|
|
394
|
+
if (response.errors)
|
|
395
|
+
throw new Error(response.errors.map((e) => e.message).join('\n'));
|
|
396
|
+
notify({ message: i18next.t('text.deleted-successfully') || '삭제되었습니다' });
|
|
397
|
+
this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }));
|
|
398
|
+
}
|
|
399
|
+
catch (e) {
|
|
400
|
+
notify({ level: 'error', message: e.message || String(e) });
|
|
401
|
+
}
|
|
402
|
+
finally {
|
|
403
|
+
this.busy = false;
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
};
|
|
407
|
+
__decorate([
|
|
408
|
+
property({ type: String }),
|
|
409
|
+
__metadata("design:type", String)
|
|
410
|
+
], EnvVarQuickEditor.prototype, "key_", void 0);
|
|
411
|
+
__decorate([
|
|
412
|
+
property({ type: Object }),
|
|
413
|
+
__metadata("design:type", Object)
|
|
414
|
+
], EnvVarQuickEditor.prototype, "propSpec", void 0);
|
|
415
|
+
__decorate([
|
|
416
|
+
property({ type: Object }),
|
|
417
|
+
__metadata("design:type", Object)
|
|
418
|
+
], EnvVarQuickEditor.prototype, "resolution", void 0);
|
|
419
|
+
__decorate([
|
|
420
|
+
property({ type: String }),
|
|
421
|
+
__metadata("design:type", String)
|
|
422
|
+
], EnvVarQuickEditor.prototype, "propLabel", void 0);
|
|
423
|
+
__decorate([
|
|
424
|
+
state(),
|
|
425
|
+
__metadata("design:type", String)
|
|
426
|
+
], EnvVarQuickEditor.prototype, "editedValue", void 0);
|
|
427
|
+
__decorate([
|
|
428
|
+
state(),
|
|
429
|
+
__metadata("design:type", Boolean)
|
|
430
|
+
], EnvVarQuickEditor.prototype, "busy", void 0);
|
|
431
|
+
EnvVarQuickEditor = __decorate([
|
|
432
|
+
customElement('env-var-quick-editor')
|
|
433
|
+
], EnvVarQuickEditor);
|
|
434
|
+
export { EnvVarQuickEditor };
|
|
435
|
+
//# sourceMappingURL=env-var-quick-editor.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"env-var-quick-editor.js","sourceRoot":"","sources":["../../client/viewparts/env-var-quick-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/filled-button.js'\nimport '@material/web/button/outlined-button.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/icon/icon.js'\n\nimport gql from 'graphql-tag'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport { OxPropertyEditor } from '@operato/property-editor'\nimport { i18next, localize } from '@operato/i18n'\n\ninterface Resolution {\n key: string\n status: 'local' | 'inherited' | 'absent'\n envVarId?: string\n sourceDomainName?: string\n value?: string\n hasValue?: boolean\n}\n\n/**\n * Connection / Step 파라미터 화면에서 useDomainAttribute 속성의 EnvVar 를\n * 한 자리에서 확인·편집·삭제하는 인라인 편집기.\n *\n * 동작:\n * - 현 도메인에 값이 있으면 update(M) / delete\n * - 상속만 있는 경우(또는 없는 경우) \"이 도메인에 등록\" (create)\n * - 부모 값을 덮어쓰면 closest-wins 로 자식 값이 적용됨을 안내\n *\n * 저장/삭제 성공 시 `saved` 이벤트 발생.\n */\n@customElement('env-var-quick-editor')\nexport class EnvVarQuickEditor extends localize(i18next)(LitElement) {\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n min-width: 460px;\n max-height: 80vh;\n padding: 20px 24px;\n box-sizing: border-box;\n background: var(--md-sys-color-surface, #fff);\n }\n\n h3 {\n margin: 0 0 4px;\n font-size: 16px;\n flex: 0 0 auto;\n }\n\n /* 스크롤 가능 본문 — flex column 안에서 actions 위쪽 영역만 흘러내림 */\n .body {\n flex: 1 1 auto;\n overflow: auto;\n min-height: 0;\n }\n\n .key {\n font-family: var(--md-sys-typescale-body-medium-font-family, monospace);\n font-size: 12px;\n color: var(--md-sys-color-on-surface-variant);\n background: var(--md-sys-color-surface-variant);\n padding: 4px 8px;\n border-radius: 6px;\n display: inline-block;\n margin-bottom: 16px;\n word-break: break-all;\n }\n\n .status {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 14px;\n font-size: 14px;\n }\n\n .status[data-status='local'] {\n color: var(--md-sys-color-tertiary);\n }\n .status[data-status='inherited'] {\n color: var(--md-sys-color-primary);\n }\n .status[data-status='absent'] {\n color: var(--md-sys-color-error);\n }\n\n md-outlined-text-field {\n width: 100%;\n margin-bottom: 12px;\n }\n\n .actions {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n flex: 0 0 auto;\n padding-top: 12px;\n margin-top: 4px;\n border-top: 1px solid var(--md-sys-color-outline-variant, #e0e0e0);\n }\n\n .info {\n font-size: 12px;\n color: var(--md-sys-color-on-surface-variant);\n margin-bottom: 12px;\n line-height: 1.5;\n }\n\n .scope {\n font-size: 12px;\n line-height: 1.6;\n padding: 10px 12px;\n margin-bottom: 14px;\n border-radius: 8px;\n background: var(--md-sys-color-surface-container-low, #f5f5f5);\n border-left: 3px solid var(--md-sys-color-primary, #3457d5);\n }\n\n .scope .scope-title {\n font-weight: 600;\n color: var(--md-sys-color-on-surface);\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .scope .scope-title md-icon {\n font-size: 14px;\n --md-icon-size: 14px;\n }\n\n .scope ul {\n margin: 4px 0 0;\n padding-left: 18px;\n color: var(--md-sys-color-on-surface-variant);\n }\n\n .scope li {\n margin-bottom: 2px;\n }\n\n .scope code {\n font-family: var(--md-sys-typescale-body-medium-font-family, monospace);\n font-size: 11px;\n background: var(--md-sys-color-surface-variant);\n padding: 1px 4px;\n border-radius: 3px;\n }\n `\n\n /** EnvVar 키 (예: `Connection::kiscon-conn::password`) */\n @property({ type: String }) key_!: string\n\n /** 속성 사양 (type/secret 여부 표시 등에 사용) */\n @property({ type: Object }) propSpec: any\n\n /** 사전 조회한 해소 상태 */\n @property({ type: Object }) resolution!: Resolution\n\n /** 표시용 라벨 (속성 이름) */\n @property({ type: String }) propLabel: string = ''\n\n @state() private editedValue: string = ''\n @state() private busy: boolean = false\n\n connectedCallback() {\n super.connectedCallback()\n this.editedValue = this.resolution?.value ?? ''\n }\n\n private get isSecret(): boolean {\n return this.propSpec?.type === 'secret' || /password|secret|token|key$/i.test(this.propLabel || '')\n }\n\n /**\n * 저장 시 영향 범위 (scope) 안내 패널 — 운영자 의사결정 보조.\n * - absent : 처음 등록. 자손 트리 전체에 inherit.\n * - local : 이미 등록됨. 자손이 inherit (자손에 자기 override 있으면 그것 우선).\n * - inherited: 상위에서 받고있음. 여기 등록 시 이 도메인 + 자손에만 한정 override.\n */\n private _renderScopePanel(isLocal: boolean, isInherited: boolean) {\n if (isLocal) {\n return html`\n <div class=\"scope\">\n <div class=\"scope-title\">\n <md-icon>info</md-icon>\n 저장 위치 / 영향 범위\n </div>\n 이 도메인에 이미 등록된 값이 자손 도메인 전체에 inherit 됩니다 (closest-wins).\n <ul>\n <li>여기서 값을 바꾸면 → 이 도메인 + 자손 트리 전체에 즉시 반영</li>\n <li>특정 자손에 자기 override 가 등록되어 있으면 그쪽은 자기 값 우선</li>\n <li>\"이 도메인에서 삭제\" → 부모(있다면) 값으로 fallback</li>\n </ul>\n </div>\n `\n }\n if (isInherited) {\n return html`\n <div class=\"scope\">\n <div class=\"scope-title\">\n <md-icon>inventory</md-icon>\n 저장 위치 / 영향 범위\n </div>\n 현재 <code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 에서 상속된 값을 사용 중입니다.\n <ul>\n <li>여기서 등록하면 → 이 도메인 + 그 자손에만 우선 적용 (다른 형제 도메인은 영향 없음)</li>\n <li>나머지 다른 자손들은 여전히\n <code>${this.resolution.sourceDomainName || '상위 도메인'}</code> 의 값을 그대로 사용</li>\n </ul>\n </div>\n `\n }\n return html`\n <div class=\"scope\">\n <div class=\"scope-title\">\n <md-icon>add_circle</md-icon>\n 저장 위치 / 영향 범위\n </div>\n 이 도메인에 처음 등록합니다.\n <ul>\n <li>저장 후 → 이 도메인 + 자손 트리 전체에서 사용</li>\n <li>특정 자손이 자기 값을 별도 등록하면 그쪽은 자기 값 우선 (closest-wins)</li>\n <li>잘못된 도메인에 저장하지 않도록 — 현재 컨텍스트 도메인을 한번 확인하세요</li>\n </ul>\n </div>\n `\n }\n\n private get statusLabel(): string {\n const s = this.resolution?.status\n if (s === 'local') return `✓ ${i18next.t('text.set-on-this-domain') || '이 도메인에 등록됨'}`\n if (s === 'inherited')\n return `🔗 ${i18next.t('text.inherited-from') || '상속'} (${this.resolution.sourceDomainName || '부모 도메인'})`\n return `⚠ ${i18next.t('text.not-set') || '미설정'}`\n }\n\n render() {\n const isLocal = this.resolution?.status === 'local'\n const isInherited = this.resolution?.status === 'inherited'\n\n return html`\n <h3>${i18next.t('text.domain-attribute') || '도메인 속성'} · ${this.propLabel || this.key_}</h3>\n\n <div class=\"body\">\n <div class=\"key\">${this.key_}</div>\n\n <div class=\"status\" data-status=${this.resolution?.status || 'absent'}>${this.statusLabel}</div>\n\n ${this._renderScopePanel(isLocal, isInherited)}\n\n ${this._renderValueInput()}\n </div>\n\n <div class=\"actions\">\n ${isLocal\n ? html`<md-text-button @click=${this._delete} ?disabled=${this.busy}>\n ${i18next.t('button.delete-from-this-domain') || '이 도메인에서 삭제'}\n </md-text-button>`\n : ''}\n <md-outlined-button @click=${this._cancel} ?disabled=${this.busy}>\n ${i18next.t('button.cancel')}\n </md-outlined-button>\n <md-filled-button @click=${this._save} ?disabled=${this.busy || !this.editedValue}>\n ${isLocal ? i18next.t('button.update') || '갱신' : i18next.t('button.set') || '등록'}\n </md-filled-button>\n </div>\n `\n }\n\n /**\n * 입력 control 은 플랫폼의 OxPropertyEditor 레지스트리에서 propSpec.type 에\n * 등록된 element 를 그대로 사용. parameters builder 가 task params 화면에서\n * 쓰는 것과 동일한 editor 를 EnvVar 편집기에도 노출 — 일관된 UX, 단일 진실 원천.\n *\n * EnvVar 저장 값은 항상 문자열. 비-string 값 (number/boolean/object) 은\n * 직렬화/역직렬화. select 의 경우 option.value 가 string 이라 자연 동작.\n */\n private _renderValueInput() {\n // host 만 lit-html 로 렌더. 실제 editor element 는 updated() 에서 imperative.\n // secret 은 OxPropertyEditor 의 password editor 가 부족할 수 있어 별도 처리.\n if (this.isSecret) {\n return html`\n <input\n part=\"secret-input\"\n type=\"password\"\n .value=${this.editedValue}\n @input=${(e: any) => (this.editedValue = e.target.value)}\n ?disabled=${this.busy}\n style=\"width:100%; padding:8px; box-sizing:border-box;\"\n />\n `\n }\n return html`<div id=\"editor-host\"></div>`\n }\n\n private _editorEl: HTMLElement | null = null\n private _editorChangeBound: ((e: Event) => void) | null = null\n\n protected updated(changed: Map<string, unknown>) {\n super.updated?.(changed)\n if (this.isSecret) return\n if (changed.has('propSpec') || !this._editorEl) {\n this._mountEditor()\n } else if (changed.has('editedValue') && this._editorEl) {\n // 외부에서 editedValue 변경 시 editor 도 동기화\n const cur = (this._editorEl as any).value\n if (cur !== this.editedValue) (this._editorEl as any).value = this.editedValue\n }\n }\n\n private _mountEditor() {\n const host = this.renderRoot.querySelector('#editor-host') as HTMLElement | null\n if (!host) return\n host.replaceChildren()\n this._cleanupEditorListener()\n\n const spec = this.propSpec || {}\n const type = spec.type || 'string'\n const elementType = OxPropertyEditor.getEditor(type)\n if (!elementType) {\n // 등록 editor 없음 — fallback 으로 단순 text input\n const fallback = document.createElement('input')\n fallback.type = 'text'\n fallback.style.cssText = 'width:100%; padding:8px; box-sizing:border-box;'\n fallback.value = this.editedValue || ''\n fallback.addEventListener('input', () => (this.editedValue = fallback.value))\n host.appendChild(fallback)\n this._editorEl = fallback\n return\n }\n\n const el = document.createElement(elementType) as any\n el.label = spec.label || i18next.t('field.value')\n el.type = type\n el.placeholder = spec.placeholder || ''\n el.property = spec.property\n el.editor = spec.editor\n el.value = this.editedValue || (type === 'checkbox' ? false : '')\n\n // editor 의 change event 를 받아 editedValue 동기화. EnvVar 는 문자열 저장이라\n // value 가 boolean/number 면 String() 변환.\n const onChange = () => {\n const v = el.value\n this.editedValue = v == null ? '' : typeof v === 'string' ? v : String(v)\n }\n el.addEventListener('change', onChange)\n this._editorChangeBound = onChange\n host.appendChild(el)\n this._editorEl = el\n }\n\n private _cleanupEditorListener() {\n if (this._editorEl && this._editorChangeBound) {\n this._editorEl.removeEventListener('change', this._editorChangeBound)\n }\n this._editorChangeBound = null\n this._editorEl = null\n }\n\n disconnectedCallback() {\n this._cleanupEditorListener()\n super.disconnectedCallback()\n }\n\n private _cancel() {\n this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, composed: true }))\n }\n\n private async _save() {\n this.busy = true\n try {\n const isUpdate = this.resolution?.status === 'local' && this.resolution?.envVarId\n const patches = isUpdate\n ? [{ id: this.resolution.envVarId, cuFlag: 'M', value: this.editedValue, active: true }]\n : [\n {\n cuFlag: '+',\n name: this.key_,\n value: this.editedValue,\n active: true,\n description: this.propLabel || ''\n }\n ]\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($patches: [EnvVarPatch!]!) {\n updateMultipleEnvVars(patches: $patches) {\n name\n }\n }\n `,\n variables: { patches }\n })\n\n if (response.errors) throw new Error(response.errors.map((e: any) => e.message).join('\\n'))\n\n notify({ message: i18next.t('text.saved-successfully') || '저장되었습니다' })\n this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }))\n } catch (e: any) {\n notify({ level: 'error', message: e.message || String(e) })\n } finally {\n this.busy = false\n }\n }\n\n private async _delete() {\n if (!this.resolution?.envVarId) return\n // 도메인 환경변수 삭제는 확인 없이 즉시 처리.\n this.busy = true\n try {\n const response = await client.mutate({\n mutation: gql`\n mutation ($id: String!) {\n deleteEnvVar(id: $id)\n }\n `,\n variables: { id: this.resolution.envVarId }\n })\n\n if (response.errors) throw new Error(response.errors.map((e: any) => e.message).join('\\n'))\n\n notify({ message: i18next.t('text.deleted-successfully') || '삭제되었습니다' })\n this.dispatchEvent(new CustomEvent('saved', { bubbles: true, composed: true }))\n } catch (e: any) {\n notify({ level: 'error', message: e.message || String(e) })\n } finally {\n this.busy = false\n }\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@things-factory/integration-ui",
|
|
3
|
-
"version": "10.0.0-beta.
|
|
3
|
+
"version": "10.0.0-beta.96",
|
|
4
4
|
"main": "dist-server/index.js",
|
|
5
5
|
"browser": "dist-client/index.js",
|
|
6
6
|
"things-factory": true,
|
|
@@ -41,9 +41,9 @@
|
|
|
41
41
|
"@operato/utils": "^10.0.0-beta.1",
|
|
42
42
|
"@things-factory/export-base": "^10.0.0-beta.92",
|
|
43
43
|
"@things-factory/import-base": "^10.0.0-beta.92",
|
|
44
|
-
"@things-factory/integration-base": "^10.0.0-beta.
|
|
44
|
+
"@things-factory/integration-base": "^10.0.0-beta.95",
|
|
45
45
|
"@things-factory/personalization": "^10.0.0-beta.92",
|
|
46
46
|
"d3": "^7.8.5"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "efd7ac255ffbd948eef2fa489a25287ca6f5eb90"
|
|
49
49
|
}
|
package/translations/en.json
CHANGED
|
@@ -1,23 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"button.connect": "connect",
|
|
3
|
-
"button.disconnect": "disconnect",
|
|
4
3
|
"button.copy": "copy",
|
|
5
4
|
"button.delete": "delete",
|
|
5
|
+
"button.delete-from-this-domain": "Delete from this domain",
|
|
6
|
+
"button.disconnect": "disconnect",
|
|
6
7
|
"button.save": "save",
|
|
8
|
+
"button.schedule-task": "schedule task",
|
|
9
|
+
"button.set": "Set",
|
|
7
10
|
"button.start": "start",
|
|
8
11
|
"button.start monitor": "start monitor",
|
|
9
12
|
"button.stop": "stop",
|
|
10
13
|
"button.stop monitor": "stop monitor",
|
|
11
|
-
"button.schedule-task": "schedule task",
|
|
12
14
|
"button.unschedule-task": "unschedule task",
|
|
13
|
-
"
|
|
14
|
-
"field.startup-scenario": "startup execution",
|
|
15
|
+
"button.update": "Update",
|
|
15
16
|
"field.api_url": "API URL",
|
|
16
17
|
"field.auto-publish": "auto publish",
|
|
17
18
|
"field.connection": "connection",
|
|
18
19
|
"field.crontab": "crontab",
|
|
20
|
+
"field.domain-attribute-readiness": "Readiness",
|
|
19
21
|
"field.edge-server": "edge server",
|
|
20
22
|
"field.endpoint": "endpoint",
|
|
23
|
+
"field.inheritance-mode": "Inheritance Mode",
|
|
24
|
+
"field.iteration-scope": "iteration",
|
|
21
25
|
"field.log": "log",
|
|
22
26
|
"field.message": "message",
|
|
23
27
|
"field.on-demand": "on demand",
|
|
@@ -28,13 +32,14 @@
|
|
|
28
32
|
"field.rounds": "rounds",
|
|
29
33
|
"field.schedule": "schedule",
|
|
30
34
|
"field.skip": "skip",
|
|
35
|
+
"field.startup-connect": "startup connect",
|
|
36
|
+
"field.startup-scenario": "startup execution",
|
|
31
37
|
"field.state-value": "state value",
|
|
32
38
|
"field.task": "task",
|
|
33
39
|
"field.timezone": "timezone",
|
|
34
40
|
"field.ttl-seconds": "TTL(seconds)",
|
|
35
41
|
"field.type": "type",
|
|
36
42
|
"field.wrote-at": "wrote at",
|
|
37
|
-
"field.iteration-scope": "iteration",
|
|
38
43
|
"label.address": "address",
|
|
39
44
|
"label.auth-client": "oauth2 client",
|
|
40
45
|
"label.authtype": "auth-type",
|
|
@@ -73,8 +78,8 @@
|
|
|
73
78
|
"label.parameters": "parameters",
|
|
74
79
|
"label.params": "parameters",
|
|
75
80
|
"label.pool-increment": "connection pool increment",
|
|
76
|
-
"label.pool-min": "min. connection pool",
|
|
77
81
|
"label.pool-max": "max. connection pool",
|
|
82
|
+
"label.pool-min": "min. connection pool",
|
|
78
83
|
"label.priority": "priority",
|
|
79
84
|
"label.procedure": "procedure",
|
|
80
85
|
"label.procedure-code": "procedure code",
|
|
@@ -103,6 +108,8 @@
|
|
|
103
108
|
"text.connection list": "connection list",
|
|
104
109
|
"text.copy": "copy",
|
|
105
110
|
"text.delete": "delete",
|
|
111
|
+
"text.deleted-successfully": "Deleted successfully.",
|
|
112
|
+
"text.domain-attribute": "Domain attribute",
|
|
106
113
|
"text.every 12 hours": "every 12 hours",
|
|
107
114
|
"text.every 15 minutes": "every 15 minutes",
|
|
108
115
|
"text.every 15 seconds": "every 15 seconds",
|
|
@@ -120,12 +127,17 @@
|
|
|
120
127
|
"text.every sunday": "every sunday",
|
|
121
128
|
"text.every weekday": "every weekday",
|
|
122
129
|
"text.info_x_successfully": "{x} success.",
|
|
130
|
+
"text.inherited-from": "Inherited",
|
|
131
|
+
"text.inherited-override-warning": "Setting a value here will override the parent value with this domain's value (closest-wins).",
|
|
123
132
|
"text.integration analysis": "integration analysis",
|
|
124
133
|
"text.integration monitor": "integration monitor",
|
|
125
134
|
"text.no properties to set": "there's no properties to set",
|
|
135
|
+
"text.not-set": "Not set",
|
|
126
136
|
"text.range of values": "range of values",
|
|
137
|
+
"text.saved-successfully": "Saved successfully.",
|
|
127
138
|
"text.scenario": "scenario",
|
|
128
139
|
"text.scenario list": "scenario list",
|
|
140
|
+
"text.set-on-this-domain": "Set on this domain",
|
|
129
141
|
"text.step values": "step values",
|
|
130
142
|
"text.sure_to_x": "Sure to {x}?",
|
|
131
143
|
"text.the first day of every month": "the first day of every month",
|