Skip to content

B
bkunyun
Commit 17581507 authored by chenshouchao's avatar chenshouchao
Browse files
Options

Merge branch 'feat-20221012-environment' into 'release' 

cn-Feat 20221012 environment

See merge request !147
parents 84a97fd0 387142d3
Hide whitespace changes
Inline Side-by-side
Showing with 268 additions and 82 deletions
src/api/resourceCenter.ts
View file @ 17581507
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-19 17:09:23
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:14:35
* @LastEditTime: 2022-10-20 09:26:12
* @FilePath: /bkunyun/src/api/resourceCenter.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -76,11 +76,11 @@ const deleteActorenv = (params: {id: string}) => {
};
// 获取算子列表
const getOperatorList = (data: IOperatorListParams) => {
const getOperatorList = (params: IOperatorListParams) => {
return request({
url: Api.API_OPERATOR_LIST,
method: "get",
data
params
});
}
......
src/assets/project/USERRESOURCES.svg 0 → 100644
View file @ 17581507
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 69备份 2</title>
<defs>
<path d="M14.2058659,3.5763545 L8.20586587,0.376450501 C7.76469814,0.141168108 7.23530186,0.141168108 6.79413413,0.376450501 L0.794134134,3.5763545 C0.305329737,3.83704236 1.54202278e-16,4.34591807 0,4.89989271 L0,11.0999285 C-8.68266642e-16,11.6538919 0.305317533,12.1627593 0.794106656,12.423452 L6.79410666,15.623516 C7.23528896,15.858818 7.76471104,15.858818 8.20589334,15.623516 L14.2058933,12.423452 C14.6946825,12.1627593 15,11.6538919 15,11.0999285 L15,4.89989271 C15,4.34591807 14.6946703,3.83704236 14.2058659,3.5763545 Z" id="path-1"></path>
</defs>
<g id="新" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-69备份-2">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-66" transform="translate(0.500000, 0.000000)">
<g id="矩形">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<path stroke="#8A9099" stroke-width="1.5" d="M7.14706707,1.0382196 C7.36765093,0.920578407 7.63234907,0.920578407 7.85293293,1.0382196 L7.85293293,1.0382196 L13.8529329,4.2381236 L14.25,11.0999285 L7.85294667,14.9617542 C7.63235552,15.0794052 7.36764448,15.0794052 7.14705333,14.9617542 L7.14705333,14.9617542 L1.14705333,11.7616902 L0.75,4.89989271 Z"></path>
<path d="M7.5,11.25 C9.78208033,11.25 11.543715,11.9030473 12.75,13.2731396 L12.75,13.2731396 L12.75,18.6744339 L2.25,18.6744339 L2.25,13.2731396 C3.45628505,11.9030473 5.21791967,11.25 7.5,11.25 Z" stroke="#8A9099" stroke-width="1.5" mask="url(#mask-2)"></path>
</g>
<circle id="椭圆形" stroke="#8A9099" stroke-width="1.5" cx="7.5" cy="6.8" r="2.25"></circle>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/USERRESOURCES_BLUE.svg 0 → 100644
View file @ 17581507
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 69备份</title>
<defs>
<path d="M14.2058659,3.5763545 L8.20586587,0.376450501 C7.76469814,0.141168108 7.23530186,0.141168108 6.79413413,0.376450501 L0.794134134,3.5763545 C0.305329737,3.83704236 1.54202278e-16,4.34591807 0,4.89989271 L0,11.0999285 C-8.68266642e-16,11.6538919 0.305317533,12.1627593 0.794106656,12.423452 L6.79410666,15.623516 C7.23528896,15.858818 7.76471104,15.858818 8.20589334,15.623516 L14.2058933,12.423452 C14.6946825,12.1627593 15,11.6538919 15,11.0999285 L15,4.89989271 C15,4.34591807 14.6946703,3.83704236 14.2058659,3.5763545 Z" id="path-1"></path>
</defs>
<g id="新" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-69备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-66" transform="translate(0.500000, 0.000000)">
<g id="矩形">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<path stroke="#1370FF" stroke-width="1.5" d="M7.14706707,1.0382196 C7.36765093,0.920578407 7.63234907,0.920578407 7.85293293,1.0382196 L7.85293293,1.0382196 L13.8529329,4.2381236 L14.25,11.0999285 L7.85294667,14.9617542 C7.63235552,15.0794052 7.36764448,15.0794052 7.14705333,14.9617542 L7.14705333,14.9617542 L1.14705333,11.7616902 L0.75,4.89989271 Z"></path>
<path d="M7.5,11.25 C9.78208033,11.25 11.543715,11.9030473 12.75,13.2731396 L12.75,13.2731396 L12.75,18.6744339 L2.25,18.6744339 L2.25,13.2731396 C3.45628505,11.9030473 5.21791967,11.25 7.5,11.25 Z" stroke="#1370FF" stroke-width="1.5" mask="url(#mask-2)"></path>
</g>
<circle id="椭圆形" stroke="#1370FF" stroke-width="1.5" cx="7.5" cy="6.8" r="2.25"></circle>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/views/MenuLayout/index.tsx
View file @ 17581507
......@@ -100,7 +100,7 @@ const MenuLayout = observer(() => {
src={
routerIcon(
item.id || "",
`/v3${item.path}` === pathname
pathname.indexOf(`/v3${item.path}`) !== -1
) || undefined
}
alt=""
......
src/views/ResourceCenter/UserResources/UserResourcesEnvironment/AddEnvironment/index.tsx
View file @ 17581507
......@@ -33,23 +33,22 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
const { setAddopen } = props;
const Message = useMessage();
let tokenInfo = getTokenInfo();
const [hpczoneList, setHpczoneList] = useState<Array<any>>([]);
const [publicProjectId, setPublicProjectId] = useState("");
const [publicZoneId, setPublicZoneId] = useState("");
const [computeType, setComputeType] = useState("");
const [fileToken, setFileToken] = useState("");
const [taskType, setTaskType] = useState<"BATCH" | "FLOW">("BATCH");
const [name, setName] = useState("");
const [desc, setDesc] = useState("");
const [baseEnvId, setBaseEnvId] = useState("");
const [filePaths, setFilePaths] = useState<Array<string>>([]);
const [isUploading, setIsUploading] = useState(false);
const [fileName, setFileName] = useState("");
// const [bashScript, setBashScript] = useState('');
const [envList, setEnvList] = useState<Array<any>>([]);
const [progress, setProgress] = useState("0%");
const [code, setCode] = useState("");
const [upload, setUpload] = useState<any>(() => {});
const [hpczoneList, setHpczoneList] = useState<Array<any>>([]); // 计算区列表 通过计算区列表和计算区id拿fileServerEndPoint
const [publicProjectId, setPublicProjectId] = useState(""); // 公共项目id 环境压缩包临时存放在公共项目下
const [publicZoneId, setPublicZoneId] = useState(""); // 公共项目计算区id
const [computeType, setComputeType] = useState(""); // 基础环境是cpu 还是 gpu
const [fileToken, setFileToken] = useState(""); // 访问公共项目的fileToken
const [taskType, setTaskType] = useState<"BATCH" | "FLOW">("BATCH"); // 环境类型 批式环境还是流式环境
const [name, setName] = useState(""); // 环境名称
const [desc, setDesc] = useState(""); // 环境描述
const [baseEnvId, setBaseEnvId] = useState(""); // 基础环境id
const [filePaths, setFilePaths] = useState<Array<string>>([]); // 环境压缩包上传后的路径集合（目前只有一个）
const [isUploading, setIsUploading] = useState(false); // 保存接口loading
const [fileName, setFileName] = useState(""); // 环境压缩包文件名
const [envList, setEnvList] = useState<Array<any>>([]); // 基础环境列表 和taskType环境类型有关
const [progress, setProgress] = useState("0%"); // 上传压缩包进度
const [code, setCode] = useState(""); // 脚本内容
const [upload, setUpload] = useState<any>(() => {}); // 上传压缩包实例 用于暂停（取消上传）upload.abort(true);
const [nameHelper, setNameHelper] = useState({
error: false,
text: "30字符以内，仅限字母、数字、中文",
......@@ -370,7 +369,16 @@ const AddEnvironment = (props: IAddEnvironmentProps) => {
<div className={style.label}>
上传环境压缩包<span className={style.zipText}>（.zip）</span>
<span className={style.required}>*</span>
<span className={style.download}>下载模板</span>
<span
className={style.download}
onClick={() =>
window.open(
"https://projectsif.oss-cn-beijing.aliyuncs.com/build_env_template.zip"
)
}
>
下载模板
</span>
</div>
<div className={style.formItem}>
{filePaths.length === 0 && !isUploading && (
......
src/views/ResourceCenter/UserResources/UserResourcesEnvironment/SeeEnv/index.module.css
View file @ 17581507
.seeEnv {
position: relative;
}
.titleBox {
padding: 14px 24px;
display: flex;
......@@ -8,10 +11,6 @@
.goBackIcon {
width: 22px;
height: 22px;
/* background-color: #fff; */
/* border-radius: 4px; */
/* margin-right: 12px; */
/* box-shadow: 0px 2px 5px 0px rgba(3, 47, 105, 0.09); */
cursor: pointer;
}
.title {
......
src/views/ResourceCenter/UserResources/UserResourcesEnvironment/SeeEnv/index.tsx
View file @ 17581507
import style from "./index.module.css";
import React, { useState, useEffect, useMemo } from "react";
import React, { useState, useEffect } from "react";
import LogView from "@/views/ResourceCenter/components/LogView";
import { useNavigate } from "react-router-dom";
import BasicInfo, {
......@@ -9,6 +9,7 @@ import { getActorenvDetail } from "@/api/resourceCenter";
import useMyRequest from "@/hooks/useMyRequest";
import goback from "@/assets/project/goback.svg";
import { useLocation } from "react-router-dom";
import MyCircularProgress from "@/components/mui/MyCircularProgress";
import jobFail from "@/assets/project/jobFail.svg";
import jobRun from "@/assets/project/jobRun.svg";
import jobSue from "@/assets/project/jobSue.svg";
......@@ -18,8 +19,34 @@ const SeeEnv = () => {
const location = useLocation();
const [id, setId] = useState("");
const [info, setInfo] = useState<any>({});
const [infoListTop, setInfoListTop] = useState<Array<IInfoItem>>([]);
const [infoListBot, setInfoListBot] = useState<Array<IInfoItem>>([]);
const [infoListTop, setInfoListTop] = useState<Array<IInfoItem>>([
{
label: "构建状态",
value: "",
},
{
label: "创建时间",
value: "",
},
{
label: "构建时长",
value: "",
},
{
label: "构建成本",
value: "",
},
{
label: "基础环境",
value: "",
},
]);
const [infoListBot, setInfoListBot] = useState<Array<IInfoItem>>([
{
label: "描述",
value: "",
},
]);
const [logs, setLogs] = useState<Array<any>>([]);
const getStatus = (item: any) => {
......@@ -58,7 +85,6 @@ const SeeEnv = () => {
const { run, loading } = useMyRequest(getActorenvDetail, {
onSuccess: (res) => {
console.log(res);
setInfo(res.data);
let data = res.data;
setInfoListTop([
......@@ -112,6 +138,7 @@ const SeeEnv = () => {
return (
<div className={style.seeEnv}>
<MyCircularProgress loading={loading} />
<div className={style.titleBox}>
<img
className={style.goBackIcon}
......@@ -134,7 +161,7 @@ const SeeEnv = () => {
<div className={style.logsBox}>
<div className={style.logsTitle}>日志</div>
<div className={style.LogViewBox}>
<LogView logs={logs}></LogView>
{!loading && <LogView logs={logs}></LogView>}
</div>
</div>
</div>
......
src/views/ResourceCenter/UserResources/UserResourcesEnvironment/index.tsx
View file @ 17581507
......@@ -20,7 +20,7 @@ const UserResourcesEnvironment = () => {
const navigate = useNavigate();
const [addOpen, setAddopen] = useState(false);
const [title, setTitle] = useState("");
const [type, setType] = useState<"BATCH" | "FLOW" | "">("");
const [type, setType] = useState<"BATCH" | "FLOW" | "ALL">("ALL");
const [list, setList] = useState([]);
const [page, setPage] = useState(0);
const [count, setCount] = useState(0);
......@@ -54,7 +54,7 @@ const UserResourcesEnvironment = () => {
width: 140,
},
];
const { run: getList } = useMyRequest(getActorenvList, {
const { run: getList, loading } = useMyRequest(getActorenvList, {
onSuccess: (res) => {
setList(res.data.content);
setCount(res.data.totalPages - 1);
......@@ -72,7 +72,7 @@ const UserResourcesEnvironment = () => {
page,
size,
title,
type,
type: type === "ALL" ? "" : type,
});
}
}, [getList, page, size, title, type, addOpen, deleteOpen]);
......@@ -207,6 +207,10 @@ const UserResourcesEnvironment = () => {
title="环境类型"
isTitle={true}
options={[
{
label: "全部",
value: "ALL",
},
{
label: "批式",
value: "BATCH",
......@@ -253,6 +257,7 @@ const UserResourcesEnvironment = () => {
nodataText="暂无应用环境"
paginationType="complex"
totalElements={totalElements}
loading={loading}
></MyTable>
</div>
{addOpen && <AddEnvironment setAddopen={setAddopen}></AddEnvironment>}
......
src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
View file @ 17581507
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-18 16:12:55
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:27:03
* @LastEditTime: 2022-10-20 11:59:34
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/components/AddOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -25,13 +25,14 @@ import FormItemBox from "@/components/mui/FormItemBox";
import { useStores } from "@/store";
interface IAddOperator {
setAddOpen: (val: boolean) => void;
pageType: string;
setPageType: (val: string) => void;
}
type IBuildType = "ENVIRONMENT" | "OPERATOR";
const AddOperator = observer((props: IAddOperator) => {
const { setAddOpen } = props;
const { setPageType } = props;
/** 创建类型 BATCH - 批算子; FLOW - 流算子*/
const [taskType, setTaskType] = useState<"BATCH" | "FLOW">("BATCH");
......@@ -70,14 +71,18 @@ const AddOperator = observer((props: IAddOperator) => {
<SwitchBatchFolw
active={taskType}
setActive={setTaskType}
goBack={() => setAddOpen(false)}
goBack={() => setPageType("")}
></SwitchBatchFolw>
</div>
<div className={style.right}>
<div className={style.title}>
{taskType === "BATCH" ? "批式算子信息" : "流式算子信息"}
</div>
<div style={{ paddingBottom: "20px" }}>
<div
style={{
paddingBottom: batchBuildType === "ENVIRONMENT" ? "20px" : "2px",
}}
>
<RadioGroupOfButtonStyle
RadiosBoxStyle={{ width: 236 }}
value={batchBuildType}
......@@ -95,7 +100,6 @@ const AddOperator = observer((props: IAddOperator) => {
<FormItemBox
label="算子名称"
labelClassName={style.labelClassName}
className={style.operatorFormItem}
itemFlex="column"
require
>
......@@ -116,7 +120,9 @@ const AddOperator = observer((props: IAddOperator) => {
<FormItemBox
label="所属产品"
labelClassName={style.labelClassName}
className={style.operatorFormItem}
className={classNames({
[style.operatorFormItem]: batchBuildType === "ENVIRONMENT",
})}
itemFlex="column"
require
>
......@@ -143,7 +149,6 @@ const AddOperator = observer((props: IAddOperator) => {
<FormItemBox
label="描述"
labelClassName={style.labelClassName}
className={style.operatorFormItem}
itemFlex="column"
>
<MyInput multiline rows={4} placeholder="请输入算子描述" />
......
src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorCard/index.module.css
View file @ 17581507
......@@ -15,10 +15,20 @@
.itemHeaderBox {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.startTitleBox {
width: 36px;
height: 36px;
border-radius: 4px;
background: #a657f4;
color: #fff;
font-size: 18px;
font-weight: 600;
text-align: center;
line-height: 36px;
}
.itemContentBox {
display: flex;
flex-wrap: wrap;
......@@ -30,17 +40,26 @@
color: #1e2633;
}
.titleBox {
display: block;
font-size: 16px;
color: #1e2633;
}
.operatorTypeBox {
display: block;
color: #8a9099;
font-size: 12px;
}
.operationBox {
display: inline-block;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
cursor: pointer;
}
.operationBox:hover {
background-color: #ebedf0;
border-radius: 2px;
}
.infoBox {
width: 50%;
font-weight: 400;
......
src/views/ResourceCenter/UserResources/WorkflowOperator/components/OperatorCard/index.tsx
View file @ 17581507
......@@ -2,45 +2,79 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-17 14:35:11
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:08:31
* @LastEditTime: 2022-10-20 11:39:55
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import styles from "./index.module.css";
import { IOperatorInfo } from "../../interface";
import { IOperatorInfo, operatorType } from "../../interface";
import { observer } from "mobx-react";
import { useStores } from "@/store";
import { useMemo } from "react";
import MyMenu from "@/components/mui/MyMenu";
interface IProps {
operatorInfo: IOperatorInfo;
setPageType: (val: string) => void;
}
const OperatorCard = (props: IProps) => {
const OperatorCard = observer((props: IProps) => {
const {
operatorInfo: { title = "", type, version },
operatorInfo: { title = "", type, version, productId, createTime },
setPageType,
} = props;
/** 产品store */
const { productListStore } = useStores();
const productText = useMemo(() => {
const result = productListStore.productList?.filter((item) => {
return item.value === productId;
});
return result?.length ? result[0].label : "";
}, [productListStore.productList, productId]);
const onClickOperation = (val: string) => {
if (val === "upgrade") {
setPageType("edit");
}
};
return (
<div className={styles.itemBox}>
<div className={styles.itemHeaderBox}>
<img alt="" style={{ width: 36, height: 36 }} />
<div>
<div className={styles.startTitleBox}>{title?.slice(0, 1)}</div>
<div style={{ flex: 1, marginLeft: 12 }}>
<b className={styles.titleBox}>{title}</b>
<span className={styles.operatorTypeBox}>批算子</span>
<span className={styles.operatorTypeBox}>
{operatorType[type] || ""}
</span>
</div>
<MyMenu
value=""
options={[{ label: "升级", value: "upgrade" }]}
hasTriangle={false}
setValue={onClickOperation}
sx={{
zIndex: 1601,
}}
>
<span className={styles.operationBox}>d</span>
</MyMenu>
</div>
<div className={styles.itemContentBox}>
<p className={styles.infoBox}>
所属产品：<span>{type}</span>
所属产品：<span>{productText}</span>
</p>
<p className={styles.infoBox}>
算子版本：<span>{`V${version}`}</span>
</p>
<p className={styles.infoBox}>
创建时间：<span>2022-10-11</span>
创建时间：<span>{createTime}</span>
</p>
</div>
</div>
);
};
});
export default OperatorCard;
src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
View file @ 17581507
......@@ -2,13 +2,14 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-17 14:35:11
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:11:50
* @LastEditTime: 2022-10-20 11:30:10
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/index.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
// 应用环境
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react";
import _ from "lodash";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import MySelect from "@/components/mui/MySelect";
......@@ -23,28 +24,47 @@ import useMyRequest from "@/hooks/useMyRequest";
import { IOperatorInfo } from "./interface";
const WorkflowOperator = observer(() => {
const [addOpen, setAddOpen] = useState<boolean>(false);
const [pageType, setPageType] = useState<string>("");
/** 产品store */
const { productListStore } = useStores();
/** 算子列表参数 */
const [searchParams, setSearchParams] = useState<IOperatorListParams>({
keyword: "",
productId: "",
type: "",
productId: "all",
type: "all",
});
const [list, setList] = useState<IOperatorInfo[]>();
const { run: getList } = useMyRequest(getOperatorList, {
// refreshDeps: [],
onSuccess: (res) => {
console.log(res);
setList(res?.data);
},
});
const newGetList = useCallback(() => {
const params = _.cloneDeep(searchParams);
if (params.productId === "all") {
params.productId = "";
}
if (params.type === "all") {
params.type = "";
}
getList(params);
}, [getList, searchParams]);
// 按回车搜索
const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
newGetList();
}
};
useEffect(() => {
getList();
}, []);
newGetList();
}, [searchParams.productId, searchParams.type]);
return (
<>
......@@ -55,6 +75,7 @@ const WorkflowOperator = observer(() => {
sx={{ width: 340, marginRight: "16px" }}
placeholder="输入关键词搜索"
value={searchParams.keyword}
onKeyUp={handleKeyWordChangeKeyUp}
onChange={(e) => {
setSearchParams({ ...searchParams, keyword: e.target.value });
}}
......@@ -62,8 +83,13 @@ const WorkflowOperator = observer(() => {
<MySelect
title="所属产品"
isTitle={true}
options={productListStore?.productList || []}
value={searchParams.keyword}
options={
[
{ label: "全部", value: "all" },
...productListStore?.productList,
] || []
}
value={searchParams.productId}
onChange={(e) => {
setSearchParams({ ...searchParams, productId: e });
}}
......@@ -73,11 +99,12 @@ const WorkflowOperator = observer(() => {
<MySelect
title="环境类型"
isTitle={true}
value={searchParams.keyword}
value={searchParams.type}
onChange={(e) => {
setSearchParams({ ...searchParams, type: e });
}}
options={[
{ label: "全部", value: "all" },
{
label: "批式",
value: "BATCH",
......@@ -98,16 +125,20 @@ const WorkflowOperator = observer(() => {
className="iconfont icon-dianzan"
></span>
}
onClick={() => setAddOpen(true)}
onClick={() => setPageType("add")}
></MyButton>
</div>
<div className={styles.contentBox}>
{list?.map((item) => {
return <OperatorCard operatorInfo={item} />;
return (
<OperatorCard operatorInfo={item} setPageType={setPageType} />
);
})}
</div>
</div>
{addOpen && <AddOperator setAddOpen={setAddOpen} />}
{pageType && (
<AddOperator setPageType={setPageType} pageType={pageType} />
)}
</>
);
});
......
src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts
View file @ 17581507
......@@ -2,7 +2,7 @@
* @Author: 吴永生 15770852798@163.com
* @Date: 2022-10-19 20:50:18
* @LastEditors: 吴永生 15770852798@163.com
* @LastEditTime: 2022-10-19 21:09:14
* @LastEditTime: 2022-10-20 11:03:29
* @FilePath: /bkunyun/src/views/ResourceCenter/UserResources/WorkflowOperator/interface.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -13,4 +13,10 @@ export interface IOperatorInfo{
type: IOperatorType;
version: string;
productId: string;
createTime: string;
}
export enum operatorType {
'FLOW' = '流算子',
'BATCH' = '批算子',
}
\ No newline at end of file
src/views/ResourceCenter/UserResources/index.tsx
View file @ 17581507
import style from "./index.module.css";
import usePass from "@/hooks/usePass";
import UserResourcesEnvironment from "./UserResourcesEnvironment";
import { useMemo, useState } from "react";
import classNames from "classnames";
import { useMemo } from "react";
import Tabs from "@/components/mui/MyTabs";
import WorkflowOperator from "./WorkflowOperator";
import OperatorDetails from "./WorkflowOperator/components/OperatorDetails";
......
src/views/ResourceCenter/components/SwitchBatchFolw/index.module.css
View file @ 17581507
.switchBatchFolw {
height: 100vh;
width: 50vh;
width: 40vh;
background-color: rgba(247, 248, 250, 1);
display: flex;
flex-direction: column;
align-items: flex-end;
}
.goBackBox {
box-sizing: border-box;
height: 110px;
padding: 64px 0 14px 25%;
height: 120px;
padding: 64px 0 24px;
margin-right: 44px;
line-height: 32px;
font-size: 18px;
color: #8a9099;
display: flex;
justify-content: flex-start;
align-items: center;
width: calc(82% - 54px);
}
.goBackIcon {
width: 32px;
......@@ -31,33 +34,35 @@
color: #8a9099;
}
.switchBox {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
justify-content: flex-start;
align-items: flex-end;
position: relative;
}
.switchItem {
width: 100%;
width: calc(82% - 44px);
position: relative;
padding-right: 44px;
display: flex;
flex-direction: column;
align-items: flex-end;
margin-bottom: 40px;
padding-right: calc(2% + 34px);
}
.activeSwitchItem {
padding-right: 34px;
width: calc(86% - 44px);
}
.itemImg {
width: 58%;
width: 100%;
cursor: pointer;
}
.itemImg:hover {
box-shadow: 0px 8px 20px -6px rgba(3, 47, 105, 0.14);
}
.activeImg {
width: 64%;
box-shadow: 0px 12px 30px -8px rgba(3, 47, 105, 0.18);
}
.activeImg:hover {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment