StreamList.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <script setup lang="tsx">
  2. import { Badge, message } from 'ant-design-vue'
  3. import StdTable from '@/components/StdDesign/StdDataDisplay/StdTable.vue'
  4. import type { customRender } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
  5. import { datetime } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
  6. import stream from '@/api/stream'
  7. import { input } from '@/components/StdDesign/StdDataEntry'
  8. import InspectConfig from '@/views/config/InspectConfig.vue'
  9. import type { Column, JSXElements } from '@/components/StdDesign/types'
  10. import StreamDuplicate from '@/views/stream/components/StreamDuplicate.vue'
  11. const columns: Column[] = [{
  12. title: () => $gettext('Name'),
  13. dataIndex: 'name',
  14. sortable: true,
  15. pithy: true,
  16. edit: {
  17. type: input,
  18. },
  19. search: true,
  20. }, {
  21. title: () => $gettext('Status'),
  22. dataIndex: 'enabled',
  23. customRender: (args: customRender) => {
  24. const template: JSXElements = []
  25. const { text } = args
  26. if (text === true || text > 0) {
  27. template.push(<Badge status="success"/>)
  28. template.push($gettext('Enabled'))
  29. }
  30. else {
  31. template.push(<Badge status="warning"/>)
  32. template.push($gettext('Disabled'))
  33. }
  34. return h('div', template)
  35. },
  36. sortable: true,
  37. pithy: true,
  38. }, {
  39. title: () => $gettext('Updated at'),
  40. dataIndex: 'modified_at',
  41. customRender: datetime,
  42. sortable: true,
  43. pithy: true,
  44. }, {
  45. title: () => $gettext('Action'),
  46. dataIndex: 'action',
  47. }]
  48. const table = ref()
  49. const inspect_config = ref()
  50. function enable(name: string) {
  51. stream.enable(name).then(() => {
  52. message.success($gettext('Enabled successfully'))
  53. table.value?.get_list()
  54. inspect_config.value?.test()
  55. }).catch(r => {
  56. message.error($gettext('Failed to enable %{msg}', { msg: r.message ?? '' }), 10)
  57. })
  58. }
  59. function disable(name: string) {
  60. stream.disable(name).then(() => {
  61. message.success($gettext('Disabled successfully'))
  62. table.value?.get_list()
  63. inspect_config.value?.test()
  64. }).catch(r => {
  65. message.error($gettext('Failed to disable %{msg}', { msg: r.message ?? '' }))
  66. })
  67. }
  68. function destroy(stream_name: string) {
  69. stream.destroy(stream_name).then(() => {
  70. table.value.get_list()
  71. message.success($gettext('Delete stream: %{stream_name}', { stream_name }))
  72. inspect_config.value?.test()
  73. }).catch(e => {
  74. message.error(e?.message ?? $gettext('Server error'))
  75. })
  76. }
  77. const showDuplicator = ref(false)
  78. const target = ref('')
  79. function handle_click_duplicate(name: string) {
  80. showDuplicator.value = true
  81. target.value = name
  82. }
  83. const route = useRoute()
  84. watch(route, () => {
  85. inspect_config.value?.test()
  86. })
  87. const showAddStream = ref(false)
  88. const name = ref('')
  89. function add() {
  90. showAddStream.value = true
  91. name.value = ''
  92. }
  93. function handleAddStream() {
  94. stream.save(name.value, { name: name.value, content: 'server\t{\n\n}' }).then(() => {
  95. showAddStream.value = false
  96. table.value?.get_list()
  97. message.success($gettext('Added successfully'))
  98. }).catch(e => {
  99. message.error(e?.message ?? $gettext('Server error'))
  100. })
  101. }
  102. </script>
  103. <template>
  104. <ACard :title="$gettext('Manage Streams')">
  105. <template #extra>
  106. <a @click="add">{{ $gettext('Add') }}</a>
  107. </template>
  108. <InspectConfig ref="inspect_config" />
  109. <StdTable
  110. ref="table"
  111. :api="stream"
  112. :columns="columns"
  113. row-key="name"
  114. disable-delete
  115. disable-view
  116. @click-edit="r => $router.push({
  117. path: `/stream/${r}`,
  118. })"
  119. >
  120. <template #actions="{ record }">
  121. <ADivider type="vertical" />
  122. <AButton
  123. v-if="record.enabled"
  124. type="link"
  125. size="small"
  126. @click="disable(record.name)"
  127. >
  128. {{ $gettext('Disable') }}
  129. </AButton>
  130. <AButton
  131. v-else
  132. type="link"
  133. size="small"
  134. @click="enable(record.name)"
  135. >
  136. {{ $gettext('Enable') }}
  137. </AButton>
  138. <ADivider type="vertical" />
  139. <AButton
  140. type="link"
  141. size="small"
  142. @click="handle_click_duplicate(record.name)"
  143. >
  144. {{ $gettext('Duplicate') }}
  145. </AButton>
  146. <ADivider type="vertical" />
  147. <APopconfirm
  148. :cancel-text="$gettext('No')"
  149. :ok-text="$gettext('OK')"
  150. :title="$gettext('Are you sure you want to delete?')"
  151. :disabled="record.enabled"
  152. @confirm="destroy(record.name)"
  153. >
  154. <AButton
  155. type="link"
  156. size="small"
  157. :disabled="record.enabled"
  158. >
  159. {{ $gettext('Delete') }}
  160. </AButton>
  161. </APopconfirm>
  162. </template>
  163. </StdTable>
  164. <AModal
  165. v-model:open="showAddStream"
  166. :title="$gettext('Add Stream')"
  167. :mask="false"
  168. @ok="handleAddStream"
  169. >
  170. <AForm layout="vertical">
  171. <AFormItem :label="$gettext('Name')">
  172. <AInput v-model:value="name" />
  173. </AFormItem>
  174. </AForm>
  175. </AModal>
  176. <StreamDuplicate
  177. v-model:visible="showDuplicator"
  178. :name="target"
  179. @duplicated="() => table.get_list()"
  180. />
  181. </ACard>
  182. </template>
  183. <style scoped>
  184. </style>