Skip to content

Commit

Permalink
feat: add diagnostics for incorrect specs
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikhilkalburgi
nikhilkalburgi committed May 10, 2024
1 parent 940e6e1 commit 046219f
Show file tree
Hide file tree
Showing 4 changed files with 296 additions and 159 deletions.
35 changes: 35 additions & 0 deletions src/Diagnostics.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { ISpectralDiagnostic } from '@stoplight/spectral-core';
import * as vscode from 'vscode';
import * as ejs from 'ejs';
import * as path from 'path';

export default async function diagnosticsMarkdown(diagnostics: ISpectralDiagnostic[], context: vscode.ExtensionContext){
const templatePath = path.join(context.extensionPath,'dist', 'components','Diagnostics.ejs');
let data: object[] = [];
let recentErrorPath: string = "";
let joinedPath: string = "";
diagnostics.forEach(diagnostic =>{
joinedPath = diagnostic.path.join(' / ');
console.log(joinedPath, recentErrorPath, data.length);
if(joinedPath.indexOf(recentErrorPath) === -1 || !recentErrorPath){
recentErrorPath = joinedPath;
data.push({
code: diagnostic.code,
message: diagnostic.message,
path: recentErrorPath,
severity: diagnostic.severity,
source: diagnostic.source
});
}else{
recentErrorPath = joinedPath;
data[data.length - 1] = {
code: diagnostic.code,
message: diagnostic.message,
path: recentErrorPath,
severity: diagnostic.severity,
source: diagnostic.source
};
}
});
return await ejs.renderFile(templatePath, {data});
}
172 changes: 13 additions & 159 deletions src/PreviewMarkdown.ts
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
import * as vscode from 'vscode';
import * as path from 'path';
import { isAsyncAPIFile } from './PreviewWebPanel';

import Diagnostics from './Diagnostics';
import { Parser, fromFile, AsyncAPIDocumentInterface } from '@asyncapi/parser';
import Asyncapi from './Asyncapi';
import { ISpectralDiagnostic } from '@stoplight/spectral-core';


const parser = new Parser();


async function buildMarkdown(document:AsyncAPIDocumentInterface | undefined, context: vscode.ExtensionContext){
async function buildMarkdown(document:AsyncAPIDocumentInterface | undefined, diagnostics: ISpectralDiagnostic[], context: vscode.ExtensionContext){


let content = '';

if(document !== undefined){

content = await Asyncapi(document, context);
}else{
content = await Diagnostics(diagnostics, context);
}

return content;
Expand All @@ -39,7 +41,8 @@ export const openAsyncapiMdFiles: { [id: string]: vscode.WebviewPanel } = {}; //
export async function openAsyncAPIMarkdown(context: vscode.ExtensionContext, uri: vscode.Uri) {
const localResourceRoots = [
vscode.Uri.file(path.dirname(uri.fsPath)),
vscode.Uri.joinPath(context.extensionUri, 'dist/node_modules/mermaid/dist/mermaid.min.js')
vscode.Uri.joinPath(context.extensionUri, 'dist/node_modules/mermaid/dist/mermaid.min.js'),
vscode.Uri.joinPath(context.extensionUri, 'dist/globals.css')
];
if (vscode.workspace.workspaceFolders) {
vscode.workspace.workspaceFolders.forEach(folder => {
Expand All @@ -54,8 +57,8 @@ export async function openAsyncAPIMarkdown(context: vscode.ExtensionContext, uri
localResourceRoots,
});

const { document } = await fromFile(parser, uri.fsPath).parse();
let result = await buildMarkdown(document, context);
const { document, diagnostics } = await fromFile(parser, uri.fsPath).parse();
let result = await buildMarkdown(document, diagnostics, context);


panel.title = path.basename(uri.fsPath);
Expand Down Expand Up @@ -87,164 +90,15 @@ function getWebviewContent(context: vscode.ExtensionContext, webview: vscode.Web
const mermaidJs = webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'dist/node_modules/mermaid/dist/mermaid.min.js')
);
const globalsCSS = webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'dist/globals.css')
);

const html = `
<!DOCTYPE html>
<html>
<head>
<style>
html{
scroll-behavior: smooth;
}
body {
color: #121212;
background-color: #efefef;
word-wrap: break-word;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
h1 {
color: #121212;
}
.container {
display: flex;
overflow-x: hidden;
}
.section {
flex: 0 0 100%;
box-sizing: border-box;
padding: 20px;
aspect-ratio:1;
overflow-y: auto;
height:calc(100vh - 60px);;
}
.button-container {
display: flex;
justify-content: center;
margin: 10px;
}
.button {
padding: 10px 20px;
margin: 0px 10px;
border-radius: .5rem;
color: #444;
font-size: 1rem;
font-weight: 700;
letter-spacing: .1rem;
cursor: pointer;
flex:1;
border: none;
outline: none;
transition: .2s ease-in-out;
box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
-6px -6px 10px rgba(255, 255, 255, .5),
6px 6px 8px rgba(255, 255, 255, .075),
6px 6px 10px rgba(0, 0, 0, .15);
}
button:hover {
box-shadow: -2px -2px 6px rgba(255, 255, 255, .6),
-2px -2px 4px rgba(255, 255, 255, .4),
2px 2px 2px rgba(255, 255, 255, .05),
2px 2px 4px rgba(0, 0, 0, .1);
}
button:active {
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, .7),
inset -2px -2px 4px rgba(255, 255, 255, .5),
inset 2px 2px 2px rgba(255, 255, 255, .075),
inset 2px 2px 4px rgba(0, 0, 0, .15);
}
.table-container{
overflow-x:auto;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: black;
color: white;
}
tr:nth-child(even) {
background-color: #fefefe;
}
code {
display: block;
padding: 10px;
background-color: #282c34;
color: #abb2bf;
border-radius: 5px;
margin-bottom: 20px;
margin-top: 20px;
white-space: pre-wrap;
}
blockquote {
border-left: 4px solid #61dafb;
margin: 0;
margin-top: 20px;
padding: 10px 20px;
background-color: #fff;
color: #333;
}
a {
text-decoration: none;
color: #3498db;
font-weight: bold;
transition: color 0.3s ease-in-out;
}
a:hover {
color: #1abc9c;
}
@media screen and (max-width: 600px) {
table {
display: block;
}
thead, tbody, th, td, tr {
display: block;
}
th {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
border: none;
position: relative;
padding-left: 50%;
white-space: nowrap;
}
td:before {
position: absolute;
top: 12px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-th) ": ";
font-weight: bold;
}
code {
font-size: 14px;
}
blockquote {
font-size: 16px;
}
}
</style>
<link rel="stylesheet" href="${globalsCSS}"/>
</head>
<body x-timestamp="${Date.now()}">
Expand Down
21 changes: 21 additions & 0 deletions src/components/Diagnostics.ejs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<h3> Error Loading Preview </h3>
<% data.forEach(diagnostic => { %>
<div class="diagnostic">
<% if(diagnostic.severity == 0) { %>
<div class="left-bar high"></div>
<% } else if(diagnostic.severity == 1) { %>
<div class="left-bar medium"></div>
<% }else if(diagnostic.severity == 2) { %>
<div class="left-bar low"></div>
<% }else if(diagnostic.severity == 3) { %>
<div class="left-bar hint"></div>
<% } %>
<div class="content-box">
<h2 class="message"><span class="icon">⚠️</span><%= diagnostic.message %></h2>
<p class="secondary-text"><%= diagnostic.path %></p>
<pre class="code"><%= diagnostic.code %></pre>
<p class="source">Source: <%= diagnostic.source %></p>
<p class="severity">Severity: <%= diagnostic.severity %></p>
</div>
</div>
<% }) %>
Loading

0 comments on commit 046219f

Please sign in to comment.