search

kirin-ri / memo

0 stars 0 forks source link

memo2 #2

Open kirin-ri opened 1 year ago

kirin-ri commented 1 year ago

この画面にポップアップを追加する。最終から出てくる感じで。ポップアップに「test」を表示。OKボタンで閉じれるように

import * as Defs from './metricsDefs';

function MetricsIfInfoModal({details}: {details: Defs.MetricsDetails}) {

return (

参照データ
{details.id}
{/* */}

INデータ項目

{details?.in.map((table, idx) => )}
{/* */}
{/* */}

OUTデータ項目

{details?.out.map((table, idx) => )}
{/* */}

API

{/* */}
{/* */}
{/* */}

) }

function IfData({table}: {table: Defs.TableInfo}) { return (

DB
{table.db}
Schema
{table.schema}
Table
{table.table}
{/* */}
{table.column.map((colum, idx) => { return ( ); })}
論理名 属性 物理名
{colum.logicalName} {colum.type} {colum.physicalName}
{/* */}
{/* */}

); }

function Api({details}: {details: Defs.MetricsDetails}) { return (

{details?.api.map((name, idx) => { return ( ); })}
名称
{name}

) }

export default MetricsIfInfoModal;

kirin-ri commented 1 year ago

この画面にポップアップを追加する。最終から出てくる感じで。ポップアップに「test」を表示。OKボタンで閉じれるように

import * as Defs from './metricsDefs';

function MetricsIfInfoModal({details}: {details: Defs.MetricsDetails}) {

  return (
    <div className="modal fade" id="metricsIfInfo">
      <div className="modal-dialog modal-xl">
      <div className="modal-content">
      <div className="modal-header">
        <div className="ref-data-label">
        参照データ
        </div>
        <div className="metrics-title">
          {details.id}
        </div>
        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div className="modal-body">
        <div className="card card-secondary in-data">
          {/* <!-- title row --> */}
          <div className="card-header">
            <h3 className="card-title">INデータ項目</h3>
          </div>
          <div className="card-body">
          {details?.in.map((table, idx) => 
              <IfData table={table} key={idx}/>)}
          </div>
        </div>
        {/* <!-- /.invoice --> */}
        <div className="card card-secondary out-data">
          {/* <!-- title row --> */}
          <div className="card-header">
            <h3 className="card-title">OUTデータ項目</h3>
          </div>
          <div className="card-body">
            {details?.out.map((table, idx) => 
              <IfData table={table} key={idx}/>)}
          </div>
        </div>

        {/* <!-- /.invoice --> */}
        <div className="card card-secondary">
          <div className="card-header">
            <h3 className="card-title">API</h3>
          </div>
          <div className="card-body">
            <div className="table-responsive">
              <Api details={details}/>
            </div>
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn btn-primary" data-dismiss="modal">閉じる</button>
        </div>
      </div>
      {/* <!-- /.modal-body --> */}
      </div>
      {/* <!-- /.modal-content --> */}
      </div>
      {/* <!-- /.modal-dialog --> */}
      </div>
  )
}

function IfData({table}: {table: Defs.TableInfo}) {
  return (
    <div>
      <div className="table-info-header">
        <div className="table-info-header-label">
          DB
        </div>
        <div className="table-info-header-value">
          {table.db}
        </div>
        <div className="table-info-header-label">
          Schema
        </div>
        <div className="table-info-header-value">
          {table.schema}
        </div>
        <div className="table-info-header-label">
          Table
        </div>
        <div className="table-info-header-value">
          {table.table}
        </div>
      </div>

      {/* <!-- Table row --> */}
      <div className="row">
        <div className="col-12 table-responsive">
          <table className="table table-striped">
            <thead>
              <tr>
                <th>論理名</th>
                <th>属性</th>
                <th>物理名</th>
              </tr>
            </thead>
            <tbody>
              {table.column.map((colum, idx) => {
                return (
                  <tr key={idx}>
                    <td>{colum.logicalName}</td>
                    <td>{colum.type}</td>
                    <td>{colum.physicalName}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        {/* <!-- /.col --> */}
      </div>
      {/* <!-- /.row --> */}
    </div>
  );
}

function Api({details}: {details: Defs.MetricsDetails}) {
  return (
    <table className="table table-striped">
      <thead>
        <tr>
          <th>名称</th>
        </tr>
      </thead>
      <tbody>
        {details?.api.map((name, idx) => {
          return (
            <tr key={idx}>
              <td>{name}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  )
}

export default MetricsIfInfoModal;
kirin-ri commented 1 year ago

案１

お知らせメッセージを表示する。

「OK」ボタンを押下、ポップアップが閉じる。

ーーーーーーーーーーーーーーーーーーーー\| API項目が更新されました。　　　　　 \|　　　　　　 \| 再度マッピングを行う必要があります。 \|\| 　　　　　　　　　　　　　　　　　　 \| \| 　　　　　　　　　　　　　　[OK]　　 \| ーーーーーーーーーーーーーーーーーーーー --

kirin-ri commented 1 year ago

案１

お知らせメッセージを表示する。

「OK」ボタンを押下、ポップアップが閉じる。

案２

メッセージおよび関連するメトリクス名を表示する。

「OK」ボタンを押下、ポップアップが閉じる。

案３

メッセージおよび関連するメトリクス名を表示する。

メトリクス名をクリックし、各改修画面に遷移する。

※関連メトリクスが複数ある場合、一個目修正後戻れない？

kirin-ri commented 1 year ago

import { commonAjax } from '../../../components/commonAjax'; import React, { useState, useEffect } from 'react'; import parse from 'html-react-parser'; import { useHistory } from 'react-router-dom'; import { Spacer } from '../spacer'; import * as Defs from './metricsDefs'; import MetricsIfInfoModal from './metricsIfInfoModal'

interface MyProps { match: { params: { id: string; }; }; }

function AppDashboard(props: MyProps) { const [metricsId, setMetricsId] = useState(props.match.params.id); const [metricsDetails, setMetricsDetails] = useState<Defs.MetricsDetails|null>(null); const history = useHistory(); const [deployMetrics, setDeployMetrics] = useState(''); const [enabledStats, setEnabledStats] = useState<Defs.StatDef[]>([]); const [isDeployBtnDisabled, setDeployBtnDisabled] = useState(true); const [metrics, setMetrics] = useState();

/ リクエスト / useEffect(() => { setMetricsDetails(null); commonAjax .axios({loading: true}) .get(/api/metrics/${props.match.params.id}) .then((res) => { const details = res.data; setMetricsDetails(details); / setMetricsDetails(getSampleData4()); / const metrics = Defs.getMetrics(details); setMetrics(metrics); setEnabledStats(metrics?.getStatValues()); setDeployBtnDisabled(true); }); }, [props.match.params.id, history]);

const handleCycleClick = (metricsName: string) => { setMetricsId(metricsName); history.push(/scm-metrics-details/${metricsName}); }; const handleStatClick = (stat: Defs.StatDef) => { if (enabledStats.includes(stat)) { // ON -> OFF setEnabledStats(enabledStats.filter(s => s !== stat)); } else { // OFF -> ON setEnabledStats([...enabledStats, stat]); } }

const handleDeployMetrics = async () => { setDeployBtnDisabled(false);

commonAjax
  .axios({})
  .put(`/api/metrics/deploy/${metricsId}`)
  .then((res) => {
    setDeployMetrics(res.data.message);
  })
  .catch((err) => {
    console.log(err);
  });

return;

};

return (

{metricsDetails?.category}

{metricsDetails?.id}
{/* Content Header (Page header) */}
{metricsDetails && <>

{metricsDetails?.category}

{metricsDetails?.id}

}
{provided(metricsDetails?.provide || false)} データを編集する
{metricsDetails && metrics && }
{metricsDetails?.id}
{metricsDetails?.description}
{metricsDetails && metrics && ( 
    )}
  </section>
  <section className="content-footer">
    <div className="content-footer-left">
    </div>
    <div className="content-footer-right">
      <button className="btn btn-primary" data-toggle="modal" data-target="#metricsIfInfo">参照元データを確認する</button>
    </div>
  </section>
  {metricsDetails && <MetricsIfInfoModal details={metricsDetails}/>}
</div>

); }

function FilterTags({details, metrics, enabledStats, onCycleClick, onStatClick}: { details: Defs.MetricsDetails, metrics: Defs.Metrics, enabledStats: Defs.StatDef[], onCycleClick:(id: string) => void, onStatClick:(stat: Defs.StatDef) => void}) { const cycles = details.cycles.map(({cycle, id}) => cycle && <button className={btn btn-tag${id === details.id ? " active" : ""}} onClick={() => onCycleClick(id)} key={id}>{cycle} ); const stats = metrics?.getStatValues().map(s => <button className={btn btn-tag${enabledStats?.includes(s) ? " active" : ""}} onClick={() => onStatClick(s)} key={s.id}>{s.display} ); return (

フィルタータグ
表示周期
{cycles}
表示値
{stats}

) }

function Chart({details, metrics, enabledStats, disableButton, onDeployMetrics}: { details: Defs.MetricsDetails, metrics: Defs.Metrics, enabledStats: Defs.StatDef[], disableButton: boolean, onDeployMetrics: () => void}) {

if (details) { if (!details.provide) { return (

  );
}

if (metrics) {
  return metrics.render(details, enabledStats);
}

} return

; };

function MetricsProcessing({details}: {details: Defs.MetricsDetails}) { const html = (details?.processing || "") .replaceAll(/(\r?\n)?<hr\/?>(\r?\n)?/g, "

") .split(/(\r?\n)/) .map((line, idx) => (

{line.match(/\r?\n/) ?
: parse(line)} )); return (
メトリクス算出方法
{html}
) } /* 提供済みフラグ */ function provided(isProvided: boolean) { if (isProvided) { return