Add OpenAPI import UI
This commit is contained in:
github-ops
+80
-4
@@ -9,6 +9,7 @@
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<link rel="stylesheet" href="css/catalog.css">
|
||||
<link rel="stylesheet" href="css/pages.css">
|
||||
<link rel="stylesheet" href="css/openapi-import.css">
|
||||
<script src="%CRANK_BUNDLE_PROTECTED_CORE%"></script>
|
||||
</head>
|
||||
<body x-data="catalog()">
|
||||
@@ -88,10 +89,16 @@
|
||||
<h1 class="page-heading" data-i18n="ops.title">Operations</h1>
|
||||
<p class="page-subheading" data-i18n="ops.subtitle">Catalog of tools. List of created MCP tools for API endpoints.</p>
|
||||
</div>
|
||||
<button class="btn-new" @click="handleNewOperation()">
|
||||
<svg width="13" height="13"><use href="icons/general/plus.svg#icon"/></svg>
|
||||
<span data-i18n="ops.new">New operation</span>
|
||||
</button>
|
||||
<div class="page-header-actions">
|
||||
<button class="btn-secondary openapi-import-trigger" @click="handleOpenApiImport()">
|
||||
<svg width="13" height="13"><use href="icons/wizard/upload.svg#icon"/></svg>
|
||||
<span>Импорт OpenAPI</span>
|
||||
</button>
|
||||
<button class="btn-new" @click="handleNewOperation()">
|
||||
<svg width="13" height="13"><use href="icons/general/plus.svg#icon"/></svg>
|
||||
<span data-i18n="ops.new">New operation</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
@@ -367,6 +374,75 @@
|
||||
|
||||
</div><!-- /page -->
|
||||
|
||||
<div class="openapi-import-modal" id="openapi-import-modal" hidden>
|
||||
<div class="openapi-import-backdrop" data-openapi-close></div>
|
||||
<section class="openapi-import-dialog" role="dialog" aria-modal="true" aria-labelledby="openapi-import-title">
|
||||
<div class="openapi-import-header">
|
||||
<div>
|
||||
<h2 id="openapi-import-title">Импорт OpenAPI</h2>
|
||||
<p>Загрузите OpenAPI/Swagger документ, выберите методы и создайте черновики MCP-инструментов.</p>
|
||||
</div>
|
||||
<button class="modal-close" type="button" data-openapi-close aria-label="Закрыть">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
|
||||
<line x1="1" y1="1" x2="11" y2="11"></line><line x1="11" y1="1" x2="1" y2="11"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="openapi-import-body">
|
||||
<div class="openapi-import-upload">
|
||||
<label class="openapi-file-label">
|
||||
<span>Файл OpenAPI/Swagger</span>
|
||||
<input id="openapi-import-file" type="file" accept=".yaml,.yml,.json,application/json,text/yaml">
|
||||
</label>
|
||||
<textarea id="openapi-import-document" spellcheck="false" placeholder="Вставьте openapi.yaml или swagger.json"></textarea>
|
||||
<div class="openapi-import-actions">
|
||||
<button class="btn-primary" id="openapi-import-preview" type="button">Разобрать документ</button>
|
||||
<button class="btn-secondary" id="openapi-import-reset" type="button">Сбросить</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="openapi-import-status" id="openapi-import-status"></div>
|
||||
<div class="openapi-import-preview" id="openapi-import-preview-panel" hidden>
|
||||
<div class="openapi-import-source" id="openapi-import-source"></div>
|
||||
<div class="openapi-import-server-row">
|
||||
<label for="openapi-import-server">Base URL</label>
|
||||
<select id="openapi-import-server"></select>
|
||||
<input id="openapi-import-server-custom" class="openapi-import-server-custom" type="url" placeholder="Или укажите свой base URL, например https://api.example.com">
|
||||
</div>
|
||||
<div class="openapi-import-server-row">
|
||||
<label for="openapi-import-conflict-mode">Если операция уже существует</label>
|
||||
<select id="openapi-import-conflict-mode">
|
||||
<option value="rename" selected>Создать копию с новым именем</option>
|
||||
<option value="skip">Пропустить</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="openapi-import-toolbar">
|
||||
<div class="openapi-import-filter">
|
||||
<label for="openapi-import-search">Поиск методов</label>
|
||||
<input id="openapi-import-search" type="search" placeholder="Название, operationId или путь">
|
||||
</div>
|
||||
<div class="openapi-import-filter">
|
||||
<label for="openapi-import-method-filter">HTTP-метод</label>
|
||||
<select id="openapi-import-method-filter">
|
||||
<option value="">Все методы</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="openapi-import-bulk-actions">
|
||||
<button class="btn-secondary" id="openapi-import-select-visible" type="button">Выбрать видимые</button>
|
||||
<button class="btn-secondary" id="openapi-import-clear-visible" type="button">Снять видимые</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="openapi-import-groups" id="openapi-import-groups"></div>
|
||||
<div class="openapi-import-footer">
|
||||
<span id="openapi-import-selection">Выбрано: 0</span>
|
||||
<button class="btn-primary" id="openapi-import-create" type="button">Создать черновики</button>
|
||||
</div>
|
||||
<div class="openapi-import-result" id="openapi-import-result" hidden></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="%CRANK_BUNDLE_OPERATIONS%"></script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user