<dashboard version="1.1" script="git_pusher.js">
  <label>Git Pusher - Push Dashboards to Git</label>
  <description>Push Splunk dashboards to Git repository</description>

  <!-- Recherche cachée pour charger les dashboards -->
  <search id="dsearch">
    <query>| rest /services/data/ui/views | search title!="" | fields label, id, eai:acl.app | rename label as "Dashboard Name", id as "dashboard_id", "eai:acl.app" as "app" | sort "Dashboard Name"</query>
    <earliest>-4h@h</earliest>
    <latest>now</latest>
  </search>

  <row>
    <panel>
      <title>Configuration &amp; Dashboard Selection</title>
      <html>
        <style>
          .git-container {
            padding: 20px;
            background-color: #f7f8fa;
            border-radius: 4px;
            margin: 10px 0;
          }
          .success-message {
            padding: 10px;
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
            border-radius: 4px;
            margin: 10px 0;
            display: none;
          }
          .error-message {
            padding: 10px;
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
            border-radius: 4px;
            margin: 10px 0;
            display: none;
          }
          .info-message {
            padding: 10px;
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
            border-radius: 4px;
            margin: 10px 0;
          }
          .form-group {
            margin-bottom: 20px;
          }
          .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
          }
          .form-group input,
          .form-group select,
          .form-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
          }
          .form-group textarea {
            resize: vertical;
            min-height: 100px;
          }
          .button-group {
            margin-top: 20px;
          }
          .btn {
            padding: 10px 20px;
            margin-right: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
          }
          .btn-primary {
            background-color: #007bff;
            color: white;
          }
          .btn-primary:hover {
            background-color: #0056b3;
          }
          .btn-secondary {
            background-color: #6c757d;
            color: white;
          }
          .btn-secondary:hover {
            background-color: #545b62;
          }
          .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
          }
          .loading {
            display: none;
            margin: 20px 0;
          }
          .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #007bff;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            display: inline-block;
            margin-right: 10px;
          }
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
          .dashboard-list {
            border: 1px solid #ddd;
            border-radius: 4px;
            max-height: 400px;
            overflow-y: auto;
            padding: 10px;
          }
          .dashboard-item {
            padding: 8px;
            border-bottom: 1px solid #eee;
          }
          .dashboard-item:last-child {
            border-bottom: none;
          }
          .dashboard-item input[type="checkbox"] {
            margin-right: 10px;
          }
          .dashboard-item label {
            margin: 0;
            font-weight: normal;
            cursor: pointer;
          }
          .dashboard-loading {
            text-align: center;
            padding: 20px;
            color: #666;
          }
          .dashboard-empty {
            text-align: center;
            padding: 20px;
            color: #999;
            font-style: italic;
          }
          .select-all-group {
            padding: 10px;
            border-bottom: 2px solid #ddd;
            background-color: #f9f9f9;
          }
          .select-all-group input[type="checkbox"] {
            margin-right: 10px;
          }
          .select-all-group label {
            margin: 0;
            font-weight: bold;
            cursor: pointer;
          }
          .app-badge {
            display: inline-block;
            background-color: #e7f3ff;
            color: #0066cc;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 11px;
            margin-left: 8px;
          }
        </style>

        <div class="git-container">
          <div class="info-message">
            ℹ️ Configure your Git settings and select the dashboards you want to push to your repository.
          </div>

          <div class="form-group">
            <label for="git-url">Git Repository URL:</label>
            <input type="text" id="git-url" placeholder="https://github.com/username/repo.git" />
          </div>

          <div class="form-group">
            <label for="git-branch">Target Branch:</label>
            <input type="text" id="git-branch" placeholder="main" value="main" />
          </div>

          <div class="form-group">
            <label for="git-token">Git Token/Password:</label>
            <input type="password" id="git-token" placeholder="Enter your Git token or password" />
          </div>

          <div class="form-group">
            <label>Available Dashboards:</label>
            <div class="dashboard-list" id="dashboard-list">
              <div class="dashboard-loading">
                <div class="spinner"></div>
                <span>Loading dashboards...</span>
              </div>
            </div>
            <small style="color: #666; margin-top: 5px; display: block;">Select one or more dashboards to push</small>
          </div>

          <div class="form-group">
            <label for="commit-message">Commit Message:</label>
            <textarea id="commit-message" placeholder="Describe your changes... e.g., 'Update sales dashboard with new metrics'"></textarea>
          </div>

          <div class="button-group">
            <button class="btn btn-primary" id="push-btn" onclick="pushDashboards()">
              Push to Git
            </button>
            <button class="btn btn-secondary" onclick="resetForm()">
              Reset
            </button>
          </div>

          <div class="loading" id="loading">
            <div class="spinner"></div>
            <span id="loading-text">Pushing dashboards to Git...</span>
          </div>

          <div class="success-message" id="success-msg">
            ✓ <span id="success-text">Dashboards successfully pushed to Git!</span>
          </div>

          <div class="error-message" id="error-msg">
            ✗ <span id="error-text">Error occurred while pushing dashboards</span>
          </div>
        </div>
      </html>
    </panel>
  </row>

  <row>
    <panel>
      <title>Push History</title>
      <table>
        <search>
          <query>index=_internal source=*git_pusher* action=push_attempt | table _time, user, dashboards, commit_message, status, error_msg | reverse | rename _time as "Timestamp", user as "User", dashboards as "Dashboards", commit_message as "Message", status as "Status", error_msg as "Error" | head 20</query>
          <earliest>-30d@d</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <format type="color" field="Status">
          <colorPalette type="map">{"success": "#28a745", "error": "#dc3545", "pending": "#ffc107"}</colorPalette>
        </format>
      </table>
    </panel>
  </row>

</dashboard>