Skip to content

Commit 89526d9

Browse files
zhengkunwang223zhengkunwang223
authored
feat: add docker status for appstore (#9058)
1 parent b1799d8 commit 89526d9

File tree

1 file changed

+117
-111
lines changed

1 file changed

+117
-111
lines changed

‎frontend/src/views/app-store/apps/index.vue‎

Lines changed: 117 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,124 @@
11
<template>
2-
<LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app', 2)">
3-
<template #search>
4-
<Tags @change="changeTag" />
5-
</template>
6-
<template #leftToolBar>
7-
<el-button @click="sync" type="primary" plain :disabled="syncing">
8-
<span>{{ syncCustomAppstore ? $t('app.syncCustomApp') : $t('app.syncAppList') }}</span>
9-
</el-button>
10-
<el-button @click="syncLocal" type="primary" plain :disabled="syncing" class="ml-2">
11-
{{ $t('app.syncLocalApp') }}
12-
</el-button>
13-
</template>
14-
<template #rightToolBar>
15-
<el-checkbox class="!mr-2.5" v-model="req.showCurrentArch" @change="search(req)">
16-
{{ $t('app.showCurrentArch') }}
17-
</el-checkbox>
18-
<el-checkbox
19-
class="!mr-2.5"
20-
v-model="req.resource"
21-
true-value="all"
22-
false-value="remote"
23-
@change="search(req)"
24-
>
25-
{{ $t('app.showLocal') }}
26-
</el-checkbox>
27-
<TableSearch @search="searchByName()" v-model:searchName="req.name" />
28-
</template>
29-
<template #main>
30-
<div>
31-
<MainDiv :heightDiff="300">
32-
<el-alert type="info" :title="$t('app.appHelper')" :closable="false" />
33-
<el-row :gutter="5">
34-
<el-col
35-
class="app-col-12"
36-
v-for="(app, index) in apps"
37-
:key="index"
38-
:xs="24"
39-
:sm="12"
40-
:md="8"
41-
:lg="8"
42-
:xl="6"
43-
>
44-
<div class="app">
45-
<el-card>
46-
<div class="app-wrapper" @click="openDetail(app.key)">
47-
<div class="app-image">
48-
<el-avatar
49-
shape="square"
50-
:size="60"
51-
:src="'data:image/png;base64,' + app.icon"
52-
/>
53-
</div>
54-
<div class="app-content">
55-
<div class="content-top">
56-
<el-space wrap :size="1">
57-
<span class="app-title">{{ app.name }}</span>
58-
<el-tag
59-
type="success"
60-
v-if="app.installed"
61-
round
2+
<div>
3+
<docker-status v-model:isActive="isActive" v-model:isExist="isExist" @search="search" />
4+
<LayoutContent v-loading="loading" v-if="isExist" :title="$t('app.app', 2)">
5+
<template #search>
6+
<Tags @change="changeTag" />
7+
</template>
8+
<template #leftToolBar>
9+
<el-button @click="sync" type="primary" plain :disabled="syncing">
10+
<span>{{ syncCustomAppstore ? $t('app.syncCustomApp') : $t('app.syncAppList') }}</span>
11+
</el-button>
12+
<el-button @click="syncLocal" type="primary" plain :disabled="syncing" class="ml-2">
13+
{{ $t('app.syncLocalApp') }}
14+
</el-button>
15+
</template>
16+
<template #rightToolBar>
17+
<el-checkbox class="!mr-2.5" v-model="req.showCurrentArch" @change="search(req)">
18+
{{ $t('app.showCurrentArch') }}
19+
</el-checkbox>
20+
<el-checkbox
21+
class="!mr-2.5"
22+
v-model="req.resource"
23+
true-value="all"
24+
false-value="remote"
25+
@change="search(req)"
26+
>
27+
{{ $t('app.showLocal') }}
28+
</el-checkbox>
29+
<TableSearch @search="searchByName()" v-model:searchName="req.name" />
30+
</template>
31+
<template #main>
32+
<div>
33+
<MainDiv :heightDiff="300">
34+
<el-alert type="info" :title="$t('app.appHelper')" :closable="false" />
35+
<el-row :gutter="5">
36+
<el-col
37+
class="app-col-12"
38+
v-for="(app, index) in apps"
39+
:key="index"
40+
:xs="24"
41+
:sm="12"
42+
:md="8"
43+
:lg="8"
44+
:xl="6"
45+
>
46+
<div class="app">
47+
<el-card>
48+
<div class="app-wrapper" @click="openDetail(app.key)">
49+
<div class="app-image">
50+
<el-avatar
51+
shape="square"
52+
:size="60"
53+
:src="'data:image/png;base64,' + app.icon"
54+
/>
55+
</div>
56+
<div class="app-content">
57+
<div class="content-top">
58+
<el-space wrap :size="1">
59+
<span class="app-title">{{ app.name }}</span>
60+
<el-tag
61+
type="success"
62+
v-if="app.installed"
63+
round
64+
size="small"
65+
class="!ml-2"
66+
>
67+
{{ $t('app.allReadyInstalled') }}
68+
</el-tag>
69+
</el-space>
70+
</div>
71+
<div class="content-middle">
72+
<span class="app-description">
73+
{{ app.description }}
74+
</span>
75+
</div>
76+
<div class="content-bottom">
77+
<div class="app-tags">
78+
<el-tag v-for="(tag, ind) in app.tags" :key="ind" type="info">
79+
<span>
80+
{{ tag.name }}
81+
</span>
82+
</el-tag>
83+
<el-tag v-if="app.status === 'TakeDown'" class="p-mr-5">
84+
<span style="color: red">{{ $t('app.takeDown') }}</span>
85+
</el-tag>
86+
</div>
87+
<el-button
88+
type="primary"
6289
size="small"
63-
class="!ml-2"
90+
plain
91+
round
92+
:disabled="
93+
(app.installed && app.limit == 1) ||
94+
app.status === 'TakeDown'
95+
"
96+
@click.stop="openInstall(app)"
6497
>
65-
{{ $t('app.allReadyInstalled') }}
66-
</el-tag>
67-
</el-space>
68-
</div>
69-
<div class="content-middle">
70-
<span class="app-description">
71-
{{ app.description }}
72-
</span>
73-
</div>
74-
<div class="content-bottom">
75-
<div class="app-tags">
76-
<el-tag v-for="(tag, ind) in app.tags" :key="ind" type="info">
77-
<span>
78-
{{ tag.name }}
79-
</span>
80-
</el-tag>
81-
<el-tag v-if="app.status === 'TakeDown'" class="p-mr-5">
82-
<span style="color: red">{{ $t('app.takeDown') }}</span>
83-
</el-tag>
98+
{{ $t('commons.button.install') }}
99+
</el-button>
84100
</div>
85-
<el-button
86-
type="primary"
87-
size="small"
88-
plain
89-
round
90-
:disabled="
91-
(app.installed && app.limit == 1) || app.status === 'TakeDown'
92-
"
93-
@click.stop="openInstall(app)"
94-
>
95-
{{ $t('commons.button.install') }}
96-
</el-button>
97101
</div>
98102
</div>
99-
</div>
100-
</el-card>
101-
</div>
102-
</el-col>
103-
</el-row>
104-
</MainDiv>
105-
<div class="page-button">
106-
<fu-table-pagination
107-
v-model:current-page="paginationConfig.currentPage"
108-
v-model:page-size="paginationConfig.pageSize"
109-
v-bind="paginationConfig"
110-
@change="search(req)"
111-
:page-sizes="[30, 60, 90]"
112-
:layout="mobile ? 'total, prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
113-
/>
103+
</el-card>
104+
</div>
105+
</el-col>
106+
</el-row>
107+
</MainDiv>
108+
<div class="page-button">
109+
<fu-table-pagination
110+
v-model:current-page="paginationConfig.currentPage"
111+
v-model:page-size="paginationConfig.pageSize"
112+
v-bind="paginationConfig"
113+
@change="search(req)"
114+
:page-sizes="[30, 60, 90]"
115+
:layout="mobile ? 'total, prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
116+
/>
117+
</div>
114118
</div>
115-
</div>
116-
</template>
117-
</LayoutContent>
119+
</template>
120+
</LayoutContent>
121+
</div>
118122
<Install ref="installRef" />
119123
<Detail ref="detailRef" />
120124
<TaskLog ref="taskLogRef" @close="refresh" />
@@ -134,6 +138,7 @@ import TaskLog from '@/components/log/task/index.vue';
134138
import { storeToRefs } from 'pinia';
135139
import bus from '@/global/bus';
136140
import Tags from '@/views/app-store/components/tag.vue';
141+
import DockerStatus from '@/views/container/docker-status/index.vue';
137142
138143
const globalStore = GlobalStore();
139144
const { isProductPro } = storeToRefs(globalStore);
@@ -160,7 +165,6 @@ const req = reactive({
160165
161166
const apps = ref<App.AppDTO[]>([]);
162167
const loading = ref(false);
163-
const showDetail = ref(false);
164168
const canUpdate = ref(false);
165169
const syncing = ref(false);
166170
const installRef = ref();
@@ -169,6 +173,8 @@ const mainHeight = ref(0);
169173
const detailRef = ref();
170174
const taskLogRef = ref();
171175
const syncCustomAppstore = ref(false);
176+
const isActive = ref(false);
177+
const isExist = ref(false);
172178
173179
const refresh = () => {
174180
search(req);

0 commit comments

Comments
 (0)