Skip to content

Refresh design #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 14, 2020
Merged

Refresh design #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98a9850
started
jgauffin Feb 12, 2020
2f9f81e
UI refresh
jgauffin Feb 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions src/Server/Coderr.Server.SqlServer/Core/Accounts/QueryHandlers/GetAccountEmailByIdHandler.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
using System;
using System.Threading.Tasks;
using Coderr.Server.Abstractions.Boot;
using Coderr.Server.Api.Core.Accounts.Queries;
using Coderr.Server.Domain.Core.Account;
using DotNetCqs;

namespace Coderr.Server.SqlServer.Core.Accounts.QueryHandlers
{
[ContainerService]
public class GetAccountEmailByIdHandler : IQueryHandler<GetAccountEmailById, string>
{
private readonly IAccountRepository _accountRepository;
Expand Down
2 changes: 1 addition & 1 deletion src/Server/Coderr.Server.SqlServer/Core/ApiKeys/Queries/ListApiKeysHandler.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ public async Task<ListApiKeysResult> HandleAsync(IMessageContext context, ListAp
var keys =
await
_unitOfWork.ToListAsync(_mapper,
"SELECT ID, GeneratedKey ApiKey, ApplicationName FROM ApiKeys ORDER BY ApplicationName");
"SELECT Id, GeneratedKey ApiKey, ApplicationName FROM ApiKeys ORDER BY ApplicationName");
return new ListApiKeysResult {Keys = keys.ToArray()};
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/Server/Coderr.Server.Web/ClientApp/components/analyze/analyze.vue.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<analyze-menu />
<div class="cold">
<router-view></router-view>
<router-view class="main-view"></router-view>
</div>
</div>
</template>
Expand Down
4 changes: 3 additions & 1 deletion src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/close.vue.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@
<div class="CloseView">
<div class="row">
<div class="col">
<h2>Close incident</h2>
<div class="card">
<div class="card-header">
Close incident
</div>
<div class="card-body rounded">
<textarea class="form-control" v-model="solution" placeholder="How did you solve this error?" rows="10" id="solution" autofocus=""></textarea>
<button class="btn btn-primary" v-on:click.prevent="close">Close incident</button>
Expand Down
64 changes: 26 additions & 38 deletions src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/feedback.vue.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,37 @@
<template>
<div class="FeedbackView">
<div class="row">
<div class="col">
<h2>
Feedback
</h2>
<div class="card" v-show="feedbackList.length == 0" style="display: none">
<div class="card-header">
Feedback
</div>
<hr />
</div>
<div class="row mb-2">
<div class="col">
<router-link :to="{ name: 'analyzeIncident', params: { incidentId: incidentId }}" class="btn btn-light">&lt;&lt; Back to incident..</router-link>
</div>
</div>
<div class="row">
<div class="col" v-show="feedbackList.length == 0" style="display: none">
<div class="card">
<div class="card-body">
<h3>No feedback has been given.</h3>
<p>This page can contain error descriptions written by your users when this error occur.</p>
<p>Either write your own error page or activate one of our built in ones.</p>
<pre><code>//Example for ASP.NET MVC5
<div class="card-body">
<h6>No feedback has been given.</h6>
<p>This page can contain error descriptions written by your users when this error occur.</p>
<p>Either write your own error page or activate one of our built in ones.</p>
<pre><code>//Example for ASP.NET MVC5
Err.Configuration.UserInteraction.AskForFeedback = true;
Err.Configuration.DisplayErrorPages();
</code></pre>
<p>You can read more in our <a href="">documentation</a>.</p>
</div>
</div>
<p>You can read more in our <a href="">documentation</a>.</p>
</div>
<div class="feedback col" v-for="feedback in feedbackList">
<div class="card">
<div class="card-header">
Written {{feedback.writtenAtUtc|ago}}
</div>
<div class="card-body">
<div>
{{feedback.description}}
</div>
<div>
</div>
</div>
<div class="card-footer" v-if="feedback.email">
<a :href="'mailto:' + feedback.email">{{feedback.email}}</a>
</div>
</div>
<div class="card" v-for="feedback in feedbackList">
<div class="card-header">
Written {{feedback.writtenAtUtc|ago}} for
<span v-if="feedback.incidentId">
<router-link :to="{name: 'discoverIncident', params: { incidentId: feedback.incidentId }}">{{feedback.incidentName}}</router-link>
</span>
<span v-else> <router-link :to="{name: 'discoverFeedback', params: { applicationId: feedback.applicationId }}">{{feedback.applicationName}}</router-link></span>
</div>
<div class="card-body">
<div>
{{feedback.description}}
</div>
<div>
</div>
</div>
<div class="card-footer" v-if="feedback.email">
<a :href="'mailto:' + feedback.email">{{feedback.email}}</a>
</div>
</div>
</div>
Expand Down
140 changes: 61 additions & 79 deletions src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/incident.vue.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,84 @@
<template>
<div class="IncidentView">
<div>
<div class="row minimal-gutters">
<div class="col">
<div class="float-right">
<div class="btn-group" role="group">
<a class="btn btn-primary text-light" v-on:click="closeIncident">Close incident</a>
<div class="dropdown" style="display: inline-block">
<button type="button" class="btn btn-outline-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right">
<span class="dropdown-item" v-on:click="reAssign"><i class="fa-redo fa text-muted"></i> Re-assign</span>
<!--<span class="dropdown-item" v-on:click="addToTfs"><i class="fa-code-branch fa text-muted"></i> Add to TFS/VSTS</span>-->

</div>
<div class="row" style="margin-bottom: 20px">
<div class="col">
<div class="float-right">
<div class="btn-group" role="group">
<a class="btn btn-blue shadow" href="#" v-if="incident.IncidentState == 0" v-on:click.prevent="assignToMe">Assign to me</a>
<div class="dropdown" style="display: inline-block">
<button class="btn btn-white shadow dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<span class="dropdown-item" v-on:click="reAssign"><i class="fa-redo fa text-muted"></i> Re-assign</span>
</div>
</div>
</div>

<h3>
{{incident.Description}}
<span class="lead text-muted">[{{incident.FullName}}] </span>
</h3>
<div class="tags">
<span v-for="tag in incident.Tags" class="badge badge-dark">{{tag}}</span>
</div>
</div>
<h3 class="text-gray">{{incident.Description}} <small class="text-gray4">[{{incident.FullName}}]</small></h3>
</div>
<div class="row minimal-gutters" v-if="incident.Solution">
<div class="col">
<div class="card">
<div class="card-header">
Previous solution ({{incident.SolvedAtUtc|ago}})
</div>
<div class="row">
<div class="col-xl-8 col-lg-6">
<div class="card">
<div class="card-header">
Stack trace
</div>
<div class="card-body pt-0">
<div class="tags">
<span v-for="tag in incident.Tags" class="badge badge-dark">{{tag}}</span>
</div>
<div class="card-body">
<div v-html="incident.Solution"></div>
<div v-if="highlights.length > 0" class="p-3">
<table class="w-100">
<tr>
<th>Application</th>
<td>{{applicationName}}</td>
</tr>
<tr v-for="high in highlights">
<th>{{high.name}}</th>
<td style="width: 100%">{{high.value}}</td>
</tr>
</table>
</div>
<pre style="min-height: 200px"><code>{{incident.StackTrace}}</code></pre>
</div>
</div>

</div>
<div class="row minimal-gutters">
<div class="col-xl-8 col-lg-6">
<div class="card">
<div class="card-body">

<div v-if="highlights.length > 0" class="p-3">
<table class="w-100">
<tr>
<th>Application</th>
<td>{{applicationName}}</td>
</tr>
<tr v-for="high in highlights">
<th>{{high.name}}</th>
<td style="width: 100%">{{high.value}}</td>
</tr>
</table>
</div>

<h3>Stack trace</h3>
<pre style="min-height: 200px"><code>{{incident.StackTrace}}</code></pre>
</div>
<div class="col-xl-4 col-lg-6">
<div class="card" v-if="incident.Solution">
<div class="card-header">
Previous solution ({{incident.SolvedAtUtc|ago}})
</div>
<div class="card-body">
<div v-html="incident.Solution"></div>
</div>
</div>
<div class="col-xl-4 col-lg-6">
<div class="card" v-if="incident.Facts && incident.Facts.length > 0">
<div class="card-body">
<h3>Quick facts</h3>
<div>
<table class="table table-borderless">
<tbody>
<tr v-for="prop in incident.Facts" v-if="prop.Value != '0'">
<td>{{prop.Title}}</td>
<td><span v-html="prop.Value"></span></td>
</tr>
<tr v-for="rel in incident.RelatedIncidents">
<td>Related Incident</td>
<td><a class="text-red" :href="'/discover/incidents/' + rel.ApplicationId + '/incident/' + rel.IncidentId">{{rel.Title}}</a></td>
</tr>
<div class="card" v-if="incident.Facts && incident.Facts.length > 0">
<div class="card-header">
Quick facts
</div>
<div class="card-body">
<table class="table">
<tbody>
<tr v-for="prop in incident.Facts" v-if="prop.Value != '0'">
<td>{{prop.Title}}</td>
<td><span v-html="prop.Value"></span></td>
</tr>
<tr v-for="rel in incident.RelatedIncidents">
<td>Related Incident</td>
<td><a class="text-red" :href="'/discover/incidents/' + rel.ApplicationId + '/incident/' + rel.IncidentId">{{rel.Title}}</a></td>
</tr>

</tbody>
</table>
</div>
</div>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<context-navigator :incidentId="incidentId" :showAnalyzeFooter="true" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<context-navigator :incidentId="incidentId" :showAnalyzeFooter="true"/>
</div>

</div>
<div id="assignToModal" style="display:none">
<div id="assignToModal" style="display: none">
<div class="modal-body">
<div v-for="user in team" class="mb-2">
<button class="btn btn-primary btn-block" v-on:click.prevent="assignTo(user.id, $event)" :value="user.id" data-dismiss="modal">
Expand Down
26 changes: 18 additions & 8 deletions src/Server/Coderr.Server.Web/ClientApp/components/analyze/incidents/report.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ export default class AnalyzeReportComponent extends Vue {
reportId: number;
incidentId: number;

userFeedback: string|null = null;
userFeedback: string | null = null;
userOrEmail = 'user';

reports: GetReportListResultItem[] = [];
showNextButton= true;
showPrevButton=false;
showNextButton = true;
showPrevButton = false;

contextCollections: GetReportResultContextCollection[] = [];
currentCollectionName = '';
Expand Down Expand Up @@ -62,7 +62,7 @@ export default class AnalyzeReportComponent extends Vue {
this.loadReport(this.reports[this.currentIndex].Id);
}
}

nextReport() {
this.currentIndex++;
this.indexInTotalSet++;
Expand All @@ -76,7 +76,7 @@ export default class AnalyzeReportComponent extends Vue {
this.loadReport(this.reports[this.currentIndex].Id);
}


}

private checkNavigationLinks() {
Expand Down Expand Up @@ -122,7 +122,7 @@ export default class AnalyzeReportComponent extends Vue {
if (!isFound) {
this.currentCollectionName = report.ContextCollections[0].Name;
}

this.loadCollection(this.currentCollectionName);
} else {
this.currentCollection = new GetReportResultContextCollection();
Expand All @@ -144,7 +144,7 @@ export default class AnalyzeReportComponent extends Vue {
q.PageSize = this.pageSize;
if (pageNumber) {
q.PageNumber = pageNumber;

}

AppRoot.Instance.apiClient.query<GetReportListResult>(q)
Expand Down Expand Up @@ -172,7 +172,7 @@ export default class AnalyzeReportComponent extends Vue {

this.checkNavigationLinks();
}

});
}

Expand All @@ -199,6 +199,16 @@ export default class AnalyzeReportComponent extends Vue {
if (kvp.Value.substr(0, 1) !== '<') {
kvp.Value = '<img src="data:image/png;base64, ' + kvp.Value + '" />';
}
if (kvp.Key === 'Cookie') {
if (kvp.Value.length > 1000)
kvp.Value = kvp.Value.substring(0, 1000) + "[...]";
}
}
} else {
for (var j = 0; j < this.currentCollection.Properties.length; j++) {
var kvp = this.currentCollection.Properties[j];
if (kvp.Value.length > 100)
kvp.Value = kvp.Value.replace(/(.{100})/g, "$1<br>");
}
}
return;
Expand Down
Loading