Browse Source

initial navbar and table style

tags/v1.21.12.1
Gitea 4 years ago
parent
commit
8a50a8d67c
6 changed files with 579 additions and 51 deletions
  1. +23
    -0
      options/locale/locale_zh-CN.ini
  2. +53
    -51
      templates/repo/modelarts/notebook/index.tmpl
  3. +127
    -0
      templates/repo/modelarts/trainjob/job_paramter_list.tmpl
  4. +249
    -0
      templates/repo/modelarts/trainjob/new_train_job.tmpl
  5. +127
    -0
      templates/repo/modelarts/trainjob/train_job_list.tmpl
  6. +0
    -0
      web_src/less/themes/theme-arc-green.less

+ 23
- 0
options/locale/locale_zh-CN.ini View File

@@ -762,6 +762,29 @@ cloudbrain_selection=云脑选择
cloudbrain_platform_selection=选择您准备使用的云脑平台: cloudbrain_platform_selection=选择您准备使用的云脑平台:
confirm_choice=确定 confirm_choice=确定


modelarts.train_job=训练作业
modelarts.train_job.new=新建作业
modelarts.train_job.job_name=作业名称
modelarts.train_job.version=作业版本
modelarts.train_job.description=作业描述
modelarts.train_job.algorithm_origin=算法来源
modelarts.train_job.AI_driver=AI引擎
modelarts.train_job.code_store_location=代码存放路径
modelarts.train_job.start_file=启动文件
modelarts.train_job.dataset=选择数据集
modelarts.train_job.dataset_version=选择数据集版本
modelarts.train_job.dataset_store_location=数据集存放路径
modelarts.train_job.train_output_location=训练输出位置
modelarts.train_job.run_parameter=运行参数
modelarts.train_job.parameter_name=参数名
modelarts.train_job.parameter_value=参数值
modelarts.train_job.resource_pool=资源池
modelarts.train_job.resource_type=资源类型
modelarts.train_job.standard=规格
modelarts.train_job.query_whether_save_parameter=保存作业参数
modelarts.train_job.common_frame=常用框架
modelarts.train_job.amount_of_compute_node=计算节点个数

template.items=模板选项 template.items=模板选项
template.git_content=Git数据(默认分支) template.git_content=Git数据(默认分支)
template.git_hooks=Git 钩子 template.git_hooks=Git 钩子


+ 53
- 51
templates/repo/modelarts/notebook/index.tmpl View File

@@ -190,41 +190,46 @@
border-color: none; border-color: none;
} }
</style> </style>

<!-- 弹窗 -->
<div id="mask">
<div id="loadingPage">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>

<!-- 提示框 -->
<div class="alert"></div>

<div class="repository release dataset-list view">
{{template "repo/header" .}}
<div class="ui bottom attached segment pushable">

<!-- 左侧边栏 -->
<div class="ui secondary pointing vertical menu" id='taskSidebar' style="float:left; text-align:right;">
<a class="active item" href="{{.RepoLink}}/cloudbrain">
<svg class="svg octicon-repo" width="16" height="16" aria-hidden="true"><use xlink:href="#octicon-repo"></use></svg> 任务列表
</a>
<a class="item" href="{{.RepoLink}}/cloudbrain/image_list">
<svg class="svg octicon-inbox" width="16" height="16" aria-hidden="true"><use xlink:href="#octicon-inbox"></use></svg> 镜像列表
</a>
<div class="modelarts">
<!-- 弹窗 -->
<div id="mask">
<div id="loadingPage">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div> </div>
</div>


<!-- 右侧内容区 -->
<div class="pusher" style="float:right;">
<div class="ui basic segment">
<!-- 列表容器 -->
<div class="ui container">
<!-- 提示框 -->
<div class="alert"></div>


<div class="repository release dataset-list view">
{{template "repo/header" .}}
<div class="ui container">
<div class="ui grid">
<!-- 左侧边栏 -->
<div class="computer three wide computer column">
<div class="ui grid">
<div class="sixteen wide column ui secondary sticky pointing tabular vertical menu">
<a class="{{if .PageIsExploreRepositories}}active{{end}} item" href="{{AppSubUrl}}/explore/repos">
{{svg "octicon-repo" 16}} {{.i18n.Tr "explore.repos"}}
</a>
<a class="{{if .PageIsDatasets}}active{{end}} item" href="{{AppSubUrl}}/explore/datasets">
{{svg "octicon-inbox" 16}} {{.i18n.Tr "datasets"}}
</a>
<a class="{{if .PageIsExploreUsers}}active{{end}} item" href="{{AppSubUrl}}/explore/users">
{{svg "octicon-person" 16}} {{.i18n.Tr "explore.users"}}
</a>
<a class="{{if .PageIsExploreOrganizations}}active{{end}} item" href="{{AppSubUrl}}/explore/organizations">
{{svg "octicon-organization" 16}} {{.i18n.Tr "explore.organizations"}}
</a>
</div>
</div>
</div>
<!-- 右侧 -->
<div class="ui thirteen wide computer column">
<!-- 中间云脑和新建任务按钮 --> <!-- 中间云脑和新建任务按钮 -->
<div class="ui three column stack able grid"> <div class="ui three column stack able grid">
<div class="column"> <div class="column">
@@ -375,31 +380,28 @@
</div> </div>
</div> </div>
</div> </div>
</div>



<!-- 确认模态框 -->
<div id="deletemodel">
<div class="ui basic modal">
<div class="ui icon header">
<i class="trash icon"></i> 删除任务
</div>
<!-- 确认模态框 -->
<div id="deletemodel">
<div class="ui basic modal">
<div class="ui icon header">
<i class="trash icon"></i> 删除任务
</div>


<div class="content">
<p>你确认删除该任务么?此任务一旦删除不可恢复。</p>
</div>
<div class="actions">
<div class="ui red basic inverted cancel button">
<i class="remove icon"></i> 取消操作
<div class="content">
<p>你确认删除该任务么?此任务一旦删除不可恢复。</p>
</div> </div>
<div class="ui green basic inverted ok button">
<i class="checkmark icon"></i> 确定操作
<div class="actions">
<div class="ui red basic inverted cancel button">
<i class="remove icon"></i> 取消操作
</div>
<div class="ui green basic inverted ok button">
<i class="checkmark icon"></i> 确定操作
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

</div>
{{template "base/footer" .}} {{template "base/footer" .}}


<script> <script>
@@ -506,4 +508,4 @@
} }
}) })
} }
</script>
</script>

+ 127
- 0
templates/repo/modelarts/trainjob/job_paramter_list.tmpl View File

@@ -0,0 +1,127 @@
{{template "base/head" .}}
<div class="repository view">
{{template "repo/header" .}}
<style>
.ui.segment.bottom.attached {
border: none;
}
.ui.secondary.vertical.pointing.menu{
border-right-width: 0;
margin-right: 0;
border-right-color: white;
margin-top: 14px;
}

</style>
<div class="modelarts train_job container">
<div class="ui container">
<div class="ui grid">
<div class="three wide column">
<div class="ui grid">
<div class="sixteen wide column ui secondary sticky pointing tabular vertical menu">
<a class="{{if .PageIsExploreRepositories}}active{{end}} item" href="{{AppSubUrl}}/explore/repos">
{{svg "octicon-repo" 16}} {{.i18n.Tr "explore.repos"}}
</a>
<a class="{{if .PageIsDatasets}}active{{end}} item" href="{{AppSubUrl}}/explore/datasets">
{{svg "octicon-inbox" 16}} {{.i18n.Tr "datasets"}}
</a>
<a class="{{if .PageIsExploreUsers}}active{{end}} item" href="{{AppSubUrl}}/explore/users">
{{svg "octicon-person" 16}} {{.i18n.Tr "explore.users"}}
</a>
</div>
</div>
</div>
<!-- 右侧 -->
<div class="ui thirteen wide column">
<div class="ui three column stackable grid">
<div class="column">
<h2>{{.i18n.Tr "repo.modelarts.train_job"}}</h2>
</div>
<div class="column">
</div>
<div class="column right aligned">
<a class="ui green button" href="{{.RepoLink}}/modelarts/notebook/create">{{.i18n.Tr "repo.modelarts.train_job.new"}}</a>
</div>
</div>
<div class="ui divider"></div>
<div class="ui thirteen wide column">
<div class="ui thirteen wide column">
<div class="ui two column stackable grid">
<div class="column">
</div>
<div class="column right aligned">
<div class="ui right dropdown type jump item">
<span class="text">
{{.i18n.Tr "repo.issues.filter_sort"}}<i class="dropdown icon"></i>
</span>
</div>
</div>
</div>
</div>
<!-- 任务展示 -->
<div class="train_job list">
{{range .Tasks}}
<div class="ui grid stackable item">
<div class="row">
<!-- 任务名 -->
<div class="four wide column">
<a class="title" href="{{$.Link}}/{{.JobID}}">
<span class="fitted">{{svg "octicon-tasklist" 16}}</span>
<span class="fitted">{{.JobName}}</span>
</a>
</div>
<!--引擎类型状态 -->
<div class="two wide column job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}">
{{.Status}}
</div>
<!-- 任务创建时间 -->
<div class="three wide column">
<span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span>
</div>
<!-- 查看 -->
<div class="one wide column">
<span class="ui text center clipboard">
<a class="title" href="{{$.Link}}/{{.JobID}}">
<span class="fitted">查看</span>
</a>
</span>
</div>
<!-- 删除 -->
<div class="two wide column">
<div class="ui text center clipboard">
<form id="delForm-{{.JobID}}" action="{{if ne .Status "STOPPED"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/del{{end}}" method="post">
{{$.CsrfTokenHtml}}
<a class="fitted" onclick="assertDelete(this)" style="{{if ne .Status "STOPPED"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">删除</a>
</form>
</div>
</div>
<!-- 停止 -->
<div class="two wide column">
<div class="ui text center clipboard">
<form id="stopForm-{{.JobID}}" action="{{if ne .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post">
{{$.CsrfTokenHtml}}
<a class="fitted" onclick="document.getElementById('stopForm-{{.JobID}}').submit();" style="{{if ne .Status "RUNNING"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">停止</a>
</form>
</div>
</div>
</div>
</div>
{{end}} {{template "base/paginate" .}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{template "base/footer" .}}

+ 249
- 0
templates/repo/modelarts/trainjob/new_train_job.tmpl View File

@@ -0,0 +1,249 @@
{{template "base/head" .}}
<!-- <style>
/* 遮罩层css效果图 */
#mask {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
filter: alpha(opacity=60);
background-color: #777;
z-index: 1000;
display: none;
opacity: 0.8;
-moz-opacity: 0.5;
padding-top: 100px;
color: #000000
}
/* 加载圈css效果图 */
#loadingPage {
margin: 200px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
display: block;
}
#loadingPage>div {
background-color: green;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
#loadingPage .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
#loadingPage .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
#loadingPage .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
#loadingPage .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%,
40%,
100% {
-webkit-transform: scaleY(0.4)
}
20% {
-webkit-transform: scaleY(1.0)
}
}
@keyframes sk-stretchdelay {
0%,
40%,
100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
.inline.required.field.cloudbrain_benchmark {
display: none;
}
</style>

<div id="mask">
<div id="loadingPage">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div> -->
<style>
.inline.field>label{
}
</style>
<div class="repository">
{{template "repo/header" .}}
<div class="repository new repo ui middle very relaxed page grid">
<div class="column">
{{template "base/alert" .}}
<!-- <div class="ui attached segment"> -->
<form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
<h4 class="ui top attached header">
{{.i18n.Tr "repo.modelarts.train_job.new"}}
</h4>
<div class="ui attached segment">
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.job_name"}}</label>
<input name="job_name" id="cloudbrain_job_name" placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.job_name}}" tabindex="3" autofocus required maxlength="255">
</div>
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.version"}}</label>
<span>第一版本</span>
</div>
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.algorithm_origin"}}</label>
<select class="ui search dropdown" id="cloudbrain_image" placeholder={{.i18n.Tr "repo.modelarts.train_job.common_frame"}} style='width:385px' name="image">
{{range .images}}
<option name="image" value="{{.Place}}">{{.PlaceView}}</option>
{{end}}
</select>
</div>
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.AI_driver"}}</label>
<select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
{{range .benchmark_categories}}
<option value="{{.Value}}">{{.Value}}</option>
{{end}}
</select>
</div>
<div class="inline field">
<label></label>
<select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
{{range .benchmark_categories}}
<option value="{{.Value}}">{{.Value}}</option>
{{end}}
</select>
</div>
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.dataset"}}</label>
<select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
{{range .benchmark_categories}}
<option value="{{.Value}}">{{.Value}}</option>
{{end}}
</select>
</div>
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.dataset_version"}}</label>
<select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
{{range .benchmark_categories}}
<option value="{{.Value}}">{{.Value}}</option>
{{end}}
</select>
</div>
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.dataset_store_location"}}</label>
<input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
</div>
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.train_output_location"}}</label>
<input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
</div>

<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.run_parameter"}}</label>
<input type="text" placeholder={{.i18n.Tr "repo.modelarts.train_job.parameter_name"}}>
</div>
<div class="inline field">
<label></label>
<input type="text" placeholder={{.i18n.Tr "repo.modelarts.train_job.parameter_value"}}>
</div>
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.resource_pool"}}</label>
<select class="ui search dropdown" multiple="multiple" id="cloudbrain_benchmark_category" style='width:385px'>
{{range .benchmark_categories}}
<option value="{{.Value}}">{{.Value}}</option>
{{end}}
</select>
</div>
<!-- 资源类型待完善 -->
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.resource_type"}}</label>
<input name="job_type" id="cloudbrain_job_type" value="{{.notebook_type}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
</div>
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.standard"}}</label>
<select class="ui search dropdown" multiple="multiple" id="cloudbrain_benchmark_category" style='width:385px'>
{{range .benchmark_categories}}
<option value="{{.Value}}">{{.Value}}</option>
{{end}}
</select>
</div>
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.amount_of_compute_node"}}</label>
</div>
<div class="inline field">
<label for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}</label>
<textarea id="description" name="description" rows="2"></textarea>
</div>
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.code_store_location"}}</label>
<input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
</div>
<div class="inline required field">
<label>{{.i18n.Tr "repo.modelarts.train_job.start_file"}}</label>
<input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
</div>
<div class="inline field">
<label></label>
<div class="ui checkbox">
<input name="template" type="checkbox">
<label>{{.i18n.Tr "repo.modelarts.train_job.query_whether_save_parameter"}}</label>
</div>
</div>

<div class="inline field">
<label></label>
<button class="ui green button" onclick="showmask()">
{{.i18n.Tr "repo.cloudbrain.new"}}
</button>
<a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
</div>
</form>
</div>
</form>
<!-- </div> -->
</div>
</div>
</div>
{{template "base/footer" .}}

<script>
$('select.dropdown')
.dropdown();
</script>

+ 127
- 0
templates/repo/modelarts/trainjob/train_job_list.tmpl View File

@@ -0,0 +1,127 @@
{{template "base/head" .}}
<div class="repository view">
{{template "repo/header" .}}
<style>
.ui.segment.bottom.attached {
border: none;
}
.ui.secondary.vertical.pointing.menu{
border-right-width: 0;
margin-right: 0;
border-right-color: white;
margin-top: 14px;
}

</style>
<div class="modelarts train_job container">
<div class="ui container">
<div class="ui grid">
<div class="three wide column">
<div class="ui grid">
<div class="sixteen wide column ui secondary sticky pointing tabular vertical menu">
<a class="{{if .PageIsExploreRepositories}}active{{end}} item" href="{{AppSubUrl}}/explore/repos">
{{svg "octicon-repo" 16}} {{.i18n.Tr "explore.repos"}}
</a>
<a class="{{if .PageIsDatasets}}active{{end}} item" href="{{AppSubUrl}}/explore/datasets">
{{svg "octicon-inbox" 16}} {{.i18n.Tr "datasets"}}
</a>
<a class="{{if .PageIsExploreUsers}}active{{end}} item" href="{{AppSubUrl}}/explore/users">
{{svg "octicon-person" 16}} {{.i18n.Tr "explore.users"}}
</a>
</div>
</div>
</div>
<!-- 右侧 -->
<div class="ui thirteen wide column">
<div class="ui three column stackable grid">
<div class="column">
<h2>{{.i18n.Tr "repo.modelarts.train_job"}}</h2>
</div>
<div class="column">
</div>
<div class="column right aligned">
<a class="ui green button" href="{{.RepoLink}}/modelarts/notebook/create">{{.i18n.Tr "repo.modelarts.train_job.new"}}</a>
</div>
</div>
<div class="ui divider"></div>
<div class="ui thirteen wide column">
<div class="ui thirteen wide column">
<div class="ui two column stackable grid">
<div class="column">
</div>
<div class="column right aligned">
<div class="ui right dropdown type jump item">
<span class="text">
{{.i18n.Tr "repo.issues.filter_sort"}}<i class="dropdown icon"></i>
</span>
</div>
</div>
</div>
</div>
<!-- 任务展示 -->
<div class="train_job list">
{{range .Tasks}}
<div class="ui grid stackable item">
<div class="row">
<!-- 任务名 -->
<div class="four wide column">
<a class="title" href="{{$.Link}}/{{.JobID}}">
<span class="fitted">{{svg "octicon-tasklist" 16}}</span>
<span class="fitted">{{.JobName}}</span>
</a>
</div>
<!--任务状态 -->
<div class="two wide column job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}">
{{.Status}}
</div>
<!-- 任务创建时间 -->
<div class="three wide column">
<span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span>
</div>
<!-- 查看 -->
<div class="one wide column">
<span class="ui text center clipboard">
<a class="title" href="{{$.Link}}/{{.JobID}}">
<span class="fitted">查看</span>
</a>
</span>
</div>
<!-- 删除 -->
<div class="two wide column">
<div class="ui text center clipboard">
<form id="delForm-{{.JobID}}" action="{{if ne .Status "STOPPED"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/del{{end}}" method="post">
{{$.CsrfTokenHtml}}
<a class="fitted" onclick="assertDelete(this)" style="{{if ne .Status "STOPPED"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">删除</a>
</form>
</div>
</div>
<!-- 停止 -->
<div class="two wide column">
<div class="ui text center clipboard">
<form id="stopForm-{{.JobID}}" action="{{if ne .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post">
{{$.CsrfTokenHtml}}
<a class="fitted" onclick="document.getElementById('stopForm-{{.JobID}}').submit();" style="{{if ne .Status "RUNNING"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">停止</a>
</form>
</div>
</div>
</div>
</div>
{{end}} {{template "base/paginate" .}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{template "base/footer" .}}

+ 0
- 0
web_src/less/themes/theme-arc-green.less View File


Loading…
Cancel
Save