Merge branch 'feat/storages'

apps/adminConsole/fonttools/unicodes.txt

@@ -32,6 +32,7 @@ e876
 e877
 e1b2
 f097
+f88d
 f8b6
 e5dc
 e167
@@ -69,6 +70,7 @@ e5d4
 efad
 e89d
 f569
+e034
 e694
 e037
 f1c5
@@ -77,9 +79,11 @@ e645
 e15a
 e5d5
 e15b
+f708
 efd6
 e8b6
 e51e
+e41b
 e257
 e41d
 eb8e

apps/adminConsole/src/App.vue

@@ -42,7 +42,7 @@ export default defineComponent({
 .q-menu {
 	padding: 12px;
 }
-body.desktop .q-focus-helper {
+body.desktop .q-focus-helper ～ .q-btn--rounded {
 	border-radius: 4px;
 }
 .q-menu .q-item {

apps/adminConsole/src/components/MyContentPage2.vue

@@ -0,0 +1,53 @@
+<template>
+	<div class="absolute-full bg-background-1" style="z-index: 999">
+		<RouteBackBar
+			class="my-content-page-header-extra"
+			size="md"
+			:title="title"
+			:avatar="avatar"
+		>
+			<template #extra>
+				<slot name="extra"></slot>
+			</template>
+		</RouteBackBar>
+		<bt-scroll-area class="my-scroll-area-wrapper">
+			<slot></slot>
+		</bt-scroll-area>
+	</div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	title: string;
+	avatar?: string;
+}
+withDefaults(defineProps<Props>(), {});
+import RouteBackBar from '@packages/ui/src/components/RouteBackBar.vue';
+</script>
+
+<style lang="scss" scoped>
+.my-content-page-header-extra {
+	position: absolute;
+	top: 0;
+	right: 8px;
+	height: $content-header-height;
+	z-index: 2;
+	display: flex;
+	align-items: center;
+	left: 0;
+}
+.my-scroll-area-wrapper {
+	height: calc(100vh - #{$content-header-height});
+	margin-top: $content-header-height;
+	background: $background-6;
+	& > ::v-deep(.q-scrollarea__container) {
+		min-width: 0px;
+		overflow-x: hidden;
+	}
+
+	& > ::v-deep(.q-scrollarea__container > .q-scrollarea__content) {
+		min-width: 0px;
+		width: 100% !important;
+	}
+}
+</style>

apps/adminConsole/src/containers/EnvironmentVariables.vue

@@ -41,29 +41,7 @@
 			<PortsTable :ports="ports"></PortsTable>
 		</MyCard>
 		<MyCard no-content-gap square flat :title="t('ENVIRONMENT_VARIABLE_PL')">
-			<div class="q-gutter-y-md">
-				<div
-					class="environments-wrapper q-px-lg q-py-md"
-					v-for="item in envlist"
-					:key="item.name"
-				>
-					<MyExpansion
-						:label="item.name"
-						:default-opened="!loading && !item.env"
-					>
-						<MyChipList
-							v-if="envFilter(item.env).length > 0"
-							:data="envFilter(item.env)"
-							dense-toggle
-						>
-						</MyChipList>
-						<div v-else>
-							<Empty></Empty>
-						</div>
-					</MyExpansion>
-				</div>
-			</div>
-			<q-inner-loading :showing="loading"> </q-inner-loading>
+			<EnvironmentsLayout :detail="detail"></EnvironmentsLayout>
 		</MyCard>
 		<Metadata v-if="detail" :detail="detail" :data="detail"></Metadata>
 		<MyCard no-content-gap square flat animated :title="t('EVENT_PL')">
@@ -96,22 +74,19 @@ import { safeAtob } from '@packages/ui/src/utils/base64';
 import axios from 'axios';
 import MyCard from '@packages/ui/src/components/MyCard2.vue';
 import { t } from 'src/boot/i18n';
-import MyChipList from '@packages/ui/src/containers/MyChipList.vue';
 import { joinSelector } from 'src/utils';
 import { ObjectMapper } from 'src/utils/object.mapper';
 import Event from '@packages/ui/src/containers/Event.vue';
 import Metadata from '@packages/ui/src/containers/Metadata.vue';
 import ReplicaCard from './ReplicaCard.vue';
-import Empty from '@packages/ui/src/components/Empty.vue';
 import RevisionControl from './RevisionControl/IndexPage.vue';
 import MyQDialog from 'src/components/MyQDialog.vue';
 import PodContainer from '@packages/ui/src/containers/PodsList/PodContainer.vue';
-import SocketClient from 'src/utils/socket.client';
 import PortsTable from '@packages/ui/src/containers/PortsTable.vue';
-import MyExpansion from '@packages/ui/src/components/MyExpansion.vue';
 import MyPage from '@packages/ui/src/containers/MyPage.vue';
 import QButtonStyle from '@packages/ui/src/components/QButtonStyle.vue';
 import Refresh from '@packages/ui/src/components/Refresh.vue';
+import EnvironmentsLayout from '@packages/ui/src/containers/EnvironmentsLayout.vue';
 
 interface Props {
 	module?: string;
@@ -121,7 +96,6 @@ const loading = ref(false);
 const route = useRoute();
 const envDetail = ref();
 const detail = ref();
-const envlist = ref();
 const params = ref();
 const variables = ref();
 const childComponentRef = ref();
@@ -130,13 +104,6 @@ const PodContainerRef = ref();
 
 const props = withDefaults(defineProps<Props>(), {});
 
-const envFilter = (data: any[]) => {
-	const newData = data || [];
-	const temp = newData.filter((item) => item.value);
-	console.log('bbbbb', data, temp);
-	return temp;
-};
-
 const getPath = ({ cluster, namespace }: { [key: string]: string } = {}) => {
 	let path = '';
 	if (cluster) {
@@ -215,30 +182,6 @@ const etchVariables = async (container: any) => {
 	return container;
 };
 
-const containers = computed(() => {
-	const data = envDetail.value || {};
-	const { spec, containers = [] } = data;
-
-	if (props.module === 'containers') return [data];
-
-	if (!isEmpty(containers)) return containers;
-	if (!isEmpty(spec)) return get(spec, 'template.spec.containers', []);
-
-	return [];
-});
-
-const initContainers = computed(() => {
-	const data = envDetail.value || {};
-	const { spec, initContainers: initContainersData = [] } = data;
-
-	if (props.module === 'containers') return [data];
-
-	if (!isEmpty(initContainersData)) return initContainersData;
-	if (!isEmpty(spec)) return get(spec, 'template.spec.initContainers', []);
-
-	return [];
-});
-
 const fetchList2 = async ({
 	cluster,
 	namespace,
@@ -263,16 +206,6 @@ const fetchList2 = async ({
 	return data;
 };
 
-const fetchData = async () => {
-	const { namespace, cluster }: { [key: string]: any } = route.params;
-	envlist.value = await fetchList2({
-		namespace: namespace,
-		cluster: cluster,
-		containers: containers.value,
-		initContainers: initContainers.value
-	});
-};
-
 const fetchEnv = async () => {
 	const { namespace, kind, name }: { [key: string]: any } = route.params;
 	loading.value = true;
@@ -281,8 +214,6 @@ const fetchEnv = async () => {
 	loading.value = false;
 
 	params.value = getParams('default');
-
-	fetchData();
 };
 
 function updateDetail(data: any) {

apps/adminConsole/src/containers/Event.vue

@@ -20,7 +20,9 @@
 				</q-td>
 			</template>
 			<template v-slot:no-data>
-				<Empty></Empty>
+				<div class="row justify-center full-width q-mt-lg">
+					<Empty></Empty>
+				</div>
 			</template>
 		</q-table>
 	</QTableStyle>
@@ -35,7 +37,8 @@ import { MODULE_KIND_MAP } from 'src/utils/constants';
 import { ObjectMapper } from 'src/utils/object.mapper';
 import { onMounted, ref, watch } from 'vue';
 import MyLoading from 'src/components/MyLoading.vue';
-import Empty from '@packages/ui/src/components/Empty2.vue';
+import Empty from '@packages/ui/src/components/Empty.vue';
+
 import QTableStyle from '@packages/ui/src/components/QTableStyle.vue';
 
 const loading = ref(false);

apps/adminConsole/src/css/quasar.variables.scss

@@ -24,7 +24,7 @@ $status-warning: $warning;
 $status-success: $positive;
 $status-completed: #3377ff;
 $status-failed: $negative;
-$status-pending: $warning;
+$status-pending: $ink-3;
 $space-xxl: 44px;
 
 $space-xs-base: 4px;

apps/adminConsole/src/i18n/en-US/index.ts

@@ -33,7 +33,6 @@ const options = {
 	NO_DATA_AVAILABLE: 'No data available',
 	POD_LIST: 'Pod List',
 	TIMESTAMP: 'timestamp',
-	SOURCE: '_source',
 	MAX_RECORDS: 'Max records to return',
 	SYNTAX_GUIDE: 'Syntax guide',
 	FOUND_HITS: 'Found {count} hits in {time} ms',

apps/adminConsole/src/layouts/breadcrumbs.ts

@@ -48,12 +48,12 @@ export const options2 = [
 		icon: 'sym_r_sensors',
 		link: '/network-policies'
 	},
-	// {
-	// 	key: 'jobs',
-	// 	label: t('JOBS'),
-	// 	icon: 'sym_r_work',
-	// 	link: '/jobs'
-	// },
+	{
+		key: 'jobs',
+		label: t('JOBS'),
+		icon: 'sym_r_work',
+		link: '/jobs'
+	},
 	{
 		key: 'customresources',
 		label: t('CRD_PL'),

apps/adminConsole/src/pages/ApplicationSpaces/Workloads/Detail.vue

@@ -2,13 +2,26 @@
 	<MyContentPage>
 		<template #extra>
 			<div class="col-auto">
-				<MoreSelection :options="options" size="md"></MoreSelection>
+				<QButtonStyle>
+					<q-btn dense flat icon="sym_r_insert_chart" @click="clickHandler" />
+				</QButtonStyle>
+				<QButtonStyle>
+					<q-btn dense flat icon="sym_r_edit_square" @click="clickHandler2" />
+				</QButtonStyle>
 			</div>
 		</template>
 		<EnvironmentVariables>
 			<DetailData ref="detaiDatalRef"></DetailData>
 		</EnvironmentVariables>
 		<Yaml ref="yamlRef" :name="t('EDIT_YAML')" @change="fetchList"></Yaml>
+		<Dialog2
+			:title="$route.params.name"
+			ref="dialog2Ref"
+			full-width
+			full-height
+		>
+			<PodsMonitoring></PodsMonitoring>
+		</Dialog2>
 	</MyContentPage>
 </template>
 
@@ -20,19 +33,21 @@ import Yaml from 'src/pages/NamespacePods/Yaml.vue';
 import MyContentPage from 'src/components/MyContentPage.vue';
 import DetailData from './DetailData.vue';
 import MoreSelection from '@packages/ui/src/components/MoreSelection.vue';
+import QButtonStyle from '@packages/ui/src/components/QButtonStyle.vue';
+import Dialog2 from '@packages/ui/src/components/Dialog/Dialog.vue';
+import PodsMonitoring from './PodsMonitoring/PodsMonitoring.vue';
 
+const dialog2Ref = ref();
 const yamlRef = ref();
 const detaiDatalRef = ref();
-const options = [
-	{
-		label: t('EDIT_YAML'),
-		value: 'edit',
-		icon: 'sym_r_edit',
-		onClick: () => {
-			yamlRef.value.show();
-		}
-	}
-];
+
+const clickHandler = () => {
+	dialog2Ref.value.show();
+};
+
+const clickHandler2 = () => {
+	yamlRef.value.show();
+};
 
 const fetchList = () => {
 	detaiDatalRef.value && detaiDatalRef.value.update();