Skip to content

Commit

Permalink
improve backend by add breadcrumb
Browse files Browse the repository at this point in the history
  • Loading branch information
beineng committed Jan 3, 2019
1 parent 85ec767 commit 110af05
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 84 deletions.
40 changes: 27 additions & 13 deletions admin/frontend/src/components/NewStory.vue
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,37 @@
<template>

<div class="container box story">
<div class="container">
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
<ul>
<li>
<router-link :to="{ name: 'home' }">Home</router-link>
</li>
<li>
<router-link :to="{ name: 'stories' }">Stories</router-link>
</li>
<li class="is-active"><a href="#" aria-current="page">New Story</a></li>
</ul>
</nav>

<p class="title is-2 is-spaced">Create New Story</p>
<div class="box story">

<div class="field">
<label class="label">Story Name:</label>
<div class="control">
<input class="input is-primary" type="text" placeholder="StoryName" v-model="storyName">
<p class="title is-2 is-spaced">Create New Story</p>

<div class="field">
<label class="label">Story Name:</label>
<div class="control">
<input class="input is-primary" type="text" placeholder="StoryName" v-model="storyName">
</div>
</div>
</div>

<div class="field">
<label class="label">Story Workflow:</label>
</div>
<div class="field">
<label class="label">Story Workflow:</label>
</div>

<story-graph :info="storyInfo"
@save="onSaveStory"></story-graph>
<story-graph :info="storyInfo"
@save="onSaveStory"></story-graph>

</div>
</div>

</template>
Expand Down Expand Up @@ -63,7 +77,7 @@
request.createStory(this.storyName, newStoryInfo)
.then(() => {
this.$router.push({ name: 'story-runners', params: { storyName: this.storyName } }, () => {
this.$router.push({name: 'story-runners', params: {storyName: this.storyName}}, () => {
bus.$emit('notify', `new story ${this.storyName} has been created.`)
})
})
Expand Down
9 changes: 9 additions & 0 deletions admin/frontend/src/components/Runners.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@

<div class="container">

<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
<ul>
<li>
<router-link :to="{ name: 'home' }">Home</router-link>
</li>
<li class="is-active"><a href="#" aria-current="page">Runners</a></li>
</ul>
</nav>

<div class="columns is-multiline">

<div class="column is-12" v-for="info in runners">
Expand Down
158 changes: 87 additions & 71 deletions admin/frontend/src/components/Story.vue
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,107 @@
<template>

<div class="container box story" style="margin-bottom: 1rem">
<div class="level">
<div class="level-left">
<div class="level-item">
<p class="title is-2 is-spaced story-name">{{ storyName }}</p>
</div>
<!--<div class="level-item">
<div class="tags has-addons">
<span class="tag is-dark">Status:</span>
<span class="tag is-info">{{ storyInfo.status }}</span>
</div>
</div>-->
</div>
</div>

<div class="tabs is-medium">
<div class="container">
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
<ul>
<li :class="{ 'is-active': isOverview }" @click="changeTab('overview')"><a>Overview</a></li>
<li :class="{ 'is-active': isRunners }" @click="changeTab('runners')"><a>Runners</a></li>
<li :class="{ 'is-active': isMonitoring }" @click="changeTab('monitoring')">
<a>Statistics</a></li>
<li :class="{ 'is-active': isFallback }" @click="changeTab('fallback')"
v-if="storyInfo.fallback !== undefined && 0"><a>Failed Events</a>
<li>
<router-link :to="{ name: 'home' }">Home</router-link>
</li>
<li>
<router-link :to="{ name: 'stories' }">Stories</router-link>
</li>
<li class="is-active"><a href="#" aria-current="page">Story Details</a></li>
</ul>
</div>

<div v-if="isOverview">
</nav>

<story-graph v-if="storyInfo.source !== undefined" :info="storyInfo"
@save="onSaveStory"></story-graph>

</div>

<div v-if="isRunners">
<div class=" box story" style="margin-bottom: 1.5rem">

<div class="level">
<div class="level-left">
</div>
<div class="level-right">
<div class="level-item">
<a class="button" @click="onOpenChooseRunner">Assign to a new runner</a>
<p class="title is-2 is-spaced story-name">{{ storyName }}</p>
</div>
<!--<div class="level-item">
<div class="tags has-addons">
<span class="tag is-dark">Status:</span>
<span class="tag is-info">{{ storyInfo.status }}</span>
</div>
</div>-->
</div>
</div>

<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th>Name</th>
<th>Server</th>
<th>Version</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="item in runners">
<td>
<router-link :to="{ name: 'runner', params: { 'runnerName': item.name } }">{{
item.name }}
</router-link>
</td>
<td>{{ item.host }}</td>
<td>{{ item.version }}</td>
<td>{{ item.stories[storyName] }}</td>
<td>
<a class="button is-primary" @click="onRerun(item)">Rerun</a>
<a class="button is-danger" @click="onDismissRunner(item)">Dismiss</a>
</td>
</tr>
</tbody>
</table>

<choose-runner v-if="chooseRunner" @close="onCloseChooseRunner" @choose="onAssignRunner"
:excludes="runners.map(info => info.name)"></choose-runner>
<div class="tabs is-medium">
<ul>
<li :class="{ 'is-active': isOverview }" @click="changeTab('overview')"><a>Overview</a>
</li>
<li :class="{ 'is-active': isRunners }" @click="changeTab('runners')"><a>Runners</a></li>
<li :class="{ 'is-active': isMonitoring }" @click="changeTab('monitoring')">
<a>Statistics</a></li>
<li :class="{ 'is-active': isFallback }" @click="changeTab('fallback')"
v-if="storyInfo.fallback !== undefined && 0"><a>Failed Events</a>
</li>
</ul>
</div>

</div>
<div v-if="isOverview">

<div v-if="isFallback"></div>
<story-graph v-if="storyInfo.source !== undefined" :info="storyInfo"
@save="onSaveStory"></story-graph>

<div v-if="isMonitoring">
<story-statistics :storyname="storyName"></story-statistics>
</div>
</div>

<div v-if="isRunners">

<div class="level">
<div class="level-left">
</div>
<div class="level-right">
<div class="level-item">
<a class="button" @click="onOpenChooseRunner">Assign to a new runner</a>
</div>
</div>
</div>

<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th>Name</th>
<th>Server</th>
<th>Version</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="item in runners">
<td>
<router-link :to="{ name: 'runner', params: { 'runnerName': item.name } }">{{
item.name }}
</router-link>
</td>
<td>{{ item.host }}</td>
<td>{{ item.version }}</td>
<td>{{ item.stories[storyName] }}</td>
<td>
<a class="button is-primary" @click="onRerun(item)">Rerun</a>
<a class="button is-danger" @click="onDismissRunner(item)">Dismiss</a>
</td>
</tr>
</tbody>
</table>

<choose-runner v-if="chooseRunner" @close="onCloseChooseRunner" @choose="onAssignRunner"
:excludes="runners.map(info => info.name)"></choose-runner>

</div>

<div v-if="isFallback"></div>

<div v-if="isMonitoring">
<story-statistics :storyname="storyName"></story-statistics>
</div>


</div>
</div>

</template>
Expand All @@ -101,7 +117,7 @@
import StoryStatistics from './StoryStatistics.vue'
import bus from '../lib/bus'
let tabRouteMapping: { [key:string]: string } = {
let tabRouteMapping: { [key: string]: string } = {
'overview': 'story',
'fallback': 'story-fallback',
'monitoring': 'story-statistics',
Expand Down Expand Up @@ -148,7 +164,7 @@
changeTab(tab: string) {
let routeName = tabRouteMapping[tab]
this.$router.push({ name: routeName, params: { storyName: this.storyName } })
this.$router.push({name: routeName, params: {storyName: this.storyName}})
// this.currTab = tab
},
Expand Down

0 comments on commit 110af05

Please sign in to comment.