mirror of
https://github.com/ZeppelinBot/Zeppelin.git
synced 2025-05-18 07:35:02 +00:00
dashboard: separate plugin usage/configuration, add usage guide + configuration guide
This commit is contained in:
Dragory
parent
616b3be2fd
commit
5006ae4962
10 changed files with 524 additions and 85 deletions
|
|
@ -4,92 +4,134 @@
|
|||
</div>
|
||||
<div v-else>
|
||||
<h1 class="z-title is-1 mb-1">{{ data.info.prettyName || data.name }}</h1>
|
||||
<p class="mb-1">
|
||||
Name in config: <code>{{ data.name }}</code>
|
||||
</p>
|
||||
|
||||
<div v-if="data.info.description" class="content" v-html="renderMarkdown(data.info.description)"></div>
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li v-bind:class="{'is-active': tab === 'usage'}">
|
||||
<router-link v-bind:to="'/docs/plugins/' + pluginName + '/usage'">Usage</router-link>
|
||||
</li>
|
||||
<li v-bind:class="{'is-active': tab === 'configuration'}">
|
||||
<router-link v-bind:to="'/docs/plugins/' + pluginName + '/configuration'">Configuration</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p class="mt-1 mb-1">
|
||||
To enable this plugin with default configuration, add <code>{{ data.name }}: {}</code> to the <code>plugins</code> list in config
|
||||
</p>
|
||||
<!-- Usage tab -->
|
||||
<div class="usage" v-if="tab === 'usage'">
|
||||
<!-- Description -->
|
||||
<MarkdownBlock :content="data.info.description" class="content"></MarkdownBlock>
|
||||
|
||||
<h2 id="default-configuration" class="z-title is-2 mt-2 mb-1">Default configuration</h2>
|
||||
<CodeBlock lang="yaml">{{ renderConfiguration(data.options) }}</CodeBlock>
|
||||
<b-collapse :open="false" class="card mt-1 mb-1">
|
||||
<div slot="trigger" slot-scope="props" class="card-header" role="button">
|
||||
<p class="card-header-title">Config schema</p>
|
||||
<a class="card-header-icon">
|
||||
<b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
|
||||
</a>
|
||||
<!-- Usage guide -->
|
||||
<div v-if="data.info.usageGuide">
|
||||
<h2 id="usage-guide" class="z-title is-2 mt-2 mb-1">Usage guide</h2>
|
||||
<MarkdownBlock :content="data.info.usageGuide" class="content"></MarkdownBlock>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<CodeBlock lang="plain">{{ data.configSchema }}</CodeBlock>
|
||||
</div>
|
||||
</b-collapse>
|
||||
|
||||
<div v-if="data.commands.length">
|
||||
<h2 id="commands" class="z-title is-2 mt-2 mb-1">Commands</h2>
|
||||
<div v-for="command in data.commands">
|
||||
<h3 class="z-title is-3 mt-2 mb-1">!{{ command.trigger }}</h3>
|
||||
<div v-if="command.config.requiredPermission">
|
||||
Permission: <code>{{ command.config.requiredPermission }}</code>
|
||||
</div>
|
||||
<div v-if="command.config.info && command.config.info.basicUsage">
|
||||
Basic usage: <code>{{ command.config.info.basicUsage }}</code>
|
||||
</div>
|
||||
<div v-if="command.config.aliases && command.config.aliases.length">
|
||||
Shortcut:
|
||||
<code style="margin-right: 4px" v-for="alias in command.config.aliases">!{{ alias }}</code>
|
||||
</div>
|
||||
<div v-if="command.config.info && command.config.info.description" class="content mt-1 mb-1" v-html="renderMarkdown(command.config.info.description)"></div>
|
||||
|
||||
<b-collapse :open="false" class="card mt-1 mb-1">
|
||||
<div slot="trigger" slot-scope="props" class="card-header" role="button">
|
||||
<p class="card-header-title">Additional information</p>
|
||||
<a class="card-header-icon">
|
||||
<b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
|
||||
</a>
|
||||
<!-- Command list -->
|
||||
<div v-if="data.commands.length">
|
||||
<h2 id="commands" class="z-title is-2 mt-2 mb-1">Commands</h2>
|
||||
<div v-for="command in data.commands">
|
||||
<h3 class="z-title is-3 mt-2 mb-1">!{{ command.trigger }}</h3>
|
||||
<div v-if="command.config.requiredPermission">
|
||||
Permission: <code>{{ command.config.requiredPermission }}</code>
|
||||
</div>
|
||||
<div v-if="command.config.info && command.config.info.basicUsage">
|
||||
Basic usage: <code>{{ command.config.info.basicUsage }}</code>
|
||||
</div>
|
||||
<div v-if="command.config.aliases && command.config.aliases.length">
|
||||
Shortcut:
|
||||
<code style="margin-right: 4px" v-for="alias in command.config.aliases">!{{ alias }}</code>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
Signatures:
|
||||
<ul class="z-list z-ul">
|
||||
<li>
|
||||
<code>
|
||||
!{{ command.trigger }}
|
||||
<span v-for="param in command.parameters">{{ renderParameter(param) }} </span>
|
||||
</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="mt-2" v-if="command.parameters.length">
|
||||
Command arguments:
|
||||
<MarkdownBlock v-if="command.config.info && command.config.info.description" :content="command.config.info.description" class="content mt-1 mb-1"></MarkdownBlock>
|
||||
|
||||
<b-collapse :open="false" class="card mt-1 mb-1">
|
||||
<div slot="trigger" slot-scope="props" class="card-header" role="button">
|
||||
<p class="card-header-title">Additional information</p>
|
||||
<a class="card-header-icon">
|
||||
<b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
Signatures:
|
||||
<ul class="z-list z-ul">
|
||||
<li v-for="param in command.parameters">
|
||||
<code>{{ renderParameter(param) }}</code>
|
||||
<router-link :to="'/docs/descriptions/argument-types#' + (param.type || 'string')">{{ param.type || 'string' }}</router-link>
|
||||
<div v-if="command.config.info && command.config.info.parameterDescriptions && command.config.info.parameterDescriptions[param.name]" class="content">
|
||||
{{ renderMarkdown(command.config.info.parameterDescriptions[param.name]) }}
|
||||
</div>
|
||||
<li>
|
||||
<code>
|
||||
!{{ command.trigger }}
|
||||
<span v-for="param in command.parameters">{{ renderParameter(param) }} </span>
|
||||
</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="mt-2" v-if="command.parameters.length">
|
||||
Command arguments:
|
||||
<ul class="z-list z-ul">
|
||||
<li v-for="param in command.parameters">
|
||||
<code>{{ renderParameter(param) }}</code>
|
||||
<router-link :to="'/docs/descriptions/argument-types#' + (param.type || 'string')">{{ param.type || 'string' }}</router-link>
|
||||
<MarkdownBlock v-if="command.config.info && command.config.info.parameterDescriptions && command.config.info.parameterDescriptions[param.name]"
|
||||
:content="command.config.info.parameterDescriptions[param.name]"
|
||||
class="content">
|
||||
</MarkdownBlock>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration tab -->
|
||||
<div class="configuration" v-if="tab === 'configuration'">
|
||||
<!-- Basic config info -->
|
||||
<p class="mb-1">
|
||||
Name in config: <code>{{ data.name }}</code>
|
||||
</p>
|
||||
<p class="mt-1 mb-1">
|
||||
To enable this plugin with default configuration, add <code>{{ data.name }}: {}</code> to the <code>plugins</code> list in config
|
||||
</p>
|
||||
|
||||
<!-- Configuration guide -->
|
||||
<div v-if="data.info.configurationGuide">
|
||||
<h2 id="configuration-guide" class="z-title is-2 mt-2 mb-1">Configuration guide</h2>
|
||||
<MarkdownBlock :content="data.info.configurationGuide" class="content"></MarkdownBlock>
|
||||
</div>
|
||||
|
||||
<!-- Default configuration -->
|
||||
<h2 id="default-configuration" class="z-title is-2 mt-2 mb-1">Default configuration</h2>
|
||||
<CodeBlock lang="yaml">{{ renderConfiguration(data.defaultOptions) }}</CodeBlock>
|
||||
|
||||
<!-- Config schema -->
|
||||
<h2 id="config-schema" class="z-title is-2 mt-2 mb-1">Config schema</h2>
|
||||
<b-collapse :open="false" class="card mt-1 mb-1">
|
||||
<div slot="trigger" slot-scope="props" class="card-header" role="button">
|
||||
<p class="card-header-title">Click to expand</p>
|
||||
<a class="card-header-icon">
|
||||
<b-icon :icon="props.open ? 'menu-up' : 'menu-down'"></b-icon>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<CodeBlock lang="plain">{{ data.configSchema }}</CodeBlock>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";
|
||||
import {mapState} from "vuex";
|
||||
import marked from "marked";
|
||||
import yaml from "js-yaml";
|
||||
import CodeBlock from "./CodeBlock";
|
||||
import MarkdownBlock from "./MarkdownBlock";
|
||||
import Tabs from "../shared/Tabs";
|
||||
|
||||
const validTabs = ['usage', 'configuration'];
|
||||
const defaultTab = 'usage';
|
||||
|
||||
export default {
|
||||
components: { CodeBlock },
|
||||
components: { CodeBlock, MarkdownBlock, Tabs },
|
||||
|
||||
async mounted() {
|
||||
this.loading = true;
|
||||
|
|
@ -97,9 +139,6 @@
|
|||
this.loading = false;
|
||||
},
|
||||
methods: {
|
||||
renderMarkdown(str) {
|
||||
return marked(str);
|
||||
},
|
||||
renderConfiguration(options) {
|
||||
return yaml.safeDump({
|
||||
[this.pluginName]: options,
|
||||
|
|
@ -119,6 +158,9 @@
|
|||
return {
|
||||
loading: true,
|
||||
pluginName: this.$route.params.pluginName,
|
||||
tab: validTabs.includes(this.$route.params.tab)
|
||||
? this.$route.params.tab
|
||||
: defaultTab,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue