quay/static/js/pages/tutorial.js

(function() {
  /**
   * Interactive tutorial page.
   */
  angular.module('quayPages').config(['pages', function(pages) {
    pages.create('tutorial', 'tutorial.html', TutorialCtrl, {
      'title': 'Tutorial',
      'description': 'Basic tutorial on using Docker with Quay.io'
    });
  }]);

  function TutorialCtrl($scope, AngularTour, AngularTourSignals, UserService, Config) {
    // Default to showing sudo on all commands if on linux.
    var showSudo = navigator.appVersion.indexOf("Linux") != -1;

    $scope.tour = {
      'title': Config.REGISTRY_TITLE_SHORT + ' Tutorial',
      'initialScope': {
        'showSudo': showSudo,
        'domainName': Config.getDomain()
      },
      'steps': [
        {
          'title': 'Welcome to the ' + Config.REGISTRY_TITLE_SHORT  + ' tutorial!',
          'templateUrl': '/static/tutorial/welcome.html'
        },
        {
          'title': 'Sign in to get started',
          'templateUrl': '/static/tutorial/signup.html',
          'signal': function($tourScope) {
            var user = UserService.currentUser();
            $tourScope.username = user.username;
            $tourScope.email = user.email;
            $tourScope.inOrganization = user.organizations && user.organizations.length > 0;
            return !user.anonymous;
          }
        },
        {
          'title': 'Step 1: Login to ' + Config.REGISTRY_TITLE,
          'templateUrl': '/static/tutorial/docker-login.html',
          'signal': AngularTourSignals.serverEvent('/realtime/user/subscribe?events=docker-cli',
                                                   function(message) {
                                                     return message['data']['action'] == 'login';
                                                   }),
          'waitMessage': "Waiting for docker login",
          'skipTitle': "I'm already logged in",
          'mixpanelEvent': 'tutorial_start'
        },
        {
          'title': 'Step 2: Create a new container',
          'templateUrl': '/static/tutorial/create-container.html'
        },
        {
          'title': 'Step 3: Create a new image',
          'templateUrl': '/static/tutorial/create-image.html'
        },
        {
          'title': 'Step 4: Push the image to ' + Config.REGISTRY_TITLE,
          'templateUrl': '/static/tutorial/push-image.html',
          'signal': AngularTourSignals.serverEvent('/realtime/user/subscribe?events=docker-cli',
                                                   function(message, tourScope) {
                                                     var pushing = message['data']['action'] == 'push_repo';
                                                     if (pushing) {
                                                       tourScope.repoName = message['data']['repository'];
                                                     }
                                                     return pushing;
                                                   }),
          'waitMessage': "Waiting for repository push to begin",
          'mixpanelEvent': 'tutorial_wait_for_push'
        },
        {
          'title': 'Push in progress',
          'templateUrl': '/static/tutorial/pushing.html',
          'signal': AngularTourSignals.serverEvent('/realtime/user/subscribe?events=docker-cli',
                                                   function(message, tourScope) {
                                                     return message['data']['action'] == 'pushed_repo';
                                                   }),
          'waitMessage': "Waiting for repository push to complete"
        },
        {
          'title': 'Step 5: View the repository on ' + Config.REGISTRY_TITLE,
          'templateUrl': '/static/tutorial/view-repo.html',
          'signal': AngularTourSignals.matchesLocation('/repository/'),
          'overlayable': true,
          'mixpanelEvent': 'tutorial_push_complete'
        },
        {
          'templateUrl': '/static/tutorial/view-repo.html',
          'signal': AngularTourSignals.matchesLocation('/repository/'),
          'overlayable': true
        },
        {
          'templateUrl': '/static/tutorial/waiting-repo-list.html',
          'signal': AngularTourSignals.elementAvaliable('*[data-repo="{{username}}/{{repoName}}"]'),
          'overlayable': true
        },
        {
          'templateUrl': '/static/tutorial/repo-list.html',
          'signal': AngularTourSignals.matchesLocation('/repository/{{username}}/{{repoName}}'),
          'element': '*[data-repo="{{username}}/{{repoName}}"]',
          'overlayable': true
        },
        {
          'title': 'Repository View',
          'content': 'This is the repository view page. It displays all the primary information about your repository.',
          'overlayable': true,
          'mixpanelEvent': 'tutorial_view_repo'
        },
        {
          'title': 'Image History',
          'content': 'The tree displays the full history of your repository, including all its tag. ' +
            'You can click on a tag or image to see its information.',
          'element': '#image-history-container',
          'overlayable': true
        },
        {
          'title': 'Tag/Image Information',
          'content': 'This panel displays information about the currently selected tag or image',
          'element': '#side-panel',
          'overlayable': true
        },
        {
          'title': 'Select tag or image',
          'content': 'You can select a tag or image by clicking on this dropdown',
          'element': '#side-panel-dropdown',
          'overlayable': true
        },
        {
          'content': 'To view the admin settings for the repository, click on the gear',
          'element': '#admin-cog',
          'signal': AngularTourSignals.matchesLocation('/repository/{{username}}/{{repoName}}/admin'),
          'overlayable': true
        },
        {
          'title': 'Repository Admin',
          'content': "The repository admin panel allows for modification of a repository's permissions, notifications, visibility and other settings",
          'overlayable': true,
          'mixpanelEvent': 'tutorial_view_admin'
        },
        {
          'title': 'Permissions',
          'templateUrl': '/static/tutorial/permissions.html',
          'overlayable': true,
          'element': '#permissions'
        },
        {
          'title': 'Adding a permission',
          'content': 'To add an <b>additional</b> permission, enter a username or robot account name into the autocomplete ' +
            'or hit the dropdown arrow to manage robot accounts',
          'overlayable': true,
          'element': '#add-entity-permission'
        },
        {
          'templateUrl': '/static/tutorial/done.html',
          'overlayable': true,
          'mixpanelEvent': 'tutorial_complete'
        }
      ]
    };
  }
})();