updating descriptions
This commit is contained in:
morsh
Родитель
8714b03c62
Коммит
1bf5d2d541
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 4.1 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 8.7 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 16 KiB |
Двоичные данные
build/images/bot-framework-preview.png
Двоичные данные
build/images/bot-framework-preview.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 117 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 36 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 13 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 7.4 KiB |
|
|
@ -42,6 +42,7 @@ interface IHomeState extends ISetupConfig {
|
|||
creationState?: string;
|
||||
infoVisible?: boolean;
|
||||
infoHtml?: string;
|
||||
infoTitle?: string;
|
||||
}
|
||||
|
||||
export default class Home extends React.Component<any, IHomeState> {
|
||||
|
|
@ -64,6 +65,7 @@ export default class Home extends React.Component<any, IHomeState> {
|
|||
|
||||
infoVisible: false,
|
||||
infoHtml: '',
|
||||
infoTitle: ''
|
||||
};
|
||||
|
||||
private _fieldId;
|
||||
|
|
@ -159,8 +161,8 @@ export default class Home extends React.Component<any, IHomeState> {
|
|||
ConfigurationActions.createDashboard(dashboard);
|
||||
}
|
||||
|
||||
onOpenInfo(html: string) {
|
||||
this.setState({ infoVisible: true, infoHtml: html });
|
||||
onOpenInfo(html: string, title: string) {
|
||||
this.setState({ infoVisible: true, infoHtml: html, infoTitle: title });
|
||||
}
|
||||
|
||||
onCloseInfo() {
|
||||
|
|
@ -169,7 +171,7 @@ export default class Home extends React.Component<any, IHomeState> {
|
|||
|
||||
render() {
|
||||
let { loaded, redirectUrl, templates, selectedTemplateId, template } = this.state;
|
||||
let { infoVisible, infoHtml } = this.state;
|
||||
let { infoVisible, infoHtml, infoTitle } = this.state;
|
||||
|
||||
if (!redirectUrl) {
|
||||
redirectUrl = window.location.protocol + '//' + window.location.host + '/auth/openid/return';
|
||||
|
|
@ -185,15 +187,17 @@ export default class Home extends React.Component<any, IHomeState> {
|
|||
|
||||
let createCard = (temp, index) => (
|
||||
<div key={index} className="md-cell" style={styles.card}>
|
||||
<Card className="md-block-centered" key={index} >
|
||||
<Card
|
||||
className="md-block-centered"
|
||||
key={index}
|
||||
style={{ backgroundImage: `url(${temp.preview})`}} >
|
||||
<Media>
|
||||
<img src={temp.preview} role="presentation" style={styles.image} />
|
||||
<MediaOverlay>
|
||||
<CardTitle title={temp.name} subtitle={temp.description} />
|
||||
</MediaOverlay>
|
||||
</Media>
|
||||
<CardActions style={styles.fabs}>
|
||||
<Button floating secondary onClick={this.onOpenInfo.bind(this, temp.html || '<p>No info available</p>')}>
|
||||
<Button floating secondary onClick={this.onOpenInfo.bind(this, temp.html || '<p>No info available</p>', temp.name)}>
|
||||
info
|
||||
</Button>
|
||||
<Button floating primary onClick={this.onNewTemplateSelected.bind(this, temp.id)} style={styles.primaryFab}>
|
||||
|
|
@ -224,6 +228,7 @@ export default class Home extends React.Component<any, IHomeState> {
|
|||
|
||||
<Dialog
|
||||
id="templateInfoDialog"
|
||||
title={infoTitle}
|
||||
visible={infoVisible}
|
||||
onHide={this.onCloseInfo}
|
||||
dialogStyle={{ width: '80%' }}
|
||||
|
|
@ -231,7 +236,7 @@ export default class Home extends React.Component<any, IHomeState> {
|
|||
aria-label="Info"
|
||||
focusOnMount={false}
|
||||
>
|
||||
<div className="md-grid">
|
||||
<div className="md-grid" style={{ padding: 20 }}>
|
||||
{renderHTML(infoHtml)}
|
||||
</div>
|
||||
</Dialog>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export const config: IDashboardConfig = /*return*/ {
|
|||
icon: "dashboard",
|
||||
url: "graph_types",
|
||||
description: 'Display the various graph types in action',
|
||||
preview: '/images/bot-framework-preview.png',
|
||||
preview: '/images/default.png',
|
||||
html: ``,
|
||||
config: {
|
||||
connections: { },
|
||||
|
|
@ -8,8 +8,8 @@ export const config: IDashboardConfig = /*return*/ {
|
|||
icon: "equalizer",
|
||||
url: "mbf_advanced_analytics",
|
||||
description: "Bot Framework Advanced Analytics Dashboard",
|
||||
preview: "/images/bot-framework-preview.png",
|
||||
html: ``,
|
||||
preview: "/images/default.png",
|
||||
html: `POC - Additional info will be added in the future`,
|
||||
config: {
|
||||
connections: { },
|
||||
layout: {
|
||||
|
|
|
|||
|
|
@ -8,11 +8,10 @@ export const config: IDashboardConfig = /*return*/ {
|
|||
icon: "av_timer",
|
||||
url: "mbf_advanced_health",
|
||||
description: "Bot Framework Advanced Health Dashboard",
|
||||
preview: "/images/bot-framework-preview.png",
|
||||
html: ``,
|
||||
preview: "/images/default.png",
|
||||
html: `POC - Additional info will be added in the future`,
|
||||
config: {
|
||||
connections: {
|
||||
},
|
||||
connections: { },
|
||||
layout: {
|
||||
isDraggable: true,
|
||||
isResizable: true,
|
||||
|
|
|
|||
|
|
@ -7,9 +7,15 @@ export const config: IDashboardConfig = /*return*/ {
|
|||
name: "Azure Sample",
|
||||
icon: "dashboard",
|
||||
url: "azure_sample",
|
||||
description: "A basic azure sample to get connected to resources",
|
||||
preview: "/images/bot-framework-preview.png",
|
||||
html: `Azure sample dashboard`,
|
||||
description: "A basic azure ARM sample",
|
||||
preview: "/images/azure.png",
|
||||
html: `
|
||||
<div>
|
||||
A basic sample to show how to get resources from
|
||||
<a href='https://docs.microsoft.com/en-us/azure/azure-resource-manager/resource-group-overview' target="_blank">ARM</a>
|
||||
(Azure) and display them on a dashboard
|
||||
</div>
|
||||
`,
|
||||
config: {
|
||||
connections: { },
|
||||
layout: {
|
||||
|
|
|
|||
|
|
@ -8,39 +8,28 @@ export const config: IDashboardConfig = /*return*/ {
|
|||
icon: "dashboard",
|
||||
url: "bot_analytics_inst",
|
||||
description: 'Microsoft Bot Framework based analytics',
|
||||
preview: '/images/bot-framework-preview.png',
|
||||
html: `<div>
|
||||
<h1>Bot Analytics Instrumented Dashboard</h1>
|
||||
<h2>Additional features</h2>
|
||||
<ul>
|
||||
<li>Instrumentation
|
||||
<ul>
|
||||
<li>Using this view, enables better and deeper analytics based on instrumention plugins</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Background</h2>
|
||||
<p>
|
||||
This dashboard is designed to enable querying data on top of <a href="https://docs.microsoft.com/en-us/azure/application-insights/app-insights-analytics" target="_blank">Application Insights Analytics</a>.<br/>
|
||||
You can also extend it by developing additional <b>Data Sources</b> or <b>Visual Components</b>.
|
||||
</p>
|
||||
preview: '/images/bot-ai-cs.png',
|
||||
html: `
|
||||
<div>
|
||||
This dashboard is built to view events sent by Microsoft Bot Framework based bot.
|
||||
<br/>
|
||||
<br/>
|
||||
<h2>Getting the data to show</h2>
|
||||
<p>
|
||||
To see all the capabilities of this dashboard, it is recommended to integrate you bot with one of the following:<br/>
|
||||
<a href="https://github.com/CatalystCode/botbuilder-instrumentation" target="_blank">Node.js Telemetry Plugin</a>
|
||||
<br/>
|
||||
<h2>Telemetry plugin</h2>
|
||||
<p>
|
||||
To see all the capabilities of this dashboard, it is recommended to integrate you bot with one of the following:<br/>
|
||||
<a href="https://github.com/CatalystCode/bot-fmk-logging" target="_blank">Node.js Telemetry Plugin</a><br/>
|
||||
<a href="https://trpp24botsamples.visualstudio.com/_git/Code?path=%2FCSharp%2Fsample-Telemetry&version=GBmaster&_a=contents " target="_blank">C# Telemetry Plugin</a><br/>
|
||||
This will enable the bot to send additional telemetry information to Application Insights.
|
||||
<br/><br/>
|
||||
Keep in mind, the data that is stored on Application Insights is not Hippa compliant.
|
||||
</p>
|
||||
<br/>
|
||||
<h2>Additional Learnings</h2>
|
||||
<p>
|
||||
This dashboard uses <a href="https://docs.microsoft.com/en-us/azure/application-insights/app-insights-analytics" target="_blank">Application Insights Analytics</a>.<br/>
|
||||
You can also run queries directly using <a href="https://dev.applicationinsights.io/apiexplorer/query" target="_blank">API Explorer</a>
|
||||
</p>
|
||||
</div>`,
|
||||
<a href="https://github.com/CatalystCode/bot-sample-telemetry" target="_blank">C# Telemetry Plugin</a><br/>
|
||||
This will enable the bot to send additional telemetry information to Application Insights.
|
||||
</p>
|
||||
<br/>
|
||||
<h2>Additional Learnings</h2>
|
||||
<p>
|
||||
This dashboard uses <a href="https://docs.microsoft.com/en-us/azure/application-insights/app-insights-analytics" target="_blank">Application Insights Analytics</a>.<br/>
|
||||
You can also run queries directly using <a href="https://dev.applicationinsights.io/apiexplorer/query" target="_blank">API Explorer</a>
|
||||
</p>
|
||||
</div>
|
||||
`,
|
||||
config: {
|
||||
connections: { },
|
||||
layout: {
|
||||
|
|
|
|||
|
|
@ -3,44 +3,38 @@ import * as _ from 'lodash';
|
|||
|
||||
// The following line is important to keep in that format so it can be rendered into the page
|
||||
export const config: IDashboardConfig = /*return*/ {
|
||||
id: 'bot_analytics_dashboard',
|
||||
id: 'bot_analytics_dashboard',
|
||||
name: 'Bot Analytics Basic Dashboard',
|
||||
icon: "dashboard",
|
||||
url: "bot_analytics_dashboard",
|
||||
description: 'Microsoft Bot Framework based analytics',
|
||||
preview: '/images/bot-framework-preview.png',
|
||||
html: `<div>
|
||||
<h1>Bot Analytics Dashboard</h1>
|
||||
<h2>Additional features</h2>
|
||||
<ul>
|
||||
<li>Modes
|
||||
<ul>
|
||||
<li>Allows fast switching between different views</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Background</h2>
|
||||
<p>
|
||||
This dashboard is designed to enable querying data on top of <a href="https://docs.microsoft.com/en-us/azure/application-insights/app-insights-analytics" target="_blank">Application Insights Analytics</a>.<br/>
|
||||
You can also extend it by developing additional <b>Data Sources</b> or <b>Visual Components</b>.
|
||||
</p>
|
||||
preview: '/images/bot-ai-base.png',
|
||||
html: `
|
||||
<div>
|
||||
This dashboard is built to view the events being sent by the Bot Framework sent for a registered bot.
|
||||
<br/>
|
||||
<br/>
|
||||
<h2>Getting Additional Telemetry</h2>
|
||||
<p>
|
||||
Parts of this dashboard will not be functional unless you add additional telemetry with one of the following plugins:
|
||||
<br/>
|
||||
<h2>Telemetry plugin</h2>
|
||||
<p>
|
||||
To see all the capabilities of this dashboard, it is recommended to integrate you bot with one of the following:<br/>
|
||||
<a href="https://github.com/CatalystCode/bot-fmk-logging" target="_blank">Node.js Telemetry Plugin</a><br/>
|
||||
<a href="https://trpp24botsamples.visualstudio.com/_git/Code?path=%2FCSharp%2Fsample-Telemetry&version=GBmaster&_a=contents " target="_blank">C# Telemetry Plugin</a><br/>
|
||||
This will enable the bot to send additional telemetry information to Application Insights.
|
||||
<br/><br/>
|
||||
Keep in mind, the data that is stored on Application Insights is not Hippa compliant.
|
||||
</p>
|
||||
<a href="https://github.com/CatalystCode/botbuilder-instrumentation" target="_blank">Node.js Telemetry Plugin</a>
|
||||
<br/>
|
||||
<h2>Additional Learnings</h2>
|
||||
<p>
|
||||
This dashboard uses <a href="https://docs.microsoft.com/en-us/azure/application-insights/app-insights-analytics" target="_blank">Application Insights Analytics</a>.<br/>
|
||||
You can also run queries directly using <a href="https://dev.applicationinsights.io/apiexplorer/query" target="_blank">API Explorer</a>
|
||||
</p>
|
||||
</div>`,
|
||||
<a href="https://github.com/CatalystCode/bot-sample-telemetry" target="_blank">C# Telemetry Plugin</a><br/>
|
||||
This will enable the bot to send additional telemetry information to Application Insights.
|
||||
<br/>
|
||||
<br/>
|
||||
If you are connecting your bot to one of these instrumentation modules, <b>Bot Analytics Instrumented Dashboard</b> will give
|
||||
you a better view of your data.
|
||||
</p>
|
||||
<h2>Additional Learnings</h2>
|
||||
<p>
|
||||
This dashboard uses <a href="https://docs.microsoft.com/en-us/azure/application-insights/app-insights-analytics" target="_blank">Application Insights Analytics</a>.
|
||||
<br/>
|
||||
You can also run queries directly using <a href="https://dev.applicationinsights.io/apiexplorer/query" target="_blank">API Explorer</a>
|
||||
</p>
|
||||
</div>
|
||||
`,
|
||||
config: {
|
||||
connections: { },
|
||||
layout: {
|
||||
|
|
|
|||
|
|
@ -8,37 +8,41 @@ export const config: IDashboardConfig = /*return*/ {
|
|||
icon: 'question_answer',
|
||||
url: 'cosmosdb_handoff',
|
||||
description: 'Monitor bot and hand-off to human conversations',
|
||||
preview: '/images/bot-framework-preview.png',
|
||||
html: `<div>
|
||||
<h1>Hand-off to human</h1>
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Displays total users including how many are talking with bot, human agent or waiting for an agent.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Displays average time waiting (in secs) for human agent to connect and respond to user,
|
||||
including the shortest and longest times.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Displays total number of transcripts with bot or with human agent.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Displays timeline of conversations with bot and human.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Displays list of active conversations with sentiment score.</p>
|
||||
<p>If there is a conversation of interest this can be selected to show the option to hand-off to human.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<span>Refer to the </span>
|
||||
<span>
|
||||
<a href="https://github.com/CatalystCode/ibex-dashboard/blob/master/docs/bot-framework.md" target="_blank">
|
||||
bot-framework
|
||||
</a> docs for setup instructions.</span>
|
||||
</p>
|
||||
</div>`,
|
||||
preview: '/images/default.png',
|
||||
html: `
|
||||
<div>
|
||||
This dashboard displays the status for a bot-to-human handoff system.
|
||||
<br/>
|
||||
<br/>
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<p>Displays total users including how many are talking with bot, human agent or waiting for an agent.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Displays average time waiting (in secs) for human agent to connect and respond to user,
|
||||
including the shortest and longest times.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Displays total number of transcripts with bot or with human agent.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Displays timeline of conversations with bot and human.</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>Displays list of active conversations with sentiment score.</p>
|
||||
<p>If there is a conversation of interest this can be selected to show the option to hand-off to human.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<span>Refer to the </span>
|
||||
<span>
|
||||
<a href="https://github.com/CatalystCode/ibex-dashboard/blob/master/docs/bot-framework.md" target="_blank">
|
||||
bot-framework
|
||||
</a> docs for setup instructions.</span>
|
||||
</p>
|
||||
</div>
|
||||
`,
|
||||
config: {
|
||||
connections: {
|
||||
'bot-framework': {
|
||||
|
|
|
|||
|
|
@ -8,25 +8,36 @@ export const config: IDashboardConfig = /*return*/ {
|
|||
icon: "chat",
|
||||
url: "qna",
|
||||
description: "Sample QnA Maker dashboard",
|
||||
preview: "/images/bot-framework-preview.png",
|
||||
html: `<div>
|
||||
<h1>Sample QnA Maker dashboard</h1>
|
||||
<p>Displays QnA Maker service usage metrics.</p>
|
||||
<h3><a href="https://qnamaker.ai" target="_blank">What's QnA Make Service?</a></h3>
|
||||
<h3>Requirements</h3>
|
||||
<p>To send the QnA Maker service data to Applications Insight it's necessary to use the <a href="https://www.npmjs.com/package/botbuilder-cognitiveservices" target="_blank">botbuilder-cognitiveservices</a> on the bot and override the
|
||||
<b>defaultWaitNextMessage(session, qnaMakerResult)</b> function to call the <b>trackQNAEvent(context, userQuery, kbQuestion, kbAnswer, score)</b> function of the
|
||||
<a href="https://www.npmjs.com/package/botbuilder-instrumentation" target="_blank">botbuilder-instrumentation</a>
|
||||
<p>That will enable the bot to send additional telemetries to Application Insight with the QnA Maker service information
|
||||
</p>
|
||||
<p>
|
||||
<span>Refer to the </span>
|
||||
<span>
|
||||
<a href="https://github.com/CatalystCode/ibex-dashboard/blob/master/docs/bot-framework.md" target="_blank">
|
||||
bot-framework
|
||||
</a> docs for setup instructions.</span>
|
||||
</p>
|
||||
</div>`, // info about how to configure QnA and how to use botbuilder-instrumentation
|
||||
preview: "/images/default.png",
|
||||
html: `
|
||||
<div>
|
||||
<p>Displays <a href="https://qnamaker.ai" target="_blank">QnA Maker service</a> usage metrics.</p>
|
||||
<h3>Requirements</h3>
|
||||
<p>To send the QnA Maker service data to Applications Insight it's necessary to use the
|
||||
<a href="https://www.npmjs.com/package/botbuilder-cognitiveservices" target="_blank">botbuilder-cognitiveservices</a>
|
||||
on the bot and override the
|
||||
<br/>
|
||||
<b>defaultWaitNextMessage(session, qnaMakerResult)</b>
|
||||
<br/>
|
||||
function to call the
|
||||
<br/>
|
||||
<b>trackQNAEvent(context, userQuery, kbQuestion, kbAnswer, score)</b>
|
||||
<br/>
|
||||
function of the
|
||||
<br/>
|
||||
<a href="https://www.npmjs.com/package/botbuilder-instrumentation#sending-logs-for-qna-maker-service" target="_blank">botbuilder-instrumentation</a>
|
||||
<br/>
|
||||
<p>That will enable the bot to send additional telemetries to Application Insight with the QnA Maker service information
|
||||
</p>
|
||||
<p>
|
||||
<span>Refer to the </span>
|
||||
<span>
|
||||
<a href="https://github.com/CatalystCode/ibex-dashboard/blob/master/docs/bot-framework.md" target="_blank">
|
||||
bot-framework
|
||||
</a> docs for setup instructions.</span>
|
||||
</p>
|
||||
</div>
|
||||
`,
|
||||
config: {
|
||||
connections: {},
|
||||
layout: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
/// <reference path="../../../client/@types/types.d.ts"/>
|
||||
import * as _ from 'lodash';
|
||||
|
||||
// The following line is important to keep in that format so it can be rendered into the page
|
||||
export const config: IDashboardConfig = /*return*/ {
|
||||
id: "basic_sample",
|
||||
name: "Basic Sample",
|
||||
icon: "extension",
|
||||
url: "basic_sample",
|
||||
description: "A basic sample to understand a basic dashboard",
|
||||
preview: "/images/sample.png",
|
||||
html: `
|
||||
<div>
|
||||
This is a basic sample dashboard, with JSON based sample data source, to show how data from different data sources
|
||||
can be manipulated and connected to visual components.
|
||||
</div>
|
||||
`,
|
||||
config: {
|
||||
connections: {},
|
||||
layout: {
|
||||
isDraggable: true,
|
||||
isResizable: true,
|
||||
rowHeight: 30,
|
||||
verticalCompact: false,
|
||||
cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
|
||||
breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
|
||||
}
|
||||
},
|
||||
dataSources: [
|
||||
{
|
||||
id: "samples",
|
||||
type: "Sample",
|
||||
params: {
|
||||
samples: {
|
||||
data_for_pie: [
|
||||
{ name: "value1", value: 60 },
|
||||
{ name: "value2", value: 10 },
|
||||
{ name: "value3", value: 30 }
|
||||
],
|
||||
scorecard_data_value: 3000000,
|
||||
scorecard_data_subvalue: 4000
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
filters: [],
|
||||
elements: [
|
||||
{
|
||||
id: "pie_sample1",
|
||||
type: "PieData",
|
||||
title: "Pie Sample 1",
|
||||
subtitle: "Description of pie sample 1",
|
||||
size: { w: 5, h: 8 },
|
||||
dependencies: { values: "samples:data_for_pie" },
|
||||
props: { showLegend: true }
|
||||
},
|
||||
{
|
||||
id: "pie_sample2",
|
||||
type: "PieData",
|
||||
title: "Pie Sample 2",
|
||||
subtitle: "Hover on the values to see the difference from sample 1",
|
||||
size: { w: 5, h: 8 },
|
||||
dependencies: { values: "samples:data_for_pie" },
|
||||
props: { showLegend: true, compact: true }
|
||||
},
|
||||
{
|
||||
id: "scorecard_sample1",
|
||||
type: "Scorecard",
|
||||
title: "Value",
|
||||
size: { w: 1, h: 3 },
|
||||
dependencies: {
|
||||
value: "samples:scorecard_data_value",
|
||||
color: "::#2196F3",
|
||||
icon: "::av_timer"
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "scorecard_sample2",
|
||||
type: "Scorecard",
|
||||
title: "Same Value",
|
||||
size: { w: 1, h: 3 },
|
||||
dependencies: {
|
||||
value: "samples:scorecard_data_value",
|
||||
color: "::#2196F3",
|
||||
icon: "::av_timer",
|
||||
subvalue: "samples:scorecard_data_subvalue"
|
||||
},
|
||||
props: {
|
||||
subheading: "Value #2"
|
||||
}
|
||||
}
|
||||
],
|
||||
dialogs: []
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче