drixio 1.2.0 → 1.2.1

package/dist/studio/assets/healthModal-Wc69raxJ.js

@@ -0,0 +1,135 @@
+import{t as e}from"./index-CmbAXgDl.js";async function t(){let t=document.getElementById(`schema-health-modal`);t&&t.remove(),t=document.createElement(`div`),t.id=`schema-health-modal`,t.className=`modal-overlay`,t.setAttribute(`role`,`dialog`),t.setAttribute(`aria-modal`,`true`),t.setAttribute(`aria-labelledby`,`health-modal-title`),document.body.appendChild(t);let r=e=>{e.key===`Escape`&&i()};window.addEventListener(`keydown`,r);function i(){window.removeEventListener(`keydown`,r),t.remove()}t.onclick=e=>{e.target===t&&i()},t.innerHTML=`
+      <div class="modal-dialog schema-health-dialog" style="max-width: 780px; width: 90vw;">
+         <div class="modal-header">
+            <div class="modal-header-info">
+               <div class="modal-icon-badge" style="background: rgba(16, 185, 129, 0.1); color: #10b981;">
+                  <span class="material-symbols-outlined">health_and_safety</span>
+               </div>
+               <div>
+                  <h3 id="health-modal-title" class="modal-title">Schema Health Doctor</h3>
+                  <p class="modal-subtitle">Automated architectural linter, foreign key index auditor, and 1-click remediation.</p>
+               </div>
+            </div>
+            <button class="modal-close-btn" id="health-modal-close-btn" aria-label="Close modal">
+               <span class="material-symbols-outlined">close</span>
+            </button>
+         </div>
+
+         <div class="modal-body" id="health-modal-body" style="min-height: 280px; display: flex; align-items: center; justify-content: center;">
+            <div style="display: flex; align-items: center; gap: 8px; color: var(--color-text-dim);">
+               <span class="material-symbols-outlined animate-spin icon-20">progress_activity</span>
+               <span>Running database health check...</span>
+            </div>
+         </div>
+      </div>
+   `,document.getElementById(`health-modal-close-btn`).onclick=i;let a=await e();if(!a.success){let e=document.getElementById(`health-modal-body`);e&&(e.innerHTML=`
+            <div style="text-align: center; color: #ef4444; padding: 20px;">
+               <span class="material-symbols-outlined" style="font-size: 32px;">error</span>
+               <p style="margin-top: 8px;">Health Check Failed: ${a.error}</p>
+            </div>
+         `);return}n(a.data,i)}function n(e,t){let n=document.getElementById(`health-modal-body`);if(!n)return;let{score:a,grade:o,statusText:s,analyzedTablesCount:c,issuesCount:l,issues:u}=e,d=`#10b981`,f=`rgba(16, 185, 129, 0.1)`;a<50?(d=`#ef4444`,f=`rgba(239, 68, 68, 0.1)`):a<75?(d=`#f59e0b`,f=`rgba(245, 158, 11, 0.1)`):a<90&&(d=`#3b82f6`,f=`rgba(59, 130, 246, 0.1)`),n.style.display=`block`,n.innerHTML=`
+      <!-- Hero Score Card -->
+      <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-radius: 10px; background: ${f}; border: 1px solid ${d}33; margin-bottom: 20px;">
+         <div style="display: flex; align-items: center; gap: 16px;">
+            <div style="width: 64px; height: 64px; border-radius: 50%; background: var(--color-bg); border: 3px solid ${d}; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+               <span style="font-size: 20px; font-weight: 800; color: ${d}; line-height: 1;">${a}</span>
+               <span style="font-size: 9px; font-weight: 700; color: var(--color-text-dim); text-transform: uppercase;">Grade ${o}</span>
+            </div>
+            <div>
+               <h4 style="margin: 0 0 4px 0; font-size: 16px; font-weight: 700; color: var(--color-text);">${s}</h4>
+               <div style="display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--color-text-dim);">
+                  <span>Analyzed ${c} tables</span>
+                  <span>•</span>
+                  <span>${l.total} total observations</span>
+               </div>
+            </div>
+         </div>
+
+         <div style="display: flex; gap: 8px;">
+            <div style="text-align: center; padding: 6px 12px; border-radius: 6px; background: rgba(0,0,0,0.15);">
+               <div style="font-size: 14px; font-weight: 700; color: #ef4444;">${l.critical}</div>
+               <div style="font-size: 10px; color: var(--color-text-dim);">Critical</div>
+            </div>
+            <div style="text-align: center; padding: 6px 12px; border-radius: 6px; background: rgba(0,0,0,0.15);">
+               <div style="font-size: 14px; font-weight: 700; color: #f59e0b;">${l.warning}</div>
+               <div style="font-size: 10px; color: var(--color-text-dim);">Warning</div>
+            </div>
+            <div style="text-align: center; padding: 6px 12px; border-radius: 6px; background: rgba(0,0,0,0.15);">
+               <div style="font-size: 14px; font-weight: 700; color: #3b82f6;">${l.suggestion}</div>
+               <div style="font-size: 10px; color: var(--color-text-dim);">Suggestions</div>
+            </div>
+         </div>
+      </div>
+
+      <!-- Filter Tabs -->
+      <div style="display: flex; gap: 8px; border-bottom: 1px solid var(--color-border); padding-bottom: 10px; margin-bottom: 16px;">
+         <button class="health-tab-btn active" data-filter="all" style="font-size: 12.5px; padding: 4px 12px; border-radius: 6px; background: var(--color-primary); color: #fff; border: none; cursor: pointer; font-weight: 600;">
+            All (${l.total})
+         </button>
+         <button class="health-tab-btn" data-filter="critical" style="font-size: 12.5px; padding: 4px 12px; border-radius: 6px; background: transparent; color: var(--color-text-dim); border: 1px solid var(--color-border); cursor: pointer; font-weight: 500;">
+            🔴 Critical (${l.critical})
+         </button>
+         <button class="health-tab-btn" data-filter="warning" style="font-size: 12.5px; padding: 4px 12px; border-radius: 6px; background: transparent; color: var(--color-text-dim); border: 1px solid var(--color-border); cursor: pointer; font-weight: 500;">
+            🟡 Warning (${l.warning})
+         </button>
+         <button class="health-tab-btn" data-filter="suggestion" style="font-size: 12.5px; padding: 4px 12px; border-radius: 6px; background: transparent; color: var(--color-text-dim); border: 1px solid var(--color-border); cursor: pointer; font-weight: 500;">
+            🔵 Suggestions (${l.suggestion})
+         </button>
+      </div>
+
+      <!-- Issues List Container -->
+      <div id="health-issues-container" style="display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto;">
+         ${r(u)}
+      </div>
+   `;let p=n.querySelectorAll(`.health-tab-btn`);p.forEach(e=>{e.onclick=()=>{p.forEach(e=>{e.classList.remove(`active`),e.style.background=`transparent`,e.style.color=`var(--color-text-dim)`}),e.classList.add(`active`),e.style.background=`var(--color-primary)`,e.style.color=`#fff`;let n=e.dataset.filter,a=n===`all`?u:u.filter(e=>e.severity===n),o=document.getElementById(`health-issues-container`);o&&(o.innerHTML=r(a),i(o,t))}}),i(n,t)}function r(e){return e.length===0?`
+         <div style="text-align: center; padding: 30px; color: var(--color-text-dim);">
+            <span class="material-symbols-outlined" style="font-size: 32px; color: #10b981; margin-bottom: 8px;">verified</span>
+            <h4 style="margin: 0 0 4px 0; color: var(--color-text);">No Issues Found</h4>
+            <p style="margin: 0; font-size: 13px;">No schema warnings or performance antipatterns in this category.</p>
+         </div>
+      `:e.map(e=>{let t=e.severity===`critical`?`#ef4444`:e.severity===`warning`?`#f59e0b`:`#3b82f6`;return`
+            <div class="health-issue-card" style="border: 1px solid var(--color-border); border-radius: 8px; padding: 14px 16px; background: var(--color-bg-subtle, rgba(255,255,255,0.02));">
+               <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
+                  <div style="display: flex; align-items: center; gap: 8px;">
+                     <span style="font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; background: ${e.severity===`critical`?`rgba(239, 68, 68, 0.1)`:e.severity===`warning`?`rgba(245, 158, 11, 0.1)`:`rgba(59, 130, 246, 0.1)`}; color: ${t}; border: 1px solid ${t}33;">
+                        ${e.severity} (-${e.deduction} pts)
+                     </span>
+                     <span style="font-size: 13.5px; font-weight: 600; color: var(--color-text);">${e.title}</span>
+                  </div>
+                  <div style="display: flex; gap: 6px; font-size: 11px; font-family: monospace;">
+                     <span class="badge" style="padding: 2px 6px; border-radius: 4px; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-dim);">
+                        table: ${e.tableName}
+                     </span>
+                     ${e.columnName?`<span class="badge" style="padding: 2px 6px; border-radius: 4px; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-dim);">col: ${e.columnName}</span>`:``}
+                  </div>
+               </div>
+
+               <p style="margin: 0 0 6px 0; font-size: 12.5px; color: var(--color-text-dim); line-height: 1.4;">
+                  ${e.description}
+               </p>
+
+               <div style="display: flex; align-items: flex-start; gap: 6px; padding: 6px 10px; border-radius: 6px; background: rgba(0,0,0,0.15); margin-bottom: 10px; font-size: 11.5px; color: var(--color-text-secondary);">
+                  <span class="material-symbols-outlined" style="font-size: 15px; color: #f59e0b; margin-top: 1px;">warning</span>
+                  <span><strong>Performance Impact:</strong> ${e.impact}</span>
+               </div>
+
+               ${e.remediationSql?`
+                     <div style="margin-top: 8px;">
+                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                           <span style="font-size: 11px; font-weight: 600; color: var(--color-text-dim); text-transform: uppercase;">Remediation SQL</span>
+                           <div style="display: flex; gap: 6px;">
+                              <button class="btn btn-ghost copy-fix-sql-btn" data-sql="${encodeURIComponent(e.remediationSql)}" style="font-size: 11.5px; padding: 2px 8px; display: inline-flex; align-items: center; gap: 4px;">
+                                 <span class="material-symbols-outlined icon-14">content_copy</span>
+                                 <span>Copy SQL</span>
+                              </button>
+                              <button class="btn btn-primary run-fix-console-btn" data-sql="${encodeURIComponent(e.remediationSql)}" style="font-size: 11.5px; padding: 2px 10px; display: inline-flex; align-items: center; gap: 4px;">
+                                 <span class="material-symbols-outlined icon-14">terminal</span>
+                                 <span>Run in Console</span>
+                              </button>
+                           </div>
+                        </div>
+                        <pre style="margin: 0; padding: 8px 12px; border-radius: 6px; background: #0f172a; color: #38bdf8; font-family: monospace; font-size: 11.5px; overflow-x: auto; white-space: pre-wrap;"><code>${e.remediationSql}</code></pre>
+                     </div>
+                  `:``}
+            </div>
+         `}).join(``)}function i(e,t){e.querySelectorAll(`.copy-fix-sql-btn`).forEach(e=>{e.onclick=async()=>{let t=decodeURIComponent(e.dataset.sql);try{await navigator.clipboard.writeText(t),window.showToast&&window.showToast(`SQL copied to clipboard`,`success`)}catch{alert(`Failed to copy SQL`)}}}),e.querySelectorAll(`.run-fix-console-btn`).forEach(e=>{e.onclick=()=>{let n=decodeURIComponent(e.dataset.sql);t(),window.handleSwitchTab&&window.handleSwitchTab(`sql-btn`),setTimeout(()=>{if(window.editorInstance)window.editorInstance.setValue(n),window.editorInstance.focus();else{let e=document.getElementById(`sql-editor`);e&&(e.value=n,e.focus())}window.showToast&&window.showToast(`Remediation SQL loaded into editor. Press Ctrl+Enter to execute.`,`info`)},150)}})}export{t as openHealthModal};