diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2021-04-22 22:29:33 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-22 22:29:33 +0900 |
| commit | 246693b8484b72048cb515b76aa5f094f5fdeb56 (patch) | |
| tree | 703f7636c363b480b20690495353691e09c98a27 /src/client/pages/instance/queue.chart.vue | |
| parent | fix style (diff) | |
| download | sharkey-246693b8484b72048cb515b76aa5f094f5fdeb56.tar.gz sharkey-246693b8484b72048cb515b76aa5f094f5fdeb56.tar.bz2 sharkey-246693b8484b72048cb515b76aa5f094f5fdeb56.zip | |
インスタンス管理画面作り直し (#7473)
* wip
* wip
* wip
* wip
Diffstat (limited to 'src/client/pages/instance/queue.chart.vue')
| -rw-r--r-- | src/client/pages/instance/queue.chart.vue | 64 |
1 files changed, 41 insertions, 23 deletions
diff --git a/src/client/pages/instance/queue.chart.vue b/src/client/pages/instance/queue.chart.vue index 0eb70debfb..446c979209 100644 --- a/src/client/pages/instance/queue.chart.vue +++ b/src/client/pages/instance/queue.chart.vue @@ -1,27 +1,29 @@ <template> -<section class="_section"> - <div class="_title"><slot name="title"></slot></div> - <div class="_content _table"> - <div class="_row"> - <div class="_cell"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div> - <div class="_cell"><div class="_label">Active</div>{{ number(active) }}</div> - <div class="_cell"><div class="_label">Waiting</div>{{ number(waiting) }}</div> - <div class="_cell"><div class="_label">Delayed</div>{{ number(delayed) }}</div> +<div class="_formItem"> + <div class="_formLabel"><slot name="title"></slot></div> + <div class="_formPanel pumxzjhg"> + <div class="_table status"> + <div class="_row"> + <div class="_cell"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div> + <div class="_cell"><div class="_label">Active</div>{{ number(active) }}</div> + <div class="_cell"><div class="_label">Waiting</div>{{ number(waiting) }}</div> + <div class="_cell"><div class="_label">Delayed</div>{{ number(delayed) }}</div> + </div> </div> - </div> - <div class="_content" style="margin-bottom: -8px;"> - <canvas ref="chart"></canvas> - </div> - <div class="_content" style="max-height: 180px; overflow: auto;"> - <div v-if="jobs.length > 0"> - <div v-for="job in jobs" :key="job[0]"> - <span>{{ job[0] }}</span> - <span style="margin-left: 8px; opacity: 0.7;">({{ number(job[1]) }} jobs)</span> + <div class=""> + <canvas ref="chart"></canvas> + </div> + <div class="jobs"> + <div v-if="jobs.length > 0"> + <div v-for="job in jobs" :key="job[0]"> + <span>{{ job[0] }}</span> + <span style="margin-left: 8px; opacity: 0.7;">({{ number(job[1]) }} jobs)</span> + </div> </div> + <span v-else style="opacity: 0.5;">{{ $ts.noJobs }}</span> </div> - <span v-else style="opacity: 0.5;">{{ $ts.noJobs }}</span> </div> -</section> +</div> </template> <script lang="ts"> @@ -110,10 +112,10 @@ export default defineComponent({ aspectRatio: 3, layout: { padding: { - left: 0, - right: 0, - top: 8, - bottom: 0 + left: 16, + right: 16, + top: 16, + bottom: 12 } }, legend: { @@ -198,3 +200,19 @@ export default defineComponent({ } }); </script> + +<style lang="scss" scoped> +.pumxzjhg { + > .status { + padding: 16px; + border-bottom: solid 0.5px var(--divider); + } + + > .jobs { + padding: 16px; + border-top: solid 0.5px var(--divider); + max-height: 180px; + overflow: auto; + } +} +</style> |