MlFlow的Ui界面自增

没学过react，一步一步自己搞的，只是记录一下方便记忆，会慢慢更新所见所闻

项目源码为mlflow的源码

git link : mlflow/CONTRIBUTING.md at master · mlflow/mlflow (github.com)

react路由

寻思先给头部导航栏加个链接试试（图中Test）

页面路径如下mlflow/server/js/src/common/components/MlflowHeader.tsx

看到如下代码

然后自己在下面加了个

<Link
  to={ModelRegistryRoutes.TestPageRoute}
  style={isTestActive(location) ? classNames.activeNavLink : undefined}
>
  Test
</Link>

发现有俩属性to和style看起来前者掌控路径，后者是样式

先看路径

点进去发现在mlflow/server/js/src/model-registry/routes.ts文件下有此内容（上面的），就在下面照着写了一个

然后发现在下面有些具体的值

所以又照着写了一个。

大概可以猜出由/models或者/test路径去控制的页面，但是找到了实际页面，例如：modelListPageRoute所跳转的文件名字叫

mlflow/server/js/src/model-registry/components/ModelListView.tsx 

所以应该有什么地方指定了路径和他的文件关联，所以搜索了文件名ModelListView找到了这里mlflow\mlflow\server\js\src\model-registry\route-defs.ts

可以指定路径和页面之间关联，联系上面的内容就可以自定义一个页面了（当然你要自己准备一下页面或组件），顺带一提似乎他的common和model-registry似乎是两套router，注意区分

往后台发送请求

既然是前端内容，那指定涉及到往后台通信的需求，看了看项目的如何发送请求，实在是有点难，mlflow看起来嵌套的还是挺深的。看一看思路

以model这个界面为例子

这个页面有分页表格，挺符合常规的请求的，我们开始查找一下，有了前面内容知道页面是

js/src/model-registry/components/ModelListView.tsx这个页面里的内容

      <ModelListTable
          modelsData={models}
          onSortChange={this.unifiedTableSortChange}
          orderByKey={this.props.orderByKey}
          orderByAsc={this.props.orderByAsc}
          isLoading={loading || false}
          error={error}
          pagination={
            <div
              data-testid="model-list-view-pagination"
              css={{ width: '100%', alignItems: 'center', display: 'flex' }}
            >
              <div css={{ flex: 1 }}>{shouldShowModelsNextUI() && <ModelsNextUIToggleSwitch />}</div>
              <div>
                <CursorPagination
                  hasNextPage={Boolean(nextPageToken)}
                  hasPreviousPage={currentPage > 1}
                  onNextPage={this.handleClickNext}
                  onPreviousPage={this.handleClickPrev}
                  pageSizeSelect={{
                    onChange: (num) => this.handleSetMaxResult({ key: num }),
                    default: this.props.maxResultValue,
                    options: [10, 25, 50, 100],
                  }}
                />
              </div>
            </div>
          }
          isFiltered={isFiltered}
        />

modelsData={models}这里赋值的，然后就去看看models的来源

结果发现好像是谁调取这个组件传入进来的

有点难办，所以就继续去找找谁调用他了，启动全局搜索看，这里我直接搜索的models，因为他组件名字搜索不起作用（不清楚为什么）发现了一个可疑的地方也就是在mlflow/server/js/src/model-registry/components/ModelListPage.tsx这个页面里有一块使用到了

发现他是this.props传入models的内容然后再传递给ModelListView这个组件的，然后在本文件发现了一些地方给联系起来了（这里我不太清楚是如何联系上的，但是我觉得像是）

似乎是调用了searchRegisteredModelsApi这个函数会给prop搞一些值以提供给ModelListView组件，去看看searchRegisteredModelsApi的源头发现在mlflow/server/js/src/model-registry/actions.ts方法长这样子

这里的几个参数和之前看的也对上了，主要是关注一下return的内容发现画起来的内容好像是在查询？点进方法searchRegisteredModels看到

看到url就可以确定是在发送消息了，然后看一下工具类是怎么写的。工具类（mlflow/server/js/src/common/utils/FetchUtils.ts）

发现有很多专用的例如大数字json或者普通json之类的以及get put 之类的方法

到此流程走完了，目前我在ModelListPage方面还没头绪如何传递的参数，等再学到内容了再更新吧。